fix: if width out of 100% convert to fixed width

README.md

@@ -78,6 +78,7 @@ const defaultTexts = {
   custom: 'Custom',
   clear: 'Clear',
   transparent: 'Transparent',
+  perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',
 };
 ```
 

docs/index.js

@@ -90,6 +90,7 @@ const quill1 = new Quill('#editor1', {
         custom: '自定义',
         clear: '清除',
         transparent: '透明',
+        perWidthInsufficient: '百分比宽度不足, 如需完成操作需要转换表格为固定宽度，是否继续?',
       },
     },
   },

src/index.ts

@@ -373,6 +373,7 @@ export class TableUp {
       custom: 'Custom',
       clear: 'Clear',
       transparent: 'Transparent',
+      perWidthInsufficient: 'The percentage width is insufficient. To complete the operation, the table needs to be converted to a fixed width. Do you want to continue?',
     }, options);
   };
 

src/modules/table-resize/table-resize-box.ts

@@ -26,7 +26,7 @@ export class TableResizeBox extends TableResizeCommon {
   lastHeaderSelect: [Point, Point] | null = null;
 
   constructor(public tableModule: TableUp, public table: HTMLElement, quill: Quill, options: Partial<TableResizeBoxOptions>) {
-    super(quill);
+    super(tableModule, quill);
     this.options = this.resolveOptions(options);
     this.tableMain = Quill.find(this.table) as TableMainFormat;
 
@@ -220,9 +220,9 @@ export class TableResizeBox extends TableResizeCommon {
 
     if (this.tableCols.length > 0) {
       let colHeadStr = '';
-      for (const col of this.tableCols) {
+      for (const [index, col] of this.tableCols.entries()) {
         const width = col.domNode.getBoundingClientRect().width;
-        colHeadStr += `<div class="ql-table-col-header" style="width: ${width}px">
+        colHeadStr += `<div class="ql-table-col-header" style="width: ${width + (index === this.tableCols.length - 1 ? 1 : 0)}px">
           <div class="ql-table-col-separator" style="height: ${tableMainRect.height + this.options.size - 3}px"></div>
         </div>`;
       }

src/modules/table-resize/table-resize-common.ts

@@ -1,4 +1,5 @@
 import type Quill from 'quill';
+import type TableUp from '../..';
 import type { TableMainFormat } from '../../formats';
 import { createButton, createDialog, tableUpEvent, tableUpSize } from '../../utils';
 import { isTableAlignRight } from './utils';
