@lexical/react中FloatingLinkEditorPlugin是否可用？求替代方案

正确导入方式 #

Lexical版本迭代后调整了包的导出结构，FloatingLinkEditorPlugin已改为从@lexical/react顶级导出，无需使用子路径导入，正确语句：

import { FloatingLinkEditorPlugin } from '@lexical/react';

如果执行上述导入仍报错，说明你使用的Lexical版本中该插件已被移除，可采用以下替代方案：

替代方案 #

1. 官方内置LinkPlugin + 自定义浮层编辑组件 #

使用Lexical核心的LinkPlugin处理链接的基础逻辑，自行实现浮层编辑器来完成链接的添加、编辑操作：

import { LinkPlugin, useLexicalComposerContext } from '@lexical/react';
import { $getSelection, $isRangeSelection } from 'lexical';

const CustomLinkEditor = () => {
  const [editor] = useLexicalComposerContext();

  const handleSaveLink = (url) => {
    editor.update(() => {
      const selection = $getSelection();
      if ($isRangeSelection(selection)) {
        selection.insertLink(url);
      }
    });
  };

  return (
    <div className="floating-link-editor">
      <input 
        type="url" 
        placeholder="输入链接地址" 
        onChange={(e) => handleSaveLink(e.target.value)}
      />
      <button onClick={() => {/* 取消逻辑 */}}>取消</button>
    </div>
  );
};

// 编辑器使用示例
<LexicalComposer initialConfig={yourInitialConfig}>
  <LinkPlugin />
  <CustomLinkEditor />
  {/* 其他插件及编辑器UI */}
</LexicalComposer>

2. 社区第三方插件 #

可选择Lexical生态中社区维护的链接编辑插件，注意需确认插件与你当前Lexical版本的兼容性。

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