quill-table-up 2.2.2 → 2.2.4

package/package.json

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

package/src/__tests__/e2e/table-blots.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { extendTest } from './utils';
+import { createTableBySelect, extendTest } from './utils';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('http://127.0.0.1:5500/docs/test.html');
@@ -50,3 +50,41 @@ extendTest('test table full width switch redo and undo', async ({ page, editorPa
   expect(await page.locator('#editor1 .ql-editor .ql-table colgroup[data-full="true"]').count()).toBe(1);
   expect(await page.locator('#editor1 .ql-editor .ql-table col[data-full="true"]').count()).toBe(4);
 });
+
+extendTest('test table tools should hide after table removed', async ({ page, editorPage }) => {
+  editorPage.index = 0;
+  await createTableBySelect(page, 'container1', 3, 3);
+  await page.locator('#container1 .ql-editor .ql-table td').nth(0).click();
+  await page.waitForTimeout(1000);
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection')).toBeVisible();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-align')).toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-scrollbar__container')).toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-resize-line__col')).toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-resize-line__row')).toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-scale')).toBeAttached();
+  await editorPage.setContents([{ insert: 'replace' }]);
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-selection')).not.toBeVisible();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-align')).not.toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-scrollbar__container')).not.toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-resize-line__col')).not.toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-resize-line__row')).not.toBeAttached();
+  await expect(page.locator('#container1 .table-up-toolbox .table-up-scale')).not.toBeAttached();
+
+  editorPage.index = 1;
+  await createTableBySelect(page, 'container2', 3, 3);
+  await page.locator('#container2 .ql-editor .ql-table td').nth(0).click();
+  await page.waitForTimeout(1000);
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-selection')).toBeVisible();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-align')).toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-menu')).toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-scrollbar__container')).toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-resize-box')).toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-scale')).toBeAttached();
+  await editorPage.setContents([{ insert: 'replace' }]);
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-selection')).not.toBeVisible();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-menu')).not.toBeVisible();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-align')).not.toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-scrollbar__container')).not.toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-resize-box')).not.toBeAttached();
+  await expect(page.locator('#container2 .table-up-toolbox .table-up-scale')).not.toBeAttached();
+});

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

@@ -1,7 +1,10 @@
+import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableCellFormat } from '../../formats';
 import { TableUp } from '../../table-up';
-import { createQuillWithTableModule } from './utils';
+import { createQuillWithTableModule, createTableBodyHTML, createTableCaptionHTML, createTaleColHTML, expectDelta } from './utils';
+
+const Delta = Quill.import('delta');
 
 beforeEach(() => {
   vi.useFakeTimers();
@@ -221,3 +224,57 @@ describe('test tableCell getNearByCell', () => {
     expect(tds[2].getNearByCell('top')).toEqual([tds[1]]);
   });
 });
+
+describe('test table child sort', () => {
+  it('table child should sort by correct order event delta not', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents([
+      { insert: '\n' },
+      { insert: '1' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '2' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: '3' },
+      { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+      { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 100 } } },
+      { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 100 } } },
+      { insert: 'title' },
+      { attributes: { 'table-up-caption': { tableId: '1', side: 'top' } }, insert: '\n' },
+      { insert: '\n' },
+    ]);
+    await vi.runAllTimersAsync();
+
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
+            ${createTableCaptionHTML({ text: 'title' })}
+            ${createTaleColHTML(3, { full: false, width: 100 })}
+            ${createTableBodyHTML(1, 3, { isEmpty: false })}
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+    expectDelta(
+      new Delta([
+        { insert: '\ntitle' },
+        { attributes: { 'table-up-caption': { side: 'top' } }, insert: '\n' },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+  });
+});

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

@@ -1,7 +1,7 @@
 import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableUp } from '../../table-up';
-import { createQuillWithTableModule, createTableDeltaOps, createTableHTML, createTaleColHTML, expectDelta, simulatePasteHTML } from './utils';
+import { createQuillWithTableModule, createTableBodyHTML, createTableCaptionHTML, createTableDeltaOps, createTableHTML, createTaleColHTML, expectDelta, simulatePasteHTML } from './utils';
 
 const Delta = Quill.import('delta');
 
@@ -244,6 +244,60 @@ describe('clipboard cell structure', () => {
     );
   });
 
