Lexical编辑器AutoLink插件问题：插入链接后无法输入新内容

在Lexical编辑器中集成从LexicalPlayground复制的AutoLink插件时出现异常：输入链接后插件可正确识别并自动转换为链接，但按下空格键后无法输入新内容，光标始终停留在链接上。从TreeView可见，光标偏移量固定为1，多次按空格键也无变化。

插件代码如下：

import {
  AutoLinkPlugin as LexicalAutoLinkPlugin,
  createLinkMatcherWithRegExp,
} from '@lexical/react/LexicalAutoLinkPlugin'

const URL_REGEX =
  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/

export const MATCHERS = [
  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
    return text.startsWith('http') ? text : `https://${text}`
  }),
]

export function AutoLinkPlugin(): JSX.Element {
  return <LexicalAutoLinkPlugin matchers={MATCHERS} />
}

TreeView节点截图：

这个问题通常由正则表达式边界匹配逻辑异常或版本兼容性问题导致，可尝试以下修复方式：

• 调整正则表达式的边界匹配规则
  当前正则中的\b单词边界在处理链接末尾特殊字符时易出现误判，导致插件认为空格仍属于链接内容。修改正则，添加正向预查明确链接终止条件：

  const URL_REGEX =
    /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}([-a-zA-Z0-9()@:%_+.~#?&//=]*)(?=\s|$)/
  

  (?=\s|$)会确保链接在空格或字符串结尾处终止，输入空格时插件会正确结束匹配，允许光标移动到新内容区域。

• 统一Lexical相关库版本
  若@lexical/react与lexical核心库版本不一致，可能引发插件行为异常。执行命令统一版本：

  npm install lexical@latest @lexical/react@latest
  

• 自定义命令强制调整光标位置（备选方案）
  如果上述方法无效，可在插件中注册空格键监听命令，强制将光标移动到链接节点之后：

  import { useEffect } from 'react';
  import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_SPACE_COMMAND } from 'lexical';
  import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
  
  export function AutoLinkPlugin(): JSX.Element {
    const [editor] = useLexicalComposerContext();
  
    useEffect(() => {
      return editor.registerCommand(
        KEY_SPACE_COMMAND,
        () => {
          const selection = $getSelection();
          if ($isRangeSelection(selection)) {
            const anchorNode = selection.anchor.getNode();
            if (anchorNode.getType() === 'link') {
              const parent = anchorNode.getParentOrThrow();
              const index = parent.getIndexOfChild(anchorNode);
              selection.setAnchor(index + 1, 0);
              selection.setFocus(index + 1, 0);
              return true;
            }
          }
          return false;
        },
        COMMAND_PRIORITY_LOW
      );
    }, [editor]);
  
    return <LexicalAutoLinkPlugin matchers={MATCHERS} />;
  }
  

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