♻️ feat: reflact some components props & api

src/Highlight/defalut.tsx

@@ -30,7 +30,7 @@ export interface HighlightProps {
    * @renderType select
    * @default "typescript"
    */
-  language: string;
+  language?: string;
   /**
    * @title 主题
    * @description 主题颜色, dark 黑色主题，light 白色主题

src/Highlight/wrapper.tsx

@@ -18,7 +18,7 @@ export interface HighlighterWrapperProps extends DivProps {
   /**
    * @description The language of the code content
    */
-  language: string;
+  language?: string;
 }
 const options: SelectProps['options'] = Object.keys(languageMap).map((key) => ({
   label: key,

src/Markdown/CodeBlock.tsx

@@ -28,7 +28,7 @@ const countLines = (str: string): number => {
   return matches ? matches.length : 1;
 };
 
-const Code = memo(({ fullFeatured, ...properties }: any) => {
+const Code = memo(({ highlight, snippet, ...properties }: any) => {
   const { styles, cx } = useStyles();
 
   if (!properties.children[0]) return;
@@ -47,6 +47,7 @@ const Code = memo(({ fullFeatured, ...properties }: any) => {
         language={lang}
         symbol={''}
         type={'block'}
+        {...snippet}
       >
         {content}
       </Snippet>
@@ -56,19 +57,13 @@ const Code = memo(({ fullFeatured, ...properties }: any) => {
   return (
     <Highlight
       className={cx(styles.container, styles.highlight)}
-      containerWrapper={fullFeatured}
       language={lang}
       type="block"
+      {...highlight}
     >
       {content}
     </Highlight>
   );
 });
 
-export const CodeLite = memo((properties: any) => {
-  return <Code {...properties} />;
-});
-
-export const CodeFullFeatured = memo((properties: any) => {
-  return <Code fullFeatured {...properties} />;
-});
+export { Code };

src/Markdown/demos/index.tsx

@@ -3,5 +3,13 @@ import { Markdown } from '@ant-design/pro-editor';
 import { content } from './data';
 
 export default () => {
-  return <Markdown>{content}</Markdown>;
+  return (
+    <Markdown
+      highlight={{
+        containerWrapper: true,
+      }}
+    >
+      {content}
+    </Markdown>
+  );
 };

src/Markdown/index.md

@@ -1,20 +1,26 @@
 ---
 nav: 组件
-group: Content
-title: Markdown
+group: 基础组件
+title: Markdown 文档展示
+atomId: Markdown
 description: Markdown是一个用于渲染Markdown文本的React组件。它支持各种Markdown语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。
 ---
 
 ## Default
 
+ProEditor 内置了一个默认的 Markdown 渲染器，使用 React-Markdown，使用我们自己的 Highlight 和 Snippet 进行代码块的渲染
+
+你也可以通过自己传入 components 等 React-Markdown 的 Props 来进行自定义，多余的会透传过去。
+
 <code src="./demos/index.tsx" nopadding></code>
 
 ## APIs
 
-| 属性名                | 类型          | 描述                       |
-| --------------------- | ------------- | -------------------------- |
-| children              | string        | 要渲染的 Markdown 内容。   |
-| className             | string        | Markdown 组件的类名。      |
-| fullFeaturedCodeBlock | boolean       | 是否启用完整功能的代码块。 |
-| onDoubleClick         | () => void    | 双击事件处理函数。         |
-| style                 | CSSProperties | Markdown 组件的样式。      |
+| 属性名        | 类型            | 描述                           |
+| ------------- | --------------- | ------------------------------ |
+| children      | string          | 要渲染的 Markdown 内容。       |
+| className     | string          | Markdown 组件的类名。          |
+| onDoubleClick | () => void      | 双击事件处理函数。             |
+| style         | CSSProperties   | Markdown 组件的样式。          |
+| highlight     | Highlight Props | Highlight 的配置，会默认透传。 |
+| snippet       | snippet Props   | Snippet 的配置，会默认透传     |

src/Markdown/index.tsx

@@ -6,32 +6,41 @@ import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 
-import { CodeFullFeatured, CodeLite } from './CodeBlock';
+import { HighlightProps, SnippetProps } from '@ant-design/pro-editor';
+import { Code } from './CodeBlock';
 import { useStyles } from './style';
 
 export interface MarkdownProps {
-  /**
-   * @description The markdown content to be rendered
-   */
   children: string;
   /**
-   * @description The class name for the Markdown component
+   * @description ClassName
    */
   className?: string;
   fullFeaturedCodeBlock?: boolean;
   onDoubleClick?: () => void;
   style?: CSSProperties;
+  // Highlight 的配置，会默认透传
+  highlight?: HighlightProps;
+  // Snippet 的配置，会默认透传
+  snippet?: SnippetProps;
 }
 
 const Markdown = memo<MarkdownProps>(
-  ({ children, className, style, fullFeaturedCodeBlock = true, onDoubleClick, ...props }) => {
+  ({ children, className, style, onDoubleClick, highlight = {}, snippet = {}, ...rest }) => {
     const { styles } = useStyles();
     const components: any = {
       a: Typography.Link,
       details: Collapse,
       hr: () => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />,
       img: Image,
-      pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite,
+      pre: (props) => {
+        const { children, ...rest } = props;
+        return (
+          <Code highlight={highlight} snippet={snippet} {...rest}>
+            {children}
+          </Code>
+        );
+      },
     };
 
     return (
@@ -42,7 +51,7 @@ const Markdown = memo<MarkdownProps>(
               className={styles.markdown}
               components={components}
               remarkPlugins={[remarkGfm]}
-              {...props}
+              {...rest}
             >
               {children}
             </ReactMarkdown>
@@ -53,7 +62,7 @@ const Markdown = memo<MarkdownProps>(
             components={components}
             rehypePlugins={[rehypeKatex]}
             remarkPlugins={[remarkGfm, remarkMath]}
-            {...props}
+            {...rest}
           >
             {children}
           </ReactMarkdown>