fix: toolbar-tip error (#202)

opentiny · Jan 13, 2025 · 6a1ad72 · 6a1ad72
1 parent e9b8d04
commit 6a1ad72
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 77 deletions.
diff --git a/packages/docs/fluent-editor/demos/toolbar-tip.vue b/packages/docs/fluent-editor/demos/toolbar-tip.vue
@@ -7,7 +7,7 @@ import Html2Canvas from 'html2canvas'
 import katex from 'katex'
 
 import QuillToolbarTip from 'quill-toolbar-tip'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import 'quill-toolbar-tip/dist/index.css'
 import 'highlight.js/styles/atom-one-dark.css'
@@ -61,9 +61,6 @@ onMounted(() => {
     })
   })
 })
-onBeforeUnmount(() => {
-  editor.getModule('toolbar-tip').destroyAllTips()
-})
 </script>
 
 <template>

diff --git a/packages/docs/fluent-editor/docs/modules/toolbar-tip.md b/packages/docs/fluent-editor/docs/modules/toolbar-tip.md
@@ -13,88 +13,88 @@ npm install quill-toolbar-tip
 如果你想使用英文文本，你可以使用导出名为 `defaultToolbarTip` 的默认提示文本。
 
 ```ts
-import FluentEditor from "@opentiny/fluent-editor";
-import QuillToolbarTip, { defaultToolbarTip } from "quill-toolbar-tip";
-import "quill-toolbar-tip/dist/index.css";
+import FluentEditor from '@opentiny/fluent-editor'
+import QuillToolbarTip, { defaultToolbarTip } from 'quill-toolbar-tip'
+import 'quill-toolbar-tip/dist/index.css'
 
 FluentEditor.register(
   {
     [`modules/${QuillToolbarTip.moduleName}`]: QuillToolbarTip,
   },
-  true
-);
+  true,
+)
 
 const QuillToolbarTipOption = {
-  tipTextMap: defaultToolbarTip["en-US"],
-};
+  tipTextMap: defaultToolbarTip['en-US'],
+}
 
-const editor = new FluentEditor("#editor", {
-  theme: "snow",
+const editor = new FluentEditor('#editor', {
+  theme: 'snow',
   modules: {
     toolbar: [
-      ["bold", "italic"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      [{ script: "sub" }, { script: "super" }],
+      ['bold', 'italic'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }],
       [{ color: [] }, { background: [] }],
     ],
     [QuillToolbarTip.moduleName]: QuillToolbarTipOption,
   },
-});
+})
 ```
 
 或者你可以在 `tipTextMap` 中添加文本以在工具提示中显示。键与工具栏格式名称相匹配。
 
 ```ts
-import QuillToolbarTip from "quill-toolbar-tip";
-import "quill-toolbar-tip/dist/index.css";
+import QuillToolbarTip from 'quill-toolbar-tip'
+import 'quill-toolbar-tip/dist/index.css'
 
 FluentEditor.register(
   {
     [`modules/${QuillToolbarTip.moduleName}`]: QuillToolbarTip,
   },
-  true
-);
+  true,
+)
 
 const QuillToolbarTipOption = {
   tipTextMap: {
-    bold: "Bold",
-    italic: "Italic",
+    bold: 'Bold',
+    italic: 'Italic',
     color: {
       onShow(target, value) {
-        return `Font Color${value ? `: ${value}` : ""}`;
+        return `Font Color${value ? `: ${value}` : ''}`
       },
     },
     background: {
       onShow(target, value) {
-        return `Background Color${value ? `: ${value}` : ""}`;
+        return `Background Color${value ? `: ${value}` : ''}`
       },
     },
   },
-};
+}
 
-const editor = new FluentEditor("#editor", {
-  theme: "snow",
+const editor = new FluentEditor('#editor', {
+  theme: 'snow',
   modules: {
     toolbar: [
-      ["bold", "italic"],
-      [{ list: "ordered" }, { list: "bullet" }],
-      [{ script: "sub" }, { script: "super" }],
+      ['bold', 'italic'],
+      [{ list: 'ordered' }, { list: 'bullet' }],
+      [{ script: 'sub' }, { script: 'super' }],
       [{ color: [] }, { background: [] }],
     ],
     [QuillToolbarTip.moduleName]: QuillToolbarTipOption,
   },
-});
+})
 ```
 
