是否可以使用一个工具栏来控制多个编辑器?

Is it possible to use one toolbar to control multiple editor?

我想在一个页面上制作多个编辑器,我想要一个工具栏来制作控件,这样当鼠标移动到特定的编辑器时它可以确定编辑哪个编辑器。

我查看了 ToolbarPlugin,有一个“const [editor] = useLexicalComposerContext();”,看起来 ToolbarPlugin 需要放在 LexicalComposer 中才能获得那个 [editor]。

是否有任何解决方法可以让一个工具栏控制多个编辑器?

@lexical/react 框架不允许 运行 同一屏幕区域内的多个独立(无父级)编辑器。

<LexicalComposer> --> creates Context
  // Plugins for editor
</LexicalComposer>

您仍然可以通过抽象工具栏插件来做到这一点,这样它将 LexicalEditor 作为 属性 (<Toolbar editor={editor} />),并且您可以拥有多个工具栏 display/hide 相应的工具栏或存储实例的单独上下文。

也就是说,我不推荐这个!您提议的行为会对 a11y 和用户体验产生负面影响:

  1. 除鼠标外还有多种指针设备,人们与它们共享不同的行为:phone、听写工具,甚至键盘导航。
  2. non-clicked 案例(又名 selection === null)呢?
  3. 工具栏修改内容的内容和时间可能并不明显,尤其是对于插入符号选择(又名 isSelectionCollapsed)(即 bold/italics 格式)