@@ -18,30 +19,36 @@ export class TableResizeCommon {
   handleRowMouseMoveFunc = this.handleRowMouseMove.bind(this);
   handleRowMouseDownFunc = this.handleRowMouseDown.bind(this);
 
-  constructor(public quill: Quill) {}
+  constructor(public tableModule: TableUp, public quill: Quill) {}
 
   findCurrentColIndex(_e: MouseEvent) {
     return -1;
   }
 
   colWidthChange(_i: number, _w: number, _isFull: boolean) {}
 
-  async createConfirmDialog() {
+  async createConfirmDialog({ message, confirm, cancel }: {
+    message: string;
+    confirm: string;
+    cancel: string;
+  }) {
     return new Promise((resolve) => {
       const content = document.createElement('div');
       Object.assign(content.style, {
         padding: '8px 12px',
+        fontSize: '14px',
+        lineHeight: '1.5',
       });
       const tip = document.createElement('p');
-      tip.textContent = '半分比宽度不足, 如需完成操作需要转换表格为固定宽度，是否继续?';
+      tip.textContent = message;
       const btnWrapper = document.createElement('div');
       Object.assign(btnWrapper.style, {
         display: 'flex',
         justifyContent: 'flex-end',
         gap: `6px`,
       });
-      const cancelBtn = createButton({ content: '取消' });
-      const confirmBtn = createButton({ type: 'confirm', content: '确认' });
+      const cancelBtn = createButton({ content: cancel });
+      const confirmBtn = createButton({ type: 'confirm', content: confirm });
 
       btnWrapper.appendChild(cancelBtn);
       btnWrapper.appendChild(confirmBtn);
@@ -65,9 +72,9 @@ export class TableResizeCommon {
     if (!this.dragColBreak || !this.tableMain || this.colIndex === -1) return;
     const cols = this.tableMain.getCols();
     const w = Number.parseInt(this.dragColBreak.dataset.w || '0');
-    const isFull = this.tableMain.full;
+    let isFull = this.tableMain.full;
     let needUpdate = false;
-    const updateInfo: { index: number; width: number; full: boolean }[] = [];
+    const updateInfo: { index: number; width: number }[] = [];
     if (isFull) {
       const tableMainWidth = this.tableMain.domNode.getBoundingClientRect().width;
       let pre = (w / tableMainWidth) * 100;
@@ -79,13 +86,13 @@ export class TableResizeCommon {
         pre = Math.max(tableUpSize.colMinWidthPre, pre);
         if (cols[this.colIndex + 1] || cols[this.colIndex - 1]) {
           const i = cols[this.colIndex + 1] ? this.colIndex + 1 : this.colIndex - 1;
-          updateInfo.push({ index: i, width: cols[i].width + oldWidthPre - pre, full: isFull });
+          updateInfo.push({ index: i, width: cols[i].width + oldWidthPre - pre });
         }
         else {
           pre = 100;
         }
         needUpdate = true;
-        updateInfo.push({ index: this.colIndex, width: pre, full: isFull });
+        updateInfo.push({ index: this.colIndex, width: pre });
       }
       else {
         // magnify col
@@ -95,8 +102,8 @@ export class TableResizeCommon {
           pre = Math.min(totalWidthNextPre - tableUpSize.colMinWidthPre, pre);
           needUpdate = true;
           updateInfo.push(
-            { index: this.colIndex, width: pre, full: isFull },
-            { index: this.colIndex + 1, width: totalWidthNextPre - pre, full: isFull },
+            { index: this.colIndex, width: pre },
+            { index: this.colIndex + 1, width: totalWidthNextPre - pre },
           );
         }
       }
@@ -108,7 +115,7 @@ export class TableResizeCommon {
         + w
       }px`;
       needUpdate = true;
-      updateInfo.push({ index: this.colIndex, width: w, full: isFull });
+      updateInfo.push({ index: this.colIndex, width: w });
     }
 
     document.body.removeChild(this.dragColBreak);
@@ -117,45 +124,47 @@ export class TableResizeCommon {
     document.removeEventListener('mousemove', this.handleColMouseMoveFunc);
     this.dragging = false;
 
-    // update col width
-    let updated = true;
     if (needUpdate) {
-      for (let { index, width, full } of updateInfo) {
-        // table full maybe change. every time update need check data full and transform width
-        const tableWidth = this.tableMain.domNode.getBoundingClientRect().width;
-        let isFull = this.tableMain.full;
-        if (full !== isFull) {
-          if (full === true && isFull === false) {
-            width = width / 100 * tableWidth;
-          }
-          else if (full === false && isFull === true) {
-            width = width / tableWidth * 100;
-          }
+      const tableWidth = this.tableMain.domNode.getBoundingClientRect().width;
+      if (isFull) {
+        // if full table and percentage width is larger than 100%. check if convert to fixed px
+        let resultWidth = 0;
+        const skipColIndex = new Set(updateInfo.map(({ index, width }) => {
+          resultWidth += width;
+          return index;
+        }));
+        for (const [index, col] of cols.entries()) {
+          if (skipColIndex.has(index)) continue;
+          resultWidth += col.width;
         }
-        // if tableis full and width larger then 100. check user want to change table to fixed width
-        if (isFull) {
-          const totalWidth = cols.reduce((total, cur, i) => {
-            total += i === index ? width : cur.width;
-            return total;
-          }, 0);
-          if (totalWidth > 100) {
-            if (!await this.createConfirmDialog()) {
-              updated = false;
-              break;
-            }
-            this.tableMain.cancelFull();
-            isFull = false;
-            width = width / 100 * tableWidth;
+
+        if (resultWidth > 100) {
+          if (!await this.createConfirmDialog({
+            message: this.tableModule.options.texts.perWidthInsufficient,
+            confirm: this.tableModule.options.texts.confirmText,
+            cancel: this.tableModule.options.texts.cancelText,
+          })) {
+            return;
+          }
+          this.tableMain.cancelFull();
+          isFull = false;
+          for (const [i, info] of updateInfo.entries()) {
+            const { width, index } = info;
+            updateInfo[i] = {
+              index,
+              width: width / 100 * tableWidth,
+            };
           }
         }
+      }
+
+      for (const { index, width } of updateInfo) {
         cols[index].width = `${width}${isFull ? '%' : 'px'}`;
         this.colWidthChange(index, isFull ? width / 100 * tableWidth : width, isFull);
       }
     }
 
-    if (updated) {
-      this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE);
-    }
+    this.quill.emitter.emit(tableUpEvent.AFTER_TABLE_RESIZE);
   };
 
   handleColMouseMove(e: MouseEvent): { left: number; width: number } | undefined {

src/modules/table-resize/table-resize-line.ts

@@ -18,7 +18,7 @@ export class TableResizeLine extends TableResizeCommon {
   tableCellBlot?: TableCellFormat;
 
   constructor(public tableModule: TableUp, quill: Quill, options: Partial<TableResizeLineOptions>) {
-    super(quill);
+    super(tableModule, quill);
     this.options = this.resolveOptions(options);
     this.colResizer = this.tableModule.addContainer('ql-table-resize-line-col');
     this.rowResizer = this.tableModule.addContainer('ql-table-resize-line-row');

src/utils/types.ts

@@ -32,6 +32,7 @@ export interface TableCreatorTextOptions {
   rowText: string;
   colText: string;
   notPositiveNumberError: string;
+  perWidthInsufficient: string;
 };
 export interface TableTextOptions extends TableCreatorTextOptions {
   custom: string;