@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/table/react/style.js

@@ -0,0 +1,144 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => css`
+    position: relative;
+    overflow: visible;
+    margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.5em)
+      calc(var(--lobe-markdown-margin-multiple) * 0.5em + 16px);
+
+    .lobe-editor-table-scroll-wrapper {
+      position: relative;
+      overflow: auto visible;
+      padding-block-start: 14px;
+    }
+
+    .lobe-editor-table-scroll-indicator {
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 3;
+      inset-block: 14px 0;
+
+      inline-size: 24px;
+
+      opacity: 0;
+
+      transition: opacity 0.12s ease;
+    }
+
+    .lobe-editor-table-scroll-indicator-visible {
+      opacity: 1;
+    }
+
+    .lobe-editor-table-scroll-indicator-start {
+      inset-inline-start: 0;
+      background: linear-gradient(
+        to right,
+        color-mix(in srgb, ${cssVar.colorBgContainer} 82%, transparent),
+        transparent
+      );
+    }
+
+    .lobe-editor-table-scroll-indicator-end {
+      inset-inline-start: 0;
+      background: linear-gradient(
+        to left,
+        color-mix(in srgb, ${cssVar.colorBgContainer} 82%, transparent),
+        transparent
+      );
+    }
+
+    .toolbar,
+    .toolbar-col,
+    .toolbar-row {
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 2;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      width: max-content;
+      height: 0;
+    }
+
+    .table-controller,
+    .table-controller-col,
+    .table-controller-row {
+      pointer-events: none;
+      position: relative;
+      width: max-content;
+      height: 0;
+    }
+
+    .table-controller-col .top,
+    .table-controller-row .left,
+    .table-controller-row .corner {
+      pointer-events: all;
+    }
+
+    .editor_table {
+      table-layout: fixed;
+      border-spacing: 0;
+      border-collapse: collapse;
+
+      width: fit-content;
+
+      text-align: start;
+      text-indent: initial;
+      text-wrap: pretty;
+      word-break: auto-phrase;
+      overflow-wrap: break-word;
+
+      > tr:first-of-type {
+        .editor_table_cell_header {
+          font-weight: bold;
+        }
+      }
+    }
+
+    code {
+      word-break: break-word;
+    }
+
+    .editor_table_cell_header {
+      font-weight: normal;
+    }
+
+    .editor_table_cell {
+      position: relative;
+
+      overflow: auto;
+
+      width: 75px;
+      padding-block: 6px;
+      padding-inline: 8px;
+      border: 1px solid ${cssVar.colorFillSecondary};
+
+      text-align: start;
+      vertical-align: top;
+
+      outline: none;
+    }
+
+    .editor_table_cell_selected {
+      background-color: color-mix(in srgb, ${cssVar.yellow} 3%, transparent);
+      caret-color: transparent;
+    }
+
+    .lobe-editor-table-delete-preview {
+      background-color: color-mix(in srgb, ${cssVar.colorError} 20%, transparent) !important;
+    }
+  `);
+const selectionOutlineStyles = createStaticStyles(({ css, cssVar }) => ({ outline: css`
+    pointer-events: none;
+
+    position: fixed;
+    z-index: 3;
+
+    box-sizing: border-box;
+    border: 1.5px solid color-mix(in srgb, ${cssVar.colorText} 22%, transparent);
+    border-radius: 3px;
+  ` }));
+//#endregion
+export { selectionOutlineStyles, styles };

package/es/plugins/table/react/type.d.ts

@@ -0,0 +1,10 @@
+import { ILocaleKeys } from "../../../types/locale.js";
+//#region src/plugins/table/react/type.d.ts
+type TableResizeMode = 'realtime' | 'deferred';
+interface ReactTablePluginProps {
+  className?: string;
+  locale?: Partial<Record<keyof ILocaleKeys, string>>;
+  resizeMode?: TableResizeMode;
+}
+//#endregion
+export { ReactTablePluginProps };

package/es/plugins/table/react/useAutoFitPastedTable.js

