映射数组渲染多TipTap编辑器时出现插件重复警告求助

我正在开发一款需要编辑器的生产力应用，选用了TipTap。主界面有4个div，点击任意div会打开对应的编辑器实例。

代码如下：

<Fragment key={card.id}>
    <div
        className="priorityCard"
        id={card.name}
        onClick={() => handleCardClick(card.id)}
    >
        Hello1
    </div>

    {card.isActive && (
        <>
            <TipTap />

            <button
                className={`${styles.closeBtn}`}
                
            >
                Close
            </button>
        </>
    )}
</Fragment>

功能运行正常，但当我两次打开编辑器或关闭一个再打开另一个时，会出现警告：

"Duplicate extension names found: ['orderedList', 'listItem']. This can lead to issues."

我猜测这和在单页渲染多个编辑器有关，想请教是否有解决方案，或者是否可以保留当前代码。

这个警告根源是每次渲染<TipTap />组件时，重复注册了同名扩展（比如orderedList、listItem），TipTap不允许重复注册相同名称的扩展。

1. 复用预定义的扩展集合 #

把扩展定义放在TipTap组件外部（比如组件顶层或全局文件），只初始化一次，避免每次渲染组件都重新创建扩展实例：

// 放在组件外部，仅初始化一次
import { OrderedList } from '@tiptap/extension-ordered-list'
import { ListItem } from '@tiptap/extension-list-item'

const sharedExtensions = [
  OrderedList,
  ListItem,
  // 其他需要的扩展...
]

// TipTap组件内部复用这个扩展数组
const TipTap = () => {
  const editor = useEditor({
    extensions: sharedExtensions,
    // 其他编辑器配置...
  })

  // 组件剩余逻辑...
}

2. 确保编辑器实例被正确销毁 #

在TipTap组件卸载时，调用editor.destroy()清理实例，避免残留的扩展注册信息干扰后续实例：

const TipTap = () => {
  const editor = useEditor({
    // 编辑器配置...
  })

  useEffect(() => {
    return () => {
      if (editor) {
        editor.destroy()
      }
    }
  }, [editor])

  // 组件剩余逻辑...
}

3. 单例模式管理扩展（可选） #

如果应用需要频繁创建编辑器实例，可以把扩展封装成单例，确保每个扩展只被注册一次：

// 新建扩展管理文件 tiptap-extensions.js
import { OrderedList as BaseOrderedList } from '@tiptap/extension-ordered-list'
import { ListItem as BaseListItem } from '@tiptap/extension-list-item'

// 导出单例扩展实例
export const OrderedList = BaseOrderedList
export const ListItem = BaseListItem

// TipTap组件中导入这些单例扩展
import { OrderedList, ListItem } from './tiptap-extensions'

关于是否能保留当前代码 #

虽然目前功能正常，但这个警告预示着潜在风险——后续可能出现编辑器行为异常、扩展冲突导致的bug，建议修复。如果暂时不想大规模修改，可以先忽略警告，但长期来看必须处理。

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