如何在@Lexical/react中移除FORMAT_TEXT_COMMAND并实现清除格式？

一、自定义命令无法触发的修复 #

你的自定义CLEAR_FORMAT_COMMAND不触发，大概率是命令作用域或优先级设置问题，按以下方式修正：

1. 保证命令全局唯一：将命令定义移到组件外部，避免每次组件渲染重新创建新的命令实例：

// 组件外部定义，确保全局唯一
export const CLEAR_FORMAT_COMMAND: LexicalCommand<void> = createCommand();

2. 调整命令注册优先级：把注册优先级从COMMAND_PRIORITY_LOW改为COMMAND_PRIORITY_NORMAL，避免被其他高优先级命令拦截：

useEffect(() => {
  return mergeRegister(
    editor.registerUpdateListener(({ editorState }) => {
      editorState.read(() => {
        updateToolbar();
      });
    }),
    editor.registerCommand(
      CLEAR_FORMAT_COMMAND,
      () => {
        clearFormat(editor);
        return true; // 返回true标记命令已处理完成
      },
      COMMAND_PRIORITY_NORMAL
    )
  );
}, [updateToolbar, editor]);

3. 统一editor实例：确保点击事件中调用dispatchCommand的editor和注册命令的是同一个实例。

二、清除文本格式的正确实现 #

你原有的clearFormat逻辑存在API用法错误，直接用Lexical提供的$toggleFormat并传入false参数，可强制移除指定格式：

const clearFormat = (editor: LexicalEditor) => {
  editor.update(() => {
    const selection = $getSelection();
    // 仅处理选中文本的范围选择场景
    if (!$isRangeSelection(selection)) return;

    // 强制移除粗体、斜体、下划线格式
    $toggleFormat('bold', false);
    $toggleFormat('italic', false);
    $toggleFormat('underline', false);
  });
};

如果需要清除所有可能的文本格式（如删除线、代码样式等），可以先获取选中内容的所有格式再批量移除：

const clearFormat = (editor: LexicalEditor) => {
  editor.update(() => {
    const selection = $getSelection();
    if (!$isRangeSelection(selection)) return;

    // 收集选中内容的所有格式
    const formats = new Set<string>();
    selection.forEachNode((node) => {
      if (node.isTextNode()) {
        const nodeFormats = node.getFormat();
        Object.keys(nodeFormats).forEach(key => {
          if (nodeFormats[key]) formats.add(key);
        });
      }
    });

    // 批量移除所有格式
    formats.forEach(format => {
      $toggleFormat(format, false);
    });
  });
};

三、拦截原生FORMAT_TEXT_COMMAND #

如果需要禁用Lexical原生的文本格式命令，只需注册一个更高优先级的命令拦截器，返回true即可阻止原生逻辑执行：

useEffect(() => {
  return editor.registerCommand(
    FORMAT_TEXT_COMMAND,
    () => {
      // 拦截所有原生文本格式命令
      return true;
    },
    COMMAND_PRIORITY_HIGH // 优先级高于原生命令，确保先触发拦截
  );
}, [editor]);

若只需在特定场景下拦截，可在回调中添加判断条件（比如仅当点击清除格式按钮时拦截）。

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