feat: add markdown gfm support and add markdown editor

client/web/package.json

@@ -25,6 +25,8 @@
     "plugins:declaration:generate": "cross-env TS_NODE_PROJECT='tsconfig.node.json' ts-node ./scripts/generate-plugin-declaration.typescript.ts"
   },
   "dependencies": {
+    "@bytemd/plugin-gfm": "^1.21.0",
+    "@bytemd/react": "^1.21.0",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
     "@loadable/component": "^5.15.3",
@@ -33,6 +35,7 @@
     "ahooks": "^3.7.4",
     "antd": "^4.24.8",
     "axios": "^0.21.4",
+    "bytemd": "^1.21.0",
     "clsx": "^1.2.1",
     "compressorjs": "^1.1.1",
     "copy-to-clipboard": "^3.3.3",
@@ -66,6 +69,7 @@
     "react-transition-group": "^4.4.5",
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-virtuoso": "^3.1.5",
+    "remark-gfm": "^3.0.1",
     "socket.io-client": "^4.6.1",
     "source-ref-runtime": "^1.0.7",
     "styled-components": "^5.3.6",

client/web/src/components/Markdown.less

@@ -1,6 +1,6 @@
 .tailchat-markdown {
   * {
-    user-select: auto;
+    user-select: text;
   }
 
   h1,
@@ -35,4 +35,25 @@
   blockquote {
     @apply px-2 text-gray-500 border-l-4 border-gray-500;
   }
+
+  table {
+    display: block;
+    width: 100%;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+
+    tr {
+      @apply border-t border-gray-200 bg-transparent;
+
+      &:nth-child(2n) {
+        @apply bg-gray-50 bg-opacity-10;
+      }
+
+      th, td {
+        @apply border border-gray-200 py-1 px-3;
+      }
+    }
+
+  }
 }

client/web/src/components/Markdown.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo } from 'react';
 import { isValidStr } from 'tailchat-shared';
 import { Loadable } from './Loadable';
 import { Image } from 'tailchat-design';
+import remarkGfm from 'remark-gfm';
 import './Markdown.less';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -41,6 +42,7 @@ export const Markdown: React.FC<{
       className="tailchat-markdown"
       transformImageUri={(src) => transformUrl(src)}
       transformLinkUri={(href) => transformUrl(href)}
+      remarkPlugins={[remarkGfm]}
       linkTarget="_blank"
       skipHtml={true}
       components={components}

client/web/src/components/MarkdownEditor/editor.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Editor } from '@bytemd/react';
+import { plugins } from './plugins';
+import 'bytemd/dist/index.css';
+
+interface MarkdownEditorProps {
+  value: string;
+  onChange: (val: string) => void;
+}
+export const MarkdownEditor: React.FC<MarkdownEditorProps> = React.memo(
+  (props) => {
+    return (
+      <Editor
+        plugins={plugins}
+        value={props.value ?? ''}
+        onChange={props.onChange}
+      />
+    );
+  }
+);
+MarkdownEditor.displayName = 'MarkdownEditor';

client/web/src/components/MarkdownEditor/index.tsx

@@ -0,0 +1,5 @@
+import { Loadable } from '../Loadable';
+
+export const MarkdownEditor = Loadable(() =>
+  import('./editor').then((module) => module.MarkdownEditor)
+);

client/web/src/components/MarkdownEditor/plugins.ts

@@ -0,0 +1,6 @@
+import gfm from '@bytemd/plugin-gfm';
+
+export const plugins = [
+  gfm(),
+  // Add more plugins here
+];