feat: remove third part internal dependencies (#178)

opentiny · Jan 2, 2025 · b718fbb · b718fbb
1 parent 4871fe8
commit b718fbb
Show file tree

Hide file tree

Showing 19 changed files with 292 additions and 531 deletions.
diff --git a/packages/docs/fluent-editor/.vitepress/sidebar.ts b/packages/docs/fluent-editor/.vitepress/sidebar.ts
@@ -24,6 +24,7 @@ export function sidebar() {
         { text: '截屏', link: '/docs/screenshot' },
         { text: '国际化', link: '/docs/i18n' },
         { text: '标题列表', link: '/docs/header-list' },
+        { text: '工具栏提示', link: '/docs/toolbar-tip' },
       ],
     },
   ]

diff --git a/packages/docs/fluent-editor/demos/add-toolbar-item.vue b/packages/docs/fluent-editor/demos/add-toolbar-item.vue
@@ -40,7 +40,7 @@ onMounted(() => {
       theme: 'snow',
       lang: 'zh-CN',
       modules: {
-        'toolbar': {
+        toolbar: {
           container: TOOLBAR_CONFIG,
           handlers: {
             good(value) {
@@ -52,12 +52,6 @@ onMounted(() => {
             },
           },
         },
-        'toolbar-tip': {
-          tipTextMap: {
-            good: '点赞',
-            bad: '点踩',
-          },
-        },
       },
     })
   })

diff --git a/packages/docs/fluent-editor/demos/header-list-container.vue b/packages/docs/fluent-editor/demos/header-list-container.vue
@@ -1,21 +1,28 @@
 <script setup lang="ts">
+import HeaderList from 'quill-header-list'
 import { onMounted, ref } from 'vue'
+import 'quill-header-list/dist/index.css'
 
 let editor
 const editorRef = ref()
 const headerListRef = ref()
 
 onMounted(() => {
   // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
-  import('@opentiny/fluent-editor').then((module) => {
-    const FluentEditor = module.default
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    FluentEditor.register({ 'modules/header-list': HeaderList }, true)
 
     editor = new FluentEditor(editorRef.value, {
       theme: 'snow',
       modules: {
-        'toolbar': [
-          [{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list'],
-        ],
+        'toolbar': {
+          container: [
+            [{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list'],
+          ],
+          handlers: {
+            'header-list': HeaderList.toolbarHandle,
+          },
+        },
         'header-list': {
           container: headerListRef.value,
           scrollContainer: window,

diff --git a/packages/docs/fluent-editor/demos/header-list.vue b/packages/docs/fluent-editor/demos/header-list.vue
@@ -1,24 +1,32 @@
 <script setup lang="ts">
+import HeaderList from 'quill-header-list'
 import { onMounted, ref } from 'vue'
+import 'quill-header-list/dist/index.css'
 
 let editor
 const editorRef = ref()
 const headerListRef = ref()
 
 onMounted(() => {
   // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
-  import('@opentiny/fluent-editor').then((module) => {
-    const FluentEditor = module.default
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor }) => {
+    FluentEditor.register({ 'modules/header-list': HeaderList }, true)
 
     editor = new FluentEditor(editorRef.value, {
       theme: 'snow',
       modules: {
-        'toolbar': [
-          [{ header: [null, 1, 2, 3, 4, 5, 6] }, 'header-list'],
-        ],
+        'toolbar': {
+          container: [
+            [{ header: [false, 1, 2, 3, 4, 5, 6] }, 'header-list', 'better-table'],
+          ],
+          handlers: {
+            'header-list': HeaderList.toolbarHandle,
+          },
+        },
         'header-list': {
           container: headerListRef.value,
         },
+        'better-table': {},
       },
     })
 

diff --git a/packages/docs/fluent-editor/demos/toolbar-tip.vue b/packages/docs/fluent-editor/demos/toolbar-tip.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import QuillToolbarTip from 'quill-toolbar-tip'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import 'quill-toolbar-tip/dist/index.css'
+
+// 代码块高亮
+import hljs from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
+
+// 插入公式
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+// 截屏
+import Html2Canvas from 'html2canvas'
+
+window.hljs = hljs
+window.katex = katex
+window.Html2Canvas = Html2Canvas
+
+let editor
+const editorRef = ref<HTMLElement>()
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean', 'format-painter'],
+  [
+    { header: [1, 2, 3, 4, 5, 6, false] },
+    { font: ['songti', 'yahei', 'kaiti', 'heiti', 'lishu', 'mono', 'arial', 'arialblack', 'comic', 'impact', 'times'] },
+    { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px'] },
+    { lineheight: ['1', '1.2', '1.5', '1.75', '2', '3', '4', '5'] },
+  ],
+  ['bold', 'italic', 'strike', 'underline', 'divider'],
+  [{ color: [] }, { background: [] }],
+  [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ direction: 'rtl' }],
+  ['link', 'blockquote', 'code', 'code-block'],
+  ['image', 'file', 'better-table'],
+  ['emoji', 'video', 'formula', 'screenshot', 'fullscreen'],
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then(({ default: FluentEditor, generateToolbarTip }) => {
+    FluentEditor.register({ 'modules/toolbar-tip': generateToolbarTip(QuillToolbarTip) }, true)
+    editor = new FluentEditor(editorRef.value, {
+      theme: 'snow',
+      modules: {
+        'toolbar': TOOLBAR_CONFIG,
+        'file': true,
+        'emoji-toolbar': true,
+        'syntax': true,
+        'toolbar-tip': true,
+      },
+    })
+  })
+})
+onBeforeUnmount(() => {
+  editor.getModule('toolbar-tip').destroyAllTips()
+})
+</script>
+
+<template>
+  <div ref="editorRef" />
+</template>
diff --git a/packages/docs/fluent-editor/docs/header-list.md b/packages/docs/fluent-editor/docs/header-list.md
@@ -1,5 +1,13 @@
 # 标题列表
 
+## 安装
+
+此功能为外部插件, 使用前请安装[`quill-header-list`](https://www.npmjs.com/package/quill-header-list)插件，完整文档请查看[插件文档](https://github.com/opentiny/quill-header-list#quill-header-list)。
+
+```bash
+npm install quill-header-list
+```
+
 ## 基本用法
 
 创建一个元素用于存放标题列表，并将其传入`header-list`的`container`属性。

diff --git a/packages/docs/fluent-editor/docs/toolbar-tip.md b/packages/docs/fluent-editor/docs/toolbar-tip.md
@@ -0,0 +1,18 @@
+# 工具栏提示文字
+
+## 安装
+
+此功能为外部插件，使用前请安装[`quill-toolbar-tip`](https://www.npmjs.com/package/quill-toolbar-tip)插件，完整文档请查看[插件文档](https://github.com/opentiny/quill-toolbar-tip#quilltoolbartip)。
+
+```bash
+npm install quill-header-list
+```
+
+## 基础使用
+
+内部提供函数`generateToolbarTip`用于适配`i18n`模块，如若禁用`i18n`模块，则需要手动传递参数。
+
+> 注意注册模块名称请保持为`toolbar-tip`
+
+:::demo src=demos/toolbar-tip.vue
+:::
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -17,8 +17,9 @@
     "html2canvas": "^1.4.1",
     "katex": "^0.16.11",
     "mathlive": "^0.101.0",
-    "quill": "^2.0.3",
+    "quill-header-list": "0.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
+    "quill-toolbar-tip": "^0.0.6",
     "vue": "^3.5.13",
     "vue-toastification": "2.0.0-rc.5"
   },

diff --git a/packages/fluent-editor/package.json b/packages/fluent-editor/package.json
@@ -34,9 +34,7 @@
   },
   "dependencies": {
     "lodash-es": "^4.17.15",
-    "quill": "^2.0.0",
-    "quill-header-list": "^0.0.1",
-    "quill-toolbar-tip": "^0.0.4"
+    "quill": "^2.0.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.23",

diff --git a/packages/fluent-editor/src/assets/style.scss b/packages/fluent-editor/src/assets/style.scss
@@ -23,7 +23,6 @@
 @import './fullscreen';
 @import './screenshot';
 @import './mathlive';
-@import 'quill-header-list/dist/index.css';
 
 // 模块：字数统计 counter
 @include counter;

diff --git a/packages/fluent-editor/src/assets/toolbar.scss b/packages/fluent-editor/src/assets/toolbar.scss
@@ -1,18 +1,19 @@
 @use './common/config.scss' as *;
 @import './common';
-@import 'quill-toolbar-tip/dist/index.css';
 
-.toolbar-tip__tooltip {
-  @include setCssVar(text-color, #ffffff);
-  @include setCssVar(bg-color, #303133);
+html {
+  .toolbar-tip__tooltip {
+    @include setCssVar(text-color, #ffffff);
+    @include setCssVar(bg-color, #303133);
 
-  z-index: $fullscreenZIndex-full;
-  color: getCssVar(text-color);
-  background-color: getCssVar(bg-color);
-}
-.dark .toolbar-tip__tooltip {
-  @include setCssVar(text-color, #141414);
-  @include setCssVar(bg-color, #f5f5f5);
+    z-index: $fullscreenZIndex-full;
+    color: getCssVar(text-color);
+    background-color: getCssVar(bg-color);
+  }
+  &.dark .toolbar-tip__tooltip {
+    @include setCssVar(text-color, #141414);
+    @include setCssVar(bg-color, #f5f5f5);
+  }
 }
 
 $iconHeight: 18px; // 工具栏按钮高度

diff --git a/packages/fluent-editor/src/config/types/type.ts b/packages/fluent-editor/src/config/types/type.ts
@@ -3,3 +3,4 @@ import type { IToolbarItem } from './toolbar-item.interface'
 export type ToolbarOption = (string[] | IToolbarItem[] | string | IToolbarItem)[]
 export type EditorFormat = 'object' | 'json' | 'html' | 'text'
 export type AnyFunction = (...args: any[]) => any
+export type Constructor<T = any, U extends Array<any> = any[]> = new (...args: U) => T
diff --git a/packages/fluent-editor/src/fluent-editor.ts b/packages/fluent-editor/src/fluent-editor.ts
@@ -1,7 +1,6 @@
 import type { ExpandedQuillOptions, Module, Parchment as TypeParchment } from 'quill'
 import type { IEditorConfig } from './config/types'
 import Quill from 'quill'
-import HeaderList from 'quill-header-list'
 import { FontStyle, LineHeightStyle, SizeStyle, TextIndentStyle } from './attributors'
 import { getListValue, ICONS_CONFIG, inputFile } from './config'
 import Counter from './counter' // 字符统计
@@ -24,7 +23,7 @@ import SoftBreak from './soft-break' // 软回车
 import Strike from './strike' // 删除线
 import CustomSyntax from './syntax' // 代码块高亮
 import BetterTable from './table/better-table' // 表格
-import Toolbar, { ToolbarTip } from './toolbar' // 工具栏
+import Toolbar from './toolbar' // 工具栏
 import Video from './video' // 视频
 // import GlobalLink from './global-link' // 全局链接
 // import QuickMenu from './quick-menu' // 快捷菜单
@@ -126,7 +125,6 @@ const registerModules = function () {
           'lineheight': function (value) {
             this.quill.format('line-height', value)
           },
-          [HeaderList.toolName]: HeaderList.toolbarHandle,
           'divider': function () {
             const range = this.quill.getSelection(true)
             this.quill.insertText(range.index, '\n', Quill.sources.USER)
@@ -155,7 +153,6 @@ const registerModules = function () {
           },
         },
       },
-      [ToolbarTip.moduleName]: true,
     },
   }
 
@@ -177,8 +174,6 @@ const registerModules = function () {
       'modules/syntax': CustomSyntax,
       'modules/mathlive': MathliveModule,
       'modules/divider': DividerBlot,
-      [`modules/${ToolbarTip.moduleName}`]: ToolbarTip,
-      [`modules/${HeaderList.moduleName}`]: HeaderList,
       // make sure register after `HeaderList`
       'modules/better-table': BetterTable,
 

diff --git a/packages/fluent-editor/src/fullscreen/handler.ts b/packages/fluent-editor/src/fullscreen/handler.ts
@@ -1,6 +1,5 @@
 import type { FluentEditorToolbar } from '../config/types'
 import { ICONS_CONFIG, namespace } from '../config'
-import { ToolbarTip } from '../toolbar'
 import { lockScroll } from '../utils/scroll-lock'
 
 let exitEscHandlerBindToolbar: (e: KeyboardEvent) => void
@@ -27,7 +26,8 @@ function intoFullscreen(toolbar: FluentEditorToolbar) {
   btn.innerHTML = ICONS_CONFIG['fullscreen-exit']
   window.addEventListener('resize', resizeHandlerBindToolbar)
   document.addEventListener('keydown', exitEscHandlerBindToolbar)
-  const toolbarTipModule = toolbar.quill.getModule(ToolbarTip.moduleName) as ToolbarTip
+  // TODO: clear hard code
+  const toolbarTipModule = toolbar.quill.getModule('toolbar-tip') as any
   if (toolbarTipModule) {
     toolbarTipModule.hideAllTips()
   }
@@ -42,7 +42,8 @@ function exitFullscreen(toolbar: FluentEditorToolbar) {
   btn.innerHTML = ICONS_CONFIG.fullscreen
   window.removeEventListener('resize', resizeHandlerBindToolbar)
   document.removeEventListener('keydown', exitEscHandlerBindToolbar)
-  const toolbarTipModule = toolbar.quill.getModule(ToolbarTip.moduleName) as ToolbarTip
+  // TODO: clear hard code
+  const toolbarTipModule = toolbar.quill.getModule('toolbar-tip') as any
   if (toolbarTipModule) {
     toolbarTipModule.hideAllTips()
   }

diff --git a/packages/fluent-editor/src/index.ts b/packages/fluent-editor/src/index.ts
@@ -1,5 +1,5 @@
-import FluentEditor from './fluent-editor'
+import { FluentEditor } from './fluent-editor'
 
 export * from './config'
-
+export * from './toolbar/toolbar-tip'
 export default FluentEditor
diff --git a/packages/fluent-editor/src/table/formats/header.ts b/packages/fluent-editor/src/table/formats/header.ts
@@ -1,9 +1,11 @@
-import { HeaderWithID } from 'quill-header-list'
+import type TypeHeader from 'quill/formats/header'
+import Quill from 'quill'
 import { isNullOrUndefined } from '../../config/editor.utils'
 import { CELL_ATTRIBUTES, CELL_IDENTITY_KEYS } from '../table-config'
 
+const OriginHeader = Quill.import('formats/header') as typeof TypeHeader
 // @dynamic
-class Header extends HeaderWithID {
+class Header extends OriginHeader {
   static tagName: any
   static blotName: string
   domNode: any
@@ -13,7 +15,6 @@ class Header extends HeaderWithID {
   enforceAllowedChildren: any
   uiNode: any
   children: any
-  statics: any
   appendChild: any
   remove: any
   cache: Record<string, any>

diff --git a/packages/fluent-editor/src/table/modules/table-operation-menu.ts b/packages/fluent-editor/src/table/modules/table-operation-menu.ts
@@ -64,7 +64,7 @@ export default class TableOperationMenu {
     this.menuInitial(params)
     this.mount()
     document.addEventListener('click', this.destroyHandler, false)
-    this.quill.on(CHANGE_LANGUAGE_EVENT, () => {
+    this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
       this.destroy()
       this.DEFAULT_COLOR_SUBTITLE = this.quill.langText['sub-title-bg-color']
       this.setDefaultMenu()