跨文本和装饰器节点的键盘导航答案

【问题标题】：Keyboard navigation across text and decorator nodes跨文本和装饰器节点的键盘导航
【发布时间】：2022-11-10 11:59:18
【问题描述】：

我正在使用lexical 构建一个模板编辑器，它使用自定义装饰器节点来表示this example 之后的模板字段（占位符）。

使用箭头键更改选择时，选择会卡在装饰器上。例如，当光标就在装饰器之前（如上图所示）并且我按下向右箭头，RangeSelection 变为装饰器节点的NodeSelection。从那时起，按箭头键不再更改选择。

是否可以配置装饰器节点以便跳过它们，即选择从位置更改前到地点后装饰师？

我正在使用lexical@0.5.0。

【问题讨论】：

我有同样的问题，还没有找到解决方案。但我认为值得一提的是我的另一个观察：“退格”行为。当您在装饰器节点后按“退格键”时，它会在桌面/iOS 上将其删除，但不会在 Android 上删除。在 Android 上，它几乎关闭了键盘。我想这可能与箭头问题有关。

标签： lexicaljs

【解决方案1】：

这是我使用的修复：

在您的自定义装饰器节点中，使用isIsolated 方法并返回true。

据我了解，当您选择节点时，会调用 modify。

这是您将感兴趣的代码块：

    if ($isDecoratorNode(possibleNode) && !possibleNode.isIsolated()) {
      // Make it possible to move selection from range selection to
      // node selection on the node.
      if (collapse) {
        const nodeSelection = $createNodeSelection();
        nodeSelection.add(possibleNode.__key);
        $setSelection(nodeSelection);
        return;
      }

      const sibling = isBackward ? possibleNode.getPreviousSibling() : possibleNode.getNextSibling();

      if (!$isTextNode(sibling)) {
        const parent = possibleNode.getParentOrThrow();
        let offset;
        let elementKey;

        if ($isElementNode(sibling)) {
          elementKey = sibling.__key;
          offset = isBackward ? sibling.getChildrenSize() : 0;
        } else {
          offset = possibleNode.getIndexWithinParent();
          elementKey = parent.__key;

          if (!isBackward) {
            offset++;
          }
        }

        focus.set(elementKey, offset, 'element');

        if (collapse) {
          anchor.set(elementKey, offset, 'element');
        }

        return;
      } else {
        const siblingKey = sibling.__key;
        const offset = isBackward ? sibling.getTextContent().length : 0;
        focus.set(siblingKey, offset, 'text');

        if (collapse) {
          anchor.set(siblingKey, offset, 'text');
        }

        return;
      }
    }

通过将您的装饰器设置为隔离，您可以选择该节点的兄弟姐妹

【讨论】：