draft-js-mention-pluginを使ってプログラムでコメントを追加するにはどうすればよいですか？

Question

問題：

私はdraft-js + draft-js-mention-pluginで作成したコンテンツの編集インターフェイスを作成しようとしています。ただし、editorStateは保持されず、プレーンテキストのみが保持されました。メンメンションはオブジェクトの配列として保存されました。今度は、そのデータでeditorStateを再作成する必要があります。

---

例：editorStateを作成するには

const mentions = [{ 
    length: 8, 
    offset: 0, 
    user: 'user:59441f5c37b1e209c300547d', 
}] 

：

const content = '@marcello we need to add spell check' 

そして、このようなオブジェクトとmentions配列：

私はこのようなプレーンテキストを持っています私はこれらの行を使用してプレーンテキストと：

const contentState = ContentState.createFromText(content) 
EditorState.createWithContent(contentState) 

これはうまくいきます。平文は初期状態として設定されていますが、言及はありません。

今、私はmentionsオブジェクトに基づいて言及を追加する方法が必要です。

私はそれを理解するためにライブラリのコードを読もうとしていますが、これまで成功していません。私は「ハッキング」方法

Answer 1

それのための私の解決策：あなたのテキストおよび出力entityRangeは言及のオフセット/長さを返す入力するためにいくつかの関数を作成し、「entityRanges」を置き換えることができここで

// Imports 
import { EditorState,convertToRaw, ContentState, convertFromRaw, genKey, ContentBlock } from 'draft-js'; 
// Init some kind of block with a mention 
let exampleState = { 
    blocks: [ 
     { 
      key: genKey(), //Use the genKey function from draft 
      text: 'Some text with mention', 
      type: 'unstyled', 
      inlineStyleRanges: [], 
      data: {}, 
      depth: 0, 
      entityRanges: [ 
      { offset: 15, length: 7, key: 0 } 
      ] 
     } 
    ], 
    entityMap: [] 
}; 
this.state.editorState = EditorState.createWithContent(convertFromRaw(exampleState)); 

あなたの強調表示されたもので配列！

あなたはドラフトからContentBlockクラスを使用したりする独自の実装を作成することができます。単語は「言及」この例では

は、あなたが

追記言及プラグインで使用してどんなスタイリングで強調表示になるだろうこれをより美しくする