perf: use group extra to storage custom web panel html

and compatible with old meta webpanel storage

Author: moonrailgun

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,12 +52,56 @@ const GroupCustomWebPanelRender: React.FC<{ panelInfo: any }> = (props) => {
     doc.close();
   }, [html]);
 
-  if (!panelInfo) {
+  if (!html) {
     return <div>{Translate.notfound}</div>;
   }
 
   return <iframe ref={ref} className="w-full h-full" />;
 };
 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;

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`,
   }),
 });

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',
+  }),
 };

client/web/src/plugin/common/index.ts

@@ -69,6 +69,7 @@ export {
   joinArray,
   useConverseMessageContext,
   loginWithToken,
+  useWatch,
 } from 'tailchat-shared';
 
 export { navigate } from '@/components/AppRouterApi';

client/web/src/plugin/common/reg.ts

@@ -88,7 +88,7 @@ export interface PluginGroupPanel {
   /**
    * 额外的表单数据, 用于创建面板时使用
    */
-  extraFormMeta: MetaFormFieldMeta[];
+  extraFormMeta?: MetaFormFieldMeta[];
 
   /**
    * 该面板如何渲染

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,
 });
 ```