refactor(admin): host image and gallery dialogs

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

+import { Modal } from 'antd'
+import GalleryDialog from './GalleryDialog'
+
+export default function GalleryFeatureDialog({ 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="800px">
+    <GalleryDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} isOnline={payload.isOnline} galleryInfo={payload.galleryInfo || {}} selectionSize={payload.selectionSize || 18} setGalleryInfo={() => {}} setGalleryVisible={visible => !visible && onClose()} />
+  </Modal>
+}

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

@@ -3,6 +3,9 @@ import menu from './menu'
 import onlineMenu from './online-menu'
 import nodeModule from './node'
 import inlineNodeModule from './inline-node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { getSelectionFontSize } from '../../core/selection'
+import GalleryFeatureDialog from './FeatureDialog'
 
 export default defineEditorFeature({
   id: 'gallery',
@@ -11,8 +14,12 @@ export default defineEditorFeature({
     { order: 60, types: ['chapterGallery'], module: nodeModule },
     { order: 70, types: ['chapterGalleryInline'], module: inlineNodeModule },
   ],
+  dialogs: [
+    { id: 'gallery.insert', component: GalleryFeatureDialog },
+    { id: 'gallery.edit', component: GalleryFeatureDialog },
+  ],
   events: [
-    { name: 'GalleryMenuClick', handler: ({ runtime }) => { runtime.captureSelectionFontSize(); runtime.openGallery({ isOnline: false }) } },
-    { name: 'GalleryOnlineMenuClick', handler: ({ runtime }) => { runtime.captureSelectionFontSize(); runtime.openGallery({ isOnline: true }) } },
+    { name: 'GalleryMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'gallery.insert', { isOnline: false, selectionSize: getSelectionFontSize(editor) }) },
+    { name: 'GalleryOnlineMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'gallery.insert', { isOnline: true, selectionSize: getSelectionFontSize(editor) }) },
   ],
 })

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

 import { DomEditor, SlateTransforms } from "@wangeditor/editor";
 import { h } from "snabbdom";
+import { openEditorDialog } from '../../core/editor-dialog'
 
 const withGalleryInlineNode = (editor) => {
   const { isInline, isVoid, normalizeNode } = editor;
@@ -83,7 +84,7 @@ const renderGalleryInline = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
+          openEditorDialog(editor, 'gallery.edit', {
               title,
               random: random,
               i: Math.random(),
@@ -91,7 +92,7 @@ const renderGalleryInline = (elem, children, editor) => {
               flex: flex,
               theme,
               fontsize,
-          } });
+          })
         },
       },
     },

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

@@ -3,6 +3,7 @@ import { h } from "snabbdom";
 import iconGallery from "@/assets/images/editor/icon_gallery_editor.png";
 import iconClose from "@/assets/images/icon_chapter_close.png";
 import { findNodeWithParent } from "../../utils/setting";
+import { openEditorDialog } from '../../core/editor-dialog'
 
 const withGalleryNode = (editor) => {
   const { isVoid, normalizeNode } = editor;
@@ -205,13 +206,13 @@ const renderGallery = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
+          openEditorDialog(editor, 'gallery.edit', {
               title,
               random: random,
               i: Math.random(),
               galleryList: galleryList,
               flex: flex,
-          } });
+          })
           callback && callback(title, random, galleryList, flex);
         },
       },
@@ -281,13 +282,13 @@ const renderGallery = (elem, children, editor) => {
             ev.stopPropagation();
             ev.preventDefault();
 
-            editor.emit("wangeditor-customer:legacy-dialog", { key: "galleryNum", payload: {
+            openEditorDialog(editor, 'gallery.edit', {
                 title,
                 random: random,
                 i: Math.random(),
                 galleryList: galleryList,
                 flex: flex,
-            } });
+            })
             callback && callback(title, random, galleryList, flex);
           },
         },

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

+import { Modal } from 'antd'
+import ImageDialog from './ImageDialog'
+
+export default function ImageFeatureDialog({ 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}>
+    <ImageDialog editor={runtime.editor} isOnline={payload.isOnline} imageInfo={payload.imageInfo || {}} setImageInfo={() => {}} setImageVisible={visible => !visible && onClose()} />
+  </Modal>
+}

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

@@ -3,6 +3,8 @@ import editMenu from './edit-menu'
 import onlineMenu from './online-menu'
 import nodeModule from './node'
 import { SlateEditor, SlateElement } from '@wangeditor/editor'
