refactor(admin): host media feature dialogs

apps/admin/src/common/wangeditor-customer/features/audio/AudioDialog.jsx

-import { useState, forwardRef, useImperativeHandle } from "react";
+import { useState } from "react";
 import { Modal, Divider, Upload, Input, Space, Button, Form, Spin, message } from "antd";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { SlateTransforms, SlateEditor, SlateElement } from "@wangeditor/editor";
@@ -7,24 +7,17 @@ import { uploadFile } from "@/utils/oss";
 
 const { Dragger } = Upload;
 
-const AudioModal = (props, ref) => {
-  const { editor } = props;
+const AudioModal = ({ open, onClose, runtime }) => {
+  const { editor } = runtime;
 
   const fileAccept = [".mp3", ".wav", ".ogg"];
   const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
   const [uploading, setUploading] = useState(false); // 文件上传状态
   const [progress, setProgress] = useState(0);
   const [file, setFile] = useState({});
 
   const [audioUrl, setAudioUrl] = useState("");
 
-  useImperativeHandle(ref, () => {
-    return {
-      setVisible,
-    };
-  });
-
   const uploadProps = {
     name: "file",
     maxCount: 1,
@@ -90,13 +83,13 @@ const AudioModal = (props, ref) => {
     setProgress(0);
     setUploading(false);
     form.resetFields();
-    setVisible(false);
+    onClose();
   };
 
   return (
     <div>
       <Modal
-        open={visible}
+        open={open}
         footer={null}
         centered
         destroyOnHidden
@@ -107,7 +100,7 @@ const AudioModal = (props, ref) => {
           wrapper: "editor-wrapper-customer",
         }}
         maskClosable={false}
-        onCancel={() => setVisible(false)}
+        onCancel={onClose}
       >
         <Divider />
         <div className="editor-content-form">
@@ -164,7 +157,7 @@ const AudioModal = (props, ref) => {
             </Form.Item>
             <Form.Item className="editor-form-buttons">
               <Space>
-                <Button type="default" disabled={uploading} onClick={() => setVisible(false)}>
+                <Button type="default" disabled={uploading} onClick={onClose}>
                   取消
                 </Button>
                 <Button type="primary" disabled={uploading} htmlType="submit">
@@ -179,4 +172,4 @@ const AudioModal = (props, ref) => {
   );
 };
 
-export default forwardRef(AudioModal);
+export default AudioModal;

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import AudioDialog from './AudioDialog'
 
 export default defineEditorFeature({
   id: 'audio',
   menus: [{ order: 50, config: menu }],
   nodeModules: [{ order: 50, types: ['chapterAudio'], module: nodeModule }],
-  events: [{ name: 'AudioMenuClick', handler: ({ runtime }) => runtime.openAudio() }],
+  dialogs: [{ id: 'audio.insert', component: AudioDialog }],
+  events: [{ name: 'AudioMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'audio.insert') }],
 })

apps/admin/src/common/wangeditor-customer/features/formula/FormulaDialog.jsx

-import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Divider, Space, Button, message } from "antd";
 // import formulaEditor from 'easy-formula-editor';
 
 import "../../index.less";
 
-const FormulaModal = (props, ref) => {
-  const { editor } = props;
-  const [visible, setVisible] = useState(false);
+const FormulaModal = ({ open, onClose, runtime }) => {
+  const { editor } = runtime;
   const [editor2, setEditor2] = useState(null);
 
-  useImperativeHandle(ref, () => {
-    return {
-      setVisible,
-    };
-  });
-
   useEffect(() => {
-    if (visible) {
+    if (open) {
       setTimeout(() => {
         const editor2 = new formulaEditor();
         // 增加预设公式
@@ -28,7 +21,7 @@ const FormulaModal = (props, ref) => {
     } else {
       editor2 && editor2.destoryDom();
     }
-  }, [visible]);
+  }, [open]);
 
   const insertFormula = () => {
     editor.restoreSelection();
@@ -44,7 +37,7 @@ const FormulaModal = (props, ref) => {
         formulaHtml: html,
         children: [{ text: "" }],
       });
-      setVisible(false);
+      onClose();
     } else {
       message.error("请选择公式内容！");
     }
@@ -53,7 +46,7 @@ const FormulaModal = (props, ref) => {
   return (
     <div>
       <Modal
-        open={visible}
+        open={open}
         footer={null}
         centered
         destroyOnHidden
@@ -64,7 +57,7 @@ const FormulaModal = (props, ref) => {
           wrapper: "editor-wrapper-customer",
         }}
         maskClosable={false}
-        onCancel={() => setVisible(false)}
+        onCancel={onClose}
         width="900px"
       >
         <Divider />
@@ -73,7 +66,7 @@ const FormulaModal = (props, ref) => {
         </div>
         <div className="formula-buttons">
           <Space>
-            <Button type="default" onClick={() => setVisible(false)}>
+            <Button type="default" onClick={onClose}>
               取消
             </Button>
             <Button type="primary" onClick={insertFormula}>
@@ -86,4 +79,4 @@ const FormulaModal = (props, ref) => {
   );
 };
 
-export default forwardRef(FormulaModal);
+export default FormulaModal;

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import FormulaDialog from './FormulaDialog'
 
 export default defineEditorFeature({
   id: 'formula',
   menus: [{ order: 60, config: menu }],
   nodeModules: [{ order: 80, types: ['chapterFormula'], module: nodeModule }],
-  events: [{ name: 'FormulaMenuClick', handler: ({ runtime }) => runtime.openFormula() }],
+  dialogs: [{ id: 'formula.insert', component: FormulaDialog }],
+  events: [{ name: 'FormulaMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'formula.insert') }],
 })

apps/admin/src/common/wangeditor-customer/features/video/VideoDialog.jsx

-import { useState, useEffect, forwardRef, useImperativeHandle } from "react";
+import { useState, useEffect } from "react";
 import { Modal, Divider, Upload, Input, Space, Button, Form, Spin, message } from "antd";
 import { CloudUploadOutlined } from "@ant-design/icons";
 import { SlateTransforms, SlateEditor, SlateElement } from "@wangeditor/editor";
@@ -8,12 +8,11 @@ import { uploadFile } from "@/utils/oss";
 
 const { Dragger } = Upload;
 
-const VideoModal = (props, ref) => {
-  const { editor } = props;
+const VideoModal = ({ open, onClose, runtime }) => {
+  const { editor } = runtime;
 
   const fileAccept = [".ogg", ".mp4", ".webm"];
   const [form] = Form.useForm();
-  const [visible, setVisible] = useState(false);
   const [uploading, setUploading] = useState(false); // 文件上传状态
   const [progress, setProgress] = useState(0);
   const [file, setFile] = useState({});
@@ -21,16 +20,10 @@ const VideoModal = (props, ref) => {
   const [videoUrl, setVideoUrl] = useState("");
 
   useEffect(() => {
-    if (!visible) {
+    if (!open) {
       setVideoUrl("");
     }
-  }, [visible]);
-
-  useImperativeHandle(ref, () => {
-    return {
-      setVisible,
-    };
-  });
+  }, [open]);
 
   const uploadProps = {
     name: "file",
@@ -97,13 +90,13 @@ const VideoModal = (props, ref) => {
     setProgress(0);
     setUploading(false);
     form.resetFields();
-    setVisible(false);
+    onClose();
   };
 
   return (
     <div>
       <Modal
-        open={visible}
+        open={open}
         footer={null}
         centered
         destroyOnHidden
@@ -114,7 +107,7 @@ const VideoModal = (props, ref) => {
           wrapper: "editor-wrapper-customer",
         }}
         maskClosable={false}
-        onCancel={() => setVisible(false)}
+        onCancel={onClose}
       >
         <Divider />
         <div className="editor-content-form">
@@ -175,7 +168,7 @@ const VideoModal = (props, ref) => {
             </Form.Item>
             <Form.Item className="editor-form-buttons">
               <Space>
-                <Button type="default" disabled={uploading} onClick={() => setVisible(false)}>
+                <Button type="default" disabled={uploading} onClick={onClose}>
                   取消
                 </Button>
                 <Button type="primary" disabled={uploading} htmlType="submit">
@@ -190,4 +183,4 @@ const VideoModal = (props, ref) => {
   );
 };
 
-export default forwardRef(VideoModal);
+export default VideoModal;

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import VideoDialog from './VideoDialog'
 
 export default defineEditorFeature({
   id: 'video',
   menus: [{ order: 40, config: menu }],
   nodeModules: [{ order: 40, types: ['chapterVideo'], module: nodeModule }],
-  events: [{ name: 'VideoMenuClick', handler: ({ runtime }) => runtime.openVideo() }],
+  dialogs: [{ id: 'video.insert', component: VideoDialog }],
+  events: [{ name: 'VideoMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'video.insert') }],
 })

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

@@ -23,12 +23,9 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 
-import VideoModal from "../features/video/VideoDialog";
-import AudioModal from "../features/audio/AudioDialog";
 import ChapterTitleModal from "../features/chapter-structure/TitleDialog";
 import ChapterItemModal from "../features/chapter-structure/SectionDialog";
 import PracticeModal from "../features/practice/PracticeInsertDialog";
-import FormulaModal from "../features/formula/FormulaDialog";
 import TooltipModal from "../features/tooltip/TooltipDialog";
 import LinkModal from "../features/link/LinkDialog";
 import ExpandModal from "../features/expand-read/ExpandReadDialog";
@@ -237,9 +234,6 @@ const WangEditorCustomer = (props, ref) => {
     ],
   };
 
-  const videoRef = useRef();
-  const audioRef = useRef();
-  const formulaRef = useRef();
   const tooltipRef = useRef();
   const chapterTitleRef = useRef();
   const chapterItemRef = useRef();
@@ -330,12 +324,9 @@ const WangEditorCustomer = (props, ref) => {
   };
 
   const featureRuntime = {
-    openVideo: () => videoRef.current?.setVisible(true),
-    openAudio: () => audioRef.current?.setVisible(true),
     openTitle: () => setTitleVisible(true),
     openSection: () => setSectionVisible(true),
     openPractice: () => setPracticeOpenVisible(true),
-    openFormula: () => formulaRef.current?.setVisible(true),
     openTooltip: () => setTooltipVisible(true),
     openLink: () => setLinkVisible(true),
     openExpandRead: () => setExpandVisible(true),
@@ -426,8 +417,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </div>
       {!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
-      <VideoModal ref={videoRef} editor={editor} />
-      <AudioModal ref={audioRef} editor={editor} />
       <Modal
         open={titleVisible}
         footer={null}
@@ -498,7 +487,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </Modal>
 
-      <FormulaModal ref={formulaRef} editor={editor} />
       <Modal
         open={tooltipVisible}
         footer={null}