@quadrats/react 1.0.0 → 1.1.0

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 };

package/table/hooks/useColumnResize.d.ts

@@ -0,0 +1,12 @@
+import { TableElement } from '@quadrats/common/table';
+interface UseColumnResizeParams {
+    tableElement: TableElement;
+    columnIndex: number;
+    cellRef: React.RefObject<HTMLTableCellElement | null>;
+}
+interface UseColumnResizeReturn {
+    isResizing: boolean;
+    handleResizeStart: (e: React.MouseEvent) => void;
+}
+export declare function useColumnResize({ tableElement, columnIndex, cellRef }: UseColumnResizeParams): UseColumnResizeReturn;
+export {};

package/table/hooks/useColumnResize.js

@@ -0,0 +1,139 @@
+import { useState, useRef, useCallback } from 'react';
+import { useSlateStatic } from 'slate-react';
+import { Transforms, Editor } from '@quadrats/core';
+import { calculateTableMinWidth } from '@quadrats/common/table';
+import { getPinnedColumnsInfo, getColumnWidths, calculateResizedColumnWidths, setColumnWidths } from '../utils/helper.js';
+import { useTableStateContext } from './useTableStateContext.js';
+
+function useColumnResize({ tableElement, columnIndex, cellRef }) {
+    const editor = useSlateStatic();
+    const { setTableSelectedOn } = useTableStateContext();
+    const [isResizing, setIsResizing] = useState(false);
+    const resizeDataRef = useRef(null);
+    const currentWidthsRef = useRef(null);
+    const handleResizeStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // 清除當前的 focus 狀態和 table selection
+        Transforms.deselect(editor);
+        setTableSelectedOn(undefined);
+        const cell = cellRef.current;
+        if (!cell)
+            return;
+        // 找到 table DOM 元素和 scroll container
+        const tableDOMElement = cell.closest('table');
+        const scrollContainer = tableDOMElement === null || tableDOMElement === void 0 ? void 0 : tableDOMElement.closest('.qdr-table__scrollContainer');
+        if (!tableDOMElement || !scrollContainer)
+            return;
+        const tableRect = tableDOMElement.getBoundingClientRect();
+        const containerRect = scrollContainer.getBoundingClientRect();
+        // 獲取釘選欄位資訊
+        const { pinnedColumnIndices } = getPinnedColumnsInfo(tableElement);
+        // 儲存初始狀態
+        resizeDataRef.current = {
+            startX: e.clientX,
+            startWidths: getColumnWidths(tableElement, tableRect.width),
+            tableWidth: tableRect.width,
+            containerWidth: containerRect.width,
+            pinnedColumnIndices,
+            tableDOMElement,
+        };
+        setIsResizing(true);
+        // 顯示 size indicators 容器
+        const mainWrapper = tableDOMElement.closest('.qdr-table__mainWrapper');
+        const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
+        if (sizeIndicatorsContainer) {
+            sizeIndicatorsContainer.style.display = 'flex';
+        }
+        // 為當前 column 的所有 cell 添加 resizing class
+        const allRows = tableDOMElement.querySelectorAll('tr');
+        allRows.forEach((row) => {
+            const cells = row.querySelectorAll('td, th');
+            const targetCell = cells[columnIndex];
+            if (targetCell) {
+                targetCell.classList.add('qdr-table__cell--resizing');
+            }
+        });
+        const handleMouseMove = (moveEvent) => {
+            if (!resizeDataRef.current)
+                return;
+            const { startX, startWidths, tableWidth, pinnedColumnIndices, tableDOMElement } = resizeDataRef.current;
+            const deltaX = moveEvent.clientX - startX;
+            // 將位移轉換為百分比
+            const deltaPercentage = (deltaX / tableWidth) * 100;
+            // 計算新的欄位寬度
+            const newWidths = calculateResizedColumnWidths(startWidths, columnIndex, deltaPercentage, deltaX, pinnedColumnIndices);
+            // 儲存計算結果，但不更新 Slate
+            currentWidthsRef.current = newWidths;
+            // 更新 table 的最小寬度
+            tableDOMElement.style.minWidth = calculateTableMinWidth(newWidths);
+            // 直接更新 DOM 的 <col> 元素
+            const colgroup = tableDOMElement.querySelector('colgroup');
+            if (colgroup) {
+                const cols = colgroup.querySelectorAll('col');
+                newWidths.forEach((width, index) => {
+                    const col = cols[index];
+                    if (col) {
+                        const cssWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
+                        col.style.width = cssWidth;
+                        col.style.minWidth = cssWidth;
+                    }
+                });
+            }
+            // 更新 size indicators
+            const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
+            if (sizeIndicatorsContainer) {
+                const indicators = sizeIndicatorsContainer.querySelectorAll('.qdr-table__size-indicator');
+                newWidths.forEach((width, index) => {
+                    const indicator = indicators[index];
+                    if (indicator) {
+                        const cssWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
+                        const displayWidth = width.type === 'percentage' ? `${width.value.toFixed(1)}%` : `${width.value}px`;
+                        indicator.style.width = cssWidth;
+                        indicator.style.minWidth = cssWidth;
+                        // 更新顯示文字
+                        const sizeText = indicator.querySelector('.qdr-table__size');
+                        if (sizeText) {
+                            sizeText.textContent = displayWidth;
+                        }
+                    }
+                });
+            }
+        };
+        const handleMouseUp = () => {
+            const allRows = tableDOMElement.querySelectorAll('tr');
+            allRows.forEach((row) => {
+                const cells = row.querySelectorAll('td, th');
+                const targetCell = cells[columnIndex];
+                if (targetCell) {
+                    targetCell.classList.remove('qdr-table__cell--resizing');
+                }
+            });
+            // 隱藏 size indicators 容器
+            const mainWrapper = tableDOMElement.closest('.qdr-table__mainWrapper');
+            const sizeIndicatorsContainer = mainWrapper === null || mainWrapper === void 0 ? void 0 : mainWrapper.querySelector('.qdr-table__size-indicators');
+            if (sizeIndicatorsContainer) {
+                sizeIndicatorsContainer.style.display = 'none';
+            }
+            // 將最終寬度寫入 Slate
+            if (currentWidthsRef.current) {
+                Editor.withoutNormalizing(editor, () => {
+                    setColumnWidths(editor, tableElement, currentWidthsRef.current);
+                });
+            }
+            setIsResizing(false);
+            resizeDataRef.current = null;
+            currentWidthsRef.current = null;
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+    }, [editor, columnIndex, cellRef, tableElement, setTableSelectedOn]);
+    return {
+        isResizing,
+        handleResizeStart,
+    };
+}
+
+export { useColumnResize };

