zzxming · zzxming · Nov 25, 2024 · Nov 24, 2024 · Nov 24, 2024 · Nov 24, 2024
diff --git a/docs/index.js b/docs/index.js
@@ -28,8 +28,8 @@ const quill1 = new Quill('#editor1', {
       ['clean'],
     ],
     [TableUp.moduleName]: {
-      full: true,
-      resizerSetOuter: true,
+      full: false,
+      resizerSetOuter: false,
       selection: {
         selectColor: '#04f',
         tableMenuClass: window.TableUp.TableMenuContextmenu,
@@ -117,11 +117,11 @@ const quill2 = new Quill('#editor2', {
       ['clean'],
     ],
     [TableUp.moduleName]: {
-      full: false,
-      resizerSetOuter: false,
+      full: true,
+      resizerSetOuter: true,
       selection: {
         selectColor: '#f40',
-        // tableMenuClass: window.TableUp.TableMenuSelect,
+        tableMenuClass: window.TableUp.TableMenuSelect,
         tableMenu: {
           localstorageKey: 'used-color',
           tipText: true,
@@ -219,15 +219,15 @@ quill1.setContents([
   // { insert: '\n' },
 
   { insert: '\n' },
-  { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 121 } } },
-  { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 121 } } },
-  { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 121 } } },
+  { insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121, align: 'center' } } },
+  { insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121, align: 'center' } } },
+  { insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 121, align: 'center' } } },
   { insert: '1' },
-  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
+  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' },
   { insert: '2' },
-  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
+  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' },
   { insert: '3' },
