Twitter 樣式（庫存）與 Slate.js 提及

Question

我正在構建一個筆記應用程序，對於文本，我使用 Slate.js 編輯器。 Twitter 提及也適用於這樣的股票

如果/\$[a-zA-Z]{1,6}/是真的，它基本上會變成一個提及。 我嘗試的是使用normalizeNode回調來更改正則表達式是否匹配，方法是刪除文本並在該位置插入一個新節點，但到目前為止我一直沒有成功。

Slate.js 也有一組很好的示例，但遺憾的是沒有找到任何示例來演示我正在嘗試做的事情。 go 關於實現此功能的好方法是什么？ 我錯誤地認為它是通過使用normalizeNode嗎？

Answer 1

我在輸入表情符號時解決了這個問題。 例如，當一個人輸入:smile:時，我們希望表情符號出現（a la 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]);
}