Slate.js提到的推特风格(股票)

Question

我正在构建一个笔记应用程序，对于文本，我使用Slate.js编辑器。Twitter提及也适用于这样的股票

​

如果/\$[a-zA-Z]{1,6}/是真的，它基本上会变成一个提示符。我尝试过使用normalizeNode回调来更改正则表达式是否匹配，方法是删除文本并在该位置插入一个新节点，但到目前为止还没有成功。

Slate.js也有一组很好的examples，但不幸的是没有找到任何一个来演示我想要做的事情。实现此功能的好方法是什么？我假设这是通过使用normalizeNode是错误的吗？

Answer 1

我在使用typed时解决了这个问题。例如，当一个人输入:smile:时，我们希望表情符号出现(就像Slack一样)。与股票符号和表情符号的唯一区别是股票查找和使用Transforms.insertNodes而不是Transforms.insertText。

下面的代码应该足以帮助人们解决他们的用例。关键是startIndex和endIndex，它们针对的是替代方案。

这是我的解决方案：

editor.normalizeNode = entry => {
  const [node, path] = entry;

  if (!Text.isText(node)) {
   return normalizeNode([node, path]);
  }

  const emojiMatch = node.text.match(EMOJI_REGEX);

  if (!emojiMatch) {
    return normalizeNode([node, path]);
  }

  const [searchMatch, colonMatch] = emojiMatch;
  const { index: startIndex } = emojiMatch;
  const endIndex = startIndex + searchMatch.length;

  const [matchedEmoji] = emojiIndex.search(colonMatch).map(emoji => emoji) as BaseEmoji[];

  if (!matchedEmoji) {
    return normalizeNode([node, path]);
  }

  Transforms.insertText(editor, matchedEmoji.native, {
    at: {
      anchor: { path, offset: startIndex },
      focus: { path, offset: endIndex },
    }
  })

  normalizeNode([node, path]);
}