package/table/hooks/useTableActions.d.ts

@@ -0,0 +1,25 @@
+import { RenderTableElementProps } from '../typings';
+import { TableElement } from '@quadrats/common/table';
+export declare function useTableActions(element: RenderTableElementProps['element']): {
+    addColumn: (options?: {
+        position?: "left" | "right";
+        columnIndex?: number;
+    }) => void;
+    addRow: (options?: {
+        position?: "top" | "bottom";
+        rowIndex?: number;
+    }) => void;
+    addColumnAndRow: VoidFunction;
+    deleteRow: (rowIndex: number) => void;
+    deleteColumn: (columnIndex: number) => void;
+    moveRowToBody: (rowIndex: number) => void;
+    moveRowToHeader: (rowIndex: number, customProps?: Pick<TableElement, "pinned">) => void;
+    unsetColumnAsTitle: (columnIndex: number) => void;
+    setColumnAsTitle: (columnIndex: number, customProps?: Pick<TableElement, "pinned">) => void;
+    pinColumn: (columnIndex: number) => void;
+    unpinColumn: () => void;
+    pinRow: (rowIndex: number) => void;
+    unpinRow: () => void;
+    isColumnPinned: (columnIndex: number) => boolean;
+    isRowPinned: (rowIndex: number) => boolean;
+};