优化

client/web/plugins/com.msgbyte.mdpanel/manifest.json

@@ -0,0 +1,11 @@
+{
+  "label": "Markdown Panel",
+  "label.zh-CN": "Markdown 面板",
+  "name": "com.msgbyte.mdpanel",
+  "url": "/plugins/com.msgbyte.mdpanel/index.js",
+  "version": "0.0.0",
+  "author": "moonrailgun",
+  "description": "Add markdown panel support",
+  "description.zh-CN": "增加 Markdown 面板支持",
+  "requireRestart": true
+}

client/web/plugins/com.msgbyte.mdpanel/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@plugins/com.msgbyte.mdpanel",
+  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "description": "Add markdown panel support",
+  "private": true,
+  "scripts": {
+    "sync:declaration": "tailchat declaration github"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "react": "18.2.0",
+    "styled-components": "^5.3.6"
+  }
+}

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

@@ -0,0 +1,81 @@
+import React, { useEffect, useState } from 'react';
+import {
+  GroupExtraDataPanel,
+  Markdown,
+  MarkdownEditor,
+} from '@capital/component';
+import styled from 'styled-components';
+import { Translate } from '../translate';
+
+const MainContent = styled.div`
+  padding: 10px;
+`;
+
+const EditModalContent = styled.div`
+  padding: 10px;
+  width: 80vw;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .main {
+    flex: 1;
+    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)}
+        imageUsage="group"
+      />
+    );
+  });
+MarkdownEditorRender.displayName = 'MarkdownEditorRender';
+
+const MarkdownPanel: React.FC = React.memo(() => {
+  return (
+    <GroupExtraDataPanel
+      names={['markdown']}
+      render={(dataMap: Record<string, string>) => {
+        return (
+          <MainContent>
+            <Markdown raw={dataMap['markdown'] ?? ''} allowIframe={true} />
+          </MainContent>
+        );
+      }}
+      renderEdit={(dataMap: Record<string, string>) => {
+        return (
+          <EditModalContent>
+            <div>{Translate.editTip}</div>
+
+            <div className="main">
+              <MarkdownEditorRender dataMap={dataMap} />
+            </div>
+          </EditModalContent>
+        );
+      }}
+    />
+  );
+});
+MarkdownPanel.displayName = 'MarkdownPanel';
+
+export default MarkdownPanel;

client/web/plugins/com.msgbyte.mdpanel/src/index.tsx

@@ -0,0 +1,20 @@
+import { regGroupPanel } from '@capital/common';
+import { Loadable } from '@capital/component';
+import { Translate } from './translate';
+
+const PLUGIN_ID = 'com.msgbyte.mdpanel';
+const PLUGIN_NAME = 'Markdown Panel';
+
+console.log(`Plugin ${PLUGIN_NAME}(${PLUGIN_ID}) is loaded`);
+
+/**
+ * @note 应该用 PLUGIN_ID 而不是 PLUGIN_NAME, 后续需要逐步迁移
+ */
+regGroupPanel({
+  name: `${PLUGIN_NAME}/customwebpanel`,
+  label: Translate.name,
+  provider: PLUGIN_NAME,
+  render: Loadable(() => import('./group/MarkdownPanel'), {
+    componentName: `${PLUGIN_ID}:MarkdownPanel`,
+  }),
+});

client/web/plugins/com.msgbyte.mdpanel/src/translate.ts

@@ -0,0 +1,13 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  name: localTrans({
+    'zh-CN': 'Markdown 面板',
+    'en-US': 'Markdown Panel',
+  }),
+  editTip: localTrans({
+    'zh-CN': '使用markdown语法编辑, 关闭窗口自动保存',
+    'en-US':
+      'Edit with markdown syntax, close the window and save automatically',
+  }),
+};

client/web/plugins/com.msgbyte.mdpanel/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  }
+}

client/web/plugins/com.msgbyte.mdpanel/types/tailchat.d.ts

@@ -0,0 +1,2 @@
+declare module '@capital/common';
+declare module '@capital/component';