@@ -0,0 +1,189 @@
+import { syncTableWidthDOM } from "../utils/index.js";
+import { getDistributedTableColumnWidths } from "../utils/distributeColumnWidth.js";
+import { useEffect, useRef } from "react";
+import { $computeTableMapSkipCellCheck, $isTableNode, TableNode } from "@lexical/table";
+import { $getNodeByKey, HISTORIC_TAG, PASTE_TAG, SKIP_SCROLL_INTO_VIEW_TAG } from "lexical";
+//#region src/plugins/table/react/useAutoFitPastedTable.ts
+const MAX_AUTO_FIT_ATTEMPTS = 3;
+const MIN_COLUMN_WIDTH = 75;
+const isPositiveNumber = (width) => {
+	return typeof width === "number" && Number.isFinite(width) && width > 0;
+};
+const hasValidColumnWidths = (colWidths, columnCount) => {
+	return colWidths?.length === columnCount && colWidths.every((width) => Number.isFinite(width) && width > 0);
+};
+const parseWidth = (value) => {
+	if (!value) return null;
+	const match = value.trim().match(/^(\d+(?:\.\d+)?)px?$|^(\d+(?:\.\d+)?)$/);
+	if (!match) return null;
+	const width = Number.parseFloat(match[1] || match[2]);
+	return Number.isFinite(width) && width > 0 ? width : null;
+};
+const getTableElement$1 = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table") || null;
+};
+const getHorizontalBorderWidth = (tableElement) => {
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return 0;
+	return Array.from(firstRow.cells).reduce((total, cell, index) => {
+		const style = getComputedStyle(cell);
+		const borderInlineStartWidth = index === 0 ? Number.parseFloat(style.borderInlineStartWidth) || 0 : 0;
+		const borderInlineEndWidth = Number.parseFloat(style.borderInlineEndWidth) || 0;
+		return total + borderInlineStartWidth + borderInlineEndWidth;
+	}, 0);
+};
+const getTargetTableWidth = (tableElement, columnCount) => {
+	const container = tableElement.closest(".lobe-editor-table-scroll-wrapper") ?? tableElement.parentElement;
+	const containerWidth = container?.clientWidth || container?.getBoundingClientRect().width || 0;
+	if (containerWidth <= 0) return 0;
+	return Math.max(containerWidth - getHorizontalBorderWidth(tableElement), columnCount * MIN_COLUMN_WIDTH);
+};
+const fitColumnWidths = (sourceWidths, targetWidth, minWidth = MIN_COLUMN_WIDTH) => {
+	const columnCount = sourceWidths.length;
+	if (columnCount === 0 || targetWidth <= 0) return null;
+	const nextWidths = Array.from({ length: columnCount }, () => 0);
+	const remainingIndexes = new Set(sourceWidths.map((_, index) => index));
+	let remainingWidth = Math.max(targetWidth, minWidth * columnCount);
+	while (remainingIndexes.size > 0) {
+		const remainingSourceWidth = Array.from(remainingIndexes).reduce((total, index) => total + (sourceWidths[index] ?? 0), 0);
+		const clampedIndexes = [];
+		for (const index of remainingIndexes) if ((remainingSourceWidth > 0 ? (sourceWidths[index] ?? 0) / remainingSourceWidth * remainingWidth : remainingWidth / remainingIndexes.size) < minWidth) {
+			nextWidths[index] = minWidth;
+			remainingWidth -= minWidth;
+			clampedIndexes.push(index);
+		}
+		if (clampedIndexes.length === 0) {
+			const indexes = Array.from(remainingIndexes);
+			const widthForRemaining = remainingWidth;
+			const flooredWidths = indexes.map((index) => {
+				return remainingSourceWidth > 0 ? (sourceWidths[index] ?? 0) / remainingSourceWidth * widthForRemaining : widthForRemaining / indexes.length;
+			}).map((width) => Math.floor(width));
+			const flooredTotal = flooredWidths.reduce((total, width) => total + width, 0);
+			const lastIndex = indexes.at(-1);
+			indexes.forEach((index, offset) => {
+				nextWidths[index] = flooredWidths[offset] ?? minWidth;
+			});
+			if (lastIndex !== void 0) nextWidths[lastIndex] += Math.round(widthForRemaining - flooredTotal);
+			break;
+		}
+		clampedIndexes.forEach((index) => {
+			remainingIndexes.delete(index);
+		});
+	}
+	return nextWidths;
+};
+const getDOMColumnWidths = (tableElement, columnCount) => {
+	const colWidths = Array.from(tableElement.querySelectorAll(":scope > colgroup > col")).slice(0, columnCount).map((col) => parseWidth(col.style.width) ?? parseWidth(col.getAttribute("width")));
+	if (colWidths.length === columnCount && colWidths.every(isPositiveNumber)) return colWidths;
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return null;
+	const widths = Array.from({ length: columnCount }, () => null);
+	let columnIndex = 0;
+	for (const cell of Array.from(firstRow.cells)) {
+		while (columnIndex < columnCount && widths[columnIndex] !== null) columnIndex += 1;
+		if (columnIndex >= columnCount) break;
+		const colSpan = Math.max(1, cell.colSpan || 1);
+		const cellWidth = parseWidth(cell.style.width) ?? parseWidth(cell.getAttribute("width")) ?? cell.getBoundingClientRect().width;
+		const width = Number.isFinite(cellWidth) && cellWidth > 0 ? cellWidth / colSpan : null;
+		for (let index = 0; index < colSpan && columnIndex + index < columnCount; index += 1) widths[columnIndex + index] = width;
+		columnIndex += colSpan;
+	}
+	return widths.every(isPositiveNumber) ? widths : null;
+};
+const getCellColumnWidths = (tableNode, columnCount) => {
+	const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+	const firstRow = tableMap[0];
+	if (!firstRow) return null;
+	const widths = Array.from({ length: columnCount }, () => null);
+	for (const mapCell of firstRow) {
+		const { cell, startColumn } = mapCell;
+		const colSpan = Math.max(1, cell.getColSpan());
+		const cellWidth = cell.getWidth();
+		if (!cellWidth || cellWidth <= 0) continue;
+		const width = cellWidth / colSpan;
+		for (let index = 0; index < colSpan && startColumn + index < columnCount; index += 1) widths[startColumn + index] = width;
+	}
+	return widths.every(isPositiveNumber) ? widths : null;
+};
+const getSourceColumnWidths = (editor, tableNode, tableElement, columnCount) => {
+	const colWidths = tableNode.getColWidths();
+	if (hasValidColumnWidths(colWidths, columnCount)) return [...colWidths];
+	return getCellColumnWidths(tableNode, columnCount) ?? getDOMColumnWidths(tableElement, columnCount);
+};
+const getFittedTableColumnWidths = (editor, tableNode, isPastedTable) => {
+	const columnCount = tableNode.getColumnCount();
+	if (columnCount === 0) return null;
+	const tableElement = getTableElement$1(editor, tableNode.getKey());
+	if (!tableElement) return null;
+	const targetWidth = getTargetTableWidth(tableElement, columnCount);
+	if (targetWidth <= 0) return null;
+	const sourceWidths = getSourceColumnWidths(editor, tableNode, tableElement, columnCount);
+	if (sourceWidths) return fitColumnWidths(sourceWidths, targetWidth);
+	return isPastedTable ? getDistributedTableColumnWidths(editor, tableNode) : null;
+};
+const useAutoFitPastedTable = (editor) => {
+	const pendingTableKeysRef = useRef(/* @__PURE__ */ new Set());
+	const pasteTableKeysRef = useRef(/* @__PURE__ */ new Set());
+	const frameIdsRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		if (!editor) return;
+		const clearFrame = () => {
+			for (const frameId of frameIdsRef.current) cancelAnimationFrame(frameId);
+			frameIdsRef.current.clear();
+		};
+		const fitTable = (tableKey, remainingAttempts = MAX_AUTO_FIT_ATTEMPTS) => {
+			const frameId = requestAnimationFrame(() => {
+				frameIdsRef.current.delete(frameId);
+				let nextColWidths = null;
+				editor.update(() => {
+					const tableNode = $getNodeByKey(tableKey);
+					if (!$isTableNode(tableNode)) {
+						pendingTableKeysRef.current.delete(tableKey);
+						pasteTableKeysRef.current.delete(tableKey);
+						return;
+					}
+					const columnCount = tableNode.getColumnCount();
+					const isPastedTable = pasteTableKeysRef.current.has(tableKey);
+					if (columnCount === 0 || !isPastedTable && hasValidColumnWidths(tableNode.getColWidths(), columnCount)) {
+						pendingTableKeysRef.current.delete(tableKey);
+						pasteTableKeysRef.current.delete(tableKey);
+						return;
+					}
+					nextColWidths = getFittedTableColumnWidths(editor, tableNode, isPastedTable);
+					if (!nextColWidths) return;
+					tableNode.setColWidths(nextColWidths);
+					pendingTableKeysRef.current.delete(tableKey);
+					pasteTableKeysRef.current.delete(tableKey);
+				}, { tag: [HISTORIC_TAG, SKIP_SCROLL_INTO_VIEW_TAG] });
+				if (nextColWidths) {
+					const syncFrameId = requestAnimationFrame(() => {
+						frameIdsRef.current.delete(syncFrameId);
+						if (nextColWidths) syncTableWidthDOM(editor, tableKey, nextColWidths);
+					});
+					frameIdsRef.current.add(syncFrameId);
+					return;
+				}
+				if (remainingAttempts > 0 && pendingTableKeysRef.current.has(tableKey)) fitTable(tableKey, remainingAttempts - 1);
+			});
+			frameIdsRef.current.add(frameId);
+		};
+		const unregisterMutationListener = editor.registerMutationListener(TableNode, (nodeMutations, { updateTags }) => {
+			const isPasteUpdate = updateTags.has(PASTE_TAG);
+			for (const [tableKey, mutation] of nodeMutations) {
+				if (mutation !== "created") continue;
+				pendingTableKeysRef.current.add(tableKey);
+				if (isPasteUpdate) pasteTableKeysRef.current.add(tableKey);
+				fitTable(tableKey);
+			}
+		}, { skipInitialization: true });
+		return () => {
+			clearFrame();
+			pendingTableKeysRef.current.clear();
+			pasteTableKeysRef.current.clear();
+			unregisterMutationListener();
+		};
+	}, [editor]);
+};
+//#endregion
+export { useAutoFitPastedTable };

