檢測在 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是點，它們基本上是一個數組，第一項是當前塊，第二項表示塊中的位置。

點對象指的是 Slate 文檔中文本節點中的特定位置。 它的路徑是指節點在樹中的位置，它的偏移量是指到節點文本字符串的距離。 點可能僅指文本節點。

使用選擇數組，我們可以像這樣獲取當前選定的塊

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

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

Answer 2

在這里， path 來自selection.anchor.path ，我注意到它會進入葉子到最終的文本節點（我想要表格的單元格，而不是文本），與段落相同。 我想要完整的{ type: 'paragraph', children: [...text node] } ，而不僅僅是文本。 所以，我把末端彈出並減少。

    const pathClone = [...path];
    pathClone.pop(); // get rid of trailing text node postion in path.
    const focusedNode = pathClone.reduce((node, pathPosition) => {
      if (!node) return editor.children[pathPosition];
      return node.children[pathPosition];
    }, null);
    // console.log('last node type before text node: ', focusedNode.type, focusedNode);

（不知道為什么這個屏幕截圖在這里顯示得如此之大 - fixme？）