@lobehub/editor 4.24.0 → 4.24.1

package/es/renderer/engine/render-builtin-node.js

@@ -1,7 +1,7 @@
 import { getListClassName, getTableWrapperClassName } from "../style.js";
 import { parseCSSText } from "./utils.js";
 import { createElement } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/renderer/engine/render-builtin-node.tsx
 const SAFE_URL_PROTOCOLS = /* @__PURE__ */ new Set([
 	"http:",
@@ -31,6 +31,11 @@ function formatLinkHighlightUrl(url) {
 function textToSlug(text) {
 	return text.toLowerCase().trim().replaceAll(/[^\s\w\u3000-\u9FFF\uAC00-\uD7AF\uFF00-\uFFEF-]/g, "").replaceAll(/[\s_]+/g, "-").replaceAll(/^-+|-+$/g, "");
 }
+const FLUID_TABLE_STYLE = { width: "100%" };
+function toTableColWidths(value) {
+	if (!Array.isArray(value) || value.length === 0) return null;
+	return value.every((width) => Number.isFinite(width) && width > 0) ? value : null;
+}
 const DIFF_ROOT_STYLE = { position: "relative" };
 const DIFF_LIST_ITEM_ROOT_STYLE = {
 	display: "inline-block",
@@ -157,13 +162,17 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 				children
 			}, key);
 		}
-		case "table": return /* @__PURE__ */ jsx("div", {
-			className: getTableWrapperClassName(),
-			children: /* @__PURE__ */ jsx("table", {
-				className: "editor_table",
-				children: /* @__PURE__ */ jsx("tbody", { children })
-			})
-		}, key);
+		case "table": {
+			const colWidths = toTableColWidths(node.colWidths);
+			return /* @__PURE__ */ jsx("div", {
+				className: getTableWrapperClassName(),
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "editor_table",
+					style: colWidths ? void 0 : FLUID_TABLE_STYLE,
+					children: [colWidths && /* @__PURE__ */ jsx("colgroup", { children: colWidths.map((width, index) => /* @__PURE__ */ jsx("col", { style: { width } }, index)) }), /* @__PURE__ */ jsx("tbody", { children })]
+				})
+			}, key);
+		}
 		case "tablerow": return /* @__PURE__ */ jsx("tr", { children }, key);
 		case "tablecell": {
 			const isHeader = !!node.headerState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",