package/es/plugins/table/service/i-table-controller-menu-service.d.ts

@@ -0,0 +1,44 @@
+import { IServiceID } from "../../../types/kernel.js";
+import { TableNode } from "@lexical/table";
+import { LexicalEditor } from "lexical";
+
+//#region src/plugins/table/service/i-table-controller-menu-service.d.ts
+type TableControllerMenuAxis = 'column' | 'row';
+interface ITableControllerMenuRenderContext {
+  axis: TableControllerMenuAxis;
+  editor: LexicalEditor;
+  node: TableNode;
+  selectedIndexes: number[];
+}
+interface ITableControllerBaseMenuItem {
+  key: string;
+  order?: number;
+  when?: (context: ITableControllerMenuRenderContext) => boolean;
+}
+interface ITableControllerMenuActionItem extends ITableControllerBaseMenuItem {
+  danger?: boolean;
+  label: string | ((context: ITableControllerMenuRenderContext) => string);
+  onClick: (context: ITableControllerMenuRenderContext) => void;
+  preview?: 'delete' | 'insert-after' | 'insert-before';
+  type?: 'item';
+}
+interface ITableControllerMenuSeparatorItem extends ITableControllerBaseMenuItem {
+  type: 'separator';
+}
+type ITableControllerMenuItem = ITableControllerMenuActionItem | ITableControllerMenuSeparatorItem;
+interface ITableControllerMenuService {
+  getItems(context: ITableControllerMenuRenderContext): ITableControllerMenuItem[];
+  registerItem(item: ITableControllerMenuItem): () => void;
+  subscribe(listener: () => void): () => void;
+}
+declare const ITableControllerMenuService: IServiceID<ITableControllerMenuService>;
+declare class TableControllerMenuService implements ITableControllerMenuService {
+  private items;
+  private listeners;
+  getItems(context: ITableControllerMenuRenderContext): ITableControllerMenuItem[];
+  registerItem(item: ITableControllerMenuItem): () => void;
+  subscribe(listener: () => void): () => void;
+  private notify;
+}
+//#endregion
+export { ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, TableControllerMenuAxis, TableControllerMenuService };

