refactor(admin): host inline editor dialogs

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

+import { Modal } from 'antd'
+import LinkDialog from './LinkDialog'
+
+export default function LinkFeatureDialog({ 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}>
+    <LinkDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} gData={runtime.gData} linkInfo={payload} selectionSize={payload.selectionSize || 18} setLinkInfo={() => {}} setLinkVisible={visible => !visible && onClose()} />
+  </Modal>
+}

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { getSelectionFontSize } from '../../core/selection'
+import LinkFeatureDialog from './FeatureDialog'
 
 export default defineEditorFeature({
   id: 'link',
   menus: [{ order: 120, config: menu }],
   nodeModules: [{ order: 110, types: ['chapterLink'], module: nodeModule }],
-  events: [{ name: 'CustomerLinkClick', handler: ({ runtime }) => { runtime.captureSelectionFontSize(); runtime.openLink() } }],
+  dialogs: [{ id: 'link.insert', component: LinkFeatureDialog }, { id: 'link.edit', component: LinkFeatureDialog }],
+  events: [{ name: 'CustomerLinkClick', handler: ({ editor }) => openEditorDialog(editor, 'link.insert', { selectionSize: getSelectionFontSize(editor) }) }],
 })

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

@@ -3,6 +3,7 @@ import icon_tooltip_editor from "@/assets/images/editor/icon_tooltip_editor.png"
 import { h } from "snabbdom";
 import iconLink from "@/assets/images/editor/icon_link_editor.png";
 import "../../utils/iconfont";
+import { openEditorDialog } from '../../core/editor-dialog'
 
 const withChapterLinkNode = (editor) => {
   const { isInline, isVoid, normalizeNode } = editor;
@@ -90,7 +91,7 @@ const renderChapterLink = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "linkNum", payload: {
+          openEditorDialog(editor, 'link.edit', {
               title,
               linktype,
               random: random,
@@ -99,7 +100,7 @@ const renderChapterLink = (elem, children, editor) => {
               chapters,
               theme,
               fontsize,
-          } });
+          })
         } /* 其他... */,
       },
     },

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

+import { Modal } from 'antd'
+import TooltipDialog from './TooltipDialog'
+
+export default function TooltipFeatureDialog({ 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}>
+    <TooltipDialog editor={runtime.editor} chapterId={runtime.chapterId} bookId={runtime.bookId} tooltipInfo={payload} selectionSize={payload.selectionSize || 18} setTooltipInfo={() => {}} setTooltipVisible={visible => !visible && onClose()} />
+  </Modal>
+}

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

 import { defineEditorFeature } from '../../core/define-editor-feature'
 import menu from './menu'
 import nodeModule from './node'
+import { openEditorDialog } from '../../core/editor-dialog'
+import { getSelectionFontSize } from '../../core/selection'
+import TooltipFeatureDialog from './FeatureDialog'
 
 export default defineEditorFeature({
   id: 'tooltip',
   menus: [{ order: 70, config: menu }],
   nodeModules: [{ order: 100, types: ['chapterTooltip'], module: nodeModule }],
-  events: [{ name: 'TooltipMenuClick', handler: ({ runtime }) => { runtime.captureSelectionFontSize(); runtime.openTooltip() } }],
+  dialogs: [{ id: 'tooltip.insert', component: TooltipFeatureDialog }, { id: 'tooltip.edit', component: TooltipFeatureDialog }],
+  events: [{ name: 'TooltipMenuClick', handler: ({ editor }) => openEditorDialog(editor, 'tooltip.insert', { selectionSize: getSelectionFontSize(editor) }) }],
 })

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

@@ -3,6 +3,7 @@ import icon_tooltip_editor from "@/assets/images/editor/icon_tooltip_editor.png"
 import { h } from "snabbdom";
 import "../../utils/iconfont";
 import { escapeHtml } from "../../utils/html";
+import { openEditorDialog } from '../../core/editor-dialog'
 
 const withChapterTooltipNode = (editor) => {
   const { isInline, isVoid, normalizeNode } = editor;
@@ -118,7 +119,7 @@ const renderChapterTooltip = (elem, children, editor) => {
           ev.stopPropagation();
           ev.preventDefault();
 
-          editor.emit("wangeditor-customer:legacy-dialog", { key: "tooltipNum", payload: {
+          openEditorDialog(editor, 'tooltip.edit', {
               title,
               tooltipType,
               random: random,
@@ -127,7 +128,7 @@ const renderChapterTooltip = (elem, children, editor) => {
               content,
               i: Math.random(),
               fontsize,
-          } });
+          })
         } /* 其他... */,
       },
     },

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

