@quadrats/react 1.0.0 → 1.1.0

package/embed/renderers/base/index.cjs.js

@@ -13,50 +13,58 @@ const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', pla
     const { setEmbedModalConfig } = react.useModal();
     const editor = react.useSlateStatic();
     const path = react.ReactEditor.findPath(editor, element);
-    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(toolbar.InlineToolbar, { className: "qdr-embed__inline-toolbar", leftIcons: haveAlignConfig
-            ? [
-                {
-                    icon: icons.AlignLeft,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'left' }, { at: path });
-                    },
-                    active: element.align === 'left' || !element.align,
-                },
-                {
-                    icon: icons.AlignCenter,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'center' }, { at: path });
-                    },
-                    active: element.align === 'center',
-                },
-                {
-                    icon: icons.AlignRight,
-                    onClick: () => {
-                        core.Transforms.setNodes(editor, { align: 'right' }, { at: path });
-                    },
-                    active: element.align === 'right',
-                },
-            ]
-            : [], rightIcons: [
-            {
-                icon: icons.Edit,
-                onClick: () => {
-                    setEmbedModalConfig({
-                        placeholder: placeholder || '',
-                        confirmText: confirmText || '',
-                        hint: hint || '',
-                        type,
-                        onConfirm: (value) => {
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(toolbar.InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: icons.AlignLeft,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
                         },
-                    });
-                },
-            },
+                        {
+                            icon: icons.AlignCenter,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: icons.AlignRight,
+                            onClick: () => {
+                                core.Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
             {
-                icon: icons.Trash,
-                onClick: () => {
-                    core.Transforms.removeNodes(editor, { at: path });
-                },
+                icons: [
+                    {
+                        icon: icons.Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: icons.Trash,
+                        onClick: () => {
+                            core.Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
             },
         ] }))));
 };

package/image/components/Image.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Editor, Element, Transforms } from '@quadrats/core';
-import { Trash, AlignLeft, AlignCenter, AlignRight } from '@quadrats/icons';
+import { AlignLeft, AlignCenter, AlignRight, Trash } from '@quadrats/icons';
 import { useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
 
@@ -22,34 +22,42 @@ function Image(props) {
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image qdr-image--with-inline-toolbar", onClick: () => Transforms.select(editor, ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
         React.createElement("div", { className: "qdr-image__spacer" }, children),
         React.createElement("div", { contentEditable: false, style: { position: 'relative' } },
-            React.createElement(InlineToolbar, { className: "qdr-image__inline-toolbar", leftIcons: [
+            React.createElement(InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
                     {
-                        icon: AlignLeft,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'start' || !parentNode.align,
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: AlignLeft,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'start' || !parentNode.align,
+                            },
+                            {
+                                icon: AlignCenter,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'center',
+                            },
+                            {
+                                icon: AlignRight,
+                                onClick: () => {
+                                    Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'end',
+                            },
+                        ],
                     },
                     {
-                        icon: AlignCenter,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'center',
-                    },
-                    {
-                        icon: AlignRight,
-                        onClick: () => {
-                            Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'end',
-                    },
-                ], rightIcons: [
-                    {
-                        icon: Trash,
-                        onClick: () => {
-                            Transforms.removeNodes(editor, { at: parentPath });
-                        },
+                        icons: [
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    Transforms.removeNodes(editor, { at: parentPath });
+                                },
+                            },
+                        ],
                     },
                 ] }),
             React.createElement("img", { 

package/image/createReactImage.js

@@ -101,7 +101,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => __awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return readFileAsDataURL(imageFile).then(dataURL => core.insertImage(editor, dataURL));
+                        return readFileAsDataURL(imageFile).then((dataURL) => core.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/image/index.cjs.js

@@ -41,34 +41,42 @@ function Image(props) {
     return (React.createElement("div", Object.assign({}, attributes, { className: "qdr-image qdr-image--with-inline-toolbar", onClick: () => core.Transforms.select(editor, react.ReactEditor.findPath(editor, element)), onMouseDown: (event) => event.preventDefault(), role: "img" }),
         React.createElement("div", { className: "qdr-image__spacer" }, children),
         React.createElement("div", { contentEditable: false, style: { position: 'relative' } },
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-image__inline-toolbar", leftIcons: [
+            React.createElement(toolbar.InlineToolbar, { className: "qdr-image__inline-toolbar", iconGroups: [
                     {
-                        icon: icons.AlignLeft,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'start' || !parentNode.align,
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: icons.AlignLeft,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'start' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'start' || !parentNode.align,
+                            },
+                            {
+                                icon: icons.AlignCenter,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'center',
+                            },
+                            {
+                                icon: icons.AlignRight,
+                                onClick: () => {
+                                    core.Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
+                                },
+                                active: parentNode.align === 'end',
+                            },
+                        ],
                     },
                     {
-                        icon: icons.AlignCenter,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'center' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'center',
-                    },
-                    {
-                        icon: icons.AlignRight,
-                        onClick: () => {
-                            core.Transforms.setNodes(editor, { align: 'end' }, { at: parentPath });
-                        },
-                        active: parentNode.align === 'end',
-                    },
-                ], rightIcons: [
-                    {
-                        icon: icons.Trash,
-                        onClick: () => {
-                            core.Transforms.removeNodes(editor, { at: parentPath });
-                        },
+                        icons: [
+                            {
+                                icon: icons.Trash,
+                                onClick: () => {
+                                    core.Transforms.removeNodes(editor, { at: parentPath });
+                                },
+                            },
+                        ],
                     },
                 ] }),
             React.createElement("img", { 
@@ -290,7 +298,7 @@ function createReactImage(options = {}, getUploadOptions) {
                     })
                         .reduce((prev, imageFile) => tslib.__awaiter(this, void 0, void 0, function* () {
                         yield prev;
-                        return utils.readFileAsDataURL(imageFile).then(dataURL => core$1.insertImage(editor, dataURL));
+                        return utils.readFileAsDataURL(imageFile).then((dataURL) => core$1.insertImage(editor, dataURL));
                     }), Promise.resolve());
                     return;
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrats/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "author": "Rytass",
   "homepage": "https://github.com/Quadrats/quadrats#readme",
@@ -20,9 +20,9 @@
     "url": "https://github.com/Quadrats/quadrats/issues"
   },
   "dependencies": {
-    "@quadrats/common": "^1.0.0",
-    "@quadrats/core": "^1.0.0",
-    "@quadrats/icons": "^1.0.0",
+    "@quadrats/common": "^1.1.0",
+    "@quadrats/core": "^1.1.0",
+    "@quadrats/icons": "^1.1.0",
     "@quadrats/locales": "^1.0.0",
     "@quadrats/theme": "^1.0.0",
     "@quadrats/utils": "^1.0.0",

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;