✏️ fix: slove Markdown Plugin problem

ant-design · Dec 26, 2023 · 107b007 · 107b007
1 parent b2aff94
commit 107b007
Show file tree

Hide file tree

Showing 7 changed files with 308 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -107,7 +107,6 @@
     "react-rnd": "^10.4.1",
     "reactflow": "^11.10.1",
     "rehype-katex": "^6.0.3",
-    "rehype-raw": "^6.0.0",
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "rxjs": "^7.8.1",
@@ -151,6 +150,7 @@
     "prettier-plugin-packagejson": "^2.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-raw": "^6.0.0",
     "rxjs-spy": "^8.0.2",
     "semantic-release": "^21.1.2",
     "semantic-release-config-gitmoji": "^1.5.3",

diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts
@@ -1,4 +1,4 @@
-export const content = `# This is an H1
+const content = `# This is an H1
 ## This is an H2
 ### This is an H3
 #### This is an H4
@@ -85,7 +85,9 @@ $$
 $$
 \\int_{a}^{b} f(x) \\, dx
 $$
+`;
 
+const htmlContent = `
 <html lang="en">
 <head>
 <meta charset="UTF-8">
@@ -103,3 +105,5 @@ $$
 </body>
 </html>
 `;
+
+export { content, htmlContent };
diff --git a/src/Markdown/demos/htmlPlugin.tsx b/src/Markdown/demos/htmlPlugin.tsx
@@ -0,0 +1,7 @@
+import { Markdown } from '@ant-design/pro-editor';
+import rehypeRaw from 'rehype-raw';
+import { htmlContent } from './data';
+
+export default () => {
+  return <Markdown rehypePlugins={[rehypeRaw]}>{htmlContent}</Markdown>;
+};
diff --git a/src/Markdown/index.en-US.md b/src/Markdown/index.en-US.md
@@ -12,11 +12,23 @@ You can also customize it by passing in props like components to React-Markdown,
 
 <code src="./demos/index.tsx" nopadding></code>
 
+## Customizing Input Plugins
+
+We have built-in some plugins for Markdown conversion, but if you have other needs, you can customize the input rehypePlugins and remarkPlugins to expand the current rendering capabilities.
+
+For example, below is an example of using rehypeRaw to render HTML capabilities.
+
+> It should be noted that there may be parsing conflicts between different plugins, which may need to be resolved by the user.
+
+<code src="./demos/htmlPlugin.tsx" nopadding></code>
+
 ## APIs
 
-| Property      | Type          | Description                               |
-| ------------- | ------------- | ----------------------------------------- |
-| children      | string        | The Markdown content to render.           |
-| className     | string        | The class name of the Markdown component. |
-| onDoubleClick | () => void    | Double-click event handler.               |
-| style         | CSSProperties | The style of the Markdown component.      |
+| Property      | Type                              | Description                            |
+| ------------- | --------------------------------- | -------------------------------------- |
+| children      | string                            | The Markdown content to render.        |
+| className     | string                            | Class name for the Markdown component. |
+| onDoubleClick | () => void                        | Double-click event handler function.   |
+| style         | CSSProperties                     | Style for the Markdown component.      |
+| rehypePlugins | Markdown rehypePlugins Types      | Custom rehype plugins.                 |
+| remarkPlugins | remarkPlugins rehypePlugins Types | Custom remark plugins.                 |
diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
@@ -2,7 +2,6 @@ import { Collapse, Divider, Typography } from 'antd';
 import { CSSProperties, memo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
-import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
@@ -18,36 +17,51 @@ export interface MarkdownProps {
   className?: string;
   onDoubleClick?: () => void;
   style?: CSSProperties;
+  rehypePlugins?: PluggableList;
+  remarkPlugins?: PluggableList;
 }
 
 const MemoHr = memo(() => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />);
 const MemoDetails = memo(() => <Collapse style={{ marginBottom: '1em' }} />);
 const MemoAlink = memo(() => <Typography.Link />);
 const MemoImage = memo(() => <img />);
 
-const Markdown = memo<MarkdownProps>(({ children, className, style, onDoubleClick, ...rest }) => {
-  const { styles } = useStyles();
-  const components: any = {
-    a: MemoAlink,
-    details: MemoDetails,
-    hr: MemoHr,
-    img: MemoImage,
-    pre: Code,
-  };
+const Markdown = memo<MarkdownProps>(
+  ({
+    children,
+    className,
+    style,
+    onDoubleClick,
+    rehypePlugins: outRehypePlugins,
+    remarkPlugins: outRemarkPlugins,
+    ...rest
+  }) => {
+    const { styles } = useStyles();
+    const components: any = {
+      a: MemoAlink,
+      details: MemoDetails,
+      hr: MemoHr,
+      img: MemoImage,
+      pre: Code,
+    };
 
-  return (
-    <Typography className={className} onDoubleClick={onDoubleClick} style={style}>
-      <ReactMarkdown
-        className={styles.markdown}
-        components={components}
-        rehypePlugins={[rehypeKatex, rehypeRaw] as PluggableList}
-        remarkPlugins={[remarkGfm, remarkMath]}
-        {...rest}
-      >
-        {children}
-      </ReactMarkdown>
-    </Typography>
-  );
-});
+    const rehypePlugins = [rehypeKatex, ...(outRehypePlugins || [])];
+    const remarkPlugins = [remarkGfm, remarkMath, ...(outRemarkPlugins || [])];
+
+    return (
+      <Typography className={className} onDoubleClick={onDoubleClick} style={style}>
+        <ReactMarkdown
+          className={styles.markdown}
+          components={components}
+          rehypePlugins={rehypePlugins as PluggableList}
+          remarkPlugins={remarkPlugins as PluggableList}
+          {...rest}
+        >
+          {children}
+        </ReactMarkdown>
+      </Typography>
+    );
+  },
+);
 
 export default Markdown;
diff --git a/src/Markdown/index.zh-CN.md b/src/Markdown/index.zh-CN.md
@@ -14,11 +14,23 @@ ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，
 
 <code src="./demos/index.tsx" nopadding></code>
 
+## 自定义传入 Plugins
+
+我们内置了一些对于 Markdown 转换的 Plugins，但是如果你有别的需求，你可以自定义传入 rehypePlugins 和 remarkPlugins 来扩充当前的渲染能力。
+
+例如，下方是一个传入 rehypeRaw 用来渲染 Html 能力的样例。
+
+> 需要注意的是，不同的插件之间可能会出现解析冲突的问题，这个可能需要用户自己解决。
+
+<code src="./demos/htmlPlugin.tsx" nopadding></code>
+
 ## APIs
 
-| 属性名        | 类型          | 描述                     |
-| ------------- | ------------- | ------------------------ |
-| children      | string        | 要渲染的 Markdown 内容。 |
-| className     | string        | Markdown 组件的类名。    |
-| onDoubleClick | () => void    | 双击事件处理函数。       |
-| style         | CSSProperties | Markdown 组件的样式。    |
+| 属性名        | 类型                              | 描述                     |
+| ------------- | --------------------------------- | ------------------------ |
+| children      | string                            | 要渲染的 Markdown 内容。 |
+| className     | string                            | Markdown 组件的类名。    |
+| onDoubleClick | () => void                        | 双击事件处理函数。       |
+| style         | CSSProperties                     | Markdown 组件的样式。    |
+| rehypePlugins | Markdown rehypePlugins Types      | rehype 自定义插件        |
+| remarkPlugins | remarkPlugins rehypePlugins Types | remark 自定义插件        |