-你可以使用 `key:value` 来设置特定的提示。例如，要为项目符号列表设置提示文本“无序列表”，你可以使用 `'list: bullet': 'Unordered List'`。
+你可以使用 `key:value` 来设置特定的提示。例如，要为项目符号列表设置提示文本“无序列表”，你可以使用 `'list:bullet': 'Unordered List'`。
 
 ```ts
 const QuillToolbarTipOption = {
   tipTextMap: {
-    "list:ordered": "Ordered List",
-    "list:bullet": "Unordered List",
+    'list:ordered': 'Ordered List',
+    'list:bullet': 'Unordered List',
   },
-};
+}
 ```
 
 你还可以为键设置一个选项，并使用 `onShow` 来计算工具提示的文本。但是，如果你使用了 `onShow` 选项，`msg` / `content` 或字符串值将被忽略。最终显示的文本将是项的值。
@@ -105,14 +105,14 @@ const QuillToolbarTipOption = {
     script: {
       onShow(target, value) {
         const text = {
-          sub: "Subscript",
-          super: "Superscript",
-        };
-        return text[value] || null;
+          sub: 'Subscript',
+          super: 'Superscript',
+        }
+        return text[value] || null
       },
     },
   },
-};
+}
 ```
 
 ## Options 配置
@@ -137,26 +137,26 @@ const QuillToolbarTipOption = {
 ```ts
 interface TooltipOptions {
   direction:
-    | "auto"
-    | "auto-start"
-    | "auto-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "left"
-    | "left-start"
-    | "left-end";
-  msg: string;
-  delay: number;
-  content: HTMLElement;
-  className: string | string[];
-  onShow: (target: HTMLElement) => string | HTMLElement | undefined;
+    | 'auto'
+    | 'auto-start'
+    | 'auto-end'
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+  msg: string
+  delay: number
+  content: HTMLElement
+  className: string | string[]
+  onShow: (target: HTMLElement) => string | HTMLElement | undefined
 }
 ```
 
@@ -165,37 +165,37 @@ interface TooltipOptions {
 这意味着如果你设置了如下选项，最终显示的文本将是 'C'。
 
 ```js
-const B = document.createElement("span");
-B.textContent = "B";
+const B = document.createElement('span')
+B.textContent = 'B'
 
 tipTextMap = {
   color: {
-    msg: "A",
+    msg: 'A',
     content: B,
     onShow() {
-      return "C";
+      return 'C'
     },
   },
-};
+}
 ```
 
 `onShow` 的参数 `value` 是工具栏按钮或选择框的当前值。
 
 ```ts
-interface TooltipItem extends Omit<TooltipOptions, "onShow"> {
-  onShow: (target: HTMLElement, value: string) => string | HTMLElement;
+interface TooltipItem extends Omit<TooltipOptions, 'onShow'> {
+  onShow: (target: HTMLElement, value: string) => string | HTMLElement
 }
 ```
 
 `defaultTooltipOptions` 如下所示。
 
 ```ts
 const tooltipDefaultOptions = {
-  msg: "",
+  msg: '',
   delay: 150,
-  direction: "top",
+  direction: 'top',
   className: [] as string[],
-};
+}
 ```
 
 想了解更多 quill-toolbar-tip 模块的使用说明，请参考：[https://github.com/opentiny/quill-toolbar-tip](https://github.com/opentiny/quill-toolbar-tip)。
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -19,7 +19,7 @@
     "mathlive": "^0.101.0",
     "quill-header-list": "0.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
-    "quill-toolbar-tip": "^0.0.7",
+    "quill-toolbar-tip": "^0.0.10",
     "vue": "^3.5.13",
     "vue-toastification": "2.0.0-rc.5"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml