检测在 slate-react 文本编辑器中选择了哪个节点

Question

我目前正在开发一个平板文本编辑器，用户可以在其中添加图像和文本。我还想要一个悬停工具栏，根据用户选择的元素类型提供不同的按钮。

例如，如果用户选择了一张图片，那么我想提供一组按钮。如果用户选择了一个段落，我想提供另一组按钮。

查看此处找到的示例后：

https://www.slatejs.org/examples/richtext

我拼凑了一个我想要的文本编辑器的粗略示例，没有依赖于上下文的悬停工具栏按钮：

https://codesandbox.io/s/suspicious-pine-lrxgw

但是我正在努力弄清楚如何检测在编辑器中选择了哪种类型的元素？我不知道是否有办法使用 slate-react 做到这一点？甚至在原版 JS 中？

理想情况下，我还可以获取有关该元素的其他信息。例如图像的高度和宽度，因为这将有助于造型。

任何帮助表示赞赏

Answer 1

您可以使用编辑器中的selection 属性获取当前焦点节点，该属性是Range。然后使用anchor 或focus 选择当前选定的子项。

anchor & focus 是 Points，它们基本上是一个数组，第一项是当前块，第二项表示块中的位置。

点对象指的是 Slate 中文本节点中的特定位置 文档。它的路径是指节点在树中的位置，并且 它的偏移量是指到节点的文本字符串的距离。积分 只能引用文本节点。

使用选择数组我们可以像这样得到当前选中的块

if (selection !== null && selection.anchor !== null) {
  selected = editor.children[selection.anchor.path[0]];
} else {
  selected = null;
}

稍后在您的渲染函数中，您可以检查以渲染您想要的内容。