feat：Highlight & Markdown 切换为 ProEditor (#12)

* ✨ feat: change Highlight & Markdown into ProEditor

* ✨ feat: delete lobeui

* 💚 fix: ci fixed

---------

Co-authored-by: ONLY-yours <[email protected]>

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",
@@ -88,7 +84,6 @@
   },
   "devDependencies": {
     "@commitlint/cli": "^17",
-    "@lobehub/ui": "^1",
     "@testing-library/react": "^14",
     "@types/chroma-js": "^2",
     "@types/lodash-es": "^4",

src/ActionIconGroup/index.tsx

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

src/ChatItem/demos/index.tsx

@@ -1,55 +1,48 @@
 import { ActionIconGroup, ChatItem, ChatItemProps } from '@ant-design/pro-chat';
-import { StoryBook, useControls, useCreateStore } from '@lobehub/ui';
 import { useState } from 'react';
 
 import { avatar, dropdownMenu, items } from './data';
 
 export default () => {
   const [edit, setEdit] = useState(false);
-  const store = useCreateStore();
-  const control: ChatItemProps | any = useControls(
-    {
-      loading: false,
-      message: {
-        rows: true,
-        value:
-          "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```",
-      },
-      placement: {
-        options: ['left', 'right'],
-        value: 'left',
-      },
-      primary: false,
-      showTitle: false,
-      time: 1_686_538_950_084,
-      type: {
-        options: ['block', 'pure'],
-        value: 'block',
-      },
+  const control: ChatItemProps | any = {
+    loading: false,
+    message: {
+      rows: true,
+      value:
+        "要使用 dayjs 的 fromNow 函数，需要先安装 dayjs 库并在代码中引入它。然后，可以使用以下语法来获取当前时间与给定时间之间的相对时间：\n\n```javascript\ndayjs().fromNow();\ndayjs('2021-05-01').fromNow();\n```",
     },
-    { store },
-  );
+    placement: {
+      options: ['left', 'right'],
+      value: 'left',
+    },
+    primary: false,
+    showTitle: false,
+    time: 1_686_538_950_084,
+    type: {
+      options: ['block', 'pure'],
+      value: 'block',
+    },
+  };
 
   return (
-    <StoryBook levaStore={store}>
-      <ChatItem
-        {...control}
-        actions={
-          <ActionIconGroup
-            dropdownMenu={dropdownMenu}
-            items={items}
-            onActionClick={(action) => {
-              if (action.key === 'edit') {
-                setEdit(true);
-              }
-            }}
-            type="ghost"
-          />
-        }
-        avatar={avatar}
-        editing={edit}
-        onEditingChange={setEdit}
-      />
-    </StoryBook>
+    <ChatItem
+      {...control}
+      actions={
+        <ActionIconGroup
+          dropdownMenu={dropdownMenu}
+          items={items}
+          onActionClick={(action) => {
+            if (action.key === 'edit') {
+              setEdit(true);
+            }
+          }}
+          type="ghost"
+        />
+      }
+      avatar={avatar}
+      editing={edit}
+      onEditingChange={setEdit}
+    />
   );
 };

src/EditableMessage/demos/index.tsx

@@ -1,36 +1,106 @@
 import { EditableMessage } from '@ant-design/pro-chat';
-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);
   const [editing, setEdit] = useState(false);
-  const store = useCreateStore();
-
-  useControls(
-    {
-      editing: button(() => {
-        setEdit(true);
-      }),
-      openModal: button(() => {
-        setOpenModal(true);
-      }),
-    },
-    { store },
-  );
 
   return (
-    <StoryBook levaStore={store}>
-      <EditableMessage
-        editing={editing}
-        onEditingChange={setEdit}
-        onOpenChange={setOpenModal}
-        openModal={openModal}
-        value={content}
-      />
-    </StoryBook>
+    <EditableMessage
+      editing={editing}
+      onEditingChange={setEdit}
+      onOpenChange={setOpenModal}
+      openModal={openModal}
+      value={content}
+    />
   );
 };

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',