@blocklet/editor 2.6.9 → 2.6.11

package/lib/main/plugins/TableCellResizer/index.js

@@ -4,11 +4,33 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableRowNode, getDOMCellFromTarget, getTableElement, TableNode, } from '@lexical/table';
 import { calculateZoomLevel, mergeRegister } from '@lexical/utils';
-import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical';
+import { $getNearestNodeFromDOMNode, isHTMLElement, SKIP_SCROLL_INTO_VIEW_TAG } from 'lexical';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
 const MIN_ROW_HEIGHT = 33;
 const MIN_COLUMN_WIDTH = 92;
+const DEFAULT_COLUMN_WIDTH = 150;
+// 字符宽度估算常量
+const CHAR_WIDTH_EN = 14; // 英文/数字字符宽度
+const CHAR_WIDTH_CJK = 20; // 中日韩字符宽度
+const CELL_PADDING = 24; // 单元格左右 padding
+const MAX_COLUMN_WIDTH = 300; // 列宽上限，避免过宽
+/**
+ * 估算文本的显示宽度（考虑中英文字符宽度差异）
+ */
+function estimateTextWidth(text) {
+    let width = 0;
+    for (const char of text) {
+        // CJK 字符范围（中日韩统一表意文字）
+        if (/[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff]/.test(char)) {
+            width += CHAR_WIDTH_CJK;
+        }
+        else {
+            width += CHAR_WIDTH_EN;
+        }
+    }
+    return width;
+}
 function TableCellResizer({ editor }) {
     const targetRef = useRef(null);
     const resizerRef = useRef(null);
@@ -42,8 +64,37 @@ function TableCellResizer({ editor }) {
                 return tableNode;
             }
             const numColumns = tableNode.getColumnCount();
-            const columnWidth = MIN_COLUMN_WIDTH;
-            tableNode.setColWidths(Array(numColumns).fill(columnWidth));
+            const rows = tableNode.getChildren();
+            // 计算每列的最大内容宽度
+            const columnMaxWidths = Array(numColumns).fill(0);
+            for (const row of rows) {
+                if ($isTableRowNode(row)) {
+                    const cells = row.getChildren();
+                    let colIndex = 0;
+                    for (const cell of cells) {
+                        if ($isTableCellNode(cell) && colIndex < numColumns) {
+                            const text = cell.getTextContent();
+                            const textWidth = estimateTextWidth(text);
+                            // 考虑 colspan 的情况，将宽度平均分配
+                            const colSpan = cell.getColSpan();
+                            const widthPerCol = textWidth / colSpan;
+                            for (let i = 0; i < colSpan && colIndex + i < numColumns; i++) {
+                                columnMaxWidths[colIndex + i] = Math.max(columnMaxWidths[colIndex + i], widthPerCol);
+                            }
+                            colIndex += colSpan;
+                        }
+                    }
+                }
+            }
+            // 计算最终列宽：内容宽度 + padding，限制在 MIN 和 MAX 之间
+            const colWidths = columnMaxWidths.map((contentWidth) => {
+                if (contentWidth === 0) {
+                    return DEFAULT_COLUMN_WIDTH; // 空列使用默认宽度
+                }
+                const calculatedWidth = contentWidth + CELL_PADDING;
+                return Math.min(Math.max(calculatedWidth, MIN_COLUMN_WIDTH), MAX_COLUMN_WIDTH);
+            });
+            tableNode.setColWidths(colWidths);
             return tableNode;
         }));
     }, [editor]);
@@ -149,7 +200,7 @@ function TableCellResizer({ editor }) {
             }
             const newHeight = Math.max(height + heightChange, MIN_ROW_HEIGHT);
             tableRow.setHeight(newHeight);
-        }, { tag: 'skip-scroll-into-view' });
+        }, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
     }, [activeCell, editor]);
     const getCellNodeHeight = (cell, activeEditor) => {
         const domCellNode = activeEditor.getElementByKey(cell.getKey());
@@ -191,7 +242,7 @@ function TableCellResizer({ editor }) {
             const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
             newColWidths[columnIndex] = newWidth;
             tableNode.setColWidths(newColWidths);
-        }, { tag: 'skip-scroll-into-view' });
+        }, { tag: SKIP_SCROLL_INTO_VIEW_TAG });
     }, [activeCell, editor]);
     const pointerUpHandler = useCallback((direction) => {
         const handler = (event) => {
@@ -246,7 +297,6 @@ function TableCellResizer({ editor }) {
                     height: `${zoneWidth}px`,
                     left: `${window.scrollX + left}px`,
                     top: `${window.scrollY + top + height - zoneWidth / 2}px`,
-                    zIndex: 1,
                     width: `${width}px`,
                 },
                 right: {
@@ -255,7 +305,6 @@ function TableCellResizer({ editor }) {
                     height: `${height}px`,
                     left: `${window.scrollX + left + width - zoneWidth / 2}px`,
                     top: `${window.scrollY + top}px`,
-                    zIndex: 1,
                     width: `${zoneWidth}px`,
                 },
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/editor",
-  "version": "2.6.9",
+  "version": "2.6.11",
   "main": "lib/index.js",
   "sideEffects": false,
   "publishConfig": {
@@ -73,7 +73,7 @@
     "ufo": "^1.5.4",
     "url-join": "^4.0.1",
     "zustand": "^4.5.5",
-    "@blocklet/pdf": "2.6.9"
+    "@blocklet/pdf": "2.6.11"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",