+  it('clipboard convert multiple merged cell 3', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents(
+      quill.clipboard.convert({
+        html: '<table><tbody><tr><td rowspan="3">merge1</td><td colspan="2">merge2</td><td>3</td></tr><tr><td rowspan="2">merge3</td><td>1</td><td>4</td></tr><tr><td>2</td><td>5</td></tr></tbody></table>',
+      }),
+    );
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0">
+            ${createTaleColHTML(4, { width: 100, full: false })}
+            <tbody>
+              <tr>
+                <td rowspan="3" colspan="1">
+                  <div data-rowspan="3" data-colspan="1"><p>merge1</p></div>
+                </td>
+                <td rowspan="1" colspan="2">
+                  <div data-rowspan="1" data-colspan="2"><p>merge2</p></div>
+                </td>
+                <td rowspan="1" colspan="1">
+                  <div data-rowspan="1" data-colspan="1"><p>3</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="2" colspan="1">
+                  <div data-rowspan="2" data-colspan="1"><p>merge3</p></div>
+                </td>
+                <td rowspan="1" colspan="1">
+                  <div data-rowspan="1" data-colspan="1"><p>1</p></div>
+                </td>
+                <td rowspan="1" colspan="1">
+                  <div data-rowspan="1" data-colspan="1"><p>4</p></div>
+                </td>
+              </tr>
+              <tr>
+                <td rowspan="1" colspan="1">
+                  <div data-rowspan="1" data-colspan="1"><p>2</p></div>
+                </td>
+                <td rowspan="1" colspan="1">
+                  <div data-rowspan="1" data-colspan="1"><p>5</p></div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'contenteditable'] },
+    );
+  });
+
   it('clipboard convert table without new line', async () => {
     const quill = createQuillWithTableModule(`<p><br></p>`);
     quill.setContents(
@@ -827,6 +881,48 @@ describe('clipboard cell structure', () => {
       { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
     );
   });
+
+  it('clipboard convert should generate colgroup at correct position', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents(
+      quill.clipboard.convert({
+        html: '<table class="ql-table" data-table-id="0u473v7j5th" cellpadding="0" cellspacing="0"><tbody data-table-id="0u473v7j5th"><tr class="ql-table-row" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj"><td class="ql-table-cell" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="0025lmzkmn85x" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="0025lmzkmn85x" data-rowspan="1" data-colspan="1" contenteditable="true"><p>1</p></div></td><td class="ql-table-cell" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="g8v4waukxpe" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="g8v4waukxpe" data-rowspan="1" data-colspan="1" contenteditable="true"><p>2</p></div></td><td class="ql-table-cell" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="7ubw564uue5" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="0u473v7j5th" data-row-id="1de78ie70hj" data-col-id="7ubw564uue5" data-rowspan="1" data-colspan="1" contenteditable="true"><p>3</p></div></td></tr></tbody><caption class="ql-table-caption" data-table-id="0u473v7j5th" contenteditable="true">title</caption></table>',
+      }),
+    );
+    await vi.runAllTimersAsync();
+
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
+            ${createTableCaptionHTML({ text: 'title' })}
+            ${createTaleColHTML(3, { full: false, width: 100 })}
+            ${createTableBodyHTML(1, 3, { isEmpty: false })}
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
+    );
+    expectDelta(
+      new Delta([
+        { insert: '\ntitle' },
+        { attributes: { 'table-up-caption': { side: 'top' } }, insert: '\n' },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: { 'table-up-col': { full: false, width: 100 } } },
+        { insert: '1' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '2' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '3' },
+        { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
+        { insert: '\n' },
+      ]),
+      quill.getContents(),
+    );
+  });
 });
 
 describe('clipboard content format', () => {

package/src/formats/table-main-format.ts

@@ -1,3 +1,4 @@
+import type TypeScroll from 'quill/blots/scroll';
 import type { TableValue } from '../utils';
 import { blotName, tableUpSize } from '../utils';
 import { ContainerFormat } from './container-format';
@@ -25,7 +26,7 @@ export class TableMainFormat extends ContainerFormat {
     return node;
   }
 
-  constructor(scroll: any, domNode: HTMLElement, _value: any) {
+  constructor(public scroll: TypeScroll, domNode: HTMLElement, _value: unknown) {
     super(scroll, domNode);
     this.updateAlign();
   }
@@ -159,4 +160,46 @@ export class TableMainFormat extends ContainerFormat {
 
     super.optimize(context);
   }
+
+  sortMergeChildren() {
+    // move same type children to the first child
+    const childs: Record<string, ContainerFormat[]> = {
+      [blotName.tableCaption]: [],
+      [blotName.tableColgroup]: [],
+      [blotName.tableBody]: [],
+    };
+    // eslint-disable-next-line unicorn/no-array-for-each
+    this.children.forEach((child) => {
+      if (childs[child.statics.blotName]) {
+        childs[child.statics.blotName].push(child as ContainerFormat);
+      }
+    });
+    for (const formats of Object.values(childs)) {
+      for (let i = 1; i < formats.length; i++) {
+        formats[i].moveChildren(formats[0]);
+      }
+    }
+
+    // check sort child
+    const tableCaption = childs[blotName.tableCaption][0];
+    const tableColgroup = childs[blotName.tableColgroup][0];
+    const tableBody = childs[blotName.tableBody][0];
+
+    const isCaptionFirst = tableCaption && this.children.head !== tableCaption;
+    const isColgroupSecond = tableColgroup && tableCaption && tableCaption.next !== tableColgroup;
+    const isColgroupFirst = tableColgroup && !tableCaption && this.children.head !== tableColgroup;
+    const isBodyLast = tableBody && this.children.tail !== tableBody;
+
+    // sort child
+    if (isCaptionFirst || isColgroupSecond || isColgroupFirst || isBodyLast) {
+      const tableMain = this.clone() as TableMainFormat;
+      tableCaption && tableMain.appendChild(tableCaption);
+      tableColgroup && tableMain.appendChild(tableColgroup);
+      tableBody && tableMain.appendChild(tableBody);
+
+      // eslint-disable-next-line unicorn/no-array-for-each
+      this.children.forEach(child => child.remove());
+      tableMain.moveChildren(this);
+    }
+  }
 }

package/src/modules/table-clipboard.ts

@@ -82,7 +82,13 @@ export class TableClipboard extends Clipboard {
         ops.push({ attributes: attrs, insert });
       }
       // record col insert index
-      if (!attrs?.[blotName.tableCellInner] && !hasCol) {
+      if (
+        !attrs?.[blotName.tableCellInner]
+        && !attrs?.[blotName.tableCaption]
+        && !hasCol
+        && isString(insert)
+        && insert.trim().length > 0
+      ) {
         bodyStartIndex = i;
       }
     }
@@ -200,13 +206,15 @@ export class TableClipboard extends Clipboard {
       }
     }
     // skip the colspan of the cell in the previous row
-    const { colspan } = this.rowspanCount[this.cellCount];
-    this.cellCount += colspan;
+    for (let i = this.cellCount; i < this.rowspanCount.length; i++) {
+      const { rowspan, colspan } = this.rowspanCount[i];
+      if (rowspan === 0) break;
+      this.cellCount += colspan;
+    }
     // add current cell rowspan in `rowspanCount` to calculate next row cell
     if (cellFormat.rowspan > 1) {
       this.rowspanCount[this.cellCount] = { rowspan: cellFormat.rowspan, colspan: cellFormat.colspan };
     }
-
     const colId = this.colIds[this.cellCount];
     this.cellCount += cellFormat.colspan;
 

package/src/modules/table-resize/table-resize-scale.ts

@@ -159,6 +159,7 @@ export class TableResizeScale {
   destroy() {
     this.hide();
     this.quill.off(Quill.events.TEXT_CHANGE, this.updateWhenTextChange);
+    this.resizeobserver.disconnect();
     if (this.root) {
       this.root.remove();
     }

package/src/table-up.ts

@@ -328,6 +328,11 @@ export class TableUp {
       },
       false,
     );
+    this.quill.on(Quill.events.EDITOR_CHANGE, (type: typeof Quill.events.TEXT_CHANGE | typeof Quill.events.SELECTION_CHANGE) => {
+      if (type === Quill.events.TEXT_CHANGE && (!this.table || !this.quill.root.contains(this.table))) {
+        this.hideTableTools();
+      }
+    });
 
     this.quillHack();
     this.listenBalanceCells();
@@ -960,15 +965,23 @@ export class TableUp {
       Quill.events.SCROLL_OPTIMIZE,
       (mutations: MutationRecord[]) => {
         mutations.some((mutation) => {
-          if (
-            // TODO: if need add ['COL', 'COLGROUP']
-            ['TD', 'TR', 'TBODY', 'TABLE'].includes((mutation.target as HTMLElement).tagName)
-          ) {
+          // TODO: if need add ['COL', 'COLGROUP']
+          if (['TD', 'TR', 'TBODY', 'TABLE'].includes((mutation.target as HTMLElement).tagName)) {
             this.fixTableByLisenter();
             return true;
           }
           return false;
         });
+        for (const mutation of mutations) {
+          const mutationTarget = mutation.target as HTMLElement;
+          if (mutationTarget.tagName === 'TABLE') {
+            const tableMain = Quill.find(mutationTarget) as TableMainFormat;
+            if (tableMain) {
+              tableMain.sortMergeChildren();
+              break;
+            }
+          }
+        }
       },
     );
   }