feat(admin): add MarkdownEditor

pnpm-lock.yaml

@@ -547,13 +547,13 @@ importers:
         version: 18.2.0(react@18.2.0)
       react-i18next:
         specifier: ^11.18.6
-        version: 11.18.6(i18next@21.9.2)(react@18.2.0)
+        version: 11.18.6(i18next@21.9.2)(react-dom@18.2.0)(react@18.2.0)
       react-native-storage:
         specifier: npm:@trpgengine/react-native-storage@^1.0.1
         version: /@trpgengine/react-native-storage@1.0.1
       react-redux:
         specifier: ^8.0.2
-        version: 8.0.2(@types/react@18.0.20)(react@18.2.0)(redux@4.2.1)
+        version: 8.0.2(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
       regenerator-runtime:
         specifier: ^0.13.9
         version: 0.13.9
@@ -1501,12 +1501,24 @@ importers:
 
   server/admin:
     dependencies:
+      '@bytemd/plugin-gfm':
+        specifier: ^1.21.0
+        version: 1.21.0(bytemd@1.21.0)
+      '@bytemd/react':
+        specifier: ^1.21.0
+        version: 1.21.0(react@18.2.0)
       '@fastify/busboy':
         specifier: ^1.1.0
         version: 1.1.0
+      '@loadable/component':
+        specifier: ^5.15.3
+        version: 5.15.3(react@18.2.0)
       axios:
         specifier: ^1.4.0
         version: 1.4.0
+      bytemd:
+        specifier: ^1.21.0
+        version: 1.21.0
       compression:
         specifier: ^1.7.4
         version: 1.7.4
@@ -1556,6 +1568,9 @@ importers:
       '@types/express':
         specifier: ^4.17.15
         version: 4.17.15
+      '@types/loadable__component':
+        specifier: ^5.13.4
+        version: 5.13.4
       '@types/md5':
         specifier: ^2.3.2
         version: 2.3.2
@@ -8403,7 +8418,7 @@ packages:
     dependencies:
       immer: 9.0.15
       react: 18.2.0
-      react-redux: 8.0.2(@types/react@18.0.20)(react@18.2.0)(redux@4.2.1)
+      react-redux: 8.0.2(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
       redux: 4.2.1
       redux-thunk: 2.4.1(redux@4.2.1)
       reselect: 4.1.6
@@ -9532,7 +9547,7 @@ packages:
       '@emotion/styled': 11.10.4(@babel/core@7.18.13)(@emotion/react@11.10.4)(@types/react@18.0.20)(react@18.2.0)
       '@lingui/core': 3.14.0
       '@mui/material': 5.11.3(@emotion/react@11.10.4)(@emotion/styled@11.10.4)(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)
-      '@popperjs/core': 2.11.6
+      '@popperjs/core': 2.11.7
       '@remirror/core': 2.0.5(@remirror/pm@2.0.0)(@types/node@18.11.9)
       '@remirror/extension-positioner': 2.0.6(@remirror/pm@2.0.0)(@types/node@18.11.9)
       '@remirror/extension-text-color': 2.0.5(@remirror/pm@2.0.0)(@types/node@18.11.9)
@@ -29996,7 +30011,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /react-i18next@11.18.6(i18next@21.9.2)(react@18.2.0):
+  /react-i18next@11.18.6(i18next@21.9.2)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-yHb2F9BiT0lqoQDt8loZ5gWP331GwctHz9tYQ8A2EIEUu+CcEdjBLQWli1USG3RdWQt3W+jqQLg/d4rrQR96LA==}
     peerDependencies:
       i18next: '>= 19.0.0'
@@ -30013,6 +30028,7 @@ packages:
       html-parse-stringify: 3.0.1
       i18next: 21.9.2
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
     dev: false
 
   /react-i18next@12.3.1(i18next@22.5.0)(react-dom@18.2.0)(react@18.2.0):
@@ -30185,7 +30201,7 @@ packages:
       scheduler: 0.20.2
     dev: false
 
-  /react-redux@8.0.2(@types/react@18.0.20)(react@18.2.0)(redux@4.2.1):
+  /react-redux@8.0.2(@types/react@18.0.20)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1):
     resolution: {integrity: sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==}
     peerDependencies:
       '@types/react': ^16.8 || ^17.0 || ^18.0
@@ -30212,6 +30228,7 @@ packages:
       '@types/use-sync-external-store': 0.0.3
       hoist-non-react-statics: 3.3.2
       react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
       react-is: 18.2.0
       redux: 4.2.1
       use-sync-external-store: 1.2.0(react@18.2.0)

server/admin/package.json

@@ -11,8 +11,12 @@
     "build:server": "tsc -p tsconfig.server.json"
   },
   "dependencies": {
+    "@bytemd/plugin-gfm": "^1.21.0",
+    "@bytemd/react": "^1.21.0",
     "@fastify/busboy": "^1.1.0",
+    "@loadable/component": "^5.15.3",
     "axios": "^1.4.0",
+    "bytemd": "^1.21.0",
     "compression": "^1.7.4",
     "dayjs": "^1.11.7",
     "express": "^4.18.2",
@@ -31,6 +35,7 @@
   "devDependencies": {
     "@types/compression": "^1.7.2",
     "@types/express": "^4.17.15",
+    "@types/loadable__component": "^5.13.4",
     "@types/md5": "^2.3.2",
     "@types/morgan": "^1.9.4",
     "@types/react": "^18.0.28",

server/admin/src/client/components/MarkdownEditor/editor.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Editor } from '@bytemd/react';
+import { plugins } from './plugins';
+import 'bytemd/dist/index.css';
+import './style.less';
+
+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';

server/admin/src/client/components/MarkdownEditor/index.tsx

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

server/admin/src/client/components/MarkdownEditor/plugins.ts

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

server/admin/src/client/components/MarkdownEditor/style.less

@@ -0,0 +1,8 @@
+.bytemd .bytemd-toolbar-right [bytemd-tippy-path='5'] {
+  // Hidden github icon
+  display: none;
+}
+
+.bytemd-fullscreen.bytemd {
+  z-index: 99;
+}