feat: format-painter allow ignore formats (#318)

zzxming · web-flow · commit 66716dad0839 · 2025-08-19T19:22:41.000+08:00
* feat: format-painter allow ignore formats

* chore: upgrate table-up

* chore: lint code

* pref: optimize variable set
diff --git a/packages/docs/fluent-editor/demos/table-up-menu.vue b/packages/docs/fluent-editor/demos/table-up-menu.vue
@@ -34,10 +34,10 @@ onMounted(() => {
           'toolbar': TOOLBAR_CONFIG,
           'table-up': {
             customSelect: defaultCustomSelect,
-            selection: TableSelection,
-            selectionOptions: {
-              tableMenu: TableMenuSelect,
-            },
+            modules: [
+              { module: TableSelection },
+              { module: TableMenuSelect },
+            ],
           },
         },
       })
@@ -49,10 +49,10 @@ onMounted(() => {
           'toolbar': TOOLBAR_CONFIG,
           'table-up': {
             customSelect: defaultCustomSelect,
-            selection: TableSelection,
-            selectionOptions: {
-              tableMenu: TableMenuContextmenu,
-            },
+            modules: [
+              { module: TableSelection },
+              { module: TableMenuContextmenu },
+            ],
           },
         },
       })
diff --git a/packages/docs/fluent-editor/demos/table-up-resize.vue b/packages/docs/fluent-editor/demos/table-up-resize.vue
@@ -36,7 +36,9 @@ onMounted(() => {
           'toolbar': TOOLBAR_CONFIG,
           'table-up': {
             customSelect: defaultCustomSelect,
-            resize: TableResizeBox,
+            modules: [
+              { module: TableResizeBox },
+            ],
           },
         },
       })
@@ -48,7 +50,9 @@ onMounted(() => {
           'toolbar': TOOLBAR_CONFIG,
           'table-up': {
             customSelect: defaultCustomSelect,
-            resize: TableResizeLine,
+            modules: [
+              { module: TableResizeLine },
+            ],
           },
         },
       })
@@ -60,7 +64,9 @@ onMounted(() => {
           'toolbar': TOOLBAR_CONFIG,
           'table-up': {
             customSelect: defaultCustomSelect,
-            resizeScale: TableResizeScale,
+            modules: [
+              { module: TableResizeScale },
+            ],
           },
         },
       })
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -24,7 +24,7 @@
     "mathlive": "^0.101.0",
     "quill-header-list": "0.0.2",
     "quill-markdown-shortcuts": "^0.0.10",
-    "quill-table-up": "^2.1.7",
+    "quill-table-up": "^3.0.1",
     "quill-toolbar-tip": "^0.0.13",
     "vue": "^3.5.13",
     "vue-toastification": "2.0.0-rc.5"
diff --git a/packages/fluent-editor/src/config/types/editor-config.interface.ts b/packages/fluent-editor/src/config/types/editor-config.interface.ts
@@ -3,11 +3,14 @@ import type { ScreenShotOptions } from '../../tools/screenshot'
 import type { IEditorModules } from './editor-modules.interface'
 
 export interface IEditorConfig extends QuillOptions {
-  modules?: IEditorModules
-  screenshotOnStaticPage?: boolean
-  scrollingContainer?: HTMLElement | string | null
+  'modules'?: IEditorModules
+  'screenshotOnStaticPage'?: boolean
+  'scrollingContainer'?: HTMLElement | string | null
   // Auto protocol for link
-  autoProtocol?: boolean | string
-  editorPaste?: any
-  screenshot?: Partial<ScreenShotOptions>
+  'autoProtocol'?: boolean | string
+  'editorPaste'?: any
+  'screenshot'?: Partial<ScreenShotOptions>
+  'format-painter'?: {
+    ignoreFormat?: string[]
+  }
 }
diff --git a/packages/fluent-editor/src/modules/table-up/index.ts b/packages/fluent-editor/src/modules/table-up/index.ts
@@ -1,52 +1,30 @@
-import type { Parchment } from 'quill'
 import type Toolbar from 'quill/modules/toolbar'
 import type BaseTheme from 'quill/themes/base'
 import type Picker from 'quill/ui/picker'
 import type { Constructor } from '../../config/types'
 import type FluentEditor from '../../core/fluent-editor'
 import { CHANGE_LANGUAGE_EVENT } from '../../config'
+import { isFunction } from '../../utils/is'
 
 interface QuillTheme extends BaseTheme {
   pickers: QuillThemePicker[]
 }
 type QuillThemePicker = (Picker & { options: HTMLElement })
