Lexical富文本编辑器：外部粘贴表格后无法换行问题求助

针对粘贴表格后无法添加换行的问题，可以通过监听表格节点的插入事件，自动在表格前后添加空段落节点来解决。以下提供两种可行方案：

方案一：通用型（覆盖所有表格插入场景） #

通过注册TableNode的节点转换逻辑，无论表格是手动创建还是粘贴插入，都会自动处理前后的换行问题：

import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { TableNode } from '@lexical/table';
import { $createParagraphNode, $isParagraphNode } from 'lexical';

export function TableNewLinePlugin(): JSX.Element | null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if (!editor.hasNodes([TableNode])) return;

    return editor.registerNodeTransform(TableNode, (tableNode) => {
      const parent = tableNode.getParent();
      if (!parent || !parent.isTopLevel()) return;

      const index = parent.getIndexOfChild(tableNode);

      // 检查表格前是否已有空段落，无则添加
      const prevSibling = parent.getChildAtIndex(index - 1);
      if (!prevSibling || !$isParagraphNode(prevSibling) || prevSibling.getTextContent().trim() !== '') {
        tableNode.insertBefore($createParagraphNode());
      }

      // 检查表格后是否已有空段落，无则添加
      const nextSibling = parent.getChildAtIndex(index + 1);
      if (!nextSibling || !$isParagraphNode(nextSibling) || nextSibling.getTextContent().trim() !== '') {
        tableNode.insertAfter($createParagraphNode());
      }
    });
  }, [editor]);

  return null;
}

方案二：针对性（仅处理粘贴场景） #

如果只需要处理粘贴带来的表格换行问题，可以监听PASTE_COMMAND，在粘贴完成后为表格添加前后段落：

import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { TableNode } from '@lexical/table';
import { $createParagraphNode, $isParagraphNode, $getSelection, $isRangeSelection } from 'lexical';
import { PASTE_COMMAND, COMMAND_PRIORITY_LOW } from 'lexical';

export function PasteTableNewLinePlugin(): JSX.Element | null {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if (!editor.hasNodes([TableNode])) return;

    return editor.registerCommand(
      PASTE_COMMAND,
      () => {
        editor.update(() => {
          const selection = $getSelection();
          if (!$isRangeSelection(selection)) return;

          // 查找粘贴后插入的表格节点
          let tableNode = selection.focus.getNode().getNearestOfType(TableNode);
          if (!tableNode) {
            const parent = selection.focus.getNode().getParent();
            if (parent && parent.isTopLevel()) {
              const children = parent.getChildren();
              for (let i = children.length - 1; i >= 0; i--) {
                const child = children[i];
                if (child instanceof TableNode) {
                  tableNode = child;
                  break;
                }
              }
            }
          }

          if (!tableNode) return;
          const parent = tableNode.getParent();
          if (!parent || !parent.isTopLevel()) return;

          const index = parent.getIndexOfChild(tableNode);
          // 添加前置空段落
          const prevSibling = parent.getChildAtIndex(index - 1);
          if (!prevSibling || !$isParagraphNode(prevSibling) || prevSibling.getTextContent().trim() !== '') {
            tableNode.insertBefore($createParagraphNode());
          }
          // 添加后置空段落
          const nextSibling = parent.getChildAtIndex(index + 1);
          if (!nextSibling || !$isParagraphNode(nextSibling) || nextSibling.getTextContent().trim() !== '') {
            tableNode.insertAfter($createParagraphNode());
          }
        });
        return false; // 保留默认粘贴逻辑
      },
      COMMAND_PRIORITY_LOW
    );
  }, [editor]);

  return null;
}

使用方法 #

将上述任意一个插件添加到你的LexicalComposer插件列表中即可：

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { TableNewLinePlugin } from './TableNewLinePlugin'; // 或对应插件路径

function App() {
  return (
    <LexicalComposer initialConfig={yourEditorConfig}>
      {/* 其他已有插件 */}
      <TableNewLinePlugin />
      {/* 其他已有插件 */}
    </LexicalComposer>
  );
}

内容的提问来源于stack exchange，提问作者Deepak Kumar