package/es/plugins/table/service/i-table-controller-menu-service.js

@@ -0,0 +1,31 @@
+import { genServiceId } from "../../../editor-kernel/utils.js";
+//#region src/plugins/table/service/i-table-controller-menu-service.ts
+const ITableControllerMenuService = genServiceId("TableControllerMenuService");
+var TableControllerMenuService = class {
+	constructor() {
+		this.items = /* @__PURE__ */ new Map();
+		this.listeners = /* @__PURE__ */ new Set();
+	}
+	getItems(context) {
+		return Array.from(this.items.values()).filter((item) => item.when ? item.when(context) : true).sort((a, b) => (a.order || 0) - (b.order || 0));
+	}
+	registerItem(item) {
+		this.items.set(item.key, item);
+		this.notify();
+		return () => {
+			this.items.delete(item.key);
+			this.notify();
+		};
+	}
+	subscribe(listener) {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	}
+	notify() {
+		for (const listener of this.listeners) listener();
+	}
+};
+//#endregion
+export { ITableControllerMenuService, TableControllerMenuService };

package/es/plugins/table/service/index.d.ts

@@ -0,0 +1 @@
+import { ITableControllerMenuActionItem, ITableControllerMenuItem, ITableControllerMenuRenderContext, ITableControllerMenuSeparatorItem, ITableControllerMenuService, TableControllerMenuAxis, TableControllerMenuService } from "./i-table-controller-menu-service.js";

