@quadrats/react 1.0.0 → 1.1.1

package/table/components/Table.js

@@ -0,0 +1,236 @@
+import React, { useRef, useMemo, useCallback } from 'react';
+import { Element } from '@quadrats/core';
+import { TableActionsContext } from '../contexts/TableActionsContext.js';
+import { TableMetadataContext } from '../contexts/TableMetadataContext.js';
+import { TableStateContext } from '../contexts/TableStateContext.js';
+import { TableDragProvider } from '../contexts/TableDragContext.js';
+import { TABLE_ROW_TYPE, TABLE_CELL_TYPE, TABLE_DEFAULT_MAX_COLUMNS, TABLE_DEFAULT_MAX_ROWS } from '@quadrats/common/table';
+import { useTableActions } from '../hooks/useTableActions.js';
+import { Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+import { useTableStates } from '../hooks/useTableStates.js';
+import { getTableElements } from '../utils/helper.js';
+
+function Table({ attributes, children, element, }) {
+    const { addColumn, addRow, addColumnAndRow, deleteRow, deleteColumn, moveRowToBody, moveRowToHeader, unsetColumnAsTitle, setColumnAsTitle, pinColumn, pinRow, unpinColumn, unpinRow, moveOrSwapRow, moveOrSwapColumn, } = useTableActions(element);
+    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStates();
+    const portalContainerRef = useRef(null);
+    const { columnCount, rowCount, normalCols, bodyCount, tableElements } = useMemo(() => {
+        const elements = getTableElements(element);
+        if (!elements.tableMainElement) {
+            return {
+                columnCount: 0,
+                rowCount: 0,
+                treatAsTitleCols: 0,
+                normalCols: 0,
+                bodyCount: 0,
+                headerCount: 0,
+                tableElements: elements,
+            };
+        }
+        const headerRowElements = elements.tableHeaderElement
+            ? elements.tableHeaderElement.children.filter((child) => Element.isElement(child) && child.type.includes(TABLE_ROW_TYPE))
+            : [];
+        const bodyRowElements = elements.tableBodyElement
+            ? elements.tableBodyElement.children.filter((child) => Element.isElement(child) && child.type.includes(TABLE_ROW_TYPE))
+            : [];
+        const cols = bodyRowElements.length > 0 && Element.isElement(bodyRowElements[0]) ? bodyRowElements[0].children.length : 0;
+        const treatAsTitleCols = bodyRowElements.length > 0 && Element.isElement(bodyRowElements[0])
+            ? bodyRowElements[0].children.filter((row) => (Element.isElement(row) ? row.treatAsTitle : false)).length
+            : 0;
+        const rows = headerRowElements.length + bodyRowElements.length;
+        return {
+            columnCount: cols,
+            rowCount: rows,
+            headerCount: headerRowElements.length,
+            bodyCount: bodyRowElements.length,
+            treatAsTitleCols,
+            normalCols: cols - treatAsTitleCols,
+            tableElements: elements,
+        };
+    }, [element]);
+    // 預計算所有 cell positions
+    const cellPositions = useMemo(() => {
+        const positions = new Map();
+        if (!tableElements.tableMainElement)
+            return positions;
+        const { tableHeaderElement, tableBodyElement } = tableElements;
+        let globalRowIndex = 0;
+        // Process header rows
+        if (tableHeaderElement && Element.isElement(tableHeaderElement)) {
+            for (const row of tableHeaderElement.children) {
+                if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
+                    for (let colIndex = 0; colIndex < row.children.length; colIndex++) {
+                        const cell = row.children[colIndex];
+                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
+                            positions.set(cell, {
+                                columnIndex: colIndex,
+                                rowIndex: globalRowIndex,
+                            });
+                        }
+                    }
+                    globalRowIndex++;
+                }
+            }
+        }
+        // Process body rows
+        if (tableBodyElement && Element.isElement(tableBodyElement)) {
+            for (const row of tableBodyElement.children) {
+                if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
+                    for (let colIndex = 0; colIndex < row.children.length; colIndex++) {
+                        const cell = row.children[colIndex];
+                        if (Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE)) {
+                            positions.set(cell, {
+                                columnIndex: colIndex,
+                                rowIndex: globalRowIndex,
+                            });
+                        }
+                    }
+                    globalRowIndex++;
+                }
+            }
+        }
+        return positions;
+    }, [tableElements]);
+    // 預計算 pinned columns 和 rows
+    const { pinnedColumns, pinnedRows } = useMemo(() => {
+        const columns = new Set();
+        const rows = new Set();
+        if (!tableElements.tableBodyElement)
+            return { pinnedColumns: columns, pinnedRows: rows };
+        const { tableHeaderElement, tableBodyElement } = tableElements;
+        // 檢查 pinned columns - 只需要檢查第一個 body row
+        if (Element.isElement(tableBodyElement) && tableBodyElement.children.length > 0) {
+            const firstBodyRow = tableBodyElement.children[0];
+            if (Element.isElement(firstBodyRow) && firstBodyRow.type.includes(TABLE_ROW_TYPE)) {
+                for (let colIndex = 0; colIndex < firstBodyRow.children.length; colIndex++) {
+                    const cell = firstBodyRow.children[colIndex];
+                    if (Element.isElement(cell) &&
+                        cell.type.includes(TABLE_CELL_TYPE) &&
+                        cell.treatAsTitle &&
+                        cell.pinned) {
+                        columns.add(colIndex);
+                    }
+                }
+            }
+        }
+        // 檢查 pinned rows - 只需要檢查 header rows
+        if (tableHeaderElement && Element.isElement(tableHeaderElement)) {
+            for (let rowIndex = 0; rowIndex < tableHeaderElement.children.length; rowIndex++) {
+                const row = tableHeaderElement.children[rowIndex];
+                if (Element.isElement(row) && row.type.includes(TABLE_ROW_TYPE)) {
+                    // 檢查這一行的所有 cells 是否都是 pinned
+                    const allCellsPinned = row.children.every((cell) => Element.isElement(cell) && cell.type.includes(TABLE_CELL_TYPE) && cell.pinned);
+                    if (allCellsPinned) {
+                        rows.add(rowIndex);
+                    }
+                }
+            }
+        }
+        return { pinnedColumns: columns, pinnedRows: rows };
+    }, [tableElements]);
+    const isReachMaximumColumns = useMemo(() => {
+        return columnCount >= TABLE_DEFAULT_MAX_COLUMNS;
+    }, [columnCount]);
+    const isReachMaximumRows = useMemo(() => {
+        return TABLE_DEFAULT_MAX_ROWS > 0 ? rowCount >= TABLE_DEFAULT_MAX_ROWS : false;
+    }, [rowCount]);
+    const isReachMinimumNormalColumns = useMemo(() => {
+        return normalCols <= 1;
+    }, [normalCols]);
+    const isReachMinimumBodyRows = useMemo(() => {
+        return bodyCount <= 1;
+    }, [bodyCount]);
+    const isColumnPinned = useCallback((columnIndex) => {
+        return pinnedColumns.has(columnIndex);
+    }, [pinnedColumns]);
+    const isRowPinned = useCallback((rowIndex) => {
+        return pinnedRows.has(rowIndex);
+    }, [pinnedRows]);
+    const actionsValue = useMemo(() => ({
+        addColumn,
+        addRow,
+        addColumnAndRow,
+        deleteRow,
+        deleteColumn,
+        moveRowToBody,
+        moveRowToHeader,
+        unsetColumnAsTitle,
+        setColumnAsTitle,
+        pinColumn,
+        pinRow,
+        unpinColumn,
+        unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
+    }), [
+        addColumn,
+        addRow,
+        addColumnAndRow,
+        deleteRow,
+        deleteColumn,
+        moveRowToBody,
+        moveRowToHeader,
+        unsetColumnAsTitle,
+        setColumnAsTitle,
+        pinColumn,
+        pinRow,
+        unpinColumn,
+        unpinRow,
+        moveOrSwapRow,
+        moveOrSwapColumn,
+    ]);
+    const metadataValue = useMemo(() => ({
+        tableElement: element,
+        columnCount,
+        rowCount,
+        portalContainerRef,
+        isReachMaximumColumns,
+        isReachMaximumRows,
+        isReachMinimumNormalColumns,
+        isReachMinimumBodyRows,
+        pinnedColumns,
+        pinnedRows,
+        cellPositions,
+        isColumnPinned,
+        isRowPinned,
+    }), [
+        element,
+        columnCount,
+        rowCount,
+        portalContainerRef,
+        isReachMaximumColumns,
+        isReachMaximumRows,
+        isReachMinimumNormalColumns,
+        isReachMinimumBodyRows,
+        pinnedColumns,
+        pinnedRows,
+        cellPositions,
+        isColumnPinned,
+        isRowPinned,
+    ]);
+    const stateValue = useMemo(() => ({
+        tableSelectedOn,
+        setTableSelectedOn,
+        tableHoveredOn,
+        setTableHoveredOn,
+    }), [tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn]);
+    return (React.createElement(TableDragProvider, null,
+        React.createElement(TableActionsContext.Provider, { value: actionsValue },
+            React.createElement(TableMetadataContext.Provider, { value: metadataValue },
+                React.createElement(TableStateContext.Provider, { value: stateValue },
+                    React.createElement("div", Object.assign({}, attributes, { className: "qdr-table" }),
+                        children,
+                        React.createElement("button", { type: "button", onClick: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                                setTableSelectedOn((prev) => ((prev === null || prev === void 0 ? void 0 : prev.region) === 'table' ? undefined : { region: 'table' }));
+                            }, onMouseDown: (evt) => {
+                                evt.preventDefault();
+                                evt.stopPropagation();
+                            }, className: "qdr-table__selection", title: (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'table' ? 'Deselect Table' : 'Select Table' },
+                            React.createElement(Icon, { icon: Drag, width: 20, height: 20 })),
+                        React.createElement("div", { ref: portalContainerRef, className: "qdr-table__portal-container", "data-slate-editor": false, contentEditable: false })))))));
+}
+
+export { Table as default };

