Lexical.js中CLEAR_EDITOR_COMMAND命令无法触发问题求助

问题分析 #

你的代码中CLEAR_EDITOR_COMMAND未生效，大概率是因为命令执行的上下文或时机不符合Lexical的状态更新规则；另外还存在闭包依赖缺失的问题——onEnter的依赖数组未包含onSubmit，虽当前onSubmit能正常调用，但后续若onSubmit引用变化会引发异常。

修复方案 #

推荐直接通过Lexical的更新机制手动清空编辑器，这种方式比依赖命令更可靠，同时修正依赖项问题：

修改后的完整插件代码 #

import { useLexicalComposerContext, mergeRegister } from '@lexical/react';
import { useCallback, useEffect } from 'react';
import { KEY_ENTER_COMMAND, COMMAND_PRIORITY_HIGH } from 'lexical';
import { $getRoot, $clearNode, $createParagraphNode } from 'lexical';

const SubmitPlugin = ({ onSubmit }) => {
  const [editor] = useLexicalComposerContext();

  const onEnter = useCallback(
    (event) => {
      const { ctrlKey, metaKey } = event;

      if (ctrlKey || metaKey) {
        event.preventDefault();

        // 生成并提交 sanitize 后的内容
        const html = dompurify.sanitize($generateHtmlFromNodes(editor), {
          ALLOWED_ATTR: ['style'],
        });
        onSubmit(html);

        // 手动执行编辑器清空操作
        editor.update(() => {
          const root = $getRoot();
          $clearNode(root);
          // 可选：添加默认空段落，避免编辑器无输入区域
          root.append($createParagraphNode());
        });
      }

      return true;
    },
    [editor, onSubmit], // 补上onSubmit依赖，修复闭包问题
  );

  useEffect(() => {
    return mergeRegister(
      editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_HIGH),
    );
  }, [editor, onEnter]);

  return null;
};

关键说明 #

• 所有编辑器内容修改必须包裹在editor.update()回调中：Lexical的状态更新是原子化的，只有在这个回调内执行节点操作，才能保证状态一致性。
• $clearNode(root)会清空根节点下所有子元素；如果需要保留可输入的空状态，可添加默认段落节点。
• 修正useCallback依赖数组：添加onSubmit避免闭包导致的旧引用问题。

备选方案（若坚持使用命令） #

如果一定要用CLEAR_EDITOR_COMMAND，需确认：

1. 已正确从lexical包导入CLEAR_EDITOR_COMMAND。
2. 调用命令时编辑器处于活跃状态，且无更高优先级的命令拦截执行。
   但手动清空的方式稳定性更高，更推荐使用前者。

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