@@ -24,8 +24,6 @@ dayjs.extend(relativeTime);
 
 
 import PracticeModal from "../features/practice/PracticeInsertDialog";
-import TooltipModal from "../features/tooltip/TooltipDialog";
-import LinkModal from "../features/link/LinkDialog";
 import ExpandModal from "../features/expand-read/ExpandReadDialog";
 
 import PracticeSettingModal from "../features/practice/PracticeSettingsDialog";
@@ -71,10 +69,6 @@ const WangEditorCustomer = (props, ref) => {
 
   const [practiceOpenVisible, setPracticeOpenVisible] = useState(false); // 练习
   const [practiceVisible, setPracticeVisible] = useState(false); // 练习答题设置
-  const [tooltipVisible, setTooltipVisible] = useState(false); // 气泡框
-  const [tooltipInfo, setTooltipInfo] = useState({}); // 气泡框
-  const [linkVisible, setLinkVisible] = useState(false); // 气泡框
-  const [linkInfo, setLinkInfo] = useState({}); // 气泡框
   const [expandVisible, setExpandVisible] = useState(false); // 扩展阅读
   const [expandInfo, setExpandInfo] = useState({}); // 扩展阅读内容
 
@@ -88,12 +82,6 @@ const WangEditorCustomer = (props, ref) => {
       const { practiceNum, title, theme } = payload;
       dispatch(setPracticeRandom({ practiceNum, practiceTitle: title, practiceTheme: theme }));
       setPracticeVisible(true);
-    } else if (key === "tooltipNum") {
-      setTooltipInfo(payload);
-      setTooltipVisible(true);
-    } else if (key === "linkNum") {
-      setLinkInfo(payload);
-      setLinkVisible(true);
     } else if (key === "chapterExpand") {
       setExpandInfo(payload);
       setExpandVisible(true);
@@ -222,7 +210,6 @@ const WangEditorCustomer = (props, ref) => {
     ],
   };
 
-  const tooltipRef = useRef();
   const practiceRef = useRef();
   const practiceSettingRef = useRef();
   const previewRef = useRef();
@@ -311,8 +298,6 @@ const WangEditorCustomer = (props, ref) => {
 
   const featureRuntime = {
     openPractice: () => setPracticeOpenVisible(true),
-    openTooltip: () => setTooltipVisible(true),
-    openLink: () => setLinkVisible(true),
     openExpandRead: () => setExpandVisible(true),
     captureSelectionFontSize: () => {
       if (editor?.selection) listenNodeStyle(editor.selection.anchor.path)
@@ -425,58 +410,6 @@ const WangEditorCustomer = (props, ref) => {
         />
       </Modal>
 
-      <Modal
-        open={tooltipVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="气泡"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setTooltipVisible(false)}
-      >
-        <TooltipModal
-          ref={tooltipRef}
-          editor={editor}
-          chapterId={chapterId}
-          bookId={bookId}
-          tooltipInfo={tooltipInfo}
-          setTooltipInfo={setTooltipInfo}
-          setTooltipVisible={setTooltipVisible}
-          selectionSize={selectionSize}
-        />
-      </Modal>
-      <Modal
-        open={linkVisible}
-        footer={null}
-        centered
-        destroyOnHidden
-        title="链接"
-        classNames={{
-          header: "editor-header-customer",
-          body: "editor-body-customer",
-          wrapper: "editor-wrapper-customer",
-        }}
-        maskClosable={false}
-        onCancel={() => setLinkVisible(false)}
-      >
-        <LinkModal
-          ref={tooltipRef}
-          editor={editor}
-          chapterId={chapterId}
-          bookId={bookId}
-          gData={gData}
-          linkInfo={linkInfo}
-          setLinkInfo={setLinkInfo}
-          setLinkVisible={setLinkVisible}
-          selectionSize={selectionSize}
-        />
-      </Modal>
-
       {/* 扩展 */}
       <Modal
         open={expandVisible}