Table

'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

安装

npm install @udecode/plate-table

用法

// ...
import { TablePlugin } from '@udecode/plate-table/react';
 
const plugins = [
  // ...其他插件,
  TablePlugin.configure({
    options: {
      initialTableWidth: 600,
    },
  }),
];

不支持合并

'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';
import { TablePlugin } from '@udecode/plate-table/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { tableValue } from '@/components/values/table-value';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

export default function TableMergeDemo() {
  const editor = useCreateEditor({
    plugins: [
      ...editorPlugins,
      TablePlugin.configure({
        options: {
          enableMerging: false,
        },
      }),
    ],
    value: tableValue,
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

插件

TablePlugin

TableRowPlugin

表格行插件。

TableCellPlugin

表格单元格插件。

TableCellHeaderPlugin

表格表头单元格插件。

API

editor.api.create.cell

创建表格的空单元格节点。

editor.api.table.getCellChildren

获取表格单元格的子元素。

editor.tf.insert.tableColumn

在当前选择或指定单元格路径处插入列。

editor.tf.insert.tableRow

在当前选择或指定行路径处插入行。

deleteColumn

删除表格中包含选定单元格的列。

deleteRow

删除表格中包含选定单元格的行。

deleteTable

删除整个表格。

getCellInNextTableRow

获取下一行中的单元格。

getCellInPreviousTableRow

获取上一行中单元格的节点entry，给定当前行的路径。

getCellType

获取插件单元格类型。

getEmptyCellNode

返回表格的空单元格节点。

getEmptyRowNode

创建具有指定列数的空行节点。

getEmptyTableNode

getLeftTableCell

获取表格中当前单元格左侧的单元格。

getNextTableCell

获取表格中的下一个单元格。

getPreviousTableCell

获取表格中的上一个单元格。

getTableAbove

获取当前选择上方的表格节点。

getTableColumnCount

获取表格中的列数。

getTableColumnIndex

获取表格中单元格节点的列索引。

getTableEntries

根据当前选择或指定位置获取表格、行和单元格节点entry。

getTableGridAbove

根据指定格式（表格或单元格）获取锚点和焦点位置上方的子表格。

getTableGridByRange

获取给定范围内两个单元格路径之间的子表格。

getTableOverriddenColSizes

获取表格节点的列大小，如果提供了覆盖值则应用覆盖。

getTableRowIndex

获取表格中单元格节点的行索引。

getTopTableCell

获取表格中当前单元格上方的单元格。

insertTable

如果编辑器中不存在表格，则在当前选择处插入表格。选择插入表格的起始位置。

insertTableColumn

在当前选择或指定的单元格路径处向表格插入列。

insertTableRow

在当前选择或指定的行路径处向表格插入行。

isTableBorderHidden

根据指定的边框方向检查表格单元格或表格本身的边框是否隐藏。

moveSelectionFromCell

在表格内按单元格单位移动选择。

overrideSelectionFromCell

如果前一个选择和新选择在不同的单元格中，则覆盖新选择。

setBorderSize

设置表格单元格指定边框的大小。

setTableColSize

设置表格中特定列的宽度。

setTableMarginLeft

设置表格的左边距。

setTableRowSize

设置表格行的大小（高度）。

API 插件

onKeyDownTable

处理表格的键盘事件。

withDeleteTable

防止删除表格中的单元格。

withGetFragmentTable

如果选择在表格内，它会检索选择上方的子表格作为片段。这在复制和粘贴表格单元格时很有用。

withInsertFragmentTable

如果插入表格：

• 如果选择锚点上方的块是表格，则用插入的表格替换上方的每个单元格，直到超出边界。选择插入的单元格。
• 如果锚点上方没有表格，检查选择是否在表格内。如果是，找到锚点位置的单元格并用插入的片段替换其子元素。

withInsertTextTable

如果选择已展开：

• 检查选择是否在表格内。如果是，将选择折叠到焦点边缘。

withNormalizeTable

通过执行以下操作规范化表格结构：

• 如果单元格子元素是文本，则将其包装在段落中。
• 解包不是有效表格元素的节点。
• 如果指定了初始列大小，则设置表格的初始列大小。

withSelectionTable

通过执行以下操作处理表格选择：

• 当锚点在表格内且焦点在表格前后的块中时，调整选择的焦点。
• 当焦点在表格内且锚点在表格前后的块中时，调整选择的焦点。
• 如果前一个选择和新选择在不同的单元格中，则从单元格覆盖选择。

withSetFragmentDataTable

通过执行以下操作处理复制或剪切表格数据时设置到剪贴板的数据：

• 检查是否存在表格entry和选定的单元格entry。
• 通过复制单元格内容而不是表格结构来处理单个单元格的复制或剪切操作。
• 使用选定单元格的内容创建表格结构。
• 将文本、HTML、CSV、TSV 和 Slate 片段数据设置到剪贴板。

withTable

通过应用以下高阶函数增强编辑器实例的表格相关功能：

• withNormalizeTable：规范化表格结构和内容。
• withDeleteTable：防止在表格内删除单元格。
• withGetFragmentTable：处理复制或剪切表格单元格时获取片段数据。
• withInsertFragmentTable：处理插入表格片段。
• withInsertTextTable：处理在表格内插入文本。
• withSelectionTable：处理调整表格内的选择。
• withSetFragmentDataTable：处理复制或剪切表格数据时设置片段数据。

API 组件

useTableCellElementResizableState

表格调整大小手柄的状态。

useTableCellElementResizable

表格调整大小手柄的行为钩子。

getOnSelectTableBorderFactory

获取表格单元格元素的 onSelectTableBorder 处理程序。

getTableCellBorders

获取表格单元格的边框样式。

roundCellSizeToStep

将单元格大小四舍五入到最接近的步长值，如果未设置步长则返回原始大小。

useTableStore

表格存储用于存储表格插件的状态。

useIsCellSelected

检查表格单元格是否被选中的自定义钩子。

useSelectedCells

管理表格中单元格选择的钩子。

它会跟踪当前选中的单元格，并根据编辑器选择的变化更新它们。

useTableBordersDropdownMenuContentState

表格边框下拉菜单内容的状态钩子。

useTableColSizes

返回应用覆盖后的表格列大小的自定义钩子。如果表格的 colCount 更新为 1 且启用了 enableUnsetSingleColSize 选项，它会取消设置 colSizes 节点。

useTableElement

表格元素的行为钩子。

useTableElementState

表格元素的状态钩子。

useTableCellElement

表格单元格元素的行为钩子。

useTableCellElementState

表格单元格元素的状态钩子。