@quadrats/react 0.7.8 → 1.1.0

package/paragraph/toolbar/useToggleParagraphTool.d.ts

@@ -0,0 +1,5 @@
+import { Paragraph } from '@quadrats/common/paragraph';
+export declare function useToggleParagraphTool(controller: Paragraph): {
+    active: boolean;
+    onClick: () => void;
+};

package/paragraph/toolbar/useToggleParagraphTool.js

@@ -0,0 +1,11 @@
+import { useQuadrats } from '@quadrats/react';
+
+function useToggleParagraphTool(controller) {
+    const editor = useQuadrats();
+    return {
+        active: controller.isSelectionInParagraph(editor),
+        onClick: () => controller.setParagraphNodes(editor),
+    };
+}
+
+export { useToggleParagraphTool };

package/read-more/components/ReadMore.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { useLocale } from '@quadrats/react';
 
 function ReadMore(props) {
-    const { attributes, children } = props;
+    const { attributes } = props;
     const { readMore } = useLocale().editor;
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-read-more", contentEditable: false }),
-        React.createElement("span", { className: "qdr-read-more__description" }, readMore),
-        attributes ? children : undefined));
+        React.createElement("div", { className: "qdr-read-more__container" },
+            React.createElement("div", { className: "qdr-read-more__container__line" }),
+            React.createElement("span", { className: "qdr-read-more__container__description" }, readMore),
+            React.createElement("div", { className: "qdr-read-more__container__line" }))));
 }
 
 export { ReadMore as default };

package/read-more/index.cjs.js

@@ -5,11 +5,13 @@ var react = require('@quadrats/react');
 var readMore = require('@quadrats/common/read-more');
 
 function ReadMore(props) {
-    const { attributes, children } = props;
+    const { attributes } = props;
     const { readMore } = react.useLocale().editor;
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-read-more", contentEditable: false }),
-        React.createElement("span", { className: "qdr-read-more__description" }, readMore),
-        attributes ? children : undefined));
+        React.createElement("div", { className: "qdr-read-more__container" },
+            React.createElement("div", { className: "qdr-read-more__container__line" }),
+            React.createElement("span", { className: "qdr-read-more__container__description" }, readMore),
+            React.createElement("div", { className: "qdr-read-more__container__line" }))));
 }
 
 const defaultRenderReadMoreElement = (props) => React.createElement(ReadMore, Object.assign({}, props));

package/read-more/read-more.css

@@ -1 +1 @@
-.qdr-read-more{position:relative;margin:18px 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background-image:linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);background-position:center;background-size:1em 1px;background-repeat:repeat-x}.qdr-read-more__description{position:relative;z-index:1;padding:0 1em;background:var(--qdr-background);transition:background-color 300ms ease-in-out,color 300ms ease-in-out;will-change:background-color,color}
+.qdr-read-more{position:relative;margin:var(--qdr-spacing-14) 0;width:100%;color:var(--qdr-divider);text-align:center}.qdr-read-more__container{display:flex;align-items:center;justify-content:space-between}.qdr-read-more__container__description{color:var(--qdr-text-secondary);position:relative;z-index:1;padding:0 var(--qdr-spacing-7);font-size:var(--qdr-typography-article-body2-font-size);line-height:var(--qdr-typography-article-body2-line-height);letter-spacing:var(--qdr-typography-article-body2-letter-spacing);font-weight:var(--qdr-typography-article-body2-font-weight)}.qdr-read-more__container__line{flex:1;height:2px;background-image:repeating-linear-gradient(to right, var(--qdr-border), var(--qdr-border) 10px, transparent 10px, transparent 15px)}

package/read-more/read-more.scss

@@ -1,29 +1,36 @@
 .qdr-read-more {
   position: relative;
-  margin: 18px 0;
+  margin: var(--qdr-spacing-14) 0;
   width: 100%;
   color: var(--qdr-divider);
   text-align: center;
 
-  &::before {
-    position: absolute;
-    content: '';
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(to right, var(--qdr-divider) 50%, rgba(255, 255, 255, 0) 0%);
-    background-position: center;
-    background-size: 1em 1px;
-    background-repeat: repeat-x;
-  }
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &__description {
+      color: var(--qdr-text-secondary);
+      position: relative;
+      z-index: 1;
+      padding: 0 var(--qdr-spacing-7);
+      font-size: var(--qdr-typography-article-body2-font-size);
+      line-height: var(--qdr-typography-article-body2-line-height);
+      letter-spacing: var(--qdr-typography-article-body2-letter-spacing);
+      font-weight: var(--qdr-typography-article-body2-font-weight);
+    }
 
-  &__description {
-    position: relative;
-    z-index: 1;
-    padding: 0 1em;
-    background: var(--qdr-background);
-    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
-    will-change: background-color, color;
+    &__line {
+      flex: 1;
+      height: 2px;
+      background-image: repeating-linear-gradient(
+        to right,
+        var(--qdr-border),
+        var(--qdr-border) 10px,
+        transparent 10px,
+        transparent 15px
+      );
+    }
   }
 }

