feat: markdownRender support plugin

DouyinFE · Aug 20, 2024 · 4479d87 · 4479d87
1 parent 9d2aed2
commit 4479d87
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/content/plus/markdownrender/index-en-US.md b/content/plus/markdownrender/index-en-US.md
@@ -158,6 +158,10 @@ Just write JSX directly in Markdown
 
 ```
 
+# Add plugins
+
+Support all RemarkPlugin and RehypePlugins plugins of MDXJS through `remarkPlugins` `rehypePlugins`, please refer to [MDXJS](https://mdxjs.com/docs/extending-mdx/) for details
+
 
 ### API
 
@@ -167,6 +171,8 @@ Just write JSX directly in Markdown
 | components | Used to override Markdown elements and add custom components | Record<string, JSXElementConstructor> | - |
 | format | The incoming raw type, whether it is pure Markdown | 'md'\|'mdx' | 'mdx' |
 | raw | plain text in Markdown or MDX | string | - |
+| remarkPlugins | custom Remark Plugin          | Remark Plugin Array                | - |
+| rehypePlugins | custom Rehype Plugin          | Rehype Plugin Array               | - |
 | style | style | CSSProperties | - |
 
 ## Design Token

diff --git a/content/plus/markdownrender/index.md b/content/plus/markdownrender/index.md
@@ -175,16 +175,23 @@ function Demo() {
 
 ```
 
+# 添加插件
+
+通过 `remarkPlugins` `rehypePlugins` 支持 MDXJS 的所有 RemarkPlugin 和 RehypePlugins 插件，详情请参考 [MDXJS](https://mdxjs.com/docs/extending-mdx/)
+
+
 
 ### API
 
-| 属性         | 说明                         | 类型                                    | 默认值   |
-|------------|----------------------------|---------------------------------------|-------|
-| className | 类名    | string | -   |
+| 属性         | 说明                         | 类型                                   | 默认值   |
+|------------|----------------------------|--------------------------------------|-------|
+| className | 类名                         | string                               | -   |
 | components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | -     |
-| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                           | 'mdx' |
-| raw        | Markdown 或 MDX 的纯文本        | string                                | -     |
-| style | 样式 | CSSProperties | - |
+| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                          | 'mdx' |
+| raw        | Markdown 或 MDX 的纯文本        | string                               | -     |
+| remarkPlugins | 自定义 Remark Plugin          | Remark Plugin Array                | - |
+| rehypePlugins | 自定义 Rehype Plugin          | Rehype Plugin Array               | - |
+| style | 样式                         | CSSProperties                        | - |
 
 ## 设计变量
 

diff --git a/packages/semi-foundation/markdownRender/foundation.ts b/packages/semi-foundation/markdownRender/foundation.ts
@@ -2,6 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { CompileOptions, evaluate, compile, EvaluateOptions, evaluateSync, RunOptions } from '@mdx-js/mdx';
 import { MDXProps } from 'mdx/types';
 import remarkGfm from 'remark-gfm';
+import { type PluggableList } from "@mdx-js/mdx/lib/core";
 export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getRuntime: () => any
 
@@ -13,7 +14,9 @@ export interface MarkdownRenderAdapter <P = Record<string, any>, S = Record<stri
 export interface MarkdownRenderBaseProps{
     raw: string;
     components: MDXProps['components'];
-    format: "md"|"mdx"
+    format: "md"|"mdx";
+    remarkPlugins?: PluggableList;
+    rehypePlugins?: PluggableList
 }
 
 
@@ -26,11 +29,14 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
     private getOptions = ()=>{
         return {
             evaluateOptions: {
-                remarkPlugins: [remarkGfm],
+                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                rehypePlugins: this.getProp("rehypePlugins") ?? [],
                 format: this.getProp("format")
             },
             compileOptions: {
-                format: this.getProp("format")
+                format: this.getProp("format"),
+                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                rehypePlugins: this.getProp("rehypePlugins") ?? [],
             },
             runOptions: {
             }

diff --git a/packages/semi-ui/markdownRender/index.tsx b/packages/semi-ui/markdownRender/index.tsx
@@ -38,7 +38,8 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
         style: PropTypes.object,
         format: PropTypes.string,
         components: PropTypes.any,
-        raw: PropTypes.string
+        raw: PropTypes.string,
+        remarkPlugins: PropTypes.arrayOf(PropTypes.object),
     }
 
     static __SemiComponentName__ = "MarkdownRender";