From 721da6f34c8ab93aaa5d4dd6bb422a74480397fc Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 15 Jul 2023 16:33:01 +0800
Subject: [PATCH] perf: use group extra to storage custom web panel html

and compatible with old meta webpanel storage
---
 .../src/group/GroupCustomWebPanelRender.tsx   | 77 +++++++++++++++++--
 .../plugins/com.msgbyte.webview/src/index.tsx | 10 +--
 .../com.msgbyte.webview/src/translate.ts      |  8 +-
 client/web/src/plugin/common/index.ts         |  1 +
 client/web/src/plugin/common/reg.ts           |  2 +-
 website/docs/plugins/api/common.md            | 10 +--
 6 files changed, 83 insertions(+), 25 deletions(-)

diff --git a/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx b/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
index 31fc1fc7..9452a873 100644
--- a/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/group/GroupCustomWebPanelRender.tsx
@@ -1,6 +1,28 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Translate } from '../translate';
 import xss from 'xss';
+import { useWatch } from '@capital/common';
+import { GroupExtraDataPanel, TextArea } from '@capital/component';
+import styled from 'styled-components';
+
+const EditModalContent = styled.div`
+  padding: 10px;
+  width: 80vw;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .main {
+    flex: 1;
+    overflow: hidden;
+
+    > textarea {
+      height: 100%;
+      resize: none;
+    }
+  }
+`;
 
 function getInjectedStyle() {
   try {
@@ -15,10 +37,9 @@ function getInjectedStyle() {
   }
 }
 
-const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
-  const panelInfo = props.panelInfo;
+const GroupCustomWebPanelRender: React.FC<{ html: string }> = (props) => {
   const ref = useRef<HTMLIFrameElement>(null);
-  const html = panelInfo?.meta?.html;
+  const html = props.html;
 
   useEffect(() => {
     if (!ref.current || !html) {
@@ -31,7 +52,7 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
     doc.close();
   }, [html]);
 
-  if (!panelInfo) {
+  if (!html) {
     return <div>{Translate.notfound}</div>;
   }
 
@@ -39,4 +60,48 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
 };
 GroupCustomWebPanelRender.displayName = 'GroupCustomWebPanelRender';
 
-export default GroupCustomWebPanelRender;
+const GroupCustomWebPanelEditor: React.FC<{
+  initValue: string;
+  onChange: (html: string) => void;
+}> = React.memo((props) => {
+  const [html, setHtml] = useState(() => props.initValue ?? '');
+
+  useWatch([html], () => {
+    props.onChange(html);
+  });
+
+  return <TextArea value={html} onChange={(e) => setHtml(e.target.value)} />;
+});
+GroupCustomWebPanelEditor.displayName = 'GroupCustomWebPanelEditor';
+
+const GroupCustomWebPanel: React.FC<{ panelInfo: any }> = (props) => {
+  return (
+    <GroupExtraDataPanel
+      names={['html']}
+      render={(dataMap: Record<string, string>) => {
+        return (
+          <GroupCustomWebPanelRender
+            html={dataMap['html'] ?? props.panelInfo?.meta?.html ?? ''}
+          />
+        );
+      }}
+      renderEdit={(dataMap: Record<string, string>) => {
+        return (
+          <EditModalContent>
+            <div>{Translate.editTip}</div>
+
+            <div className="main">
+              <GroupCustomWebPanelEditor
+                initValue={dataMap['html'] ?? props.panelInfo?.meta?.html ?? ''}
+                onChange={(html) => (dataMap['html'] = html)}
+              />
+            </div>
+          </EditModalContent>
+        );
+      }}
+    />
+  );
+};
+GroupCustomWebPanel.displayName = 'GroupCustomWebPanel';
+
+export default GroupCustomWebPanel;
diff --git a/client/web/plugins/com.msgbyte.webview/src/index.tsx b/client/web/plugins/com.msgbyte.webview/src/index.tsx
index 2c7f7c1e..19e46222 100644
--- a/client/web/plugins/com.msgbyte.webview/src/index.tsx
+++ b/client/web/plugins/com.msgbyte.webview/src/index.tsx
@@ -33,15 +33,7 @@ regGroupPanel({
   name: `${PLUGIN_NAME}/customwebpanel`,
   label: Translate.customwebpanel,
   provider: PLUGIN_NAME,
-  extraFormMeta: [
-    {
-      type: 'textarea',
-      name: 'html',
-      label: Translate.htmlcode,
-      placeholder: Translate.customwebpanelPlaceholder,
-    },
-  ],
   render: Loadable(() => import('./group/GroupCustomWebPanelRender'), {
-    componentName: 'com.msgbyte.webview:GroupCustomWebPanelRender',
+    componentName: `${PLUGIN_NAME}:GroupCustomWebPanelRender`,
   }),
 });
diff --git a/client/web/plugins/com.msgbyte.webview/src/translate.ts b/client/web/plugins/com.msgbyte.webview/src/translate.ts
index 49d165f5..77c3a231 100644
--- a/client/web/plugins/com.msgbyte.webview/src/translate.ts
+++ b/client/web/plugins/com.msgbyte.webview/src/translate.ts
@@ -6,10 +6,6 @@ export const Translate = {
     'zh-CN': '自定义网页面板',
     'en-US': 'Custom Webview Panel',
   }),
-  customwebpanelPlaceholder: localTrans({
-    'zh-CN': '建议在第三方页面编辑完毕后粘贴到此处',
-    'en-US': 'Recommended to paste it here after editing the third-party page',
-  }),
   notfound: localTrans({
     'zh-CN': '加载失败, 面板信息不存在',
     'en-US': 'Loading failed, panel info does not exist',
@@ -26,4 +22,8 @@ export const Translate = {
     'zh-CN': '在外部打开',
     'en-US': 'Open in extra',
   }),
+  editTip: localTrans({
+    'zh-CN': '使用html语法编辑, 关闭窗口自动保存',
+    'en-US': 'Edit with html syntax, close the window and save automatically',
+  }),
 };
diff --git a/client/web/src/plugin/common/index.ts b/client/web/src/plugin/common/index.ts
index efebd62b..a7629a21 100644
--- a/client/web/src/plugin/common/index.ts
+++ b/client/web/src/plugin/common/index.ts
@@ -69,6 +69,7 @@ export {
   joinArray,
   useConverseMessageContext,
   loginWithToken,
+  useWatch,
 } from 'tailchat-shared';
 
 export { navigate } from '@/components/AppRouterApi';
diff --git a/client/web/src/plugin/common/reg.ts b/client/web/src/plugin/common/reg.ts
index 55391271..052104cf 100644
--- a/client/web/src/plugin/common/reg.ts
+++ b/client/web/src/plugin/common/reg.ts
@@ -88,7 +88,7 @@ export interface PluginGroupPanel {
   /**
    * 额外的表单数据, 用于创建面板时使用
    */
-  extraFormMeta: MetaFormFieldMeta[];
+  extraFormMeta?: MetaFormFieldMeta[];
 
   /**
    * 该面板如何渲染
diff --git a/website/docs/plugins/api/common.md b/website/docs/plugins/api/common.md
index b7074a53..5a4ac5ba 100644
--- a/website/docs/plugins/api/common.md
+++ b/website/docs/plugins/api/common.md
@@ -11,11 +11,11 @@ Register Group Panel
 
 ```typescript
 regGroupPanel({
-   name: `com.msgbyte.webview/grouppanel`,
-   label: 'web panel',
-   provider: PLUGIN_NAME,
-   extraFormMeta: [{ type: 'text', name: 'url', label: 'URL' }],
-   render: GroupWebPanelRender,
+  name: `com.msgbyte.webview/grouppanel`,
+  label: 'web panel',
+  provider: PLUGIN_NAME,
+  extraFormMeta: [{ type: 'text', name: 'url', label: 'URL' }],
+  render: GroupWebPanelRender,
 });
 ```