如何阻止Lexical编辑器按回车创建新段落？单行消息组件开发遇阻

你之前的方法没生效，核心原因是Lexical对编辑器事件有自己的封装处理，外层DOM的onKeyDown会被Lexical内部的事件拦截，没法阻止默认的新建段落逻辑。以下是可行的解决方向：

1. 注册Lexical内部键盘监听器 #

利用Lexical的编辑器实例注册键盘事件，优先级比外层DOM事件高，能直接拦截回车操作：

import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect } from 'react';

function SingleLineEditorPlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerKeyboardListener((event) => {
      if (event.key === 'Enter') {
        event.preventDefault();
        event.stopPropagation();
        // 可在此添加回车后的自定义逻辑，比如触发消息发送
        return true; // 返回true表示事件已被处理
      }
      return false;
    });
  }, [editor]);

  return null;
}

// 在LexicalComposer内部引入该插件
<LexicalComposer initialConfig={...}>
  <SingleLineEditorPlugin />
  {/* 其他插件与EditorWrapper */}
</LexicalComposer>

2. 重写Lexical默认快捷键 #

Lexical默认绑定了Enter键创建段落的快捷键，直接修改配置覆盖默认行为：

import { KEY_ENTER } from '@lexical/keyboard';
import { useEffect } from 'react';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';

function OverrideEnterShortcutPlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerCommand(
      KEY_ENTER,
      () => {
        // 阻止默认新建段落逻辑
        return true;
      },
      1 // 优先级设为1，高于默认的0，确保先执行
    );
  }, [editor]);

  return null;
}

3. 强制编辑器保持单个段落 #

如果担心用户通过粘贴等方式生成多个段落，可监听编辑器变化自动合并段落：

import { $getRoot, $getSelection, $isRangeSelection } from 'lexical';
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect } from 'react';

function EnforceSingleLinePlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    return editor.registerUpdateListener(({ editorState }) => {
      editorState.read(() => {
        const root = $getRoot();
        const children = root.getChildren();
        // 存在多个段落时合并为一个
        if (children.length > 1) {
          editor.update(() => {
            const firstParagraph = children[0];
            // 将其他段落内容移入第一个段落
            for (let i = 1; i < children.length; i++) {
              const child = children[i];
              child.getChildren().forEach(node => firstParagraph.append(node));
              child.remove();
            }
            // 恢复光标位置
            const selection = $getSelection();
            if ($isRangeSelection(selection)) {
              selection.collapseToEnd();
            }
          });
        }
      });
    });
  }, [editor]);

  return null;
}

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