feat: add markdown editor into panel

client/web/plugins/com.msgbyte.mdpanel/src/group/MarkdownPanel.tsx

@@ -1,5 +1,9 @@
-import React from 'react';
-import { GroupExtraDataPanel, Markdown, TextArea } from '@capital/component';
+import React, { useEffect, useState } from 'react';
+import {
+  GroupExtraDataPanel,
+  Markdown,
+  MarkdownEditor,
+} from '@capital/component';
 import styled from 'styled-components';
 import { Translate } from '../translate';
 
@@ -13,13 +17,36 @@ const EditModalContent = styled.div`
   height: 80vh;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 
-  .ant-input {
+  .main {
     flex: 1;
-    resize: none;
+    overflow: hidden;
+
+    > div {
+      height: 100%;
+
+      > .bytemd {
+        height: 100%;
+      }
+    }
   }
 `;
 
+const MarkdownEditorRender: React.FC<{ dataMap: Record<string, string> }> =
+  React.memo((props) => {
+    const [text, setText] = useState(() => props.dataMap['markdown']);
+
+    useEffect(() => {
+      props.dataMap['markdown'] = text;
+    }, [text]);
+
+    return (
+      <MarkdownEditor value={text} onChange={(val: string) => setText(val)} />
+    );
+  });
+MarkdownEditorRender.displayName = 'MarkdownEditorRender';
+
 const MarkdownPanel: React.FC = React.memo(() => {
   return (
     <GroupExtraDataPanel
@@ -36,12 +63,16 @@ const MarkdownPanel: React.FC = React.memo(() => {
           <EditModalContent>
             <div>{Translate.editTip}</div>
 
-            <TextArea
+            <div className="main">
+              <MarkdownEditorRender dataMap={dataMap} />
+            </div>
+
+            {/* <TextArea
               defaultValue={dataMap['markdown']}
               onChange={(e) => {
                 dataMap['markdown'] = e.target.value;
               }}
-            />
+            /> */}
           </EditModalContent>
         );
       }}

client/web/src/plugin/component/index.tsx

@@ -59,6 +59,7 @@ export { ErrorBoundary } from '@/components/ErrorBoundary';
 export { UserAvatar } from '@/components/UserAvatar';
 export { UserName } from '@/components/UserName';
 export { Markdown } from '@/components/Markdown';
+export { MarkdownEditor } from '@/components/MarkdownEditor';
 export { Webview, WebviewKeepAlive } from '@/components/Webview';
 export { Card } from '@/components/Card';
 export { Problem } from '@/components/Problem';