quill-table-up 2.0.4 → 2.0.6

package/src/__tests__/unit/table-insert-blot.test.ts

@@ -319,146 +319,3 @@ describe('column width calculate', () => {
     expect(quill.root.querySelectorAll('table')[0].style.width).toBe('300px');
   });
 });
-
-describe('html convert', () => {
-  it('should convert html code-block correctly', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1"><table data-table-id="1" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto; width: 363px;"><colgroup data-table-id="1" contenteditable="false"><col width="121px" data-table-id="1" data-col-id="1"><col width="121px" data-table-id="1" data-col-id="2"><col width="121px" data-table-id="1" data-col-id="3"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="1" data-rowspan="1" data-colspan="1"><p>1</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="2" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="2" data-rowspan="1" data-colspan="1"><p>2</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="3" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="3" data-rowspan="1" data-colspan="1"><p>3</p></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="2"><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="1" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="1" data-rowspan="1" data-colspan="1"><p>4</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="2" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="2" data-rowspan="1" data-colspan="1"><div class="ql-code-block-container" spellcheck="false"><div class="ql-code-block" data-language="plain">5</div><div class="ql-code-block" data-language="plain">5</div><div class="ql-code-block" data-language="plain">5</div></div><p>5</p><p>5</p><p>5</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="2" data-col-id="3" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="2" data-col-id="3" data-rowspan="1" data-colspan="1"><p>6</p></div></td></tr><tr class="ql-table-row" data-table-id="1" data-row-id="3"><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="1" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="1" data-rowspan="1" data-colspan="1"><p>7</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="2" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="2" data-rowspan="1" data-colspan="1"><p>8</p></div></td><td class="ql-table-cell" data-table-id="1" data-row-id="3" data-col-id="3" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="3" data-col-id="3" data-rowspan="1" data-colspan="1"><p>9</p></div></td></tr></tbody></table></div>' }),
-    );
-    await vi.runAllTimersAsync();
-
-    const ops = quill.getContents().ops;
-    const resultOps = [
-      { insert: '\n' },
-      { insert: { 'table-up-col': { full: false, width: 121 } } },
-      { insert: { 'table-up-col': { full: false, width: 121 } } },
-      { insert: { 'table-up-col': { full: false, width: 121 } } },
-      { 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: '4' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'code-block': 'plain', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'code-block': 'plain', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'code-block': 'plain', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '5' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '6' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '7' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '8' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '9' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '\n' },
-    ];
-    for (const [i, op] of ops.entries()) {
-      expect(op).toMatchObject(resultOps[i]);
-    }
-  });
-
-  it('should convert html header correctly', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="rlabchug06i"><table data-table-id="rlabchug06i" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto; width: 1166px;"><colgroup data-table-id="rlabchug06i" contenteditable="false"><col width="583px" data-table-id="rlabchug06i" data-col-id="ss993p1sqx"><col width="583px" data-table-id="rlabchug06i" data-col-id="2ixexk4mapx"></colgroup><tbody data-table-id="rlabchug06i"><tr class="ql-table-row" data-table-id="rlabchug06i" data-row-id="fvvkgpv86zw"><td class="ql-table-cell" data-table-id="rlabchug06i" data-row-id="fvvkgpv86zw" data-col-id="ss993p1sqx" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="rlabchug06i" data-row-id="fvvkgpv86zw" data-col-id="ss993p1sqx" data-rowspan="1" data-colspan="1"><h1>header1</h1></div></td><td class="ql-table-cell" data-table-id="rlabchug06i" data-row-id="fvvkgpv86zw" data-col-id="2ixexk4mapx" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="rlabchug06i" data-row-id="fvvkgpv86zw" data-col-id="2ixexk4mapx" data-rowspan="1" data-colspan="1"><h3>header3</h3></div></td></tr></tbody></table></div>' }),
-    );
-    await vi.runAllTimersAsync();
-
-    const ops = quill.getContents().ops;
-    const resultOps = [
-      { insert: '\n' },
-      { insert: { 'table-up-col': { full: false, width: 583 } } },
-      { insert: { 'table-up-col': { full: false, width: 583 } } },
-      { insert: 'header1' },
-      { attributes: { 'header': 1, 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: 'header3' },
-      { attributes: { 'header': 3, 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '\n' },
-    ];
-    for (const [i, op] of ops.entries()) {
-      expect(op).toMatchObject(resultOps[i]);
-    }
-  });
-
-  it('should convert html image correctly', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="7oymehdtx0k"><table data-table-id="7oymehdtx0k" data-full="true" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto;"><colgroup data-table-id="7oymehdtx0k" data-full="true" contenteditable="false"><col width="100%" data-full="true" data-table-id="7oymehdtx0k" data-col-id="hr7qo4t2dus"></colgroup><tbody data-table-id="7oymehdtx0k"><tr class="ql-table-row" data-table-id="7oymehdtx0k" data-row-id="69gog08ow04"><td class="ql-table-cell" data-table-id="7oymehdtx0k" data-row-id="69gog08ow04" data-col-id="hr7qo4t2dus" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="7oymehdtx0k" data-row-id="69gog08ow04" data-col-id="hr7qo4t2dus" data-rowspan="1" data-colspan="1"><p><img src="https://upload-bbs.miyoushe.com/upload/2024/06/18/5556092/73b7bae28fded7a72d93a35d5559b24c_3979852353547906724.png"></p></div></td></tr></tbody></table></div>' }),
-    );
-    await vi.runAllTimersAsync();
-
-    const ops = quill.getContents().ops;
-    const resultOps = [
-      { insert: '\n' },
-      { insert: { 'table-up-col': { full: true, width: 100 } } },
-      { insert: { image: 'https://upload-bbs.miyoushe.com/upload/2024/06/18/5556092/73b7bae28fded7a72d93a35d5559b24c_3979852353547906724.png' } },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '\n' },
-    ];
-    for (const [i, op] of ops.entries()) {
-      expect(op).toMatchObject(resultOps[i]);
-    }
-  });
-
-  it('should convert html video correctly', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="1"><table data-table-id="1" data-full="true" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto;"><colgroup data-table-id="1" data-full="true" contenteditable="false"><col width="100%" data-full="true" data-table-id="1" data-col-id="1"></colgroup><tbody data-table-id="1"><tr class="ql-table-row" data-table-id="1" data-row-id="1"><td class="ql-table-cell" data-table-id="1" data-row-id="1" data-col-id="1" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="1" data-row-id="1" data-col-id="1" data-rowspan="1" data-colspan="1"><iframe class="ql-video" frameborder="0" allowfullscreen="true" src="http://127.0.0.1:5500/docs/index.html"></iframe><p><br></p></div></td></tr></tbody></table></div>' }),
-    );
-    await vi.runAllTimersAsync();
-
-    const ops = quill.getContents().ops;
-    const resultOps = [
-      { insert: '\n' },
-      { insert: { 'table-up-col': { full: true, width: 100 } } },
-      { insert: { video: 'http://127.0.0.1:5500/docs/index.html' } },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '\n' },
-    ];
-    for (const [i, op] of ops.entries()) {
-      expect(op).toMatchObject(resultOps[i]);
-    }
-  });
-
-  it('should convert html list correctly', async () => {
-    const quill = createQuillWithTableModule(`<p><br></p>`);
-    quill.setContents(
-      quill.clipboard.convert({ html: '<div class="ql-table-wrapper" data-table-id="ls2bw9dtr6m"><table data-table-id="ls2bw9dtr6m" class="ql-table" cellpadding="0" cellspacing="0" style="margin-right: auto; width: 1166px;"><colgroup data-table-id="ls2bw9dtr6m" contenteditable="false"><col width="583px" data-table-id="ls2bw9dtr6m" data-col-id="p3imc1n7xlo"><col width="583px" data-table-id="ls2bw9dtr6m" data-col-id="ndvtber87yq"></colgroup><tbody data-table-id="ls2bw9dtr6m"><tr class="ql-table-row" data-table-id="ls2bw9dtr6m" data-row-id="bztm23s128n"><td class="ql-table-cell" data-table-id="ls2bw9dtr6m" data-row-id="bztm23s128n" data-col-id="p3imc1n7xlo" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="ls2bw9dtr6m" data-row-id="bztm23s128n" data-col-id="p3imc1n7xlo" data-rowspan="1" data-colspan="1"><ol><li data-list="ordered"><span class="ql-ui" contenteditable="false"></span>list order</li><li data-list="ordered" class="ql-indent-1"><span class="ql-ui" contenteditable="false"></span>aaa</li></ol></div></td><td class="ql-table-cell" data-table-id="ls2bw9dtr6m" data-row-id="bztm23s128n" data-col-id="ndvtber87yq" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="ls2bw9dtr6m" data-row-id="bztm23s128n" data-col-id="ndvtber87yq" data-rowspan="1" data-colspan="1"><ol><li data-list="bullet"><span class="ql-ui" contenteditable="false"></span>list bullet</li></ol></div></td></tr><tr class="ql-table-row" data-table-id="ls2bw9dtr6m" data-row-id="3kx2tsgoao5"><td class="ql-table-cell" data-table-id="ls2bw9dtr6m" data-row-id="3kx2tsgoao5" data-col-id="p3imc1n7xlo" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="ls2bw9dtr6m" data-row-id="3kx2tsgoao5" data-col-id="p3imc1n7xlo" data-rowspan="1" data-colspan="1"><ol><li data-list="unchecked"><span class="ql-ui" contenteditable="false"></span>list checkbox</li><li data-list="checked"><span class="ql-ui" contenteditable="false"></span>checkbox checked</li></ol></div></td><td class="ql-table-cell" data-table-id="ls2bw9dtr6m" data-row-id="3kx2tsgoao5" data-col-id="ndvtber87yq" rowspan="1" colspan="1"><div class="ql-table-cell-inner" data-table-id="ls2bw9dtr6m" data-row-id="3kx2tsgoao5" data-col-id="ndvtber87yq" data-rowspan="1" data-colspan="1"><p><br></p></div></td></tr></tbody></table></div>' }),
-    );
-    await vi.runAllTimersAsync();
-
-    const ops = quill.getContents().ops;
-    const resultOps = [
-      { insert: '\n' },
-      { insert: { 'table-up-col': { full: false, width: 583 } } },
-      { insert: { 'table-up-col': { full: false, width: 583 } } },
-      { insert: 'list order' },
-      { attributes: { 'list': 'ordered', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: 'aaa' },
-      { attributes: { 'indent': 1, 'list': 'ordered', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: 'list bullet' },
-      { attributes: { 'list': 'bullet', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: 'list checkbox' },
-      { attributes: { 'list': 'unchecked', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: 'checkbox checked' },
-      { attributes: { 'list': 'checked', 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { attributes: { 'table-up-cell-inner': { rowspan: 1, colspan: 1 } }, insert: '\n' },
-      { insert: '\n' },
-    ];
-    for (const [i, op] of ops.entries()) {
-      expect(op).toMatchObject(resultOps[i]);
-    }
-  });
-});

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

@@ -122,6 +122,10 @@ export class TableColFormat extends BlockEmbed {
     const tableColgroup = findParentBlot(this, blotName.tableColgroup);
     tableColgroup.align = this.align;
 
+    if (this.next != null && this.checkMerge()) {
+      this.next.remove();
+    }
+
     super.optimize(context);
   }
 

package/src/index.ts

@@ -272,7 +272,7 @@ export class TableUp {
       },
       false,
     );
-    this.quill.on(Quill.events.EDITOR_CHANGE, (event: string, range: Range, oldRange: Range) => {
+    this.quill.on(Quill.events.EDITOR_CHANGE, (event: string, range: Range, _oldRange: Range) => {
       if (event === Quill.events.SELECTION_CHANGE && range) {
         const [startBlot] = this.quill.getLine(range.index);
         const [endBlot] = this.quill.getLine(range.index + range.length);
@@ -287,29 +287,30 @@ export class TableUp {
         }
         catch {}
 
-        // only can select inside table or select all table
-        if (startBlot instanceof TableColFormat) {
-          if (!oldRange) {
-            oldRange = { index: 0, length: 0 };
-          }
-          return this.quill.setSelection(
-            range.index + (oldRange.index > range.index ? -1 : 1),
-            range.length + (oldRange.length === range.length ? 0 : oldRange.length > range.length ? -1 : 1),
-            Quill.sources.USER,
-          );
-        }
-        else if (endBlot instanceof TableColFormat) {
-          return this.quill.setSelection(range.index + 1, range.length + 1, Quill.sources.USER);
-        }
-
-        if (range.length > 0) {
-          if (startTableBlot && !endTableBlot) {
-            this.quill.setSelection(range.index - 1, range.length + 1, Quill.sources.USER);
-          }
-          else if (endTableBlot && !startTableBlot) {
-            this.quill.setSelection(range.index, range.length + 1, Quill.sources.USER);
-          }
-        }
+        // // TODO: selection some times will be reject mouse drag select
+        // // only can select inside table or select all table
+        // if (startBlot instanceof TableColFormat) {
+        //   if (!oldRange) {
+        //     oldRange = { index: 0, length: 0 };
+        //   }
+        //   return this.quill.setSelection(
+        //     range.index + (oldRange.index > range.index ? -1 : 1),
+        //     range.length + (oldRange.length === range.length ? 0 : oldRange.length > range.length ? -1 : 1),
+        //     Quill.sources.USER,
+        //   );
+        // }
+        // else if (endBlot instanceof TableColFormat) {
+        //   return this.quill.setSelection(range.index + 1, range.length + 1, Quill.sources.USER);
+        // }
+
+        // if (range.length > 0) {
+        //   if (startTableBlot && !endTableBlot) {
+        //     this.quill.setSelection(range.index - 1, range.length + 1, Quill.sources.USER);
+        //   }
+        //   else if (endTableBlot && !startTableBlot) {
+        //     this.quill.setSelection(range.index, range.length + 1, Quill.sources.USER);
+        //   }
+        // }
 
         // if range is not in table. hide table tools
         if (!startTableBlot || !endTableBlot) {
@@ -375,6 +376,7 @@ export class TableUp {
     let tableId = randomId();
     let rowId = randomId();
     let colIds: string[] = [];
+    let rowspanCount: { rowspan: number; colspan: number }[] = [];
     let cellCount = 0;
     let colCount = 0;
 
@@ -396,51 +398,70 @@ export class TableUp {
 
     this.quill.clipboard.addMatcher('table', (node, delta) => {
       if (delta.ops.length === 0) return delta;
-      // if current in table. prevent paste table
+
       const format = this.quill.getFormat();
-      if (format[blotName.tableCellInner]) return new Delta();
-      // remove quill origin table format
+      const currentCellFormat = format[blotName.tableCellInner];
       const ops: Record<string, any>[] = [];
       const cols: Record<string, any>[] = [];
       for (let i = 0; i < delta.ops.length; i++) {
         const { attributes, insert } = delta.ops[i];
+        // remove quill origin table format and tableCell format
         const { table, [blotName.tableCell]: tableCell, ...attrs } = attributes || {};
-        if (insert && (insert as Record<string, any>)[blotName.tableCol]) {
-          cols.push({ insert });
+        const hasCol = insert && (insert as Record<string, any>)[blotName.tableCol];
+        if (currentCellFormat) {
+          // if current in cell. no need add col. but need replace paste cell format with current cell format
+          if (hasCol) continue;
+          const { [blotName.tableCellInner]: tableCellInner, ...keepAtttrs } = attrs;
+          ops.push({
+            attributes: {
+              ...keepAtttrs,
+              [blotName.tableCellInner]: currentCellFormat,
+            },
+            insert,
+          });
         }
         else {
-          ops.push({ attributes: attrs, insert });
+          if (hasCol) {
+            cols.push({ insert });
+          }
+          else {
+            ops.push({ attributes: attrs, insert });
+          }
         }
       }
 
-      const colWidths = calculateCols(node as HTMLElement, colIds.length);
-      const newCols = colWidths.reduce((colOps, width, i) => {
-        if (!cols[i]) {
-          colOps.push({
-            insert: {
-              [blotName.tableCol]: {
-                tableId,
-                colId: colIds[i],
-                width,
-                full: false,
+      // if current in cell. no need add col
+      if (!currentCellFormat) {
+        const colWidths = calculateCols(node as HTMLElement, colIds.length);
+        const newCols = colWidths.reduce((colOps, width, i) => {
+          if (!cols[i]) {
+            colOps.push({
+              insert: {
+                [blotName.tableCol]: {
+                  tableId,
+                  colId: colIds[i],
+                  width,
+                  full: false,
+                },
               },
-            },
-          });
-        }
-        else {
-          colOps.push(cols[i]);
-        }
-        return colOps;
-      }, [] as Record<string, any>[]);
-      ops.unshift(...newCols);
+            });
+          }
+          else {
+            colOps.push(cols[i]);
+          }
+          return colOps;
+        }, [] as Record<string, any>[]);
+        ops.unshift(...newCols);
+        // insert break line before table and after table
+        ops.unshift({ insert: '\n' });
+        ops.push({ insert: '\n' });
+      }
       // reset variable to avoid conflict with other table
       tableId = randomId();
       colIds = [];
+      rowspanCount = [];
       cellCount = 0;
       colCount = 0;
-      // insert break line before table and after table
-      ops.unshift({ insert: '\n' });
-      ops.push({ insert: '\n' });
       return new Delta(ops);
     });
 
@@ -482,17 +503,39 @@ export class TableUp {
           (op.attributes[blotName.tableCellInner] as Record<string, any>).style = `background:${op.attributes.background};${cellAttrs.style}`;
         }
       }
+      // minus rowspan
+      for (const [i, span] of rowspanCount.entries()) {
+        if (span.rowspan > 0) {
+          span.rowspan -= 1;
+        }
+        if (span.rowspan <= 0) {
+          rowspanCount[i] = { rowspan: 0, colspan: 0 };
+        }
+      }
       return delta;
     });
 
     const matchCell = (node: Node, delta: TypeDelta) => {
       const cell = node as HTMLElement;
       const cellFormat = TableCellFormat.formats(cell);
-      if (!colIds[cellCount]) {
+      if (!colIds[cellCount] || !rowspanCount[cellCount]) {
         for (let i = cellCount; i >= 0; i--) {
-          if (!colIds[i]) colIds[i] = randomId();
+          if (!colIds[i]) {
+            colIds[i] = randomId();
+          }
+          if (!rowspanCount[i]) {
+            rowspanCount[i] = { rowspan: 0, colspan: 0 };
+          }
         }
       }
+      // skip the colspan of the cell in the previous row
+      const { colspan } = rowspanCount[cellCount];
+      cellCount += colspan;
+      // add current cell rowspan in `rowspanCount` to calculate next row cell
+      if (cellFormat.rowspan > 1) {
+        rowspanCount[cellCount] = { rowspan: cellFormat.rowspan, colspan: cellFormat.colspan };
+      }
+
       const colId = colIds[cellCount];
       cellCount += cellFormat.colspan;
 
@@ -520,7 +563,6 @@ export class TableUp {
       }
       return new Delta(ops);
     };
-
     this.quill.clipboard.addMatcher('td', matchCell);
     this.quill.clipboard.addMatcher('th', matchCell);
   }
@@ -1153,5 +1195,15 @@ export function defaultCustomSelect(tableModule: TableUp, picker: QuillThemePick
 export default TableUp;
 export * from './formats';
 export * from './modules';
-export { blotName, findParentBlot, findParentBlots, randomId, tableUpEvent, tableUpSize } from './utils';
+export {
+  blotName,
+  createColorPicker,
+  createSelectBox,
+  createTooltip,
+  findParentBlot,
+  findParentBlots,
+  randomId,
+  tableUpEvent,
+  tableUpSize,
+} from './utils';
 export * from './utils/types';

package/src/modules/user-selection.ts

@@ -0,0 +1,110 @@
+import type { Parchment as TypeParchment, Range as TypeRange } from 'quill';
+import type TableUp from '..';
+import type { TableCellInnerFormat } from '../formats';
+import Quill from 'quill';
+import { blotName, findParentBlot } from '../utils';
+
+export class UserSelection {
+  limitKeyboardSelection: boolean = false;
+  selectionDirection: number | null = null;
+  lastValidSelection: {
+    startContainer: Node;
+    startOffset: number;
+    endContainer: Node;
+    endOffset: number;
+  } | null = null;
+
+  constructor(public quill: Quill, public tableModule: TableUp) {
+    document.addEventListener('selectionchange', () => {
+      const selection = document.getSelection();
+      if (!selection) return;
+      const { anchorNode, focusNode } = selection;
+      if (!anchorNode || !focusNode) return;
+      const anchorBlot = Quill.find(anchorNode);
+      const focusBlot = Quill.find(focusNode);
+      if (!anchorBlot || !focusBlot) return;
+      let anchorCellBlot: TableCellInnerFormat | null = null;
+      let focusCellBlot: TableCellInnerFormat | null = null;
+      try {
+        anchorCellBlot = findParentBlot(anchorBlot as TypeParchment.Blot, blotName.tableCellInner);
+      }
+      catch {}
+      try {
+        focusCellBlot = findParentBlot(focusBlot as TypeParchment.Blot, blotName.tableCellInner);
+      }
+      catch {}
+
+      if ((anchorCellBlot && !focusCellBlot) || (focusCellBlot && !anchorCellBlot)) {
+        // TODO: select whole table
+        this.quill.blur();
+      }
+      else if (anchorCellBlot !== focusCellBlot) {
+        this.limitKeyboardSelection = true;
+        this.selectionDirection = this.getSelectionDirection();
+        // blur and select cell
+        if (this.lastValidSelection) {
+          const range = document.createRange();
+          range.setStart(this.lastValidSelection.startContainer, this.lastValidSelection.startOffset);
+          range.setEnd(this.lastValidSelection.endContainer, this.lastValidSelection.endOffset);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        }
+      }
+      else {
+        this.lastValidSelection = {
+          startContainer: selection.anchorNode!,
+          startOffset: selection.anchorOffset,
+          endContainer: selection.focusNode!,
+          endOffset: selection.focusOffset,
+        };
+        this.limitKeyboardSelection = false;
+        this.selectionDirection = null;
+      }
+    });
+    document.addEventListener('keydown', (event) => {
+      if (event.shiftKey && this.limitKeyboardSelection) {
+        // 从上到下选区：阻止向右和向下的选区扩展
+        if (this.selectionDirection === Node.DOCUMENT_POSITION_FOLLOWING) {
+          if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+            event.preventDefault();
+          }
+        }
+        // 从下到上选区：阻止向左和向上的选区扩展
+        else if (
+          this.selectionDirection === Node.DOCUMENT_POSITION_PRECEDING
+          && (event.key === 'ArrowLeft' || event.key === 'ArrowUp')
+        ) {
+          event.preventDefault();
+        }
+      }
+    });
+    this.quill.on(Quill.events.EDITOR_CHANGE, (event: string, range: TypeRange) => {
+      if (event === Quill.events.SELECTION_CHANGE && range) {
+        const [startBlot] = this.quill.getLine(range.index);
+        const [endBlot] = this.quill.getLine(range.index + range.length);
+        let startTableBlot;
+        let endTableBlot;
+        try {
+          startTableBlot = findParentBlot(startBlot!, blotName.tableMain);
+        }
+        catch {}
+        try {
+          endTableBlot = findParentBlot(endBlot!, blotName.tableMain);
+        }
+        catch {}
+
+        // if range is not in table. hide table tools
+        if (!startTableBlot || !endTableBlot) {
+          this.tableModule.hideTableTools();
+        }
+      }
+    });
+  }
+
+  getSelectionDirection() {
+    const selection = document.getSelection();
+    if (!selection || selection.type === 'Caret') return null;
+    if (!selection.anchorNode || !selection.focusNode) return null;
+    return selection.anchorNode.compareDocumentPosition(selection.focusNode);
+  }
+}