@quadrats/react 1.1.8 → 1.1.10

package/table/src/createReactTable.ts

@@ -1,371 +0,0 @@
-import { createTable, CreateTableOptions, TableElement } from '@quadrats/common/table';
-import { createRenderElements, RenderElementProps } from '@quadrats/react';
-import { Editor, Element, PARAGRAPH_TYPE, Text, Transforms } from '@quadrats/core';
-import { defaultRenderTableElements } from './defaultRenderTableElements';
-import { ReactTable } from './typings';
-
-export type CreateReactTableOptions = CreateTableOptions;
-
-export function createReactTable(options: CreateReactTableOptions = {}): ReactTable {
-  const core = createTable(options);
-  const { types } = core;
-
-  return {
-    ...core,
-    createHandlers: () => ({
-      onKeyDown(event, editor, next) {
-        if (event.nativeEvent.isComposing) {
-          return;
-        }
-
-        if (core.isSelectionInTableCell(editor)) {
-          const checkCurrentCellHasContent = () => {
-            if (!editor.selection) return false;
-
-            const [cellNode] = Editor.node(editor, editor.selection);
-
-            if (Text.isText(cellNode)) {
-              return cellNode.text.trim() !== '';
-            }
-
-            if (!Element.isElement(cellNode)) return false;
-
-            const hasContent = cellNode.children.some((child) => {
-              if (Text.isText(child)) {
-                return child.text.trim() !== '';
-              }
-
-              return Element.isElement(child);
-            });
-
-            return hasContent;
-          };
-
-          if (event.key === 'Enter') {
-            if (core.isSelectionInTableList(editor)) {
-              return next();
-            }
-
-            event.preventDefault();
-
-            const currentCellHasContent = checkCurrentCellHasContent();
-
-            if (currentCellHasContent) {
-              // Insert soft break
-              Editor.insertText(editor, '\n');
-            } else {
-              // Move to next cell
-              core.moveToNextCell(editor, types);
-            }
-
-            return;
-          }
-
-          if (event.key === 'Tab') {
-            event.preventDefault();
-            // shift+tab
-            if (event.shiftKey) return;
-
-            core.moveToNextCell(editor, types);
-
-            return;
-          }
-
-          // 處理方向鍵上下移動
-          if (event.key === 'ArrowUp') {
-            event.preventDefault();
-
-            if (event.shiftKey) {
-              // Shift + 上：擴展選取範圍
-              core.extendSelectionUp(editor, types);
-            } else {
-              // 只按上：移動到上一行
-              core.moveToRowAbove(editor, types);
-            }
-
-            return;
-          }
-
-          if (event.key === 'ArrowDown') {
-            event.preventDefault();
-
-            if (event.shiftKey) {
-              // Shift + 下：擴展選取範圍
-              core.extendSelectionDown(editor, types);
-            } else {
-              // 只按下：移動到下一行
-              core.moveToRowBelow(editor, types);
-            }
-
-            return;
-          }
-
-          if (event.key === 'ArrowLeft') {
-            // Shift + 左：擴展選取範圍
-            if (event.shiftKey) {
-              event.preventDefault();
-              core.extendSelectionLeft(editor, types);
-
-              return;
-            }
-          }
-
-          if (event.key === 'ArrowRight') {
-            // Shift + 右：擴展選取範圍
-            if (event.shiftKey) {
-              event.preventDefault();
-              core.extendSelectionRight(editor, types);
-
-              return;
-            }
-          }
-        }
-
-        next();
-      },
-    }),
-    createRenderElement: (options = {}) => {
-      const renderTable = options.table || defaultRenderTableElements.table;
-      const renderTableTitle = options.table_title || defaultRenderTableElements.table_title;
-      const renderTableMain = options.table_main || defaultRenderTableElements.table_main;
-      const renderTableHeader = options.table_header || defaultRenderTableElements.table_header;
-      const renderTableBody = options.table_body || defaultRenderTableElements.table_body;
-      const renderTableRow = options.table_row || defaultRenderTableElements.table_row;
-      const renderTableCell = options.table_cell || defaultRenderTableElements.table_cell;
-
-      return createRenderElements([
-        {
-          type: types.table,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTable({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_title,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableTitle({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_main,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableMain({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_header,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableHeader({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_body,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableBody({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_row,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableRow({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-        {
-          type: types.table_cell,
-          render: (props) => {
-            const { attributes, children, element } = props as RenderElementProps<TableElement>;
-
-            return renderTableCell({
-              attributes,
-              element,
-              children,
-            });
-          },
-        },
-      ]);
-    },
-    with(editor) {
-      const { insertData } = editor;
-
-      /** 從他處複製文字貼過來時觸發 */
-      editor.insertData = (data) => {
-        const { selection } = editor;
-
-        if (!selection) {
-          insertData(data);
-
-          return;
-        }
-
-        // 先檢查選取的起點是否在 table cell 中
-        const cellEntry = Editor.above(editor, {
-          at: selection.anchor,
-          match: (n) => Element.isElement(n) && (n as TableElement).type === types.table_cell,
-        });
-
-        if (cellEntry) {
-          // 確認在 table 內，將選取範圍縮減到起點
-          Transforms.collapse(editor, { edge: 'start' });
-
-          // 重新取得 cell entry（使用當前游標位置）
-          const targetCellEntry = Editor.above(editor, {
-            match: (n) => Element.isElement(n) && (n as TableElement).type === types.table_cell,
-          });
-
-          if (!targetCellEntry) {
-            insertData(data);
-
-            return;
-          }
-
-          const [, cellPath] = targetCellEntry;
-
-          // 從剪貼簿取得純文字
-          const text = data.getData('text/plain');
-
-          if (text) {
-            // 檢測是否為表格格式（包含 Tab 或換行）
-            const hasTableFormat = text.includes('\t') || text.includes('\n');
-
-            if (hasTableFormat) {
-              // 解析表格格式：行由 \n 分隔，欄位由 \t 分隔
-              const rows = text.split('\n').filter((row: string) => row.length > 0);
-
-              if (rows.length === 0) {
-                return;
-              }
-
-              // 找到當前 cell 所在的 row 和 column index
-              const rowEntry = Editor.above(editor, {
-                at: cellPath,
-                match: (n) => Element.isElement(n) && (n as TableElement).type === types.table_row,
-              });
-
-              if (!rowEntry) {
-                // 如果找不到 row，降級為純文字插入
-                Transforms.insertText(editor, text.replace(/\t/g, ' '));
-
-                return;
-              }
-
-              const [, rowPath] = rowEntry;
-              const currentColumnIndex = cellPath[cellPath.length - 1];
-
-              // 找到 table body 或 header
-              const containerEntry = Editor.above(editor, {
-                at: rowPath,
-                match: (n) =>
-                  Element.isElement(n) &&
-                  ((n as TableElement).type === types.table_body || (n as TableElement).type === types.table_header),
-              });
-
-              if (!containerEntry) {
-                // 降級為純文字插入
-                Transforms.insertText(editor, text.replace(/\t/g, ' '));
-
-                return;
-              }
-
-              const [container, containerPath] = containerEntry;
-              const currentRowIndex = rowPath[rowPath.length - 1];
-
-              // 使用 Editor.withoutNormalizing 批次處理
-              Editor.withoutNormalizing(editor, () => {
-                rows.forEach((rowText: string, rowOffset: number) => {
-                  const columns = rowText.split('\t');
-                  const targetRowIndex = currentRowIndex + rowOffset;
-
-                  // 檢查目標 row 是否存在
-                  if (targetRowIndex >= container.children.length) {
-                    return; // 超出範圍，跳過此行
-                  }
-
-                  const targetRow = container.children[targetRowIndex];
-
-                  if (!Element.isElement(targetRow) || (targetRow as TableElement).type !== types.table_row) {
-                    return;
-                  }
-
-                  // 貼上到各個 cell
-                  columns.forEach((columnText: string, columnOffset: number) => {
-                    const targetColumnIndex = currentColumnIndex + columnOffset;
-
-                    // 檢查目標 cell 是否存在
-                    if (targetColumnIndex >= targetRow.children.length) {
-                      return; // 超出範圍，跳過此欄
-                    }
-
-                    const targetCellPath = [...containerPath, targetRowIndex, targetColumnIndex];
-
-                    // 清空目標 cell 的內容
-                    const targetCell = targetRow.children[targetColumnIndex];
-
-                    if (Element.isElement(targetCell) && (targetCell as TableElement).type === types.table_cell) {
-                      // 移除所有子節點
-                      for (let i = targetCell.children.length - 1; i >= 0; i--) {
-                        Transforms.removeNodes(editor, { at: [...targetCellPath, i] });
-                      }
-
-                      // 插入新內容
-                      Transforms.insertNodes(
-                        editor,
-                        {
-                          type: PARAGRAPH_TYPE,
-                          children: [{ text: columnText }],
-                        },
-                        { at: [...targetCellPath, 0] },
-                      );
-                    }
-                  });
-                });
-              });
-
-              return;
-            }
-          }
-        }
-
-        // 預設行為
-        insertData(data);
-      };
-
-      return core.with(editor);
-    },
-  };
-}

package/table/src/defaultRenderTableElements.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import Table from './components/Table';
-import TableTitle from './components/TableTitle';
-import TableMain from './components/TableMain';
-import TableHeader from './components/TableHeader';
-import TableRow from './components/TableRow';
-import TableCell from './components/TableCell';
-import { TableRenderElements } from './typings';
-import TableBody from './components/TableBody';
-
-export const defaultRenderTableElements: TableRenderElements = {
-  table: (props) => <Table key={Math.random()} {...props} />,
-  table_title: (props) => <TableTitle {...props} />,
-  table_main: (props) => <TableMain {...props} />,
-  table_header: (props) => <TableHeader {...props} />,
-  table_body: (props) => <TableBody {...props} />,
-  table_row: (props) => <TableRow {...props} />,
-  table_cell: (props) => <TableCell {...props} />,
-};

package/table/src/hooks/useColumnResize.ts

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