检测在平板反应文本编辑器中选择了哪个节点

Question

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

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

浏览完此处的示例后：

我整理了一个所需文本编辑器的粗略示例，没有上下文相关的悬停工具栏按钮：

但是我正在努力找出如何检测在编辑器中选择了哪种类型的元素？我不知道是否有一种方法可以使用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;
}

稍后在渲染功能中，您可以进行检查以渲染所需的内容。