refactor(admin): host expand read dialog

apps/admin/src/common/wangeditor-customer/features/expand-read/FeatureDialog.jsx

+import { Modal } from 'antd'
+import ExpandReadDialog from './ExpandReadDialog'
+
+export default function ExpandReadFeatureDialog({ open, onClose, payload, runtime }) {
+  return <Modal open={open} footer={null} centered destroyOnHidden title="扩展阅读" classNames={{ header: 'editor-header-customer', body: 'editor-body-customer', wrapper: 'editor-wrapper-customer' }} maskClosable={false} onCancel={onClose} width="70%">
+    <ExpandReadDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} expandInfo={payload} selectionSize={payload.selectionSize || 18} setExpandInfo={() => {}} setExpandVisible={visible => !visible && onClose()} />
+  </Modal>
+}

apps/admin/src/common/wangeditor-customer/features/expand-read/feature.js

@@ -2,6 +2,9 @@ import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
 import simpleNodeModule from './simple-node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { getSelectionFontSize } from '../../core/selection'
+import ExpandReadFeatureDialog from './FeatureDialog'
 
 export default defineEditorFeature({
   id: 'expand-read',
@@ -10,5 +13,6 @@ export default defineEditorFeature({
     { order: 120, types: ['chapterExpandRead'], module: nodeModule },
     { order: 130, types: ['chapterExpandReadSimple'], module: simpleNodeModule },
   ],
-  events: [{ name: 'ExpandReadClick', handler: ({ runtime }) => { runtime.captureSelectionFontSize(); runtime.openExpandRead() } }],
+  dialogs: [{ id: 'expand-read.insert', component: ExpandReadFeatureDialog }, { id: 'expand-read.edit', component: ExpandReadFeatureDialog }],
+  events: [{ name: 'ExpandReadClick', handler: ({ editor }) => openEditorDialog(editor, 'expand-read.insert', { selectionSize: getSelectionFontSize(editor) }) }],
 })

apps/admin/src/common/wangeditor-customer/features/expand-read/node.js

@@ -6,6 +6,7 @@ import {
   SlateNode,
 } from "@wangeditor/editor";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 import iconExpand from "@/assets/images/editor/icon_expand_read.png";
 import iconClose from "@/assets/images/icon_chapter_close.png";
 import { findNodeWithParent } from "../../utils/setting";
@@ -229,7 +230,7 @@ const renderExpandRead = (elem, children, editor) => {
             flex,
             theme,
           };
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterExpand", payload: data });
+          openEditorDialog(editor, 'expand-read.edit', data)
         },
       },
     },

apps/admin/src/common/wangeditor-customer/features/expand-read/simple-node.js

@@ -6,6 +6,7 @@ import {
   SlateNode,
 } from "@wangeditor/editor";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 import iconExpand from "@/assets/images/editor/icon_expand_tips.png";
 import iconExpandT from "@/assets/images/editor/icon_expand_editor.png";
 
@@ -115,7 +116,7 @@ const renderExpandRead = (elem, children, editor) => {
             theme,
             fontsize,
           };
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterExpand", payload: data });
+          openEditorDialog(editor, 'expand-read.edit', data)
         },
       },
     },

apps/admin/src/common/wangeditor-customer/shell/WangEditorCustomer.jsx

@@ -24,7 +24,6 @@ dayjs.extend(relativeTime);
 
 
 import PracticeModal from "../features/practice/PracticeInsertDialog";
-import ExpandModal from "../features/expand-read/ExpandReadDialog";
 
 import PracticeSettingModal from "../features/practice/PracticeSettingsDialog";
 
@@ -69,22 +68,16 @@ const WangEditorCustomer = (props, ref) => {
 
   const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
   const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
-  const [expandVisible, setExpandVisible] = useState(false); // 扩展阅读
-  const [expandInfo, setExpandInfo] = useState({}); // 扩展阅读内容
 
   const [priviewVisible, setPreviewVisible] = useState(false);
   const [historyVisible, setHistoryVisible] = useState(false); //点击历史
 
-  const [selectionSize, setSelectionSize] = useState(16); // 当前字号大小
 
   const handleLegacyDialog = ({ key, payload }) => {
     if (key === "practiceNum") {
       const { practiceNum, title, theme } = payload;
       dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
       setPracticeVisible(true);
-    } else if (key === "chapterExpand") {
-      setExpandInfo(payload);
-      setExpandVisible(true);
     }
   };
 
@@ -107,38 +100,6 @@ const WangEditorCustomer = (props, ref) => {
     };
   });
 
-  const listenNodeStyle = (path) => {
-    const children = editor.children;
-    const getNodeFontSize = (targetNode) => {
-      const element = editor.toDOMNode(targetNode);
-      const textElement = element.querySelector("[data-slate-string='true']");
-      const parentNode = editor.getParentNode(targetNode);
-      const fallbackElement = parentNode ? editor.toDOMNode(parentNode) : element;
-      return window.getComputedStyle(textElement || fallbackElement).fontSize;
-    };
-    let node = null;
-    if (path[1] === 0) {
-      node = children[path[0]];
-      if (node.children.length > 0) {
-        setSelectionSize(parseInt(getNodeFontSize(node)));
-      } else {
-        node = children[path[0]].children[0];
-        if (node.fontSize) {
-          setSelectionSize(parseInt(node.fontSize));
-        } else {
-          setSelectionSize(parseInt(getNodeFontSize(node)));
-        }
-      }
-    } else {
-      node = children[path[0]].children[path[1]];
-      if (node.fontSize) {
-        setSelectionSize(parseInt(node.fontSize));
-      } else {
-        setSelectionSize(parseInt(getNodeFontSize(node)));
-      }
-    }
-  };
-
   // 工具栏配置
   const toolbarConfig = {
     toolbarKeys: [
@@ -298,10 +259,6 @@ const WangEditorCustomer = (props, ref) => {
 
   const featureRuntime = {
     openPractice: () => setPracticeOpenVisible(true),
-    openExpandRead: () => setExpandVisible(true),
-    captureSelectionFontSize: () => {
-      if (editor?.selection) listenNodeStyle(editor.selection.anchor.path)
-    },
   }
   useEditorFeatureEvents({ editor, registry: editorFeatureRegistry, runtime: featureRuntime })
 
@@ -410,34 +367,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </Modal>
 
-      {/* 扩展 */}
-      <Modal
-        open={expandVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="扩展阅读"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setExpandVisible(false)}
-        width="70%"
-      >
-        <ExpandModal
-          ref={previewRef}
-          editor={editor}
-          chapterId={chapterId}
-          bookId={bookId}
-          expandInfo={expandInfo}
-          setExpandInfo={setExpandInfo}
-          setExpandVisible={setExpandVisible}
-          selectionSize={selectionSize}
-        />
-      </Modal>
-
       <Modal
         open={practiceVisible}
         footer={null}