-interface InternalModule {
-  show: () => void
-  hide: () => void
-  update: () => void
-  destroy: () => void
-}
-export interface InternalTableSelectionModule extends InternalModule {
-  dragging: boolean
-  boundary: {
-    x: number
-    y: number
-    x1: number
-    y1: number
-    width: number
-    height: number
-  } | null
-  selectedTds: Parchment.Blot[]
-  cellSelect: HTMLElement
-  tableMenu?: InternalModule
-  computeSelectedTds: (
-    startPoint: {
-      x: number
-      y: number
-    },
-    endPoint: {
-      x: number
-      y: number
-    }
-  ) => Parchment.Blot[]
-  updateWithSelectedTds: () => void
-}
+
 export function generateTableUp(QuillTableUp: Constructor) {
   return class extends QuillTableUp {
-    tableSelection?: InternalTableSelectionModule
     constructor(public quill: FluentEditor, options: Partial<any>) {
       super(quill, options)
 
+      if (!this.quill.options['format-painter']) this.quill.options['format-painter'] = {}
+      const currentIgnoreFormat = this.quill.options['format-painter'].ignoreFormat || []
+      this.quill.options['format-painter'].ignoreFormat = Array.from(
+        new Set([
+          ...currentIgnoreFormat,
+          'table-up-cell-inner',
+        ]),
+      )
+
       this.quill.emitter.on(CHANGE_LANGUAGE_EVENT, () => {
         this.options.texts = this.resolveTexts(options.texts)
         const toolbar = this.quill.getModule('toolbar') as Toolbar
@@ -59,13 +37,14 @@ export function generateTableUp(QuillTableUp: Constructor) {
             }
           }
         }
-        if (this.tableSelection) {
-          this.tableSelection.destroy()
-        }
-        if (this.options.selection) {
-          // eslint-disable-next-line new-cap
-          this.tableSelection = new this.options.selection(this, this.quill, this.options.selectionOptions)
-        }
+
+        Object.keys(this.modules).forEach((key) => {
+          if (isFunction(this.modules[key].destroy)) {
+            this.modules[key].destroy()
+          }
+        })
+        this.modules = {}
+        this.initModules()
       })
     }
 
diff --git a/packages/fluent-editor/src/tools/format-painter.ts b/packages/fluent-editor/src/tools/format-painter.ts
@@ -2,7 +2,7 @@ import type { Range } from 'quill'
 import type Toolbar from 'quill/modules/toolbar'
 import Quill from 'quill'
 
-interface FormatData {
+export interface FormatData {
   formatPainter: {
     rangeFormat: Record<string, any>
     isFormatterLock: boolean
@@ -22,8 +22,14 @@ export function FormatPainter(this: Toolbar & FormatData) {
   const [, formatterBtn] = this.controls.find(([name]) => name === FormatPainter.toolName)
   const formatRange = (range: Range | null) => {
     if (!range) return
-    this.quill.removeFormat(range.index, range.length)
+    const currentFormats = this.quill.getFormat(range)
+    for (const format in currentFormats) {
+      if (this.quill.options['format-painter']?.ignoreFormat?.includes(format)) continue
+      this.quill.format(format, null, Quill.sources.USER)
+    }
+
     for (const format in this.formatPainter.rangeFormat) {
+      if (this.quill.options['format-painter']?.ignoreFormat?.includes(format)) continue
       this.quill.format(format, this.formatPainter.rangeFormat[format], Quill.sources.USER)
     }
     if (!this.formatPainter.isFormatterLock) {
@@ -54,7 +60,7 @@ export function FormatPainter(this: Toolbar & FormatData) {
   }
   const unbindFormatSelect = () => {
     this.quill.off(Quill.events.SELECTION_CHANGE, formatRange)
-    this.formatPainter.rangeFormat = undefined
+    this.formatPainter.rangeFormat = {}
     btnRemoveActive()
     this.formatPainter.isFormating = false
     this.formatPainter.isFormatterLock = false
diff --git a/packages/projects/package.json b/packages/projects/package.json
@@ -12,7 +12,7 @@
     "@opentiny/fluent-editor": "workspace:^",
     "@tailwindcss/vite": "^4.0.0",
     "quill-header-list": "0.0.2",
-    "quill-table-up": "^2.1.7",
+    "quill-table-up": "^3.0.1",
     "sass": "^1.90.0",
     "tailwindcss": "^4.0.0",
     "vue": "^3.5.13",
diff --git a/packages/projects/src/views/yuque/YuQue.vue b/packages/projects/src/views/yuque/YuQue.vue
@@ -57,12 +57,12 @@ onMounted(() => {
       },
       'table-up': {
         customSelect: defaultCustomSelect,
-        selection: TableSelection,
-        selectionOptions: {
-          tableMenu: TableMenuContextmenu,
-        },
-        resize: TableResizeLine,
-        resizeScale: TableResizeScale,
+        modules: [
+          { module: TableResizeLine },
+          { module: TableResizeScale },
+          { module: TableSelection },
+          { module: TableMenuContextmenu },
+        ],
       },
       'shortcut-key': {
         menuItems: [tableUpConfig],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
