feat: New syntax for adding attributes to Markdown.

Author: jaywcjlove

package.json

@@ -49,6 +49,7 @@
     "@mapbox/rehype-prism": "0.8.0",
     "rehype-autolink-headings": "6.1.0",
     "rehype-raw": "6.1.0",
+    "rehype-attr": "2.0.6",
     "rehype-slug": "5.0.0",
     "rehype-rewrite": "3.0.4",
     "remark-gfm": "3.0.0",
@@ -67,7 +68,7 @@
     "@uiw/reset.css": "1.0.5",
     "compile-less-cli": "1.8.9",
     "kkt": "6.11.0",
-    "jest": "27.2.4",
+    "jest": "27.2.5",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",

src/index.tsx

@@ -3,8 +3,9 @@ import ReactMarkdown, { Options } from 'react-markdown';
 import { Root, Element, ElementContent } from 'hast';
 import gfm from 'remark-gfm';
 import slug from 'rehype-slug';
-import headings from 'rehype-autolink-headings'
+import headings from 'rehype-autolink-headings';
 import rehypeRaw from 'rehype-raw';
+import rehypeAttrs from 'rehype-attr';
 // @ts-ignore
 import rehypePrism from '@mapbox/rehype-prism';
 import rehypeRewrite from 'rehype-rewrite';
@@ -30,20 +31,20 @@ const octiconLink: Element = {
       properties: {
         fillRule: 'evenodd',
         d: 'M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z',
-      }
-    }
-  ]
-}
+      },
+    },
+  ],
+};
 
 const rehypeRewriteHandle = (node: ElementContent, index: number | null, parent: Root | Element | null) => {
   if (node.type === 'element' && parent && parent.type === 'root' && /h(1|2|3|4|5|6)/.test(node.tagName)) {
-    const child = node.children && node.children[0] as Element;
+    const child = node.children && (node.children[0] as Element);
     if (child && child.properties && child.properties.ariaHidden === 'true') {
       child.properties = { class: 'anchor', ...child.properties };
-      child.children = [ octiconLink ];
+      child.children = [octiconLink];
     }
   }
-}
+};
 
 export type MarkdownPreviewProps = {
   prefixCls?: string;
@@ -60,16 +61,33 @@ export type MarkdownPreviewRef = {
 } & MarkdownPreviewProps;
 
 export default React.forwardRef<MarkdownPreviewRef, MarkdownPreviewProps>((props, ref) => {
-  const { prefixCls = 'wmde-markdown wmde-markdown-color', className, source, style, onScroll, onMouseOver, warpperElement = {}, ...other  } = props;
+  const {
+    prefixCls = 'wmde-markdown wmde-markdown-color',
+    className,
+    source,
+    style,
+    onScroll,
+    onMouseOver,
+    warpperElement = {},
+    ...other
+  } = props;
   const mdp = React.createRef<HTMLDivElement>();
   useImperativeHandle(ref, () => ({ ...props, mdp }), [mdp, props]);
   const cls = `${prefixCls || ''} ${className || ''}`;
   return (
     <div ref={mdp} onScroll={onScroll} onMouseOver={onMouseOver} {...warpperElement} className={cls} style={style}>
       <ReactMarkdown
         {...other}
-        rehypePlugins={[[rehypePrism, { ignoreMissing: true }], rehypeRaw, slug, headings, [rehypeRewrite, { rewrite: rehypeRewriteHandle }], ...(other.rehypePlugins || [])]}
-        remarkPlugins={[ ...(other.remarkPlugins || []), gfm ]}
+        rehypePlugins={[
+          [rehypePrism, { ignoreMissing: true }],
+          rehypeRaw,
+          slug,
+          headings,
+          [rehypeRewrite, { rewrite: rehypeRewriteHandle }],
+          [rehypeAttrs, { properties: 'attr' }],
+          ...(other.rehypePlugins || []),
+        ]}
+        remarkPlugins={[...(other.remarkPlugins || []), gfm]}
         children={source || ''}
       />
     </div>