quill-table-up 3.3.2 → 3.5.0

package/package.json

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

package/src/__tests__/unit/table-clipboard.test.ts

@@ -2,6 +2,7 @@ import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableCellInnerFormat } from '../../formats';
 import { TableUp } from '../../table-up';
+import { parseCSSRules } from '../../utils';
 import { createQuillWithTableModule, createTableBodyHTML, createTableCaptionHTML, createTableDeltaOps, createTableHTML, createTaleColHTML, datasetTag, expectDelta, replaceAttrEmptyRow, simulatePasteHTML } from './utils';
 
 const Delta = Quill.import('delta');
@@ -2174,3 +2175,230 @@ describe('test TableUp `getHTMLByCell`', () => {
     }
   });
 });
+
+describe('clipboard style block resolution', () => {
+  it('class-based background-color is preserved on table cell', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.xl65{background-color:#FFC000}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+    expect(style).toMatch(/#FFC000|rgb\(255, 192, 0\)/i);
+  });
+
+  it('class-based color is preserved as Quill inline format', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.xl65{color:red}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    // text and \n may be merged into a single op when attributes match
+    const textOp = delta.ops.find(op => typeof op.insert === 'string' && (op.insert as string).includes('text'));
+    expect(textOp).toBeDefined();
+    expect(textOp!.attributes?.color).toBeTruthy();
+  });
+
+  it('class-based bold is preserved as Quill inline format', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.xl65{font-weight:bold}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    // text and \n may be merged into a single op when attributes match
+    const textOp = delta.ops.find(op => typeof op.insert === 'string' && (op.insert as string).includes('text'));
+    expect(textOp).toBeDefined();
+    expect(textOp!.attributes?.bold).toBe(true);
+  });
+
+  it('inline style takes priority over class style', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.xl65{background-color:red}</style><table><tr><td class="xl65" style="background-color:blue">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+    expect(style).toMatch(/blue/i);
+    expect(style).not.toMatch(/red/i);
+  });
+
+  it('@-rules are skipped without error', () => {
+    const rules = parseCSSRules('@page{margin:1in} .xl65{background:red}');
+    expect(rules.length).toBe(1);
+    expect(rules[0].selector).toBe('.xl65');
+    expect(rules[0].styles.background).toBe('red');
+  });
+
+  it('multiple style blocks are all processed', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.a{background-color:red}</style><style>.b{background-color:blue}</style><table><tr><td class="a">A</td><td class="b">B</td></tr></table>',
+    });
+    const cellOps = delta.ops.filter(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOps.length).toBeGreaterThanOrEqual(2);
+    expect((cellOps[0].attributes!['table-up-cell-inner'] as any).style).toContain('background-color');
+    expect((cellOps[1].attributes!['table-up-cell-inner'] as any).style).toContain('background-color');
+  });
+
+  it('simple tag selectors (td) are skipped by default', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td{background-color:red} .xl65{background-color:blue}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    // class selector applied, tag selector skipped
+    expect(style).toMatch(/blue/i);
+  });
+
+  it('descendant tag selectors (table td) are skipped by default', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>table td{background-color:red} .xl65{background-color:blue}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toMatch(/blue/i);
+    expect(style).not.toMatch(/red/i);
+  });
+
+  it('child combinator tag selectors (tr > td) are skipped by default', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>tr > td{background-color:red}</style><table><tr><td>text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style || '';
+    expect(style).not.toContain('background-color');
+  });
+
+  it('deep combinator tag selectors (table > tbody > tr > td) are skipped by default', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>table > tbody > tr > td{background-color:red}</style><table><tbody><tr><td>text</td></tr></tbody></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style || '';
+    expect(style).not.toContain('background-color');
+  });
+
+  it('sibling combinator tag selectors (td + td) are skipped by default', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td + td{background-color:red}</style><table><tr><td>a</td><td>b</td></tr></table>',
+    });
+    const cellOps = delta.ops.filter(op => op.attributes?.['table-up-cell-inner']);
+    for (const op of cellOps) {
+      const style = (op.attributes!['table-up-cell-inner'] as any).style || '';
+      expect(style).not.toContain('background-color');
+    }
+  });
+
+  it('tag+class selectors (td.xl65) are NOT skipped', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td.xl65{background-color:red}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+  });
+
+  it('tag+id selectors (td#main) are NOT skipped', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td#main{background-color:red}</style><table><tr><td id="main">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+  });
+
+  it('tag+attribute selectors (td[data-x]) are NOT skipped', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td[data-x]{background-color:red}</style><table><tr><td data-x="1">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+  });
+
+  it('class descendant tag selectors (.cls td) are NOT skipped', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>.wrap td{background-color:#FFC000}</style><table class="wrap"><tr><td>text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+    expect(style).toMatch(/#FFC000|rgb\(255, 192, 0\)/i);
+  });
+
+  it('pseudo selectors (td:first-child) are NOT skipped', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td:first-child{background-color:red}</style><table><tr><td>a</td><td>b</td></tr></table>',
+    });
+    const cellOps = delta.ops.filter(op => op.attributes?.['table-up-cell-inner']);
+    // first cell should have background-color, second should not
+    const styles = cellOps.map(op => (op.attributes!['table-up-cell-inner'] as any).style || '');
+    expect(styles.some(s => s.includes('background-color'))).toBe(true);
+    expect(styles.some(s => !s.includes('background-color'))).toBe(true);
+  });
+
+  it('comma-separated mixed selectors skip only the tag-only parts', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td, .xl65{background-color:red}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    // ".xl65" part applied (tag "td" part skipped, but .xl65 matches the same element)
+    expect(style).toContain('background-color');
+  });
+
+  it('complex tag selectors are applied when pasteDefaultTagStyle is true', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true, pasteDefaultTagStyle: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>table td{background-color:red}</style><table><tr><td>text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+  });
+
+  it('pasteStyleSheet=false disables style resolution', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: false });
+    const delta = quill.clipboard.convert({
+      html: '<style>.xl65{background-color:#FFC000}</style><table><tr><td class="xl65">text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style || '';
+    expect(style).not.toContain('background-color');
+  });
+
+  it('pasteDefaultTagStyle=true enables tag selector styles', () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`, { pasteStyleSheet: true, pasteDefaultTagStyle: true });
+    const delta = quill.clipboard.convert({
+      html: '<style>td{background-color:#FFC000}</style><table><tr><td>text</td></tr></table>',
+    });
+    const cellOp = delta.ops.find(op => op.attributes?.['table-up-cell-inner']);
+    expect(cellOp).toBeDefined();
+    const style = (cellOp!.attributes!['table-up-cell-inner'] as any).style;
+    expect(style).toContain('background-color');
+  });
+});

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/modules/table-clipboard/table-clipboard.ts

@@ -1,10 +1,11 @@
 import type { Parchment as TypeParchment } from 'quill';
 import type { Delta as TypeDelta } from 'quill/core';
 import type TypeClipboard from 'quill/modules/clipboard';
-import type { TableCaptionValue, TableCellValue } from '../../utils';
+import type { TableUp } from '../../table-up';
+import type { TableCaptionValue, TableCellValue, TableUpOptions } from '../../utils';
 import Quill from 'quill';
 import { TableCellFormat, TableColFormat } from '../../formats';
-import { blotName, cssTextToObject, isObject, isString, objectToCssText, randomId, tableUpSize } from '../../utils';
+import { blotName, cssTextToObject, isObject, isString, objectToCssText, randomId, resolveStyleSheetToInline, tableUpInternal, tableUpSize } from '../../utils';
 
 const Delta = Quill.import('delta');
 const Clipboard = Quill.import('modules/clipboard') as typeof TypeClipboard;
@@ -71,6 +72,17 @@ export class TableClipboard extends Clipboard {
     this.addMatcher(Node.ELEMENT_NODE, this.matchTdAttributor.bind(this));
   }
 
+  normalizeHTML(doc: Document) {
+    super.normalizeHTML(doc);
+    const tableModule = this.quill.getModule(tableUpInternal.moduleName) as TableUp | undefined;
+    const options: Partial<TableUpOptions> = tableModule?.options ?? {};
+    if (options.pasteStyleSheet !== false) {
+      resolveStyleSheetToInline(doc, {
+        includeDefaultTagStyle: options.pasteDefaultTagStyle,
+      });
+    }
+  }
+
   getStyleBackgroundColor(node: Node, delta: TypeDelta) {
     const backgroundColor = (node as HTMLElement).style.backgroundColor;
     if (backgroundColor) {

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

@@ -1 +1 @@
-{"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}]]}
+{"version":"4.0.18","results":[[":__tests__/unit/utils.test-d.ts",{"duration":0,"failed":false}],[":__tests__/unit/table-clipboard.test.ts",{"duration":9695.598699999999,"failed":false}],[":__tests__/unit/table-redo-undo.test.ts",{"duration":17920.0041,"failed":false}],[":__tests__/unit/table-hack.test.ts",{"duration":3642.7681000000002,"failed":false}],[":__tests__/unit/table-cell-merge.test.ts",{"duration":4956.3197,"failed":false}],[":__tests__/unit/table-blots.test.ts",{"duration":4045.2762999999995,"failed":false}],[":__tests__/unit/table-insert.test.ts",{"duration":7073.0178,"failed":false}],[":__tests__/unit/utils.test.ts",{"duration":975.8723999999997,"failed":false}],[":__tests__/unit/table-caption.test.ts",{"duration":1513.6225000000004,"failed":false}],[":__tests__/unit/table-contenteditable.test.ts",{"duration":681.7878000000001,"failed":false}],[":__tests__/unit/table-remove.test.ts",{"duration":4171.0812,"failed":false}],[":__tests__/unit/table-refresh-ui.test.ts",{"duration":414.3294000000001,"failed":false}]]}

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,31 @@ 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,
+      pasteStyleSheet: false,
+      pasteDefaultTagStyle: false,
       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 +412,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() {

package/src/utils/index.ts

@@ -8,7 +8,7 @@ export * from './is';
 export * from './position';
 export * from './resize-observer-helper';
 export * from './scroll';
-export * from './style-helper';
+export * from './style';
 export * from './transformer';
 export * from './transition-event-helper';
 export * from './types';

package/src/utils/{style-helper.ts → style/helper.ts}

@@ -1,4 +1,4 @@
-import { toCamelCase, toKebabCase } from './transformer';
+import { toCamelCase, toKebabCase } from '../transformer';
 
 export function getInlineStyles(domNode: HTMLElement): Record<string, string> {
   const inlineStyles: Record<string, string> = {};

package/src/utils/style/index.ts

@@ -0,0 +1,2 @@
+export * from './helper';
+export * from './inline-core';

package/src/utils/style/inline-core.ts

@@ -0,0 +1,80 @@
+interface CSSRule {
+  selector: string;
+  styles: Record<string, string>;
+}
+
+export function parseCSSRules(cssText: string): CSSRule[] {
+  const rules: CSSRule[] = [];
+  // Remove CSS comments
+  const cleaned = cssText.replaceAll(/\/\*[\s\S]*?\*\//g, '');
+  // Match selector { declarations } blocks
+  const ruleRegex = /([^{}]+)\{([^{}]*)\}/g;
+  let match;
+  while ((match = ruleRegex.exec(cleaned)) !== null) {
+    const selector = match[1].trim();
+    const declarations = match[2].trim();
+    // Skip @-rules
+    if (selector.startsWith('@')) continue;
+    const styles: Record<string, string> = {};
+    for (const decl of declarations.split(';')) {
+      const colonIndex = decl.indexOf(':');
+      if (colonIndex === -1) continue;
+      const prop = decl.slice(0, colonIndex).trim();
+      const value = decl.slice(colonIndex + 1).trim();
+      if (prop && value) {
+        styles[prop] = value;
+      }
+    }
+    if (Object.keys(styles).length > 0) {
+      rules.push({ selector, styles });
+    }
+  }
+  return rules;
+}
+
+// A selector is tag-only if it contains no class (.), id (#),
+// attribute ([), or pseudo (:) indicators — meaning it's composed
+// solely of tag names and combinators (space, >, +, ~).
+// e.g. "td", "table td", "tr > td", "table > tbody > tr > td"
+export function isTagOnlySelector(selector: string): boolean {
+  return !/[.#\[:]/.test(selector);
+}
+
+export interface ResolveStyleSheetOptions {
+  includeDefaultTagStyle?: boolean;
+}
+
+export function resolveStyleSheetToInline(doc: Document, options?: ResolveStyleSheetOptions): void {
+  const includeDefaultTagStyle = options?.includeDefaultTagStyle ?? false;
+  const styleElements = doc.querySelectorAll('style');
+  for (const styleEl of Array.from(styleElements)) {
+    const rules = parseCSSRules(styleEl.textContent || '');
+    for (const rule of rules) {
+      // A single selector string may contain comma-separated selectors
+      const selectors = rule.selector.split(',').map(s => s.trim()).filter(Boolean);
+      for (const selector of selectors) {
+        // Skip tag-only selectors (e.g. "td", "table td", "tr > td") unless explicitly allowed
+        if (!includeDefaultTagStyle && isTagOnlySelector(selector)) {
+          continue;
+        }
+        let elements: NodeListOf<Element>;
+        try {
+          elements = doc.querySelectorAll(selector);
+        }
+        catch {
+          // Skip invalid selectors
+          continue;
+        }
+        for (const el of Array.from(elements)) {
+          const htmlEl = el as HTMLElement;
+          for (const [prop, value] of Object.entries(rule.styles)) {
+            // Inline style takes priority — only set if not already present
+            if (!htmlEl.style.getPropertyValue(prop)) {
+              htmlEl.style.setProperty(prop, value);
+            }
+          }
+        }
+      }
+    }
+  }
+}

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;
 }
@@ -72,8 +73,13 @@ export interface TableUpOptions {
   texts: TableTextOptions;
   icon: string;
   autoMergeCell: boolean;
+  pasteStyleSheet: boolean;
+  pasteDefaultTagStyle: boolean;
   modules: TableUpModule[];
 }
+export interface TableUpOptionsInput extends Partial<Omit<TableUpOptions, 'texts'>> {
+  texts?: TableTextOptionsInput;
+}
 export interface TableColValue {
   tableId: string;
   colId: string;