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

Question

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

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

在查看此处找到的示例后：

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

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

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

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

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

任何帮助表示赞赏

Answer 1

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

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

点对象指的是 Slate 文档中文本节点中的特定位置。它的路径是指节点在树中的位置，它的偏移量是指到节点文本字符串的距离。点可能仅指文本节点。

使用选择数组，我们可以像这样获取当前选定的块

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

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