@quadrats/react 0.7.8 → 1.1.0

package/table/components/TableMain.js

@@ -0,0 +1,225 @@
+import React, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
+import { Icon } from '@quadrats/react/components';
+import { Copy, Trash, AlignLeft, AlignCenter, AlignRight, Plus } from '@quadrats/icons';
+import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
+import { useTableMetadata } from '../hooks/useTableMetadata.js';
+import { useTableStateContext } from '../hooks/useTableStateContext.js';
+import { InlineToolbar, ToolbarGroupIcon, ToolbarIcon } from '@quadrats/react/toolbar';
+import { Transforms } from 'slate';
+import { calculateTableMinWidth, columnWidthToCSS } from '@quadrats/common/table';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+import { useTableCellAlign, useTableCellAlignStatus } from '../hooks/useTableCell.js';
+import { getTableElements, getColumnWidths } from '../utils/helper.js';
+
+function TableMain(props) {
+    const { attributes, children } = props;
+    const { setConfirmModalConfig } = useModal();
+    const editor = useSlateStatic();
+    const { addColumn, addRow, addColumnAndRow } = useTableActionsContext();
+    const { isReachMaximumColumns, isReachMaximumRows, tableElement } = useTableMetadata();
+    const { tableSelectedOn, setTableSelectedOn } = useTableStateContext();
+    // Table align functions
+    const setAlign = useTableCellAlign(tableElement, editor);
+    const getAlign = useTableCellAlignStatus(tableElement, editor);
+    const tablePath = ReactEditor.findPath(editor, tableElement);
+    const scrollRef = useRef(null);
+    const tableRef = useRef(null);
+    const [scrollTop, setScrollTop] = useState(0);
+    const [scrollLeft, setScrollLeft] = useState(0);
+    const [tableWidth, setTableWidth] = useState(0);
+    const scrollUpdateTimerRef = useRef(null);
+    const isUpdatingScrollRef = useRef(false); // 標記是否正在更新滾動位置
+    const previousColumnWidthsRef = useRef(''); // 追蹤 columnWidths 的變化
+    // sizing
+    const { tableBodyElement } = getTableElements(tableElement);
+    const firstRowCells = tableBodyElement === null || tableBodyElement === void 0 ? void 0 : tableBodyElement.children[0].children;
+    // 獲取欄位寬度（傳入 tableWidth 以支援混合模式）
+    const columnWidths = useMemo(() => getColumnWidths(tableElement, tableWidth), [tableElement, tableWidth]);
+    // 計算 table 的最小寬度
+    const tableMinWidth = useMemo(() => calculateTableMinWidth(columnWidths), [columnWidths]);
+    // 監聽 table 寬度變化
+    useEffect(() => {
+        const { current: table } = tableRef;
+        if (!table)
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                setTableWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(table);
+        // 初始化寬度
+        setTableWidth(table.getBoundingClientRect().width);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    useEffect(() => {
+        const { current: scrollContainer } = scrollRef;
+        if (!scrollContainer)
+            return;
+        const handleScroll = () => {
+            setScrollTop(scrollContainer.scrollTop);
+            setScrollLeft(scrollContainer.scrollLeft);
+            // 如果正在程式化更新滾動位置，不要觸發 Slate 更新
+            if (isUpdatingScrollRef.current) {
+                return;
+            }
+            // 使用 debounce 來減少 Slate 更新頻率
+            if (scrollUpdateTimerRef.current) {
+                clearTimeout(scrollUpdateTimerRef.current);
+            }
+            scrollUpdateTimerRef.current = setTimeout(() => {
+                // 更新 tableElement 的 scrollPosition
+                const tablePath = ReactEditor.findPath(editor, tableElement);
+                Transforms.setNodes(editor, {
+                    scrollPosition: {
+                        scrollLeft: scrollContainer.scrollLeft,
+                        scrollTop: scrollContainer.scrollTop,
+                    },
+                }, { at: tablePath });
+            }, 300); // 300ms debounce
+        };
+        scrollContainer.addEventListener('scroll', handleScroll, false);
+        return () => {
+            scrollContainer.removeEventListener('scroll', handleScroll, false);
+            if (scrollUpdateTimerRef.current) {
+                clearTimeout(scrollUpdateTimerRef.current);
+            }
+        };
+    }, [editor, tableElement]);
+    // 只在 columnWidths 改變時恢復滾動位置
+    useEffect(() => {
+        const { current: scrollContainer } = scrollRef;
+        if (!scrollContainer || !tableElement.scrollPosition)
+            return;
+        // 檢查 columnWidths 是否真的改變了
+        const currentColumnWidthsStr = JSON.stringify(columnWidths);
+        if (previousColumnWidthsRef.current !== currentColumnWidthsStr) {
+            previousColumnWidthsRef.current = currentColumnWidthsStr;
+            // 標記正在更新，避免觸發 handleScroll
+            isUpdatingScrollRef.current = true;
+            // 使用 requestAnimationFrame 確保 DOM 已更新
+            requestAnimationFrame(() => {
+                var _a, _b, _c, _d;
+                scrollContainer.scrollLeft = (_b = (_a = tableElement.scrollPosition) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : 0;
+                scrollContainer.scrollTop = (_d = (_c = tableElement.scrollPosition) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0;
+                // 重置標記
+                setTimeout(() => {
+                    isUpdatingScrollRef.current = false;
+                }, 100);
+            });
+        }
+    }, [columnWidths, tableElement.scrollPosition]);
+    const scrollContextValue = useMemo(() => ({ scrollTop, scrollLeft, scrollRef }), [scrollTop, scrollLeft, scrollRef]);
+    // 複製 Table 功能
+    const copyTable = useCallback(() => {
+        try {
+            const clonedTable = JSON.parse(JSON.stringify(tableElement));
+            // 找到當前 table 的父節點路徑
+            const tableParentPath = tablePath.slice(0, -1);
+            const tableIndex = tablePath[tablePath.length - 1];
+            // 在當前 table 之後插入複製的 table
+            Transforms.insertNodes(editor, clonedTable, {
+                at: [...tableParentPath, tableIndex + 1],
+            });
+        }
+        catch (error) {
+            console.error('Failed to copy table:', error);
+        }
+    }, [editor, tableElement, tablePath]);
+    // 獲取當前 table 的 align 狀態
+    const currentTableAlign = getAlign('table');
+    // 根據當前 table align 狀態選擇對應的 icon
+    const getCurrentTableAlignIcon = () => {
+        switch (currentTableAlign) {
+            case 'left':
+                return AlignLeft;
+            case 'center':
+                return AlignCenter;
+            case 'right':
+                return AlignRight;
+            default:
+                return AlignLeft;
+        }
+    };
+    return (React.createElement("div", { className: clsx('qdr-table__mainWrapper', {
+            'qdr-table__mainWrapper--selected': (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table',
+        }) },
+        React.createElement(InlineToolbar, { className: "qdr-table__table-toolbar", onClickAway: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? () => setTableSelectedOn(undefined) : undefined, iconGroups: [
+                {
+                    icons: [
+                        {
+                            icon: Copy,
+                            onClick: () => {
+                                copyTable();
+                            },
+                        },
+                        React.createElement(ToolbarGroupIcon, { key: "table-align-change", icon: getCurrentTableAlignIcon() },
+                            React.createElement(ToolbarIcon, { icon: AlignLeft, onClick: () => {
+                                    setAlign('left', 'table');
+                                } }),
+                            React.createElement(ToolbarIcon, { icon: AlignCenter, onClick: () => {
+                                    setAlign('center', 'table');
+                                } }),
+                            React.createElement(ToolbarIcon, { icon: AlignRight, onClick: () => {
+                                    setAlign('right', 'table');
+                                } })),
+                    ],
+                },
+                {
+                    icons: [
+                        {
+                            icon: Trash,
+                            className: 'qdr-table__delete',
+                            onClick: () => {
+                                setConfirmModalConfig({
+                                    title: '刪除表格',
+                                    content: '是否確認刪除此表格？刪除後將立即移除，且此操作無法復原。',
+                                    confirmText: '刪除表格',
+                                    onConfirm: () => {
+                                        Transforms.removeNodes(editor, { at: tablePath });
+                                    },
+                                });
+                            },
+                        },
+                    ],
+                },
+            ] }),
+        React.createElement("div", { ref: scrollRef, className: "qdr-table__scrollContainer" },
+            React.createElement(TableScrollContext.Provider, { value: scrollContextValue },
+                React.createElement("table", Object.assign({}, attributes, { ref: (node) => {
+                        // 合併兩個 refs
+                        tableRef.current = node;
+                        if (typeof attributes.ref === 'function') {
+                            attributes.ref(node);
+                        }
+                        else if (attributes.ref) {
+                            attributes.ref.current = node;
+                        }
+                    }, className: "qdr-table__main", style: {
+                        minWidth: tableMinWidth,
+                    } }),
+                    React.createElement("colgroup", null, columnWidths.map((width, index) => (React.createElement("col", { key: index, style: {
+                            width: columnWidthToCSS(width),
+                            minWidth: columnWidthToCSS(width),
+                        } })))),
+                    children))),
+        React.createElement("div", { className: "qdr-table__size-indicators" }, firstRowCells === null || firstRowCells === void 0 ? void 0 : firstRowCells.map((cell, colIndex) => (React.createElement("div", { key: colIndex, className: "qdr-table__size-indicator", style: {
+                width: columnWidthToCSS(columnWidths[colIndex]),
+                minWidth: columnWidthToCSS(columnWidths[colIndex]),
+                transform: cell.pinned ? 'none' : `translateX(-${scrollLeft}px)`,
+                zIndex: cell.pinned ? 2 : 1,
+            } },
+            React.createElement("div", { className: "qdr-table__size" }, columnWidthToCSS(columnWidths[colIndex])))))),
+        isReachMaximumColumns ? null : (React.createElement("button", { type: "button", onClick: () => addColumn(), title: "Add Column", className: "qdr-table__add-column" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
+        isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: () => addRow(), title: "Add Row", className: "qdr-table__add-row" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" }))),
+        isReachMaximumColumns || isReachMaximumRows ? null : (React.createElement("button", { type: "button", onClick: addColumnAndRow, title: "Add Column and Row", className: "qdr-table__add-both" },
+            React.createElement(Icon, { icon: Plus, width: 20, height: 20, className: "qdr-table__btn-icon" })))));
+}
+
+export { TableMain as default };

package/table/components/TableRow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { TableElement } from '@quadrats/common/table';
+declare function TableRow(props: RenderElementProps<TableElement>): React.JSX.Element;
+export default TableRow;

package/table/components/TableRow.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+function TableRow(props) {
+    const { attributes, children } = props;
+    return React.createElement("tr", Object.assign({}, attributes), children);
+}
+
+export { TableRow as default };

package/table/components/TableTitle.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { TableElement } from '@quadrats/common/table';
+declare function TableTitle(props: RenderElementProps<TableElement>): React.JSX.Element;
+export default TableTitle;

package/table/components/TableTitle.js

@@ -0,0 +1,18 @@
+import React, { useMemo } from 'react';
+import { Editor, Path } from '@quadrats/core';
+import { useComposition, useQuadrats, ReactEditor } from '@quadrats/react';
+
+function TableTitle(props) {
+    const { compositionPath } = useComposition();
+    const { attributes, children, element } = props;
+    const editor = useQuadrats();
+    const path = ReactEditor.findPath(editor, element);
+    const text = Editor.string(editor, path);
+    const isEmpty = !text;
+    const composing = useMemo(() => Path.equals(compositionPath, path), [compositionPath, path]);
+    return (React.createElement("h3", Object.assign({}, attributes, { className: "qdr-table__title" }),
+        children,
+        isEmpty && !composing && (React.createElement("span", { className: "qdr-table__title__placeholder", contentEditable: false }, "\u8ACB\u8F38\u5165\u8868\u683C\u6A19\u984C"))));
+}
+
+export { TableTitle as default };

package/table/contexts/TableActionsContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableActionsContextType = Pick<TableContextType, 'addColumn' | 'addRow' | 'addColumnAndRow' | 'deleteRow' | 'deleteColumn' | 'moveRowToBody' | 'moveRowToHeader' | 'unsetColumnAsTitle' | 'setColumnAsTitle' | 'pinColumn' | 'unpinColumn' | 'pinRow' | 'unpinRow'>;
+export declare const TableActionsContext: import("react").Context<TableActionsContextType | undefined>;

package/table/contexts/TableActionsContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableActionsContext = createContext(undefined);
+
+export { TableActionsContext };

package/table/contexts/TableHeaderContext.d.ts

@@ -0,0 +1,2 @@
+import { TableHeaderContextType } from '../typings';
+export declare const TableHeaderContext: import("react").Context<TableHeaderContextType>;

package/table/contexts/TableHeaderContext.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const TableHeaderContext = createContext({
+    isHeader: false,
+});
+
+export { TableHeaderContext };

package/table/contexts/TableMetadataContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableMetadataContextType = Pick<TableContextType, 'tableElement' | 'columnCount' | 'rowCount' | 'portalContainerRef' | 'isReachMaximumColumns' | 'isReachMaximumRows' | 'isReachMinimumNormalColumns' | 'isReachMinimumBodyRows' | 'pinnedColumns' | 'pinnedRows' | 'cellPositions' | 'isColumnPinned' | 'isRowPinned'>;
+export declare const TableMetadataContext: import("react").Context<TableMetadataContextType | undefined>;

package/table/contexts/TableMetadataContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableMetadataContext = createContext(undefined);
+
+export { TableMetadataContext };

package/table/contexts/TableScrollContext.d.ts

@@ -0,0 +1,2 @@
+import { TableScrollContextType } from '../typings';
+export declare const TableScrollContext: import("react").Context<TableScrollContextType>;

package/table/contexts/TableScrollContext.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+const TableScrollContext = createContext({
+    scrollRef: { current: null },
+    scrollTop: 0,
+    scrollLeft: 0,
+});
+
+export { TableScrollContext };

package/table/contexts/TableStateContext.d.ts

@@ -0,0 +1,3 @@
+import { TableContextType } from '../typings';
+export type TableStateContextType = Pick<TableContextType, 'tableSelectedOn' | 'setTableSelectedOn' | 'tableHoveredOn' | 'setTableHoveredOn'>;
+export declare const TableStateContext: import("react").Context<TableStateContextType | undefined>;

package/table/contexts/TableStateContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const TableStateContext = createContext(undefined);
+
+export { TableStateContext };

package/table/createReactTable.d.ts

@@ -0,0 +1,4 @@
+import { CreateTableOptions } from '@quadrats/common/table';
+import { ReactTable } from './typings';
+export type CreateReactTableOptions = CreateTableOptions;
+export declare function createReactTable(options?: CreateReactTableOptions): ReactTable;

package/table/createReactTable.js

@@ -0,0 +1,297 @@
+import { createTable } from '@quadrats/common/table';
+import { createRenderElements } from '@quadrats/react';
+import { Editor, Element, Transforms, PARAGRAPH_TYPE, Text } from '@quadrats/core';
+import { defaultRenderTableElements } from './defaultRenderTableElements.js';
+
+function createReactTable(options = {}) {
+    const core = createTable(options);
+    const { types } = core;
+    return Object.assign(Object.assign({}, core), { createHandlers: () => ({
+            onKeyDown(event, editor, next) {
+                if (event.nativeEvent.isComposing) {
+                    return;
+                }
+                if (core.isSelectionInTableCell(editor)) {
+                    const checkCurrentCellHasContent = () => {
+                        if (!editor.selection)
+                            return false;
+                        const [cellNode] = Editor.node(editor, editor.selection);
+                        if (Text.isText(cellNode)) {
+                            return cellNode.text.trim() !== '';
+                        }
+                        if (!Element.isElement(cellNode))
+                            return false;
+                        const hasContent = cellNode.children.some((child) => {
+                            if (Text.isText(child)) {
+                                return child.text.trim() !== '';
+                            }
+                            return Element.isElement(child);
+                        });
+                        return hasContent;
+                    };
+                    if (event.key === 'Enter') {
+                        if (core.isSelectionInTableList(editor)) {
+                            return next();
+                        }
+                        event.preventDefault();
+                        const currentCellHasContent = checkCurrentCellHasContent();
+                        if (currentCellHasContent) {
+                            // Insert soft break
+                            Editor.insertText(editor, '\n');
+                        }
+                        else {
+                            // Move to next cell
+                            core.moveToNextCell(editor, types);
+                        }
+                        return;
+                    }
+                    if (event.key === 'Tab') {
+                        event.preventDefault();
+                        // shift+tab
+                        if (event.shiftKey)
+                            return;
+                        core.moveToNextCell(editor, types);
+                        return;
+                    }
+                    // 處理方向鍵上下移動
+                    if (event.key === 'ArrowUp') {
+                        event.preventDefault();
+                        if (event.shiftKey) {
+                            // Shift + 上：擴展選取範圍
+                            core.extendSelectionUp(editor, types);
+                        }
+                        else {
+                            // 只按上：移動到上一行
+                            core.moveToRowAbove(editor, types);
+                        }
+                        return;
+                    }
+                    if (event.key === 'ArrowDown') {
+                        event.preventDefault();
+                        if (event.shiftKey) {
+                            // Shift + 下：擴展選取範圍
+                            core.extendSelectionDown(editor, types);
+                        }
+                        else {
+                            // 只按下：移動到下一行
+                            core.moveToRowBelow(editor, types);
+                        }
+                        return;
+                    }
+                    if (event.key === 'ArrowLeft') {
+                        // Shift + 左：擴展選取範圍
+                        if (event.shiftKey) {
+                            event.preventDefault();
+                            core.extendSelectionLeft(editor, types);
+                            return;
+                        }
+                    }
+                    if (event.key === 'ArrowRight') {
+                        // Shift + 右：擴展選取範圍
+                        if (event.shiftKey) {
+                            event.preventDefault();
+                            core.extendSelectionRight(editor, types);
+                            return;
+                        }
+                    }
+                }
+                next();
+            },
+        }), createRenderElement: (options = {}) => {
+            const renderTable = options.table || defaultRenderTableElements.table;
+            const renderTableTitle = options.table_title || defaultRenderTableElements.table_title;
+            const renderTableMain = options.table_main || defaultRenderTableElements.table_main;
+            const renderTableHeader = options.table_header || defaultRenderTableElements.table_header;
+            const renderTableBody = options.table_body || defaultRenderTableElements.table_body;
+            const renderTableRow = options.table_row || defaultRenderTableElements.table_row;
+            const renderTableCell = options.table_cell || defaultRenderTableElements.table_cell;
+            return createRenderElements([
+                {
+                    type: types.table,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTable({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_title,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableTitle({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_main,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableMain({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_header,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableHeader({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_body,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableBody({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_row,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableRow({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+                {
+                    type: types.table_cell,
+                    render: (props) => {
+                        const { attributes, children, element } = props;
+                        return renderTableCell({
+                            attributes,
+                            element,
+                            children,
+                        });
+                    },
+                },
+            ]);
+        }, with(editor) {
+            const { insertData } = editor;
+            /** 從他處複製文字貼過來時觸發 */
+            editor.insertData = (data) => {
+                const { selection } = editor;
+                if (!selection) {
+                    insertData(data);
+                    return;
+                }
+                // 先檢查選取的起點是否在 table cell 中
+                const cellEntry = Editor.above(editor, {
+                    at: selection.anchor,
+                    match: (n) => Element.isElement(n) && n.type === types.table_cell,
+                });
+                if (cellEntry) {
+                    // 確認在 table 內，將選取範圍縮減到起點
+                    Transforms.collapse(editor, { edge: 'start' });
+                    // 重新取得 cell entry（使用當前游標位置）
+                    const targetCellEntry = Editor.above(editor, {
+                        match: (n) => Element.isElement(n) && n.type === types.table_cell,
+                    });
+                    if (!targetCellEntry) {
+                        insertData(data);
+                        return;
+                    }
+                    const [, cellPath] = targetCellEntry;
+                    // 從剪貼簿取得純文字
+                    const text = data.getData('text/plain');
+                    if (text) {
+                        // 檢測是否為表格格式（包含 Tab 或換行）
+                        const hasTableFormat = text.includes('\t') || text.includes('\n');
+                        if (hasTableFormat) {
+                            // 解析表格格式：行由 \n 分隔，欄位由 \t 分隔
+                            const rows = text.split('\n').filter((row) => row.length > 0);
+                            if (rows.length === 0) {
+                                return;
+                            }
+                            // 找到當前 cell 所在的 row 和 column index
+                            const rowEntry = Editor.above(editor, {
+                                at: cellPath,
+                                match: (n) => Element.isElement(n) && n.type === types.table_row,
+                            });
+                            if (!rowEntry) {
+                                // 如果找不到 row，降級為純文字插入
+                                Transforms.insertText(editor, text.replace(/\t/g, ' '));
+                                return;
+                            }
+                            const [, rowPath] = rowEntry;
+                            const currentColumnIndex = cellPath[cellPath.length - 1];
+                            // 找到 table body 或 header
+                            const containerEntry = Editor.above(editor, {
+                                at: rowPath,
+                                match: (n) => Element.isElement(n) &&
+                                    (n.type === types.table_body || n.type === types.table_header),
+                            });
+                            if (!containerEntry) {
+                                // 降級為純文字插入
+                                Transforms.insertText(editor, text.replace(/\t/g, ' '));
+                                return;
+                            }
+                            const [container, containerPath] = containerEntry;
+                            const currentRowIndex = rowPath[rowPath.length - 1];
+                            // 使用 Editor.withoutNormalizing 批次處理
+                            Editor.withoutNormalizing(editor, () => {
+                                rows.forEach((rowText, rowOffset) => {
+                                    const columns = rowText.split('\t');
+                                    const targetRowIndex = currentRowIndex + rowOffset;
+                                    // 檢查目標 row 是否存在
+                                    if (targetRowIndex >= container.children.length) {
+                                        return; // 超出範圍，跳過此行
+                                    }
+                                    const targetRow = container.children[targetRowIndex];
+                                    if (!Element.isElement(targetRow) || targetRow.type !== types.table_row) {
+                                        return;
+                                    }
+                                    // 貼上到各個 cell
+                                    columns.forEach((columnText, columnOffset) => {
+                                        const targetColumnIndex = currentColumnIndex + columnOffset;
+                                        // 檢查目標 cell 是否存在
+                                        if (targetColumnIndex >= targetRow.children.length) {
+                                            return; // 超出範圍，跳過此欄
+                                        }
+                                        const targetCellPath = [...containerPath, targetRowIndex, targetColumnIndex];
+                                        // 清空目標 cell 的內容
+                                        const targetCell = targetRow.children[targetColumnIndex];
+                                        if (Element.isElement(targetCell) && targetCell.type === types.table_cell) {
+                                            // 移除所有子節點
+                                            for (let i = targetCell.children.length - 1; i >= 0; i--) {
+                                                Transforms.removeNodes(editor, { at: [...targetCellPath, i] });
+                                            }
+                                            // 插入新內容
+                                            Transforms.insertNodes(editor, {
+                                                type: PARAGRAPH_TYPE,
+                                                children: [{ text: columnText }],
+                                            }, { at: [...targetCellPath, 0] });
+                                        }
+                                    });
+                                });
+                            });
+                            return;
+                        }
+                    }
+                }
+                // 預設行為
+                insertData(data);
+            };
+            return core.with(editor);
+        } });
+}
+
+export { createReactTable };

package/table/defaultRenderTableElements.d.ts

@@ -0,0 +1,2 @@
+import { TableRenderElements } from './typings';
+export declare const defaultRenderTableElements: TableRenderElements;

package/table/defaultRenderTableElements.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Table from './components/Table.js';
+import TableTitle from './components/TableTitle.js';
+import TableMain from './components/TableMain.js';
+import TableHeader from './components/TableHeader.js';
+import TableRow from './components/TableRow.js';
+import TableCell from './components/TableCell.js';
+import TableBody from './components/TableBody.js';
+
+const defaultRenderTableElements = {
+    table: (props) => React.createElement(Table, Object.assign({}, props)),
+    table_title: (props) => React.createElement(TableTitle, Object.assign({}, props)),
+    table_main: (props) => React.createElement(TableMain, Object.assign({}, props)),
+    table_header: (props) => React.createElement(TableHeader, Object.assign({}, props)),
+    table_body: (props) => React.createElement(TableBody, Object.assign({}, props)),
+    table_row: (props) => React.createElement(TableRow, Object.assign({}, props)),
+    table_cell: (props) => React.createElement(TableCell, Object.assign({}, props)),
+};
+
+export { defaultRenderTableElements };