feat: provide class to custom table menu

README.md

@@ -84,22 +84,22 @@ const defaultTexts = {
 
 ### TableSelection Options
 
-| attribute   | description              | type               | default   |
-| ----------- | ------------------------ | ------------------ | --------- |
-| selectColor | selector border color    | `string`           | `#0589f3` |
-| tableMenu   | module TableMenu options | `TableMenuOptions` | -         |
+| attribute      | description                                                                                                                            | type               | default           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------- |
+| selectColor    | selector border color                                                                                                                  | `string`           | `#0589f3`         |
+| tableMenu      | module TableMenu options                                                                                                               | `TableMenuOptions` | -                 |
+| tableMenuClass | when select a cell will trigger this class to create menu. module provide two menu module `TableMenuContextmenu` and `TableMenuSelect` | `Constructor`      | `TableMenuSelect` |
 
 ### TableMenu Options
 
-| attribute       | description                                                                      | type                     | default                 |
-| --------------- | -------------------------------------------------------------------------------- | ------------------------ | ----------------------- |
-| tipText         | display tip text when hover icon                                                 | `boolean`                | `true`                  |
-| tipTexts        | the text to replace tools tip text                                               | `Record<string, string>` | `{}`                    |
-| localstorageKey | used color save localstorage key                                                 | `string`                 | `__table-bg-used-color` |
-| tools           | menu items                                                                       | `Tool[]`                 | `defaultTools`          |
-| contextmenu     | table menu will display when selected at least one cell and right click on table | `boolean`                | `false`                 |
-| defaultColorMap | color map                                                                        | `string[][]`             | in source code          |
-| texts           | the text that menu needs                                                         | `TableMenuTexts`         | `defaultTexts`          |
+| attribute       | description                        | type                     | default                 |
+| --------------- | ---------------------------------- | ------------------------ | ----------------------- |
+| tipText         | display tip text when hover icon   | `boolean`                | `true`                  |
+| tipTexts        | the text to replace tools tip text | `Record<string, string>` | `{}`                    |
+| localstorageKey | used color save localstorage key   | `string`                 | `__table-bg-used-color` |
+| tools           | menu items                         | `Tool[]`                 | `defaultTools`          |
+| defaultColorMap | color map                          | `string[][]`             | in source code          |
+| texts           | the text that menu needs           | `TableMenuTexts`         | `defaultTexts`          |
 
 <details>
   <summary> types and default value </summary>

docs/index.js

@@ -7,42 +7,6 @@ Quill.register({
 }, true);
 
 const quill1 = new Quill('#editor1', {
-  // debug: 'info',
-  theme: 'snow',
-  modules: {
-    toolbar: [
-      ['bold', 'italic', 'underline', 'strike'],
-      ['blockquote', 'code-block', 'code'],
-      ['link', 'image', 'video', 'formula'],
-      [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
-      [{ script: 'sub' }, { script: 'super' }],
-      [{ indent: '-1' }, { indent: '+1' }],
-      [{ direction: 'rtl' }],
-
-      [{ size: ['small', false, 'large', 'huge'] }],
-      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-      [{ color: [] }, { background: [] }],
-      [{ font: [] }],
-      [{ align: [] }],
-      [{ [TableUp.toolName]: [] }],
-      ['clean'],
-    ],
-    [TableUp.moduleName]: {
-      full: false,
-      resizerSetOuter: false,
-      selection: {
-        selectColor: '#f40',
-        tableMenu: {
-          localstorageKey: 'used-color',
-          tipText: true,
-          contextmenu: false,
-        },
-      },
-    },
-  },
-});
-
-const quill2 = new Quill('#editor2', {
   // debug: 'info',
   theme: 'snow',
   modules: {
@@ -68,10 +32,10 @@ const quill2 = new Quill('#editor2', {
       resizerSetOuter: true,
       selection: {
         selectColor: '#04f',
+        tableMenuClass: window.TableUp.TableMenuContextmenu,
         tableMenu: {
           localstorageKey: 'used-color',
           tipText: true,
-          contextmenu: true,
           tipTexts: {
             InsertTop: '向上插入一行',
             InsertRight: '向右插入一列',
@@ -131,6 +95,42 @@ const quill2 = new Quill('#editor2', {
   },
 });
 
+const quill2 = new Quill('#editor2', {
+  // debug: 'info',
+  theme: 'snow',
+  modules: {
+    toolbar: [
+      ['bold', 'italic', 'underline', 'strike'],
+      ['blockquote', 'code-block', 'code'],
+      ['link', 'image', 'video', 'formula'],
+      [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+      [{ script: 'sub' }, { script: 'super' }],
+      [{ indent: '-1' }, { indent: '+1' }],
+      [{ direction: 'rtl' }],
+
+      [{ size: ['small', false, 'large', 'huge'] }],
+      [{ header: [1, 2, 3, 4, 5, 6, false] }],
+      [{ color: [] }, { background: [] }],
+      [{ font: [] }],
+      [{ align: [] }],
+      [{ [TableUp.toolName]: [] }],
+      ['clean'],
+    ],
+    [TableUp.moduleName]: {
+      full: false,
+      resizerSetOuter: false,
+      selection: {
+        selectColor: '#f40',
+        // tableMenuClass: window.TableUp.TableMenuSelect,
+        tableMenu: {
+          localstorageKey: 'used-color',
+          tipText: true,
+        },
+      },
+    },
+  },
+});
+
 const quill = [
   quill1,
   quill2,

eslint.config.js

@@ -9,6 +9,7 @@ export default factory({
       rules: {
         'unicorn/prefer-dom-node-dataset': 'off',
         'no-cond-assign': 'off',
+        'new-cap': 'off',
       },
     },
   ],

gulpfile.ts

@@ -1,5 +1,6 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 import typescript from '@rollup/plugin-typescript';
 import autoprefixer from 'autoprefixer';
@@ -34,6 +35,7 @@ const buildDts = async () => {
 const buildTs = async (isDev: boolean = false) => {
   const plugins = [
     typescript({ tsconfig: './tsconfig.json' }),
+    nodeResolve(),
     svg({ stringify: true }),
   ];
   !isDev && plugins.push(terser());

package.json

@@ -40,8 +40,12 @@
   "peerDependencies": {
     "quill": "^2.0.0"
   },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.12"
+  },
   "devDependencies": {
     "@esbuild-kit/cjs-loader": "^2.4.4",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/node": "^20.14.10",

src/index.ts

@@ -10,7 +10,7 @@ import type Picker from 'quill/ui/picker';
 import type { TableColValue, TableConstantsData, TableTextOptions, TableUpOptions } from './utils';
 import Quill from 'quill';
 import { BlockOverride, BlockquoteOverride, CodeBlockOverride, ContainerFormat, HeaderOverride, ListItemOverride, ScrollOverride, TableBodyFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
-import { TableResize, TableResizeLine, TableSelection, TableVitrualScroll } from './modules';
+import { TableResizeBox, TableResizeLine, TableSelection, TableVitrualScroll } from './modules';
 import { blotName, createSelectBox, debounce, findParentBlot, findParentBlots, isBoolean, isFunction, randomId, tableUpEvent, tableUpSize } from './utils';
 
 const Delta = Quill.import('delta');
@@ -175,7 +175,7 @@ export class TableUp {
   range?: Range | null;
   table?: HTMLElement;
   tableSelection?: TableSelection;
-  tableResizer?: TableResize;
+  tableResizerBox?: TableResizeBox;
   tableResizerLine?: TableResizeLine;
   tableScrollbar?: TableVitrualScroll;
   get statics(): any {
@@ -481,7 +481,7 @@ export class TableUp {
         this.tableScrollbar = new TableVitrualScroll(this, table, quill);
       }
       if (this.options.resizerSetOuter) {
-        this.tableResizer = new TableResize(this, table, quill, this.options.resizer || {});
+        this.tableResizerBox = new TableResizeBox(this, table, quill, this.options.resizeBox || {});
       }
     }
   }
@@ -500,8 +500,8 @@ export class TableUp {
 
     this.table = undefined;
     if (this.options.resizerSetOuter) {
-      this.tableResizer && this.tableResizer.destroy();
-      this.tableResizer = undefined;
+      this.tableResizerBox && this.tableResizerBox.destroy();
+      this.tableResizerBox = undefined;
     }
   }
 

src/modules/index.ts

@@ -1,6 +1,4 @@
 export * from './table-menu';
 export * from './table-resize';
-export * from './table-resize-common';
-export * from './table-resize-line';
 export * from './table-scrollbar';
 export * from './table-selection';