package/table/components/Table.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RenderElementProps } from '@quadrats/react';
+import { RenderTableElementProps } from '../typings';
+declare function Table({ attributes, children, element, }: {
+    attributes?: RenderElementProps['attributes'];
+    children: RenderElementProps['children'];
+    element: RenderTableElementProps['element'];
+}): React.JSX.Element;
+export default Table;

package/table/components/Table.js

@@ -0,0 +1,231 @@
+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 { 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, } = useTableActions(element);
+    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStates();
+    const portalContainerRef = useRef(null);
+    // 優化表格結構計算 - 使用 getTableElements 重用邏輯
+    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,
+    }), [
+        addColumn,
+        addRow,
+        addColumnAndRow,
+        deleteRow,
+        deleteColumn,
+        moveRowToBody,
+        moveRowToHeader,
+        unsetColumnAsTitle,
+        setColumnAsTitle,
+        pinColumn,
+        pinRow,
+        unpinColumn,
+        unpinRow,
+    ]);
+    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(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,191 @@
+import React, { useContext, useMemo, useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { Transforms } from '@quadrats/core';
+import { useSlateStatic } from 'slate-react';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+import { Portal, Icon } from '@quadrats/react/components';
+import { Drag } from '@quadrats/icons';
+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';
+
+function TableCell(props) {
+    var _a;
+    const { attributes, children, element } = props;
+    const { tableSelectedOn, setTableSelectedOn, tableHoveredOn, setTableHoveredOn } = useTableStateContext();
+    const { columnCount, rowCount, portalContainerRef, isColumnPinned, tableElement } = useTableMetadata();
+    // 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);
+    // 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;
+    const isSelectionTriggerByMe = (isSelectedInSameRow && cellPosition.columnIndex === 0) || (isSelectedInSameColumn && cellPosition.rowIndex === 0);
+    const showRowActionButton = useMemo(() => cellPosition.rowIndex === 0 &&
+        (isSelectedInSameColumn || ((tableHoveredOn === null || tableHoveredOn === void 0 ? void 0 : tableHoveredOn.columnIndex) === cellPosition.columnIndex && !tableSelectedOn)), [cellPosition, isSelectedInSameColumn, tableHoveredOn, tableSelectedOn]);
+    const showColumnActionButton = 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);
+    // 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),
+            'qdr-table__cell--right-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === columnCount - 1),
+            'qdr-table__cell--bottom-active': isSelectedInSameRow || (isSelectedInSameColumn && cellPosition.rowIndex === rowCount - 1),
+            'qdr-table__cell--left-active': isSelectedInSameColumn || (isSelectedInSameRow && cellPosition.columnIndex === 0),
+            'qdr-table__cell--is-selection-trigger-by-me': isSelectionTriggerByMe,
+        }), 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 }))),
+        showColumnActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement("button", { type: "button", contentEditable: false, 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();
+                    // Clear focus by removing selection
+                    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 };
+                    });
+                }, className: "qdr-table__cell-row-action" },
+                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
+        showRowActionButton && (React.createElement(Portal, { getContainer: () => portalContainerRef.current || document.body },
+            React.createElement("button", { type: "button", contentEditable: false, style: {
+                    // pinned 時因為 sticky 所以要扣掉 scrollTop
+                    top: ((_a = columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.top) !== null && _a !== void 0 ? _a : 0) - (element.pinned ? scrollTop : 0),
+                    left: columnButtonPosition === null || columnButtonPosition === void 0 ? void 0 : columnButtonPosition.left,
+                }, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Clear focus by removing selection
+                    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 };
+                    });
+                }, className: "qdr-table__cell-column-action" },
+                React.createElement(Icon, { icon: Drag, width: 20, height: 20 })))),
+        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/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;

package/table/components/TableHeader.js

@@ -0,0 +1,13 @@
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { TableHeaderContext } from '../contexts/TableHeaderContext.js';
+
+function TableHeader(props) {
+    const { attributes, children, element } = props;
+    const tableHeaderContextValue = useMemo(() => ({ isHeader: true }), []);
+    const hasAnyRowPinned = element.children.some((child) => child.children.every((cell) => cell.pinned));
+    return (React.createElement(TableHeaderContext.Provider, { value: tableHeaderContextValue },
+        React.createElement("thead", Object.assign({}, attributes, { className: clsx('qdr-table__header', { 'qdr-table__header--pinned': hasAnyRowPinned }) }), children)));
+}
+
+export { TableHeader as default };

package/table/components/TableMain.d.ts

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