@quadrats/react 1.0.0 → 1.1.1

package/table/hooks/useTableActionsContext.d.ts

@@ -0,0 +1 @@
+export declare function useTableActionsContext(): import("../contexts/TableActionsContext").TableActionsContextType;

package/table/hooks/useTableActionsContext.js

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { TableActionsContext } from '../contexts/TableActionsContext.js';
+
+function useTableActionsContext() {
+    const context = useContext(TableActionsContext);
+    if (!context) {
+        throw new Error('useTableActionsContext must be used within a TableActionsContext.Provider');
+    }
+    return context;
+}
+
+export { useTableActionsContext };

package/table/hooks/useTableCell.d.ts

@@ -0,0 +1,16 @@
+import { TableElement } from '@quadrats/common/table';
+import { QuadratsReactEditor } from '@quadrats/react';
+import { AlignValue } from '@quadrats/common/align';
+/** 檢查 table cell 是否在 focused 狀態 */
+export declare function useTableCellFocused(element: TableElement, editor: QuadratsReactEditor): boolean;
+/** 取得 table cell 在 table 裡的 columnIndex 及 rowIndex */
+export declare function useTableCellPosition(element: TableElement, _editor: QuadratsReactEditor): {
+    columnIndex: number;
+    rowIndex: number;
+};
+/** 轉換 paragraph, order list, un-order list */
+export declare function useTableCellTransformContent(element: TableElement, editor: QuadratsReactEditor): (elementType: string) => void;
+/** 設定 column 或 table 的 align */
+export declare function useTableCellAlign(tableElement: TableElement, editor: QuadratsReactEditor): (alignValue: AlignValue, scope: "table" | "column", columnIndex?: number) => void;
+/** 獲取 column 或 table 的 align 狀態 */
+export declare function useTableCellAlignStatus(tableElement: TableElement, editor: QuadratsReactEditor): (scope: "table" | "column", columnIndex?: number) => AlignValue;

package/table/hooks/useTableCell.js