-  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
+  { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' },
   { insert: '4' },
   { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
   { insert: '5' },

diff --git a/src/__tests__/table-insert-blot.test.ts b/src/__tests__/table-insert-blot.test.ts
@@ -249,14 +249,28 @@ describe('set contents', () => {
     );
   });
 
+  it('should get correct prop', async () => {
+    const quill = createQuillWithTableModule(`<p><br></p>`);
+    quill.setContents(createTableDeltaOps(3, 3, { full: false, width: 200, align: 'center' }));
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(3, 3, { full: false, width: 200, align: 'center' })}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'contenteditable'] },
+    );
+  });
+
   it('should display an empty table', async () => {
     const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(createTableDeltaOps(2, 2, true, 100, { isEmpty: true }));
+    quill.setContents(createTableDeltaOps(2, 2, {}, { isEmpty: true }));
     await vi.runAllTimersAsync();
     expect(quill.root).toEqualHTML(
       `
         <p><br></p>
-        ${createTableHTML(2, 2, true, 100, { isEmpty: true })}
+        ${createTableHTML(2, 2, {}, { isEmpty: true })}
         <p><br></p>
       `,
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'data-row-id', 'data-col-id', 'data-rowspan', 'data-colspan', 'contenteditable'] },
@@ -301,7 +315,7 @@ describe('set contents', () => {
 describe('column width calculate', () => {
   it('should calculate correct width', async () => {
     const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(createTableDeltaOps(3, 3, false, 100));
+    quill.setContents(createTableDeltaOps(3, 3, { full: false }));
     await vi.runAllTimersAsync();
     expect(quill.root.querySelectorAll('table')[0].style.width).toBe('300px');
   });

diff --git a/src/__tests__/table-insert-remove-merge.test.ts b/src/__tests__/table-insert-remove-merge.test.ts
@@ -351,7 +351,7 @@ describe('remove column from table', () => {
   });
 
   it('remove column in not full table', async () => {
-    const quill = await createTable(1, 3, false, 100);
+    const quill = await createTable(1, 3, { full: false });
     const tableModule = quill.getModule('tableUp') as TableUp;
     await vi.runAllTimersAsync();
     const table = quill.root.querySelector('table')!;
@@ -364,7 +364,7 @@ describe('remove column from table', () => {
       `
         <p><br></p>
         <div>
-          <table cellpadding="0" cellspacing="0" style="width: 200px;">
+          <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 200px;">
             <colgroup>
               <col width="100px" />
               <col width="100px" />

diff --git a/src/__tests__/table-redo-undo.test.ts b/src/__tests__/table-redo-undo.test.ts
@@ -1,7 +1,9 @@
 import type TableUp from '../index';
+import type { TableMainFormat } from '../index';
+import Quill from 'quill';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { TableCellInnerFormat, TableSelection } from '../index';
-import { createTable, createTableHTML, createTaleColHTML } from './utils';
+import { createTable, createTableBodyHTML, createTableHTML, createTaleColHTML, datasetAlign, datasetFull } from './utils';
 
 beforeEach(() => {
   vi.useFakeTimers();
@@ -730,7 +732,7 @@ describe('cell attribute', () => {
       `
         <p><br></p>
         <div>
-          <table cellpadding="0" cellspacing="0" data-full="true">
+          <table cellpadding="0" cellspacing="0"${datasetFull(true)} style="margin-right: auto;">
             ${createTaleColHTML(3)}
             <tbody>
               ${
@@ -762,4 +764,147 @@ describe('cell attribute', () => {
       { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
     );
   });
+
+  it('undo set border color', async () => {
+    const quill = await createTable(3, 3);
+    const tableModule = quill.getModule('tableUp') as TableUp;
+    const table = quill.root.querySelector('table')!;
+    tableModule.tableSelection = new TableSelection(tableModule, table, quill);
+    const tds = quill.scroll.descendants(TableCellInnerFormat, 0);
+    const selectedTds = [tds[0], tds[1], tds[2]];
+    tableModule.setCellAttrs(selectedTds, 'border-color', 'red');
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0"${datasetFull(true)} style="margin-right: auto;">
+            ${createTaleColHTML(3)}
+            <tbody>
+              ${
+                new Array(3).fill(0).map((_, i) => `
+                  <tr data-row-id="${i + 1}">
+                    ${
+                      new Array(3).fill(0).map((_, j) => `<td rowspan="1" colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}"${i === 0 ? ' style="border-color: red;"' : ''}>
+                        <div data-rowspan="1" data-colspan="1" data-row-id="${i + 1}" data-col-id="${j + 1}"${i === 0 ? ' data-border-color="red"' : ''}><p>${i * 3 + j + 1}</p></div>
+                      </td>`).join('\n')
+                    }
+                  </tr>
+                `).join('\n')
+              }
+            </tbody>
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+    );
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(3, 3)}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+    );
+  });
+
+  it('undo and redo table width change', async () => {
+    const quill = await createTable(3, 3, { full: false, width: 100 });
+    const table = quill.root.querySelector('table')!;
+    const tableBlot = Quill.find(table) as TableMainFormat;
+    const cols = tableBlot.getCols();
+    for (const col of cols) {
+      col.width = 120;
+    }
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(3, 3, { full: false, width: 120 })}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'contenteditable'] },
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(3, 3, { full: false, width: 100 })}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'contenteditable'] },
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        ${createTableHTML(3, 3, { full: false, width: 120 })}
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'contenteditable'] },
+    );
+  });
+
+  it('undo table align change', async () => {
+    const quill = await createTable(3, 3, { full: false, width: 100 });
+    const table = quill.root.querySelector('table')!;
+    const tableBlot = Quill.find(table) as TableMainFormat;
+    const cols = tableBlot.getCols();
+    for (const col of cols) {
+      col.align = 'center';
+    }
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0"${datasetAlign('center')} style="margin-right: auto; width: 300px; margin-left: auto;">
+            ${createTaleColHTML(3, { align: 'center', full: false, width: 100 })}
+            ${createTableBodyHTML(3, 3)}
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+    );
+
+    quill.history.undo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0" style="margin-right: auto; width: 300px;">
+            ${createTaleColHTML(3, { full: false, width: 100 })}
+            ${createTableBodyHTML(3, 3)}
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+    );
+
+    quill.history.redo();
+    await vi.runAllTimersAsync();
+    expect(quill.root).toEqualHTML(
+      `
+        <p><br></p>
+        <div>
+          <table cellpadding="0" cellspacing="0"${datasetAlign('center')} style="margin-right: auto; width: 300px; margin-left: auto;">
+            ${createTaleColHTML(3, { align: 'center', full: false, width: 100 })}
+            ${createTableBodyHTML(3, 3)}
+          </table>
+        </div>
+        <p><br></p>
+      `,
+      { ignoreAttrs: ['class', 'data-table-id', 'contenteditable'] },
+    );
+  });
 });
diff --git a/src/__tests__/utils.test.ts b/src/__tests__/utils.test.ts
@@ -485,7 +485,7 @@ describe('test override format', () => {
     expect(quill.root).toEqualHTML(
       `
         <p><br></p>
-        ${createTableHTML(2, 2, true, 100, { isEmpty: true })}
+        ${createTableHTML(2, 2, {}, { isEmpty: true })}
         <p><br></p>
       `,
       { ignoreAttrs: ['class', 'style', 'data-table-id', 'contenteditable'] },