refactor(admin): host practice dialogs

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

+import { useEffect } from 'react'
+import { Modal } from 'antd'
+import { useDispatch } from 'react-redux'
+import { setPracticeRandom } from '@/store/modules/editor'
+import PracticeInsertDialog from './PracticeInsertDialog'
+import PracticeSettingsDialog from './PracticeSettingsDialog'
+
+const classNames = { header: 'editor-header-customer', body: 'editor-body-customer', wrapper: 'editor-wrapper-customer' }
+
+export function PracticeInsertFeatureDialog({ open, onClose, runtime }) {
+  return <Modal open={open} footer={null} centered destroyOnHidden title="插入交互练习" classNames={classNames} maskClosable={false} onCancel={onClose}>
+    <PracticeInsertDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} setPracticeOpenVisible={visible => !visible && onClose()} />
+  </Modal>
+}
+
+export function PracticeSettingsFeatureDialog({ open, onClose, payload, runtime }) {
+  const dispatch = useDispatch()
+  useEffect(() => {
+    dispatch(setPracticeRandom({ practiceNum: payload.practiceNum, practiceTitle: payload.title, practiceTheme: payload.theme }))
+    return () => dispatch(setPracticeRandom({ practiceNum: null, practiceTitle: null }))
+  }, [dispatch, payload])
+
+  return <Modal open={open} footer={null} centered destroyOnHidden title={null} classNames={{ header: 'practice-topic-header', body: 'practice-topic-content', wrapper: 'practice-topic-modal' }} maskClosable={false} closeIcon={false} width="90%" onCancel={onClose}>
+    <PracticeSettingsDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} closePanel={onClose} />
+  </Modal>
+}

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { PracticeInsertFeatureDialog, PracticeSettingsFeatureDialog } from './FeatureDialogs'
 
 export default defineEditorFeature({
   id: 'practice',
   menus: [{ order: 100, config: menu }],
   nodeModules: [{ order: 90, types: ['chapterPractice'], module: nodeModule }],
-  events: [{ name: 'PracticeMenuClick', handler: ({ runtime }) => runtime.openPractice() }],
+  dialogs: [{ id: 'practice.insert', component: PracticeInsertFeatureDialog }, { id: 'practice.settings', component: PracticeSettingsFeatureDialog }],
+  events: [{ name: 'PracticeMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'practice.insert') }],
 })

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

 import { DomEditor, SlateTransforms, SlateEditor } from "@wangeditor/editor";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 import iconClose from "@/assets/images/icon_chapter_close.png";
 import { delChapterTopic } from "../../utils/request";
 import "../../utils/iconfont";
@@ -215,10 +216,7 @@ const renderPractice = (elem, children, editor) => {
           try {
             callback && callback(practiceNum, title);
           } catch (e) {}
-          editor.emit("wangeditor-customer:legacy-dialog", {
-            key: "practiceNum",
-            payload: { practiceNum, title, theme, random: Math.random() },
-          });
+          openEditorDialog(editor, 'practice.settings', { practiceNum, title, theme, random: Math.random() })
         } /* 其他... */,
       },
     },

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

@@ -4,8 +4,7 @@ import { EyeOutlined, SaveOutlined, CloseOutlined, HistoryOutlined } from "@ant-
 import dayjs from "dayjs";
 import "../utils/iconfont";
 
-import { useSelector, useDispatch } from "react-redux";
-import { setPracticeRandom } from "@/store/modules/editor";
+import { useSelector } from "react-redux";
 // import formulaEditor from 'easy-formula-editor'
 import "../utils/jax.less";
 import { Boot } from "@wangeditor/editor";
@@ -23,9 +22,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 
-import PracticeModal from "../features/practice/PracticeInsertDialog";
 
-import PracticeSettingModal from "../features/practice/PracticeSettingsDialog";
 
 import PreviewModal from "../features/preview/PreviewDialog";
 import HistoryModal from "../features/history/HistoryDialog";
@@ -54,7 +51,6 @@ const WangEditorCustomer = (props, ref) => {
     isView = false,
   } = props;
 
-  const dispatch = useDispatch();
   // 自动保存时间
   const { autosaveTime } = useSelector((state) => state.editor);
 
@@ -66,34 +62,11 @@ const WangEditorCustomer = (props, ref) => {
   const [content, setContent] = useState(html);
   const saveRef = useRef();
 
-  const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
-  const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
 
   const [priviewVisible, setPreviewVisible] = useState(false);
   const [historyVisible, setHistoryVisible] = useState(false); //点击历史
 
 
-  const handleLegacyDialog = ({ key, payload }) => {
-    if (key === "practiceNum") {
-      const { practiceNum, title, theme } = payload;
-      dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
-      setPracticeVisible(true);
-    }
-  };
-
-  useEffect(() => {
-    if (!editor) return;
-    editor.on("wangeditor-customer:legacy-dialog", handleLegacyDialog);
-    return () => {
-      editor.off("wangeditor-customer:legacy-dialog", handleLegacyDialog);
-    };
-  }, [editor]);
-
-  const closePanel = () => {
-    dispatch(setPracticeRandom({ practiceNum: null, practiceTitle: null }));
-    setPracticeVisible(false);
-  };
-
   useImperativeHandle(ref, () => {
     return {
       editor,
@@ -171,8 +144,6 @@ const WangEditorCustomer = (props, ref) => {
     ],
   };
 
-  const practiceRef = useRef();
-  const practiceSettingRef = useRef();
   const previewRef = useRef();
 
   const jsonContent = [
@@ -258,7 +229,6 @@ const WangEditorCustomer = (props, ref) => {
   };
 
   const featureRuntime = {
-    openPractice: () => setPracticeOpenVisible(true),
   }
   useEditorFeatureEvents({ editor, registry: editorFeatureRegistry, runtime: featureRuntime })
 
@@ -343,58 +313,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </div>
       {!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
-      {/* 插入练习 */}
-      <Modal
-        open={practiceOpenVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="插入交互练习"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setPracticeOpenVisible(false)}
-      >
-        <PracticeModal
-          ref={practiceRef}
-          chapterId={chapterId}
-          bookId={bookId}
-          editor={editor}
-          setPracticeOpenVisible={setPracticeOpenVisible}
-        />
-      </Modal>
-
-      <Modal
-        open={practiceVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title={null}
-        classNames={{
-          header: "practice-topic-header",
-          body: "practice-topic-content",
-          wrapper: "practice-topic-modal",
-        }}
-        maskClosable={false}
-        onCancel={closePanel}
-        closeIcon={false}
-        width="90%"
-      >
-        <PracticeSettingModal
-          ref={practiceSettingRef}
-          nodes={
-            practiceRef.current && practiceRef.current.nodes ? practiceRef.current.nodes : null
-          }
-          chapterId={chapterId}
-          bookId={bookId}
-          editor={editor}
-          closePanel={closePanel}
-        />
-      </Modal>
-
       {/* 预览 */}
       <Modal
         open={priviewVisible}