Lexical自定义节点无法响应回车键问题求助

我在Lexical中创建了自定义节点NewNode，用来实现点击按钮切换标题、格式化文本的功能。使用官方$createHeadingNode('h1')时，回车能正常生成新段落，但换成自定义NewNode后，按下回车键无法添加新段落，请求帮忙排查原因。

现有代码 #

NewNode.js #

import { ElementNode } from 'lexical';

export class NewNode extends ElementNode {

    constructor(payload, key) {
        super(key);
        this._payload = payload;
    }

    createDOM(_config) {
        const element = document.createElement(this._payload.type);
        const keys = this._payload.theme.split('.');
        // Use reduce to traverse the theme object dynamically
        const className = keys.reduce((obj, key) => obj && obj[key] !== undefined ? obj[key] : undefined, _config.theme);
        element.className = className;
        return element;
    }

    static clone(node) {
        return new NewNode(node._payload, node.__key);
    }

 
    updateDOM() {
        return false;
    }

    exportJSON() {
        return {
            type: 'NewNode',
            version: 1,
            children: [],
            format: '',
            indent: 1,
            direction: null
        };
    }
}

Plugin.js #

import { useEffect } from 'react';

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { $setBlocksType } from '@lexical/selection';
import {
    $getSelection,
    createCommand
} from 'lexical';

import { NewNode } from '../NewNode';

export const NEW_FORMAT_COMMAND = createCommand('NEW_FORMAT_COMMAND');

export const $createNewNode = (payload) => new NewNode(payload);

export const StylePlugin = () => {
    const [editor] = useLexicalComposerContext();

    if (!editor.hasNode(NewNode)) {
        throw new Error('"NewNode" does not register on editor!');
    }

    useEffect(() => {
        return editor.registerCommand(
            NEW_FORMAT_COMMAND,
            (payload) => {
                const selection = $getSelection();
                $setBlocksType(selection, () => $createNewNode(payload));
                return true;
            },
           1,
        );
    }, []);

    return null;
};

问题原因分析 #

自定义ElementNode缺少Lexical处理回车换行所需的核心方法与配置，主要包括：

• 未实现split方法：Lexical依赖此方法处理块节点的分割逻辑（回车操作触发）
• exportJSON未正确导出子节点：导致节点内容序列化异常，干扰编辑器状态管理
• 缺少节点类型标识与默认类型定义：编辑器无法识别节点的块级属性与换行行为规则

修复方案 #

1. 完善NewNode类的核心方法 #

修改NewNode.js，补充缺失方法并修正序列化逻辑：

import { ElementNode } from 'lexical';

export class NewNode extends ElementNode {
  constructor(payload, key) {
    super(key);
    this._payload = payload;
  }

  // 定义节点唯一类型标识
  static getType() {
    return 'NewNode';
  }

  // 指定回车后默认创建的节点类型（通常为段落）
  static getDefaultType() {
    return 'paragraph';
  }

  createDOM(_config) {
    const element = document.createElement(this._payload.type);
    const keys = this._payload.theme.split('.');
    const className = keys.reduce((obj, key) => obj && obj[key] !== undefined ? obj[key] : undefined, _config.theme);
    if (className) element.className = className;
    return element;
  }

  static clone(node) {
    return new NewNode(node._payload, node.__key);
  }

  updateDOM(prevNode, _config) {
    // 仅当payload变化时触发DOM更新
    if (prevNode._payload.type !== this._payload.type || prevNode._payload.theme !== this._payload.theme) {
      return true;
    }
    return false;
  }

  // 实现split方法，处理回车分割逻辑
  split(_splitSelection, parent, _index) {
    const newNode = this.clone();
    parent.insertBefore(newNode, this);
    return newNode;
  }

  exportJSON() {
    return {
      type: 'NewNode',
      version: 1,
      payload: this._payload,
      children: this.getChildren().map(child => child.exportJSON()), // 正确导出子节点
      format: this.getFormat(),
      indent: this.getIndent(),
      direction: this.getDirection(),
    };
  }

  // 实现JSON导入逻辑，保证节点状态可恢复
  static importJSON(serializedNode) {
    const node = $createNewNode(serializedNode.payload);
    node.setFormat(serializedNode.format);
    node.setIndent(serializedNode.indent);
    node.setDirection(serializedNode.direction);
    return node;
  }
}

// 统一节点创建函数
export function $createNewNode(payload) {
  return new NewNode(payload);
}

// 节点类型判断工具函数
export function $isNewNode(node) {
  return node instanceof NewNode;
}

2. 确保节点正确注册到编辑器 #

在编辑器初始化代码中，将NewNode加入节点注册列表：

import { createEditor } from 'lexical';
import { NewNode } from './NewNode';

const editor = createEditor({
  nodes: [NewNode], // 注册自定义节点
  // 其他编辑器配置...
});

3. 优化Plugin命令处理（可选） #

确保命令回调中正确判断选择状态：

// Plugin.js中命令注册部分
return editor.registerCommand(
  NEW_FORMAT_COMMAND,
  (payload) => {
    const selection = $getSelection();
    if (selection !== null) {
      $setBlocksType(selection, () => $createNewNode(payload));
    }
    return true;
  },
  1,
);

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