refactor(admin): host chapter structure dialogs

apps/admin/src/common/wangeditor-customer/features/chapter-structure/FeatureDialogs.jsx

+import { Modal } from 'antd'
+import TitleDialog from './TitleDialog'
+import SectionDialog from './SectionDialog'
+
+const classNames = { header: 'editor-header-customer', body: 'editor-body-customer', wrapper: 'editor-wrapper-customer' }
+
+export function ChapterTitleFeatureDialog({ open, onClose, payload, runtime }) {
+  return <Modal open={open} footer={null} centered destroyOnHidden title="插入章头" classNames={classNames} maskClosable={false} onCancel={onClose}>
+    <TitleDialog editor={runtime.editor} titleInfo={payload} setTitleInfo={() => {}} setTitleVisible={visible => !visible && onClose()} />
+  </Modal>
+}
+
+export function ChapterSectionFeatureDialog({ open, onClose, payload, runtime }) {
+  return <Modal open={open} footer={null} centered destroyOnHidden title="插入节头" classNames={classNames} maskClosable={false} onCancel={onClose}>
+    <SectionDialog editor={runtime.editor} sectionInfo={payload} setSectionInfo={() => {}} setSectionVisible={visible => !visible && onClose()} />
+  </Modal>
+}

apps/admin/src/common/wangeditor-customer/features/chapter-structure/feature.js

@@ -3,6 +3,8 @@ import itemMenu from './section-menu'
 import titleMenu from './title-menu'
 import sectionNodeModule from './section-node'
 import headerNodeModule from './title-node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { ChapterTitleFeatureDialog, ChapterSectionFeatureDialog } from './FeatureDialogs'
 
 export default defineEditorFeature({
   id: 'chapter-structure',
@@ -11,8 +13,12 @@ export default defineEditorFeature({
     { order: 10, types: ['chapterSection'], module: sectionNodeModule },
     { order: 20, types: ['chapterHeader'], module: headerNodeModule },
   ],
+  dialogs: [
+    { id: 'chapter-structure.title', component: ChapterTitleFeatureDialog },
+    { id: 'chapter-structure.section', component: ChapterSectionFeatureDialog },
+  ],
   events: [
-    { name: 'ChapterItemMenuClick', handler: ({ runtime }) => runtime.openSection() },
-    { name: 'ChapterTitleClick', handler: ({ runtime }) => runtime.openTitle() },
+    { name: 'ChapterItemMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'chapter-structure.section') },
+    { name: 'ChapterTitleClick', handler: ({ editor }) => openEditorDialog(editor, 'chapter-structure.title') },
   ],
 })

apps/admin/src/common/wangeditor-customer/features/chapter-structure/section-node.js

 import { DomEditor, SlateTransforms } from "@wangeditor/editor";
 import iconClose from "@/assets/images/icon_chapter_close.png";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 import { findNodeWithParent } from "../../utils/setting";
 
 const withChapterSectionNode = (editor) => {
@@ -117,7 +118,7 @@ const renderChapterSection = (elem, children, editor) => {
             size: size,
             family: family,
           };
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterItemNum", payload: data });
+          openEditorDialog(editor, 'chapter-structure.section', data)
           callback && callback(data);
         } /* 其他... */,
       },

apps/admin/src/common/wangeditor-customer/features/chapter-structure/title-node.js

 import { DomEditor, SlateTransforms } from "@wangeditor/editor";
 import iconClose from "@/assets/images/icon_chapter_close.png";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 import { findNodeWithParent } from "../../utils/setting";
 
 const withChapterHeaderNode = (editor) => {
@@ -123,7 +124,7 @@ const renderChapterHeader = (elem, children, editor) => {
             size: size,
             family: family,
           };
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "chapterTitleNum", payload: data });
+          openEditorDialog(editor, 'chapter-structure.title', data)
           callback && callback(data);
         } /* 其他... */,
       },

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

@@ -23,8 +23,6 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 
-import ChapterTitleModal from "../features/chapter-structure/TitleDialog";
-import ChapterItemModal from "../features/chapter-structure/SectionDialog";
 import PracticeModal from "../features/practice/PracticeInsertDialog";
 import TooltipModal from "../features/tooltip/TooltipDialog";
 import LinkModal from "../features/link/LinkDialog";
@@ -71,10 +69,6 @@ const WangEditorCustomer = (props, ref) => {
   const [content, setContent] = useState(html);
   const saveRef = useRef();
 
-  const [titleVisible, setTitleVisible] = useState(false); // 章头
-  const [titleInfo, setTitleInfo] = useState({});
-  const [sectionVisible, setSectionVisible] = useState(false);
-  const [sectionInfo, setSectionInfo] = useState({}); // 节头
   const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
   const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
   const [tooltipVisible, setTooltipVisible] = useState(false); // 气泡框
@@ -90,13 +84,7 @@ const WangEditorCustomer = (props, ref) => {
   const [selectionSize, setSelectionSize] = useState(16); // 当前字号大小
 
   const handleLegacyDialog = ({ key, payload }) => {
-    if (key === "chapterTitleNum") {
-      setTitleInfo(payload);
-      setTitleVisible(true);
-    } else if (key === "chapterItemNum") {
-      setSectionInfo(payload);
-      setSectionVisible(true);
-    } else if (key === "practiceNum") {
+    if (key === "practiceNum") {
       const { practiceNum, title, theme } = payload;
       dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
       setPracticeVisible(true);
@@ -235,8 +223,6 @@ const WangEditorCustomer = (props, ref) => {
   };
 
   const tooltipRef = useRef();
-  const chapterTitleRef = useRef();
-  const chapterItemRef = useRef();
   const practiceRef = useRef();
   const practiceSettingRef = useRef();
   const previewRef = useRef();
@@ -324,8 +310,6 @@ const WangEditorCustomer = (props, ref) => {
   };
 
   const featureRuntime = {
-    openTitle: () => setTitleVisible(true),
-    openSection: () => setSectionVisible(true),
     openPractice: () => setPracticeOpenVisible(true),
     openTooltip: () => setTooltipVisible(true),
     openLink: () => setLinkVisible(true),
@@ -417,52 +401,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </div>
       {!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
-      <Modal
-        open={titleVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="插入章头"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setTitleVisible(false)}
-      >
-        <ChapterTitleModal
-          ref={chapterTitleRef}
-          editor={editor}
-          setTitleVisible={setTitleVisible}
-          titleInfo={titleInfo}
-          setTitleInfo={setTitleInfo}
-        />
-      </Modal>
-
-      <Modal
-        open={sectionVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="插入节头"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setSectionVisible(false)}
-      >
-        <ChapterItemModal
-          ref={chapterItemRef}
-          editor={editor}
-          setSectionVisible={setSectionVisible}
-          sectionInfo={sectionInfo}
-          setSectionInfo={setSectionInfo}
-        />
-      </Modal>
-
       {/* 插入练习 */}
       <Modal
         open={practiceOpenVisible}