Merge pull request #2576 from DouyinFE/feat_markdownRender_addGFMSwitch

feat: add remarkGfm switch to markdownRender

content/navigation/navigation/index-en-US.md

@@ -444,35 +444,53 @@ class NavApp extends React.Component {
         return (
             <Nav
                 mode={'horizontal'}
+                items={[
+                    { itemKey: 'user', text: 'User Management', icon: <IconUser /> },
+                    { itemKey: 'union', text: 'Union Center', icon: <IconStar /> },
+                    {
+                        itemKey: 'approve-management',
+                        text: 'Approval Management',
+                        icon: <IconEdit />,
+                        items: [
+                            'Check-in Review',
+                            {
+                                itemKey: 'operation-management',
+                                text: 'Operations Management',
+                                items: [
+                                    'Personnel Management',
+                                    'Personnel Change'
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        text: 'Task Platform',
+                        icon: <IconSetting />,
+                        itemKey: 'job',
+                        items: ['Task Management', 'User Task Query'],
+                    },
+                ]}
                 onSelect={key => console.log(key)}
                 header={{
                     logo: <img src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/webcast_logo.svg" />,
                     text: 'Live Platform'
                 }}
                 footer={
-                    <>
-                        <Select defaultValue='English' style={{ width: 120, marginRight: 10 }} insetLabel={<IconLanguage />}>
-                            <Select.Option value='Chinese'>中文</Select.Option>
-                            <Select.Option value='English'>English</Select.Option>
-                            <Select.Option value='Korean'>한국어</Select.Option>
-                            <Select.Option value='Japanese'>日本語</Select.Option>
-                        </Select>
-                        <Button style={{ marginRight: 10 }}>Switch to Overseas Version</Button>
-                        <Dropdown
-                            position="bottomRight"
-                            render={
-                                <Dropdown.Menu>
-                                    <Dropdown.Item>Detail</Dropdown.Item>
-                                    <Dropdown.Item>Quit</Dropdown.Item>
-                                </Dropdown.Menu>
-                            }
-                        >
-                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
-                            <span>Bytedancer</span>
-                        </Dropdown>
-                    </>
+                    <Dropdown
+                        position="bottomRight"
+                        render={
+                            <Dropdown.Menu>
+                                <Dropdown.Item>Detail</Dropdown.Item>
+                                <Dropdown.Item>Quit</Dropdown.Item>
+                            </Dropdown.Menu>
+                        }
+                    >
+                        <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
+                        <span>Bytedancer</span>
+                    </Dropdown>
                 }
             />
+
         );
     }
 
@@ -498,6 +516,7 @@ class NavApp extends React.Component {
         );
     }
 }
+
 ```
 
 ### Expand and collapse arrow position

content/navigation/navigation/index.md

@@ -349,49 +349,54 @@ import { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNo
     const TopHeader = () => (
         <Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>
             <div>
-                <Nav mode="horizontal" defaultSelectedKeys={['Home']}>
-                    <Nav.Header>
-                        <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />
-                    </Nav.Header>
-                    <span
-                        style={{
-                            color: 'var(--semi-color-text-2)',
-                        }}
-                    >
-                        <span
-                            style={{
-                                marginRight: '24px',
-                                color: 'var(--semi-color-text-0)',
-                                fontWeight: '600',
-                            }}
+                <Nav
+                    mode={'horizontal'}
+                    items={[
+                        { itemKey: 'user', text: '用户管理', icon: <IconBadge /> },
+                        { itemKey: 'union', text: '活动管理', icon: <IconTreeSelect /> },
+                        {
+                            itemKey: 'approve-management',
+                            text: '审批管理',
+                            icon: <IconBreadcrumb />,
+                            items: [
+                                '入驻审核',
+                                {
+                                    itemKey: 'operation-management',
+                                    text: '运营管理',
+                                    items: [
+                                        '人员管理',
+                                        '人员变更'
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            text: '任务平台',
+                            icon: <IconSteps />,
+                            itemKey: 'job',
+                            items: ['任务管理', '用户任务查询'],
+                        },
+                    ]}
+                    onSelect={key => console.log(key)}
+                    header={{
+                        logo: <IconSemiLogo style={{ height: '36px', fontSize: 36 }} />,
+                        text: 'Semi 运营后台'
+                    }}
+                    footer={
+                        <Dropdown
+                            position="bottomRight"
+                            render={
+                                <Dropdown.Menu>
+                                    <Dropdown.Item>详情</Dropdown.Item>
+                                    <Dropdown.Item>退出</Dropdown.Item>
+                                </Dropdown.Menu>
+                            }
                         >
-                            模版推荐
-                        </span>
-                        <span style={{ marginRight: '24px' }}>所有模版</span>
-                        <span>我的模版</span>
-                    </span>
-                    <Nav.Footer>
-                        <Button
-                            theme="borderless"
-                            icon={<IconBell size="large" />}
-                            style={{
-                                color: 'var(--semi-color-text-2)',
-                                marginRight: '12px',
-                            }}
-                        />
-                        <Button
-                            theme="borderless"
-                            icon={<IconHelpCircle size="large" />}
-                            style={{
-                                color: 'var(--semi-color-text-2)',
-                                marginRight: '12px',
-                            }}
-                        />
-                        <Avatar color="orange" size="small">
-                            YJ
-                        </Avatar>
-                    </Nav.Footer>
-                </Nav>
+                            <Avatar size="small" color='light-blue' style={{ margin: 4 }}>BD</Avatar>
+                            <span>Bytedancer</span>
+                        </Dropdown>
+                    }
+                />
             </div>
         </Header>
     );
@@ -498,6 +503,8 @@ import { IconTreeSelect, IconForm, IconBreadcrumb, IconBanner, IconBadge, IconNo
     );
 };
 
+
+
 ```
 
 ### 展开收起箭头位置

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
         };
     }