package/table/components/TableBody.d.ts

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

package/table/components/TableBody.js

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

package/table/components/TableCell.d.ts

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

package/table/components/TableCell.js

@@ -0,0 +1,297 @@
+import React, { useContext, useCallback, useMemo, useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { Element, Transforms } from '@quadrats/core';
+import { useSlateStatic } from 'slate-react';
+import { useDrop } from 'react-dnd';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+import { Portal } from '@quadrats/react/components';
+import { useTableMetadata } from '../hooks/useTableMetadata.js';
+import { useTableStateContext } from '../hooks/useTableStateContext.js';
+import { InlineToolbar } from '@quadrats/react/toolbar';
+import { useTableCellFocused, useTableCellPosition, useTableCellTransformContent } from '../hooks/useTableCell.js';
+import { useTableCellToolbarActions } from '../hooks/useTableCellToolbarActions.js';
+import { TableScrollContext } from '../contexts/TableScrollContext.js';
+import { useColumnResize } from '../hooks/useColumnResize.js';
+import { useTableActionsContext } from '../hooks/useTableActionsContext.js';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+import { ROW_DRAG_TYPE, RowDragButton } from './RowDragButton.js';
+import { COLUMN_DRAG_TYPE, ColumnDragButton } from './ColumnDragButton.js';
+import { getTableElements } from '../utils/helper.js';
+
+function TableCell(props) {
+    var _a, _b;
+    const { attributes, children, element } = props;
+    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
+    const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+    const { moveOrSwapRow, moveOrSwapColumn } = useTableActionsContext();
+    const { dragState, dropTargetIndex, setDropTargetIndex, dragDirection, setDragDirection } = useTableDragContext();
+    // Component context
+    const { isHeader } = useContext(TableHeaderContext);
+    const { scrollTop, scrollLeft, scrollRef } = useContext(TableScrollContext);
+    const editor = useSlateStatic();
+    // Cell-specific hooks
+    const focused = useTableCellFocused(element, editor);
+    const cellPosition = useTableCellPosition(element);
+    const transformCellContent = useTableCellTransformContent(element, editor);
+    // Get header row count from table structure
+    const tableElements = getTableElements(tableElement);
+    const headerRowCount = ((_a = tableElements.tableHeaderElement) === null || _a === void 0 ? void 0 : _a.children.length) || 0;
+    // Helper to check if column is title column
+    const checkIsTitleColumn = useCallback((colIndex) => {
+        const elements = getTableElements(tableElement);
+        if (!elements.tableBodyElement)
+            return false;
+        const firstRow = elements.tableBodyElement.children[0];
+        if (!Element.isElement(firstRow))
+            return false;
+        const cell = firstRow.children[colIndex];
+        return Element.isElement(cell) && !!cell.treatAsTitle;
+    }, [tableElement]);
+    // Toolbar actions
+    const { focusToolbarIconGroups, inlineToolbarIconGroups } = useTableCellToolbarActions({
+        element,
+        cellPosition,
+        isHeader,
+        transformCellContent,
+    });
+    const isSelectedInSameRow = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'row' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.rowIndex;
+    const isSelectedInSameColumn = (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region) === 'column' && (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.index) === cellPosition.columnIndex;
+    // 判斷是否為正在被拖曳的 row/column
+    const isDraggingThisRow = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' && dragState.rowIndex === cellPosition.rowIndex;
+    const isDraggingThisColumn = (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' && dragState.columnIndex === cellPosition.columnIndex;
+    const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
+    const showColumnActionButton = useMemo(() => cellPosition.rowIndex === 0 &&
+        (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
+    const showRowActionButton = useMemo(() => cellPosition.columnIndex === 0 &&
+        (isSelectedInSameRow || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.rowIndex) === cellPosition.rowIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameRow, tableHoveredOn, tableSelectedOn]);
+    // 用於定位 InlineToolbar 的 ref
+    const cellRef = useRef(null);
+    const [toolbarPosition, setToolbarPosition] = useState(null);
+    const [rowButtonPosition, setRowButtonPosition] = useState(null);
+    const [columnButtonPosition, setColumnButtonPosition] = useState(null);
+    const [cellStuckAtLeft, setCellStuckAtLeft] = useState(undefined);
+    const [, dropRow] = useDrop(() => ({
+        accept: ROW_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'row')
+                return false;
+            if (item.rowIndex === cellPosition.rowIndex)
+                return false;
+            const sourceInHeader = item.isInHeader;
+            const targetInHeader = cellPosition.rowIndex < headerRowCount;
+            return sourceInHeader === targetInHeader;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            const direction = item.rowIndex < cellPosition.rowIndex ? 'down' : 'up';
+            setDropTargetIndex(cellPosition.rowIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapRow(item.rowIndex, cellPosition.rowIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.rowIndex, headerRowCount, moveOrSwapRow, setDropTargetIndex, setDragDirection]);
+    // Drop target logic for columns
+    const [, dropColumn] = useDrop(() => ({
+        accept: COLUMN_DRAG_TYPE,
+        canDrop: (item) => {
+            if (!dragState || dragState.type !== 'column')
+                return false;
+            if (item.columnIndex === cellPosition.columnIndex)
+                return false;
+            const sourceIsTitle = item.isTitle;
+            const targetIsTitle = checkIsTitleColumn(cellPosition.columnIndex);
+            return sourceIsTitle === targetIsTitle;
+        },
+        hover: (item, monitor) => {
+            if (!monitor.canDrop()) {
+                setDropTargetIndex(null);
+                setDragDirection(null);
+                return;
+            }
+            // 計算拖曳方向
+            const direction = item.columnIndex < cellPosition.columnIndex ? 'right' : 'left';
+            setDropTargetIndex(cellPosition.columnIndex);
+            setDragDirection(direction);
+        },
+        drop: (item) => {
+            moveOrSwapColumn(item.columnIndex, cellPosition.columnIndex, 'move');
+            setDropTargetIndex(null);
+            setDragDirection(null);
+        },
+    }), [dragState, cellPosition.columnIndex, checkIsTitleColumn, moveOrSwapColumn, setDropTargetIndex, setDragDirection]);
+    // Combine refs
+    dropRow(dropColumn(cellRef));
+    // Column resize
+    const { isResizing, handleResizeStart } = useColumnResize({
+        tableElement,
+        columnIndex: cellPosition.columnIndex,
+        cellRef,
+    });
+    useEffect(() => {
+        const { current: cell } = cellRef;
+        const { current: portalContainer } = portalContainerRef;
+        if (!cell || !portalContainer) {
+            setToolbarPosition(null);
+            setRowButtonPosition(null);
+            setColumnButtonPosition(null);
+            return;
+        }
+        const rafId = requestAnimationFrame(() => {
+            const cellRect = cell.getBoundingClientRect();
+            const portalContainerRect = portalContainer.getBoundingClientRect();
+            // 工具列位置 (針對 focused 狀態)
+            if (focused || isSelectionTriggerByMe) {
+                setToolbarPosition({
+                    top: cellRect.top - portalContainerRect.top - 4, // -4px offset
+                    left: cellRect.left - portalContainerRect.left,
+                });
+            }
+            else {
+                setToolbarPosition(null);
+            }
+            // 行按鈕位置 (顯示在第一列)
+            if (cellPosition.columnIndex === 0) {
+                setRowButtonPosition({
+                    top: Math.min(cellRect.top - portalContainerRect.top + cellRect.height / 2 - 10, 0), // 置中，按鈕高度約 20px
+                    left: cellRect.left - portalContainerRect.left - 10, // 向左偏移 10px
+                });
+            }
+            else {
+                setRowButtonPosition(null);
+            }
+            // 列按鈕位置 (顯示在第一行)
+            if (cellPosition.rowIndex === 0) {
+                setColumnButtonPosition({
+                    top: cellRect.top - portalContainerRect.top - 10 + scrollTop, // 向上偏移 10px
+                    left: cellRect.left - portalContainerRect.left + cellRect.width / 2 - 10, // 置中，按鈕寬度約 20px
+                });
+            }
+            else {
+                setColumnButtonPosition(null);
+            }
+        });
+        return () => {
+            cancelAnimationFrame(rafId);
+        };
+    }, [
+        focused,
+        isSelectionTriggerByMe,
+        cellPosition.columnIndex,
+        cellPosition.rowIndex,
+        portalContainerRef,
+        scrollTop,
+        scrollLeft,
+    ]);
+    useEffect(() => {
+        const { current: cell } = cellRef;
+        const { current: scrollContainer } = scrollRef;
+        if (scrollContainer && cell) {
+            const cellRect = cell.getBoundingClientRect();
+            const containerRect = scrollContainer.getBoundingClientRect();
+            setCellStuckAtLeft(Math.max(Math.round(cellRect.left - containerRect.left), 0));
+        }
+    }, [scrollRef]);
+    const TagName = isHeader ? 'th' : 'td';
+    const myColumnIsPinned = isColumnPinned(cellPosition.columnIndex) && element.treatAsTitle;
+    return (React.createElement(TagName, Object.assign({}, attributes, { ref: cellRef, onMouseEnter: () => {
+            setTableHoveredOn({ columnIndex: cellPosition.columnIndex, rowIndex: cellPosition.rowIndex });
+        }, onMouseLeave: () => {
+            setTableHoveredOn(undefined);
+        }, className: clsx('qdr-table__cell', {
+            'qdr-table__cell--header': isHeader || element.treatAsTitle,
+            'qdr-table__cell--pinned': myColumnIsPinned,
+            'qdr-table__cell--top-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === 0) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === 0),
+            'qdr-table__cell--right-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === columnCount - 1),
+            'qdr-table__cell--bottom-active': isSelectedInSameRow ||
+                (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1) ||
+                isDraggingThisRow ||
+                (isDraggingThisColumn && cellPosition.rowIndex === rowCount - 1),
+            'qdr-table__cell--left-active': isSelectedInSameColumn ||
+                (isSelectedInSameRow && cellPosition.columnIndex === 0) ||
+                isDraggingThisColumn ||
+                (isDraggingThisRow && cellPosition.columnIndex === 0),
+            'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
+            'qdr-table__cell--drag-row-target-top': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'up',
+            'qdr-table__cell--drag-row-target-bottom': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row' &&
+                dropTargetIndex === cellPosition.rowIndex &&
+                dropTargetIndex !== dragState.rowIndex &&
+                dragDirection === 'down',
+            'qdr-table__cell--drag-column-target-left': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'left',
+            'qdr-table__cell--drag-column-target-right': (dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column' &&
+                dropTargetIndex === cellPosition.columnIndex &&
+                dropTargetIndex !== dragState.columnIndex &&
+                dragDirection === 'right',
+        }), "data-row-index": cellPosition.rowIndex, "data-column-index": cellPosition.columnIndex, style: myColumnIsPinned
+            ? {
+                left: cellStuckAtLeft,
+            }
+            : undefined }),
+        children,
+        React.createElement("div", { contentEditable: false, "data-slate-editor": false, className: clsx('qdr-table__cell__resize-handle', {
+                'qdr-table__cell__resize-handle--active': isResizing,
+            }), onMouseDown: handleResizeStart }),
+        focused && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(InlineToolbar, { className: 'qdr-table__cell__focus-toolbar', style: {
+                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
+                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
+                }, iconGroups: focusToolbarIconGroups }))),
+        showRowActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(RowDragButton, { rowIndex: cellPosition.rowIndex, headerRowCount: headerRowCount, style: {
+                    top: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.top,
+                    left: rowButtonPosition === null || rowButtonPosition === void 0 ? void 0 : rowButtonPosition.left,
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    Transforms.deselect(editor);
+                    setTableSelectedOn((prev) => {
+                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'row' && prev.index === cellPosition.rowIndex) {
+                            return undefined;
+                        }
+                        return { region: 'row', index: cellPosition.rowIndex };
+                    });
+                } }))),
+        showColumnActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(ColumnDragButton, { columnIndex: cellPosition.columnIndex, style: {
+                    // pinned 時因為 sticky 所以要扣掉 scrollTop
+                    top: ((_b = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _b !== void 0 ? _b : 0) - (element.pinned ? scrollTop : 0),
+                    left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    Transforms.deselect(editor);
+                    setTableSelectedOn((prev) => {
+                        if ((prev === null || prev === void 0 ? void 0 : prev.region) === 'column' && prev.index === cellPosition.columnIndex) {
+                            return undefined;
+                        }
+                        return { region: 'column', index: cellPosition.columnIndex };
+                    });
+                }, checkIsTitleColumn: checkIsTitleColumn }))),
+        isSelectionTriggerByMe && (cellPosition.columnIndex === 0 || cellPosition.rowIndex === 0) ? (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement(InlineToolbar, { className: "qdr-table__cell__inline-table-toolbar", style: {
+                    top: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.top,
+                    left: toolbarPosition === null || toolbarPosition === void 0 ? void 0 : toolbarPosition.left,
+                }, iconGroups: inlineToolbarIconGroups, onClickAway: () => {
+                    setTableSelectedOn(undefined);
+                } }))) : null));
+}
+
+export { TableCell as default };