+import { openEditorDialog } from '../../core/editor-dialog'
+import ImageFeatureDialog from './FeatureDialog'
 
 const getSelectedImageInfo = editor => {
   const entries = SlateEditor.nodes(editor, {
@@ -24,9 +26,13 @@ export default defineEditorFeature({
   id: 'image',
   menus: [{ order: 10, config: onlineMenu }, { order: 110, config: editMenu }],
   nodeModules: [{ order: 30, types: ['chapterImage'], module: nodeModule }],
+  dialogs: [
+    { id: 'image.insert', component: ImageFeatureDialog },
+    { id: 'image.edit', component: ImageFeatureDialog },
+  ],
   events: [
-    { name: 'ImageMenuClick', handler: ({ runtime }) => runtime.openImage({ isOnline: false }) },
-    { name: 'ImageOnlineMenuClick', handler: ({ runtime }) => runtime.openImage({ isOnline: true }) },
-    { name: 'ImageEditorClick', handler: ({ editor, runtime }) => runtime.openImage({ isOnline: false, imageInfo: getSelectedImageInfo(editor) }) },
+    { name: 'ImageMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'image.insert', { isOnline: false }) },
+    { name: 'ImageOnlineMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'image.insert', { isOnline: true }) },
+    { name: 'ImageEditorClick', handler: ({ editor }) => openEditorDialog(editor, 'image.edit', { isOnline: false, imageInfo: getSelectedImageInfo(editor) }) },
   ],
 })

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

@@ -23,9 +23,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 dayjs.extend(relativeTime);
 
 
-import ImageModal from "../features/image/ImageDialog";
 import VideoModal from "../features/video/VideoDialog";
-import GalleryModal from "../features/gallery/GalleryDialog";
 import AudioModal from "../features/audio/AudioDialog";
 import ChapterTitleModal from "../features/chapter-structure/TitleDialog";
 import ChapterItemModal from "../features/chapter-structure/SectionDialog";
@@ -82,10 +80,6 @@ const WangEditorCustomer = (props, ref) => {
   const [sectionInfo, setSectionInfo] = useState({}); // 节头
   const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
   const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
-  const [galleryVisible, setGalleryVisible] = useState(false); // 画廊
-  const [galleryInfo, setGalleryInfo] = useState({});
-  const [imageVisible, setImageVisible] = useState(false); // 插入图片
-  const [imageInfo, setImageInfo] = useState({});
   const [tooltipVisible, setTooltipVisible] = useState(false); // 气泡框
   const [tooltipInfo, setTooltipInfo] = useState({}); // 气泡框
   const [linkVisible, setLinkVisible] = useState(false); // 气泡框
@@ -98,8 +92,6 @@ const WangEditorCustomer = (props, ref) => {
 
   const [selectionSize, setSelectionSize] = useState(16); // 当前字号大小
 
-  const [isOnline, setIsOnline] = useState(false);
-
   const handleLegacyDialog = ({ key, payload }) => {
     if (key === "chapterTitleNum") {
       setTitleInfo(payload);
@@ -111,9 +103,6 @@ const WangEditorCustomer = (props, ref) => {
       const { practiceNum, title, theme } = payload;
       dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
       setPracticeVisible(true);
-    } else if (key === "galleryNum") {
-      setGalleryInfo(payload);
-      setGalleryVisible(true);
     } else if (key === "tooltipNum") {
       setTooltipInfo(payload);
       setTooltipVisible(true);
@@ -248,8 +237,6 @@ const WangEditorCustomer = (props, ref) => {
     ],
   };
 
-  const imageRef = useRef();
-  const galleryRef = useRef();
   const videoRef = useRef();
   const audioRef = useRef();
   const formulaRef = useRef();
@@ -343,15 +330,6 @@ const WangEditorCustomer = (props, ref) => {
   };
 
   const featureRuntime = {
-    openImage: ({ isOnline, imageInfo }) => {
-      if (imageInfo) setImageInfo(imageInfo)
-      setIsOnline(isOnline)
-      setImageVisible(true)
-    },
-    openGallery: ({ isOnline }) => {
-      setIsOnline(isOnline)
-      setGalleryVisible(true)
-    },
     openVideo: () => videoRef.current?.setVisible(true),
     openAudio: () => audioRef.current?.setVisible(true),
     openTitle: () => setTitleVisible(true),
@@ -448,57 +426,7 @@ const WangEditorCustomer = (props, ref) => {
         />
       </div>
       {!isView && <EditorSidebar editor={editor} toolbarConfig={toolbarConfig} toolbarRef={toolbarRef} tabKey={tabKey} onTabChange={tabKeyChange} colorList={colorList} onApplyColor={setColor} />}
-      <Modal
-        open={imageVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="插入图片"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setImageVisible(false)}
-      >
-        <ImageModal
-          ref={imageRef}
-          isOnline={isOnline}
-          editor={editor}
-          setImageVisible={setImageVisible}
-          imageInfo={imageInfo}
-          setImageInfo={setImageInfo}
-        />
-      </Modal>
       <VideoModal ref={videoRef} editor={editor} />
-      <Modal
-        open={galleryVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="插入画廊"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setGalleryVisible(false)}
-        width="800px"
-      >
-        <GalleryModal
-          ref={galleryRef}
-          isOnline={isOnline}
-          editor={editor}
-          chapterId={chapterId}
-          bookId={bookId}
-          setGalleryVisible={setGalleryVisible}
-          galleryInfo={galleryInfo}
-          setGalleryInfo={setGalleryInfo}
-          selectionSize={selectionSize}
-        />
-      </Modal>
       <AudioModal ref={audioRef} editor={editor} />
       <Modal
         open={titleVisible}