fix: process markdown for hint (StaticJsCMS#957)

Net-Slayer · Oct 27, 2023 · 8113d9d · 8113d9d
1 parent c5f54e1
commit 8113d9d
Show file tree

Hide file tree

Showing 6 changed files with 575 additions and 5 deletions.
diff --git a/packages/core/dev-test/config.yml b/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

diff --git a/packages/core/package.json b/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",

diff --git a/packages/core/src/__mocks__/react-markdown.ts b/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;
diff --git a/packages/core/src/components/common/field/Hint.css b/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;
 }

diff --git a/packages/core/src/components/common/field/Hint.tsx b/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>
  );
 };