feat: add remarkGfm switch to markdownRender

content/plus/markdownrender/index-en-US.md

@@ -172,6 +172,7 @@ Support all RemarkPlugin and RehypePlugins plugins of MDXJS through `remarkPlugi
 | 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 | - |
+| remarkGfm | Whether to enable Github GFM syntax. Safari 16.3 and earlier does not support lookaround assertions and will report an error. | bool | true |
 | remarkPlugins | custom Remark Plugin          | Remark Plugin Array                | - |
 | rehypePlugins | custom Rehype Plugin          | Rehype Plugin Array               | - |
 | style | style | CSSProperties | - |

content/plus/markdownrender/index.md

@@ -184,15 +184,16 @@ function Demo() {
 
 ### API
 
-| 属性         | 说明                         | 类型                                   | 默认值   |
-|------------|----------------------------|--------------------------------------|-------|
-| className | 类名                         | string                               | -   |
-| components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | -     |
-| format     | 传入的 raw 类型，是否是纯 Markdown   | 'md'\|'mdx'                          | 'mdx' |
-| raw        | Markdown 或 MDX 的纯文本        | string                               | -     |
-| remarkPlugins | 自定义 Remark Plugin          | Remark Plugin Array                | - |
-| rehypePlugins | 自定义 Rehype Plugin          | Rehype Plugin Array               | - |
-| style | 样式                         | CSSProperties                        | - |
+| 属性         | 说明                                          | 类型                                   | 默认值   |
+|------------|---------------------------------------------|--------------------------------------|-------|
+| className | 类名                                          | string                               | -   |
+| components | 用于覆盖 Markdown 元素，也可添加自定义组件                  | Record<string, JSXElementConstructor> | -     |
+| format     | 传入的 raw 类型，是否是纯 Markdown                    | 'md'\|'mdx'                          | 'mdx' |
+| raw        | Markdown 或 MDX 的纯文本                         | string                               | -     |
+| remarkGfm | 是否开启 Github GFM 语法，safari 16.3 之前不支持环视断言会报错 | bool | true |
+| remarkPlugins | 自定义 Remark Plugin                           | Remark Plugin Array                | - |
+| rehypePlugins | 自定义 Rehype Plugin                           | Rehype Plugin Array               | - |
+| style | 样式                                          | CSSProperties                        | - |
 
 ## 设计变量
 

packages/semi-foundation/markdownRender/foundation.ts

@@ -16,7 +16,8 @@ export interface MarkdownRenderBaseProps{
     components: MDXProps['components'];
     format: "md"|"mdx";
     remarkPlugins?: PluggableList;
-    rehypePlugins?: PluggableList
+    rehypePlugins?: PluggableList;
+    remarkGfm?: boolean
 }
 
 
@@ -26,16 +27,21 @@ export interface MarkdownRenderBaseState{
 
 class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
 
-    private getOptions = ()=>{
+    private getOptions = () => {
+        const enableRemarkGfm = this._adapter.getProp("remarkGfm");
+        const remarkPlugins = [...(this.getProp("remarkPlugins") ?? [])];
+        if (enableRemarkGfm) {
+            remarkPlugins.unshift(remarkGfm);
+        }
         return {
             evaluateOptions: {
-                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                remarkPlugins: remarkPlugins,
                 rehypePlugins: this.getProp("rehypePlugins") ?? [],
                 format: this.getProp("format")
             },
             compileOptions: {
                 format: this.getProp("format"),
-                remarkPlugins: [remarkGfm, ...(this.getProp("remarkPlugins") ?? [])],
+                remarkPlugins: remarkPlugins,
                 rehypePlugins: this.getProp("rehypePlugins") ?? [],
             },
             runOptions: {
@@ -47,11 +53,11 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
         };
     }
 
-    compile = async (mdxRaw: string)=>{
+    compile = async (mdxRaw: string) => {
         return await compile(mdxRaw, this.getOptions().compileOptions);
     }
 
-    evaluate = async (mdxRaw: string)=>{
+    evaluate = async (mdxRaw: string) => {
         return (await evaluate(mdxRaw, {
             ...this.getOptions().runOptions,
             ...this.getOptions().evaluateOptions,
@@ -59,7 +65,7 @@ class MarkdownRenderFoundation extends BaseFoundation<MarkdownRenderAdapter> {
         })).default;
     }
 
-    evaluateSync = (mdxRaw: string)=>{
+    evaluateSync = (mdxRaw: string) => {
         return ( evaluateSync(mdxRaw, {
             ...this.getOptions().runOptions,
             ...this.getOptions().evaluateOptions,

packages/semi-ui/_utils/semi-global.ts

@@ -17,6 +17,7 @@ import type { TabsProps } from "../tabs";
 import type { TimePickerProps } from "../timePicker";
 import type { ToastReactProps } from "../toast";
 import type { TooltipProps } from "../tooltip";
+import type { MarkdownRenderProps } from "../markdownRender";
 
 class SemiGlobal {
 
@@ -25,6 +26,7 @@ class SemiGlobal {
             // "Anchor"?: Partial<AnchorProps>;
             "AutoComplete"?: Partial<AutoCompleteProps<any>>;
             "Avatar"?: Partial<AvatarProps>;
+            "MarkdownRender"?: Partial<MarkdownRenderProps>;
             // BackTop?: Partial<BackTopProps>;
             // Badge?: Partial<BadgeProps>;
             // Banner?: Partial<BannerProps>;

packages/semi-ui/markdownRender/index.tsx

@@ -41,11 +41,13 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
         raw: PropTypes.string,
         remarkPlugins: PropTypes.arrayOf(PropTypes.object),
         rehypePlugins: PropTypes.arrayOf(PropTypes.object),
+        remarkGfm: PropTypes.bool,
     }
 
     static __SemiComponentName__ = "MarkdownRender";
     static defaultProps = getDefaultPropsFromGlobalConfig(MarkdownRender.__SemiComponentName__, {
-        format: "mdx"
+        format: "mdx",
+        remarkGfm: true,
     })
 
     componentDidUpdate(prevProps: Readonly<MarkdownRenderProps>, prevState: Readonly<MarkdownRenderState>, snapshot?: any) {
@@ -57,7 +59,7 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
     get adapter(): MarkdownRenderAdapter<MarkdownRenderProps, MarkdownRenderState> {
         return {
             ...super.adapter,
-            getRuntime: ()=>runtime
+            getRuntime: () => runtime
         };
     }