quill-table-up 3.3.1 → 3.4.0

package/dist/table-creator.css

@@ -1 +1 @@
-.table-up-input__item{--input-height:2rem;--input-inner-height:calc(var(--input-height) - 0.125rem);--input-color-text:#606266;--input-color-boxshaow:#dcdfe6;--input-color-focus:#409eff;--input-color-error:#f56c6c;--input-boxshaow:0 0 0 0.0625rem var(--input-color-boxshaow) inset;--input-boxshaow-focus:0 0 0 0.0625rem var(--input-color-focus) inset;--input-boxshaow-error:0 0 0 0.0625rem var(--input-color-error) inset;display:flex;align-items:center}.table-up-input__item+.table-up-input__item{margin-top:1.125rem}.table-up-input__label{width:5rem;flex-shrink:0}.table-up-input__input{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;width:100%;height:var(--input-height);line-height:var(--input-height);padding:.0625rem .5rem;border-radius:.25rem;box-shadow:var(--input-boxshaow);transition:box-shadow .2s linear}.table-up-input__input.focus{box-shadow:var(--input-boxshaow-focus)}.table-up-input__input input{width:100%;height:var(--input-inner-height);line-height:var(--input-inner-height);flex-grow:1;font-size:.875rem;color:var(--input-color-text);outline:0;border:0;padding:0}.table-up-input__input.error{box-shadow:var(--input-boxshaow-error)}.table-up-input__error-tip{position:absolute;top:100%;left:0;font-size:.75rem;color:var(--input-color-error);line-height:1rem}.ql-snow .table-up-select-box{--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:#e0f2fe;--select-box-custom-color-text:#0d0d0d;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#ebebeb}.table-up-select-box{--select-box-color-border:#e5e7eb;--select-box-border:0.0625rem solid var(--select-box-color-border);--select-box-color-active:#0ea5e9;--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:transparent;--select-box-custom-color-text:#f5f5f5;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#2c2c2c}.table-up-select-box__block{display:flex;width:10rem;flex-wrap:wrap;align-items:center;justify-content:center}.table-up-select-box__item{margin:.125rem;height:1rem;width:1rem;border:var(--select-box-border);cursor:pointer}.table-up-select-box__item.active{border-color:var(--select-box-color-active);background-color:var(--select-box-color-bg-active)}.table-up-select-box__custom{padding:.5rem;color:var(--select-box-custom-color-text);background-color:var(--select-box-custom-color-bg);font-size:1rem;text-align:center;cursor:pointer}.table-up-select-box__custom:hover{background-color:var(--select-box-custom-color-bg-hover)}.table-up-creator{padding:1.5rem}.table-up-creator__input{display:flex;flex-direction:column;width:100%}.table-up-creator__control{margin-top:1rem;text-align:right}.table-up-creator__checkbox{--check-color:#212121;--checked-color:#506eec;display:flex;align-items:center;margin-top:.25rem;cursor:pointer;font-size:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.table-up-creator__checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.125rem;height:1.125rem;border:.0625rem solid var(--check-color);border-radius:.3125rem;background-color:transparent;display:inline-block;position:relative;margin-right:.625rem;cursor:pointer}.table-up-creator__checkbox input:before{content:'';background-color:var(--checked-color);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:.625rem;height:.625rem;border-radius:.1875rem;transition:all .2s ease-in-out}.table-up-creator__checkbox input:checked:before{transform:translate(-50%,-50%) scale(1)}
+.table-up-input__item{--input-height:2rem;--input-inner-height:calc(var(--input-height) - 0.125rem);--input-color-text:#606266;--input-color-boxshaow:#dcdfe6;--input-color-focus:#409eff;--input-color-error:#f56c6c;--input-boxshaow:0 0 0 0.0625rem var(--input-color-boxshaow) inset;--input-boxshaow-focus:0 0 0 0.0625rem var(--input-color-focus) inset;--input-boxshaow-error:0 0 0 0.0625rem var(--input-color-error) inset;display:flex;align-items:center}.table-up-input__item+.table-up-input__item{margin-top:1.125rem}.table-up-input__label{width:5rem;flex-shrink:0}.table-up-input__input{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;width:100%;height:var(--input-height);line-height:var(--input-height);padding:.0625rem .5rem;border-radius:.25rem;box-shadow:var(--input-boxshaow);transition:box-shadow .2s linear}.table-up-input__input.focus{box-shadow:var(--input-boxshaow-focus)}.table-up-input__input input{width:100%;height:var(--input-inner-height);line-height:var(--input-inner-height);flex-grow:1;font-size:.875rem;color:var(--input-color-text);outline:0;border:0;padding:0}.table-up-input__input.error{box-shadow:var(--input-boxshaow-error)}.table-up-input__error-tip{position:absolute;top:100%;left:0;font-size:.75rem;color:var(--input-color-error);line-height:1rem}.ql-snow .table-up-select-box{--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:#e0f2fe;--select-box-custom-color-text:#0d0d0d;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#ebebeb}.table-up-select-box{--select-box-color-border:#e5e7eb;--select-box-border:0.0625rem solid var(--select-box-color-border);--select-box-color-active:#0ea5e9;--select-box-color-bg-hover:#f5f5f5;--select-box-color-bg-active:transparent;--select-box-custom-color-text:#f5f5f5;--select-box-custom-color-bg:transparent;--select-box-custom-color-bg-hover:#2c2c2c;display:block}.table-up-select-box__block{display:inline-flex;width:10rem;flex-wrap:wrap;align-items:center;justify-content:center}.table-up-select-box__item{display:inline-block;margin:.125rem;height:1rem;width:1rem;border:var(--select-box-border);cursor:pointer}.table-up-select-box__item.active{border-color:var(--select-box-color-active);background-color:var(--select-box-color-bg-active)}.table-up-select-box__custom{display:block;padding:.5rem;color:var(--select-box-custom-color-text);background-color:var(--select-box-custom-color-bg);font-size:1rem;text-align:center;cursor:pointer}.table-up-select-box__custom:hover{background-color:var(--select-box-custom-color-bg-hover)}.table-up-creator{padding:1.5rem}.table-up-creator__input{display:flex;flex-direction:column;width:100%}.table-up-creator__control{margin-top:1rem;text-align:right}.table-up-creator__checkbox{--check-color:#212121;--checked-color:#506eec;display:flex;align-items:center;margin-top:.25rem;cursor:pointer;font-size:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.table-up-creator__checkbox input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.125rem;height:1.125rem;border:.0625rem solid var(--check-color);border-radius:.3125rem;background-color:transparent;display:inline-block;position:relative;margin-right:.625rem;cursor:pointer}.table-up-creator__checkbox input:before{content:'';background-color:var(--checked-color);display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);width:.625rem;height:.625rem;border-radius:.1875rem;transition:all .2s ease-in-out}.table-up-creator__checkbox input:checked:before{transform:translate(-50%,-50%) scale(1)}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "packageManager": "pnpm@10.28.2",
   "description": "A table module for quill2.x",
   "author": "zzxming",

package/src/__tests__/unit/table-refresh-ui.test.ts

@@ -0,0 +1,50 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { TableUp } from '../../table-up';
+import { createQuillWithTableModule } from './utils';
+
+beforeEach(() => {
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('TableUp - refreshUI', () => {
+  it('should call texts function with key and use returned text', async () => {
+    let locale = 'en';
+    const keyCalls: string[] = [];
+    const quill = createQuillWithTableModule('<p><br></p>', {
+      texts: (key) => {
+        keyCalls.push(key);
+        if (key === 'customBtnText') return locale === 'en' ? 'Custom' : '自定义';
+        if (key === 'fullCheckboxText') return locale === 'en' ? 'Insert full width table' : '插入满宽表格';
+        return '';
+      },
+    });
+
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    expect(tableModule.options.texts.customBtnText).toBe('Custom');
+    expect(tableModule.options.texts.fullCheckboxText).toBe('Insert full width table');
+    expect(keyCalls).toContain('customBtnText');
+    expect(keyCalls).toContain('fullCheckboxText');
+    locale = 'zh';
+    await tableModule.refreshUI();
+    expect(tableModule.options.texts.customBtnText).toBe('自定义');
+    expect(tableModule.options.texts.fullCheckboxText).toBe('插入满宽表格');
+  });
+
+  it('should bind this to TableUp instance when calling texts function', () => {
+    let boundThis: TableUp | undefined;
+    const quill = createQuillWithTableModule('<p><br></p>', {
+      texts(key) {
+        boundThis = this;
+        if (key === 'customBtnText') return 'Custom';
+        return '';
+      },
+    });
+
+    const tableModule = quill.getModule(TableUp.moduleName) as TableUp;
+    expect(tableModule.options.texts.customBtnText).toBe('Custom');
+    expect(boundThis).toBe(tableModule);
+  });
+});

package/src/__tests__/unit/utils.ts

@@ -1,5 +1,5 @@
 import type { Op, Delta as TypeDelta, Range as TypeRange } from 'quill';
-import type { TableCaptionValue, TableColValue, TableUpOptions } from '../../utils';
+import type { TableCaptionValue, TableColValue, TableUpOptionsInput } from '../../utils';
 import Quill from 'quill';
 import { expect, vi } from 'vitest';
 import { TableUp } from '../../table-up';
@@ -41,7 +41,7 @@ export function sortAttributes(element: HTMLElement) {
     }
   });
 }
-export function createQuillWithTableModule(html: string, tableOptions: Partial<TableUpOptions> = {}, moduleOptions = {}, quillOptions = {}, register = {}) {
+export function createQuillWithTableModule(html: string, tableOptions: TableUpOptionsInput = {}, moduleOptions = {}, quillOptions = {}, register = {}) {
   Quill.register({
     [`modules/${TableUp.moduleName}`]: TableUp,
     ...register,

package/src/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"4.0.18","results":[]}
+{"version":"4.0.18","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":18173.0784,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":22002.459899999998,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":10285.912399999997,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":12967.189000000002,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":3874.055199999999,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":9750.4833,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":32718.328999999998,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":3572.148699999998,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":6382.709699999998,"failed":false}],[":__tests__/unit/table-contenteditable.test.ts",{"duration":1995.755299999999,"failed":false}]]}

package/src/style/select-box.less

@@ -20,14 +20,17 @@
   .setCssVar(select-box-custom-color-bg, transparent);
   .setCssVar(select-box-custom-color-bg-hover, rgb(44, 44, 44));
 
+  display: block;
+
   &__block {
-    display: flex;
+    display: inline-flex;
     width: 160px;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
   }
   &__item {
+    display: inline-block;
     margin: 2px;
     height: 16px;
     width: 16px;
@@ -39,6 +42,7 @@
     }
   }
   &__custom {
+    display: block;
     padding: 8px;
     color: .getCssVar(select-box-custom-color-text) [];
     background-color: .getCssVar(select-box-custom-color-bg) [];

package/src/table-up.ts

@@ -5,7 +5,7 @@ import type { Context } from 'quill/modules/keyboard';
 import type TypeKeyboard from 'quill/modules/keyboard';
 import type TypeToolbar from 'quill/modules/toolbar';
 import type { TableSelection } from './modules';
-import type { Constructor, QuillTheme, QuillThemePicker, TableBodyTag, TableCellValue, TableConstantsData, TableTextOptions, TableUpOptions } from './utils';
+import type { Constructor, QuillTheme, QuillThemePicker, TableBodyTag, TableCellValue, TableConstantsData, TableTextOptions, TableTextOptionsInput, TableUpOptions, TableUpOptionsInput } from './utils';
 import Quill from 'quill';
 import { BlockEmbedOverride, BlockOverride, ContainerFormat, ScrollOverride, TableBodyFormat, TableCaptionFormat, TableCellFormat, TableCellInnerFormat, TableColFormat, TableColgroupFormat, TableFootFormat, TableHeadFormat, TableMainFormat, TableRowFormat, TableWrapperFormat } from './formats';
 import { TableClipboard } from './modules';
@@ -277,6 +277,7 @@ export class TableUp {
 
   quill: Quill;
   options: TableUpOptions;
+  textOptionsInput: TableTextOptionsInput | undefined;
   toolBox: HTMLDivElement;
   fixTableByLisenter = debounce(this.balanceTables, 100);
   selector?: HTMLElement;
@@ -288,33 +289,28 @@ export class TableUp {
     return this.constructor;
   }
 
-  constructor(quill: Quill, options: Partial<TableUpOptions>) {
+  constructor(quill: Quill, options: TableUpOptionsInput) {
     this.quill = quill;
+    this.textOptionsInput = options?.texts;
     this.options = this.resolveOptions(options || {});
     this.toolBox = this.initialContainer();
 
-    const toolbar = this.quill.getModule('toolbar') as TypeToolbar;
-    if (toolbar && (this.quill.theme as QuillTheme).pickers) {
-      const [, select] = (toolbar.controls as [string, HTMLElement][] || []).find(([name]) => name === this.statics.toolName) || [];
-      if (select?.tagName.toLocaleLowerCase() === 'select') {
-        const picker = (this.quill.theme as QuillTheme).pickers.find(picker => picker.select === select);
-        if (picker) {
-          picker.label.innerHTML = this.options.icon;
-          this.buildCustomSelect(this.options.customSelect, picker);
-          picker.label.addEventListener('mousedown', () => {
-            if (!this.selector || !picker) return;
-            const selectRect = this.selector.getBoundingClientRect();
-            const { leftLimited } = limitDomInViewPort(selectRect);
-            if (leftLimited) {
-              const labelRect = picker.label.getBoundingClientRect();
-              Object.assign(picker.options.style, { transform: `translateX(calc(-100% + ${labelRect.width}px))` });
-            }
-            else {
-              Object.assign(picker.options.style, { transform: undefined });
-            }
-          });
+    const picker = this.getToolbarPicker();
+    if (picker) {
+      picker.label.innerHTML = this.options.icon;
+      this.buildCustomSelect(this.options.customSelect, picker);
+      picker.label.addEventListener('mousedown', () => {
+        if (!this.selector) return;
+        const selectRect = this.selector.getBoundingClientRect();
+        const { leftLimited } = limitDomInViewPort(selectRect);
+        if (leftLimited) {
+          const labelRect = picker.label.getBoundingClientRect();
+          Object.assign(picker.options.style, { transform: `translateX(calc(-100% + ${labelRect.width}px))` });
         }
-      }
+        else {
+          Object.assign(picker.options.style, { transform: undefined });
+        }
+      });
     }
 
     const keyboard = this.quill.getModule('keyboard') as TypeKeyboard;
@@ -367,20 +363,29 @@ export class TableUp {
     }
   }
 
-  resolveOptions(options: Partial<TableUpOptions>): TableUpOptions {
+  getToolbarPicker() {
+    const toolbar = this.quill.getModule('toolbar') as TypeToolbar;
+    if (!toolbar || !(this.quill.theme as QuillTheme).pickers) return;
+    const [, select] = (toolbar.controls as [string, HTMLElement][] || []).find(([name]) => name === this.statics.toolName) || [];
+    if (select?.tagName.toLocaleLowerCase() !== 'select') return;
+    return (this.quill.theme as QuillTheme).pickers.find(picker => picker.select === select);
+  }
+
+  resolveOptions(options: TableUpOptionsInput): TableUpOptions {
+    const { texts, ...rest } = options;
     return Object.assign({
       customBtn: false,
-      texts: this.resolveTexts(options.texts || {}),
+      texts: this.resolveTexts(texts),
       full: false,
       fullSwitch: true,
       icon: icons.table,
       autoMergeCell: true,
       modules: [],
-    } as TableUpOptions, options);
+    } as TableUpOptions, rest);
   }
 
-  resolveTexts(options: Partial<TableTextOptions>) {
-    return Object.assign({
+  resolveTexts(options?: TableTextOptionsInput) {
+    const defaults: TableTextOptions = {
       fullCheckboxText: 'Insert full width table',
       customBtnText: 'Custom',
       confirmText: 'Confirm',
@@ -405,7 +410,35 @@ export class TableUp {
       DeleteTable: 'Delete table',
       BackgroundColor: 'Set background color',
       BorderColor: 'Set border color',
-    }, options);
+    };
+    if (isFunction(options)) {
+      const textGetter = options;
+      const tableModule = this;
+      return new Proxy(defaults, {
+        get(target, key: string | symbol) {
+          if (typeof key !== 'string') return Reflect.get(target, key);
+          const value = textGetter.call(tableModule, key);
+          return isString(value) ? value : (target as Record<string, string>)[key];
+        },
+      });
+    }
+    return Object.assign(defaults, options);
+  }
+
+  async refreshUI() {
+    this.options.texts = this.resolveTexts(this.textOptionsInput);
+
+    const picker = this.getToolbarPicker();
+    if (picker) {
+      picker.label.innerHTML = this.options.icon;
+      await this.buildCustomSelect(this.options.customSelect, picker);
+    }
+
+    for (const module of Object.values(this.modules)) {
+      if (module && typeof (module as any).hide === 'function') {
+        (module as any).hide();
+      }
+    }
   }
 
   initModules() {
@@ -655,7 +688,7 @@ export class TableUp {
 
   async buildCustomSelect(customSelect: ((module: TableUp, picker: QuillThemePicker) => HTMLElement | Promise<HTMLElement>) | undefined, picker: QuillThemePicker) {
     if (!customSelect || !isFunction(customSelect)) return;
-    const dom = document.createElement('div');
+    const dom = document.createElement('span');
     dom.classList.add('ql-custom-select');
     this.selector = await customSelect(this, picker);
     dom.appendChild(this.selector);

package/src/utils/components/table/select-box.ts

@@ -11,14 +11,14 @@ interface TableSelectOptions {
 }
 export function createSelectBox(options: Partial<TableSelectOptions> = {}) {
   const bem = createBEM('select-box');
-  const selectDom = document.createElement('div');
+  const selectDom = document.createElement('span');
   selectDom.classList.add(bem.b());
 
-  const selectBlock = document.createElement('div');
+  const selectBlock = document.createElement('span');
   selectBlock.classList.add(bem.be('block'));
   for (let r = 0; r < (options.row || 8); r++) {
     for (let c = 0; c < (options.col || 8); c++) {
-      const selectItem = document.createElement('div');
+      const selectItem = document.createElement('span');
       selectItem.classList.add(bem.be('item'));
       selectItem.dataset.row = String(r + 1);
       selectItem.dataset.col = String(c + 1);
@@ -62,7 +62,7 @@ export function createSelectBox(options: Partial<TableSelectOptions> = {}) {
 
   if (options.customBtn) {
     const texts = options.texts || {};
-    const selectCustom = document.createElement('div');
+    const selectCustom = document.createElement('span');
     selectCustom.classList.add(bem.be('custom'));
     selectCustom.textContent = texts.customBtnText || 'Custom';
     selectCustom.addEventListener('click', async () => {

package/src/utils/types.ts

@@ -57,6 +57,7 @@ export interface TableTextOptions extends TableCreatorTextOptions, TableMenuText
   transparent: string;
   perWidthInsufficient: string;
 }
+export type TableTextOptionsInput = Partial<TableTextOptions> | ((this: TableUp, key: string) => string);
 export interface TableUpExtraModule extends Constructor<any, [TableUp, Quill, any]> {
   moduleName: string;
 }
@@ -74,6 +75,9 @@ export interface TableUpOptions {
   autoMergeCell: boolean;
   modules: TableUpModule[];
 }
+export interface TableUpOptionsInput extends Partial<Omit<TableUpOptions, 'texts'>> {
+  texts?: TableTextOptionsInput;
+}
 export interface TableColValue {
   tableId: string;
   colId: string;