fix: process markdown for hint (#957)

packages/core/dev-test/config.yml

@@ -75,7 +75,7 @@ collections:
       - label: Body
         name: body
         widget: markdown
-        hint: Main content goes here.
+        hint: "*Main* __content__ __*goes*__ [here](example.com)."
   - name: faq
     label: FAQ
     folder: _faqs

packages/core/package.json

@@ -142,6 +142,7 @@
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
     "react-is": "18.2.0",
+    "react-markdown": "8.0.7",
     "react-polyglot": "0.7.2",
     "react-redux": "8.0.5",
     "react-router-dom": "6.10.0",
@@ -151,6 +152,7 @@
     "react-virtualized-auto-sizer": "1.0.15",
     "react-waypoint": "10.3.0",
     "react-window": "1.8.9",
+    "remark-gfm": "4.0.0",
     "remark-html": "15.0.2",
     "remark-mdx": "2.3.0",
     "remark-parse": "10.0.1",

packages/core/src/__mocks__/react-markdown.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import type { FC, PropsWithChildren } from 'react';
+
+const ReactMarkdown: FC<PropsWithChildren> = ({ children }) => {
+  return React.createElement('div', {}, [children]);
+};
+
+export default ReactMarkdown;

packages/core/src/components/common/field/Hint.css

@@ -1,8 +1,6 @@
 .CMS_Hint_root {
   @apply w-full
-    flex
-    text-xs
-    italic;
+    text-xs;
 
   &:not(.CMS_Hint_error) {
     &.CMS_Hint_disabled {
@@ -27,6 +25,14 @@
   }
 }
 
+.CMS_Hint_link {
+  color: inherit;
+
+  &:hover {
+    @apply underline;
+  }
+}
+
 .CMS_Hint_cursor-pointer {
   @apply cursor-pointer;
 }

packages/core/src/components/common/field/Hint.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import gfm from 'remark-gfm';
 
 import useCursor from '@staticcms/core/lib/hooks/useCursor';
 import classNames from '@staticcms/core/lib/util/classNames.util';
@@ -16,6 +18,7 @@ export const classes = generateClassNames('Hint', [
   'cursor-text',
   'cursor-default',
   'error',
+  'link',
 ]);
 
 export interface HintProps {
@@ -51,7 +54,18 @@ const Hint: FC<HintProps> = ({
         className,
       )}
     >
-      {children}
+      <ReactMarkdown
+        remarkPlugins={[gfm]}
+        allowedElements={['a', 'strong', 'em', 'del']}
+        unwrapDisallowed={true}
+        components={{
+          a: ({ node: _node, ...props }) => (
+            <a {...props} target="_blank" rel="noopener noreferrer" className={classes.link} />
+          ),
+        }}
+      >
+        {children}
+      </ReactMarkdown>
     </div>
   );
 };