package/es/plugins/table/utils/autoFitColumnWidth.js

@@ -0,0 +1,87 @@
+import { createDefaultTableColWidths } from "./index.js";
+import { $computeTableMapSkipCellCheck } from "@lexical/table";
+//#region src/plugins/table/utils/autoFitColumnWidth.ts
+const AUTO_FIT_MIN_COLUMN_WIDTH = 75;
+const MEASURE_CONTAINER_CLASS = "lobe-editor-table-auto-fit-measure";
+const getTableElement$1 = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+};
+const applyNoWrapMeasureStyle = (element) => {
+	element.style.whiteSpace = "nowrap";
+	element.style.wordBreak = "normal";
+	element.style.overflowWrap = "normal";
+	element.style.setProperty("text-wrap", "nowrap");
+};
+const createMeasureContainer = (tableElement) => {
+	const container = document.createElement("div");
+	container.className = MEASURE_CONTAINER_CLASS;
+	container.style.insetBlockStart = "0";
+	container.style.insetInlineStart = "-100000px";
+	container.style.pointerEvents = "none";
+	container.style.position = "absolute";
+	container.style.visibility = "hidden";
+	container.style.zIndex = "-1";
+	(tableElement.parentElement ?? document.body).append(container);
+	return container;
+};
+const measureCellNoWrapWidth = (cellElement, measureContainer) => {
+	const table = document.createElement("table");
+	const tbody = document.createElement("tbody");
+	const row = document.createElement("tr");
+	const clone = cellElement.cloneNode(true);
+	table.className = "editor_table";
+	table.style.borderCollapse = "collapse";
+	table.style.borderSpacing = "0";
+	table.style.tableLayout = "auto";
+	table.style.width = "max-content";
+	delete clone.dataset.lexicalKey;
+	clone.style.blockSize = "auto";
+	clone.style.display = "table-cell";
+	clone.style.inlineSize = "max-content";
+	clone.style.maxInlineSize = "none";
+	clone.style.minInlineSize = "0";
+	clone.style.overflow = "visible";
+	clone.style.position = "static";
+	clone.style.width = "max-content";
+	applyNoWrapMeasureStyle(table);
+	applyNoWrapMeasureStyle(clone);
+	clone.querySelectorAll("*").forEach(applyNoWrapMeasureStyle);
+	row.append(clone);
+	tbody.append(row);
+	table.append(tbody);
+	measureContainer.append(table);
+	const width = Math.ceil(Math.max(table.getBoundingClientRect().width, clone.getBoundingClientRect().width));
+	table.remove();
+	return width;
+};
+const getAutoFitTableColumnWidths = (editor, tableNode, columnIndexes) => {
+	const tableElement = getTableElement$1(editor, tableNode.getKey());
+	if (!tableElement || columnIndexes.length === 0) return null;
+	const columnCount = tableNode.getColumnCount();
+	const targetColumnIndexes = [...new Set(columnIndexes)].filter((index) => index >= 0 && index < columnCount);
+	if (targetColumnIndexes.length === 0) return null;
+	const measureContainer = createMeasureContainer(tableElement);
+	try {
+		const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+		const nextColWidths = [...tableNode.getColWidths() || createDefaultTableColWidths(columnCount)];
+		for (const columnIndex of targetColumnIndexes) {
+			const measuredCellKeys = /* @__PURE__ */ new Set();
+			let columnWidth = AUTO_FIT_MIN_COLUMN_WIDTH;
+			for (const row of tableMap) {
+				const cell = row[columnIndex]?.cell;
+				if (!cell || cell.getColSpan() > 1 || measuredCellKeys.has(cell.getKey())) continue;
+				const cellElement = editor.getElementByKey(cell.getKey());
+				if (!(cellElement instanceof HTMLElement)) continue;
+				measuredCellKeys.add(cell.getKey());
+				columnWidth = Math.max(columnWidth, measureCellNoWrapWidth(cellElement, measureContainer));
+			}
+			nextColWidths[columnIndex] = columnWidth;
+		}
+		return nextColWidths;
+	} finally {
+		measureContainer.remove();
+	}
+};
+//#endregion
+export { getAutoFitTableColumnWidths };