package/table/components/TableDragLayer.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface DragLayerProps {
+    scrollRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const TableDragLayer: React.FC<DragLayerProps>;
+export {};

package/table/components/TableDragLayer.js

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import { useDragLayer } from 'react-dnd';
+import { useTableDragContext } from '../contexts/TableDragContext.js';
+
+const TableDragLayer = ({ scrollRef }) => {
+    const { dragState } = useTableDragContext();
+    const [columnWidths, setColumnWidths] = useState([]);
+    const [rowHeights, setRowHeights] = useState([]);
+    const { isDragging, currentOffset } = useDragLayer((monitor) => ({
+        isDragging: monitor.isDragging(),
+        currentOffset: monitor.getClientOffset(),
+    }));
+    // 計算所有 column 的寬度和 row 的高度
+    useEffect(() => {
+        if (!scrollRef.current || !isDragging)
+            return;
+        const tableContainer = scrollRef.current;
+        const cells = tableContainer.querySelectorAll('.qdr-table__cell');
+        if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'column') {
+            // 計算每個 column 的寬度
+            const widths = [];
+            const columnCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.columnIndex !== undefined;
+            });
+            const columnCount = Math.max(...columnCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.columnIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < columnCount; i++) {
+                const cellsInColumn = columnCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.columnIndex || '0', 10) === i;
+                });
+                if (cellsInColumn.length > 0) {
+                    const firstCell = cellsInColumn[0];
+                    widths[i] = firstCell.getBoundingClientRect().width;
+                }
+            }
+            setColumnWidths(widths);
+        }
+        else if ((dragState === null || dragState === void 0 ? void 0 : dragState.type) === 'row') {
+            // 計算每個 row 的高度
+            const heights = [];
+            const rowCells = Array.from(cells).filter((cell) => {
+                const cellElement = cell;
+                return cellElement.dataset.rowIndex !== undefined;
+            });
+            const rowCount = Math.max(...rowCells.map((cell) => {
+                const cellElement = cell;
+                return parseInt(cellElement.dataset.rowIndex || '0', 10);
+            })) + 1;
+            for (let i = 0; i < rowCount; i++) {
+                const cellsInRow = rowCells.filter((cell) => {
+                    const cellElement = cell;
+                    return parseInt(cellElement.dataset.rowIndex || '0', 10) === i;
+                });
+                if (cellsInRow.length > 0) {
+                    const firstCell = cellsInRow[0];
+                    heights[i] = firstCell.getBoundingClientRect().height;
+                }
+            }
+            setRowHeights(heights);
+        }
+    }, [isDragging, dragState, scrollRef]);
+    if (!isDragging || !dragState || !currentOffset || !scrollRef.current) {
+        return null;
+    }
+    const tableContainer = scrollRef.current;
+    const tableRect = tableContainer.getBoundingClientRect();
+    if (dragState.type) {
+        const sourceIndex = dragState.type === 'column' ? dragState.columnIndex : dragState.rowIndex;
+        const rowHeight = dragState.type === 'column' ? tableRect.height : rowHeights[sourceIndex];
+        const columnWidth = dragState.type === 'column' ? columnWidths[sourceIndex] : tableRect.width;
+        return (React.createElement("div", { className: "qdr-table__drag-overlay", style: {
+                left: tableRect.left,
+                top: tableRect.top,
+                width: columnWidth,
+                height: rowHeight,
+                transform: dragState.type === 'column'
+                    ? `translateX(${currentOffset.x - tableRect.left - columnWidth / 2}px)`
+                    : `translateY(${currentOffset.y - tableRect.top - rowHeight / 2}px)`,
+            } },
+            React.createElement("div", { className: "qdr-table__drag-overlay-content" })));
+    }
+    return null;
+};
+
+export { TableDragLayer };

package/table/components/TableHeader.d.ts

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