Draft-js получает упоминание позиции в editorState currentContent

Question

Я использую draft-js-упоминание-плагин, и я ищу метод, который возвращает позицию упоминания во всем тексте (без использования indexOf()).

Например, я хочу получить начальную и конечную позиции piRstone в этом предложении:Welcome to piRstone, our new colleague.

Я должен получить 11 для начальной позиции и 19 для финала.

<div className="editor">
    <Editor
        editorState={this.state.editorState}
        onChange={this.onEditorChange}
        plugins={plugins}
        // placeholder={this.state.placeholder}
        ref={(element) => { this.editor = element; }}
    />
    <MentionSuggestions
        onSearchChange={this.onSearchChange}
        suggestions={this.state.suggestions}
        onAddMention={this.onAddMention}
    />
</div>

Вот мой onAddMention() метод:

onAddMention(object) {
    console.log(object);
}

Может быть, есть более простой метод для работы, но упомянутый плагин немного слабоват.

Answer 1

Вы получите смещение и длину конкретного упоминания в объекте entityRanges блока, смещение будет начальным индексом, а смещение + длина вашего упоминания будет последним индексом

[
  {
    "key": "4p8mh",
    "text": "Nice to meet you #name#",
    "type": "unstyled",
    "depth": 0,
    "inlineStyleRanges": [],
    "entityRanges": [
      {
        "offset": 20,
        "length": 6,
        "key": 0
      }
    ],
    "data": {}
  }
]

Выполняя итерацию по этому объекту, вы получите смещение и длину

Object.keys(content.blocks).map(i => {
         const {entityRanges, text} = content.blocks[i];
         entityRanges.map((range, idx) => {
              console.log(range.offset)
              console.log(range.length)
         });
    });

Answer 2

В 2022 году вы сможете запускать их в своем коде, чтобы получать упоминания позиций из editorState.

       const rawContentState = convertToRaw(editorState.getCurrentContent());
  console.log(rawContentState) <---- this is an object with a key called blocks and key called entityMap. blocks has an entityRanges object with start and end points ;))