package/es/plugins/table/utils/distributeColumnWidth.js

@@ -0,0 +1,37 @@
+//#region src/plugins/table/utils/distributeColumnWidth.ts
+const DISTRIBUTE_MIN_COLUMN_WIDTH = 75;
+const getTableElement = (editor, tableKey) => {
+	const tableElement = editor.getElementByKey(tableKey);
+	return tableElement instanceof HTMLTableElement ? tableElement : tableElement?.querySelector("table.editor_table, table");
+};
+const getScrollContainerWidth = (tableElement) => {
+	const container = tableElement.closest(".lobe-editor-table-scroll-wrapper") ?? tableElement.parentElement;
+	if (!container) return 0;
+	return container.clientWidth || container.getBoundingClientRect().width;
+};
+const getHorizontalBorderWidth = (tableElement) => {
+	const firstRow = tableElement.rows[0];
+	if (!firstRow) return 0;
+	const cells = Array.from(firstRow.cells);
+	if (cells.length === 0) return 0;
+	return cells.reduce((total, cell, index) => {
+		const style = getComputedStyle(cell);
+		const borderInlineStartWidth = index === 0 ? Number.parseFloat(style.borderInlineStartWidth) || 0 : 0;
+		const borderInlineEndWidth = Number.parseFloat(style.borderInlineEndWidth) || 0;
+		return total + borderInlineStartWidth + borderInlineEndWidth;
+	}, 0);
+};
+const getDistributedTableColumnWidths = (editor, tableNode) => {
+	const columnCount = tableNode.getColumnCount();
+	if (columnCount === 0) return null;
+	const tableElement = getTableElement(editor, tableNode.getKey());
+	if (!tableElement) return null;
+	const minTableWidth = DISTRIBUTE_MIN_COLUMN_WIDTH * columnCount;
+	const targetTableWidth = Math.max(getScrollContainerWidth(tableElement) - getHorizontalBorderWidth(tableElement), minTableWidth);
+	const columnWidth = Math.floor(targetTableWidth / columnCount);
+	const colWidths = Array.from({ length: columnCount }, () => columnWidth);
+	colWidths[columnCount - 1] = targetTableWidth - columnWidth * (columnCount - 1);
+	return colWidths;
+};
+//#endregion
+export { getDistributedTableColumnWidths };