✨ feat: change Highlight & Markdown into ProEditor

package.json

@@ -76,10 +76,6 @@
     "react-error-boundary": "^4",
     "react-intersection-observer": "^9.5.2",
     "react-layout-kit": "^1.7.1",
-    "react-markdown": "^8",
-    "rehype-katex": "^6",
-    "remark-gfm": "^3",
-    "remark-math": "^5",
     "shikiji": "^0",
     "swr": "^2",
     "use-merge-value": "^1",

src/ActionIconGroup/index.tsx

@@ -60,7 +60,7 @@ const ActionIconGroup = memo<ActionIconGroupProps>(
     items = [],
     placement,
     spotlight = false,
-    direction = 'column',
+    direction = 'row',
     dropdownMenu = [],
     onActionClick,
     className,

src/EditableMessage/demos/index.tsx

@@ -3,7 +3,94 @@ import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { button } from 'leva';
 import { useState } from 'react';
 
-import { content } from '../../Markdown/demos/data';
+export const content = `# This is an H1
+## This is an H2
+### This is an H3
+#### This is an H4
+##### This is an H5
+
+The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.
+
+---
+
+> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
+> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
+> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
+>
+> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
+> id sem consectetuer libero luctus adipiscing.
+
+---
+
+an example | *an example* | **an example**
+
+---
+
+1. Bird
+1. McHale
+1. Parish
+    1. Bird
+    1. McHale
+        1. Parish
+
+---
+
+- Red
+- Green
+- Blue
+    - Red
+    - Green
+        - Blue
+
+---
+
+This is [an example](http://example.com/ "Title") inline link.
+
+<http://example.com/>
+
+
+| title | title | title |
+| --- | --- | --- |
+| content | content | content |
+
+
+\`\`\`bash
+$ pnpm install
+\`\`\`
+
+
+\`\`\`javascript
+import { renderHook } from '@testing-library/react-hooks';
+import { act } from 'react-dom/test-utils';
+import { useDropNodeOnCanvas } from './useDropNodeOnCanvas';
+\`\`\`
+
+---
+
+以下是一段Markdown格式的LaTeX数学公式：
+
+我是一个行内公式：$E=mc^2$
+
+我是一个独立公式：
+$$
+\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\ldots + x_n
+$$
+
+我是一个带有分式的公式：
+$$
+\\frac{{n!}}{{k!(n-k)!}} = \\binom{n}{k}
+$$
+
+我是一个带有上下标的公式：
+$$
+x^{2} + y^{2} = r^{2}
+$$
+
+我是一个带有积分符号的公式：
+$$
+\\int_{a}^{b} f(x) \\, dx
+$$
+`;
 
 export default () => {
   const [openModal, setOpenModal] = useState(false);

src/EditableMessage/index.tsx

@@ -1,9 +1,9 @@
 import { CSSProperties, memo } from 'react';
 import useControlledState from 'use-merge-value';
 
-import Markdown from '@/Markdown';
 import MessageInput, { type MessageInputProps } from '@/MessageInput';
 import MessageModal, { type MessageModalProps } from '@/MessageModal';
+import { Markdown } from '@ant-design/pro-editor';
 
 export interface EditableMessageProps {
   /**
@@ -136,7 +136,9 @@ const EditableMessage = memo<EditableMessageProps>(
         ) : (
           <Markdown
             className={classNames?.markdown}
-            fullFeaturedCodeBlock={fullFeaturedCodeBlock}
+            highlight={{
+              containerWrapper: fullFeaturedCodeBlock,
+            }}
             style={{
               height: isAutoSize ? 'unset' : height,
               overflowX: 'hidden',