quill-table-up 3.4.0 → 3.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quill-table-up",
   "type": "module",
-  "version": "3.4.0",
+  "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/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

@@ -380,6 +380,8 @@ export class TableUp {
       fullSwitch: true,
       icon: icons.table,
       autoMergeCell: true,
+      pasteStyleSheet: false,
+      pasteDefaultTagStyle: false,
       modules: [],
     } as TableUpOptions, rest);
   }

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

@@ -73,6 +73,8 @@ export interface TableUpOptions {
   texts: TableTextOptions;
   icon: string;
   autoMergeCell: boolean;
+  pasteStyleSheet: boolean;
+  pasteDefaultTagStyle: boolean;
   modules: TableUpModule[];
 }
 export interface TableUpOptionsInput extends Partial<Omit<TableUpOptions, 'texts'>> {