@@ -0,0 +1,166 @@
+import { usePreviousValue } from '@quadrats/react/utils';
+import { Editor, Range, Node, Element, Transforms, PARAGRAPH_TYPE } from '@quadrats/core';
+import { useCallback, useMemo, useEffect } from 'react';
+import { ReactEditor, useFocused } from 'slate-react';
+import { useTableStateContext } from './useTableStateContext.js';
+import { useTableMetadata } from './useTableMetadata.js';
+import { createList, LIST_TYPES } from '@quadrats/common/list';
+import { getTableStructure, collectCells, setAlignForCells, getAlignFromCells } from '../utils/helper.js';
+
+/** 檢查 table cell 是否在 focused 狀態 */
+function useTableCellFocused(element, editor) {
+    const { tableSelectedOn, setTableHoveredOn, setTableSelectedOn } = useTableStateContext();
+    const cellPath = ReactEditor.findPath(editor, element);
+    const focused = useFocused();
+    const isCellFocused = useMemo(() => {
+        if (!focused || !editor.selection || (tableSelectedOn === null || tableSelectedOn === void 0 ? void 0 : tableSelectedOn.region))
+            return false;
+        const isSelectionCollapsed = Range.isCollapsed(editor.selection);
+        if (!isSelectionCollapsed)
+            return false;
+        const selectionPath = editor.selection.anchor.path;
+        return selectionPath.slice(0, cellPath.length).every((segment, index) => segment === cellPath[index]);
+    }, [focused, editor.selection, cellPath, tableSelectedOn]);
+    const isPreviousCellFocused = usePreviousValue(isCellFocused);
+    useEffect(() => {
+        if (isCellFocused) {
+            setTableHoveredOn(undefined);
+        }
+        if (isCellFocused && !isPreviousCellFocused) {
+            setTableSelectedOn(undefined);
+        }
+    }, [isCellFocused, isPreviousCellFocused, setTableSelectedOn, setTableHoveredOn]);
+    return isCellFocused;
+}
+/** 取得 table cell 在 table 裡的 columnIndex 及 rowIndex */
+function useTableCellPosition(element, _editor) {
+    const { cellPositions } = useTableMetadata();
+    const cellPosition = useMemo(() => {
+        const position = cellPositions.get(element);
+        if (position) {
+            return position;
+        }
+        return { columnIndex: -1, rowIndex: -1 };
+    }, [cellPositions, element]);
+    return cellPosition;
+}
+/** 轉換 paragraph, order list, un-order list */
+function useTableCellTransformContent(element, editor) {
+    const splitContentByNewlines = useCallback((cellPath) => {
+        try {
+            const cellNode = Node.get(editor, cellPath);
+            if (!Element.isElement(cellNode))
+                return false;
+            let hasChanges = false;
+            const nodesToProcess = [...cellNode.children];
+            // Process each content node in reverse order to maintain indices
+            for (let contentIndex = nodesToProcess.length - 1; contentIndex >= 0; contentIndex--) {
+                const contentNode = nodesToProcess[contentIndex];
+                if (Element.isElement(contentNode)) {
+                    const textContent = Node.string(contentNode);
+                    if (textContent.includes('\n')) {
+                        const contentPath = [...cellPath, contentIndex];
+                        // Verify the path is still valid
+                        try {
+                            const currentNode = Node.get(editor, contentPath);
+                            if (!currentNode)
+                                continue;
+                        }
+                        catch (_a) {
+                            continue;
+                        }
+                        // Split by newlines and filter out empty strings
+                        const lines = textContent.split('\n').filter((line) => line.trim() !== '');
+                        if (lines.length > 1) {
+                            hasChanges = true;
+                            // Use Editor.withoutNormalizing to batch operations
+                            Editor.withoutNormalizing(editor, () => {
+                                Transforms.removeNodes(editor, { at: contentPath });
+                                lines.forEach((line, lineIndex) => {
+                                    const newParagraph = {
+                                        type: PARAGRAPH_TYPE,
+                                        children: [{ text: line.trim() }],
+                                    };
+                                    Transforms.insertNodes(editor, newParagraph, {
+                                        at: [...cellPath, contentIndex + lineIndex],
+                                    });
+                                });
+                            });
+                        }
+                    }
+                }
+            }
+            return hasChanges;
+        }
+        catch (error) {
+            console.warn('Failed to split content by newlines:', error);
+            return false;
+        }
+    }, [editor]);
+    const transformCellContent = useCallback((elementType) => {
+        try {
+            const cellPath = ReactEditor.findPath(editor, element);
+            const listHelper = createList();
+            if (elementType === LIST_TYPES.ol || elementType === LIST_TYPES.ul) {
+                /** 將 paragraph 的換行符號轉換成 list item */
+                const wasSplit = splitContentByNewlines(cellPath);
+                if (wasSplit) {
+                    Editor.normalize(editor, { force: true });
+                }
+            }
+            // 選擇整個儲存格內容
+            const cellStartPoint = Editor.start(editor, cellPath);
+            const cellEndPoint = Editor.end(editor, cellPath);
+            Transforms.select(editor, { anchor: cellStartPoint, focus: cellEndPoint });
+            if (elementType === LIST_TYPES.ol || elementType === LIST_TYPES.ul) {
+                listHelper.toggleList(editor, elementType, PARAGRAPH_TYPE);
+            }
+            else if (elementType === PARAGRAPH_TYPE) {
+                const cellNode = Node.get(editor, cellPath);
+                if (Element.isElement(cellNode)) {
+                    const currentListElement = cellNode.children.find((child) => Element.isElement(child) && [LIST_TYPES.ol, LIST_TYPES.ul].includes(child.type));
+                    if (currentListElement && Element.isElement(currentListElement)) {
+                        listHelper.toggleList(editor, currentListElement.type, PARAGRAPH_TYPE);
+                    }
+                }
+            }
+            // 因為底層結構改變了，取消選取以避免錯誤
+            Transforms.deselect(editor);
+        }
+        catch (error) {
+            console.warn('Failed to transform cell content:', error);
+        }
+    }, [editor, element, splitContentByNewlines]);
+    return transformCellContent;
+}
+/** 設定 column 或 table 的 align */
+function useTableCellAlign(tableElement, editor) {
+    const setAlign = useCallback((alignValue, scope, columnIndex) => {
+        const tableStructure = getTableStructure(editor, tableElement);
+        if (!tableStructure) {
+            console.warn('Failed to get table structure');
+            return;
+        }
+        // 使用 helper 函數收集 cells
+        const cells = collectCells(tableStructure, scope, columnIndex);
+        // 使用 helper 函數設定 align
+        Editor.withoutNormalizing(editor, () => {
+            setAlignForCells(editor, cells, alignValue);
+        });
+    }, [editor, tableElement]);
+    return setAlign;
+}
+/** 獲取 column 或 table 的 align 狀態 */
+function useTableCellAlignStatus(tableElement, editor) {
+    const getAlign = useCallback((scope, columnIndex) => {
+        const tableStructure = getTableStructure(editor, tableElement);
+        if (!tableStructure) {
+            return 'left';
+        }
+        const cells = collectCells(tableStructure, scope, columnIndex);
+        return getAlignFromCells(cells);
+    }, [editor, tableElement]);
+    return getAlign;
+}
+
+export { useTableCellAlign, useTableCellAlignStatus, useTableCellFocused, useTableCellPosition, useTableCellTransformContent };

package/table/hooks/useTableCellToolbarActions.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { TableElement } from '@quadrats/common/table';
+interface Position {
+    columnIndex: number;
+    rowIndex: number;
+}
+interface UseTableCellToolbarActionsParams {
+    element: TableElement;
+    cellPosition: Position;
+    isHeader: boolean;
+    transformCellContent: (type: string) => void;
+}
+/**
+ * 將所有與 toolbar icons 相關的邏輯集中管理
+ */
+export declare function useTableCellToolbarActions({ element, cellPosition, isHeader, transformCellContent, }: UseTableCellToolbarActionsParams): {
+    focusToolbarIconGroups: ({
+        icons: React.JSX.Element[];
+    } | {
+        icons: {
+            icon: import("@quadrats/icons").IconDefinition;
+            onClick: () => void;
+        }[];
+    })[];
+    inlineToolbarIconGroups: ({
+        icons: {
+            icon: import("@quadrats/icons").IconDefinition;
+            onClick: () => void;
+        }[];
+    } | {
+        icons: React.JSX.Element[];
+    })[];
+};
+export {};