How to programatically add mentions using draft-js-mention-plugin?

user_5513909 0
Viewed 3403

The problem:

I'm trying to create an edit interface for contents created with draft-js + draft-js-mention-plugin. However, editorState wasn't persisted, only plain text. Mentions were saved as an array of objects. Now I need to recreate the editorState with that data.

Example:

I have a plain text like this:

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

And a mentions array with objects like this:

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

To create the editorState with the plain text I'm using these lines:

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

That works well. The plain text is set as initial state, but without mentions.

Now I need a way to add mentions based on mentions objects.

I'm trying to read the library code to figure it out, but without success so far.

draft-js-plugins draftjs reactjs
3 Answers

With "draft-js": "^0.11.6" and "draft-js-mention-plugin": "^3.1.5" you can do

const stateWithEntity = editorState.getCurrentContent().createEntity(
  'mention',
  'IMMUTABLE',
  {
    mention: {id: 'foobar', name: 'foobar', link: 'https://www.facebook.com/foobar'},
  },
)
const entityKey = stateWithEntity.getLastCreatedEntityKey()
const stateWithText = Modifier.insertText(stateWithEntity, editorState.getSelection(), 'foobar', null, entityKey)
EditorState.push(editorState, stateWithText)

You may find this https://github.com/draft-js-plugins/draft-js-plugins/issues/915#issuecomment-386579249 and https://github.com/draft-js-plugins/draft-js-plugins/issues/983#issuecomment-382150332 helpful

user_63245910

This is the solution I managed to put up for adding a mention (#) (with entityMap, to a new block at the end of state). It can be retreived as a mention and so on... Of course that can be simplified, but it works as expected for me.

 // import {....} from 'draft-js';
 import Immutable, {List, Repeat} from 'immutable' ;

  const addMentionLast = (editorState, mentionData) => {
   
    if(!mentionData.id) return;

    // debugger;
    const contentState = editorState.getCurrentContent();
    const oldBlockMap = contentState.getBlockMap();
    const lastKey = lastNonEmptyKey(contentState);
    const charData = CharacterMetadata.create();
    
    //new state with mention
    const selection = editorState.getSelection();
    const entityKey = Entity.create('#mention', 'SEGMENTED', {"mention":{...mentionData }} );
    //add text 
    const textWithEntity = Modifier.insertText(contentState, selection , `#${mentionData.name}` , null,  entityKey); 
    const _editorState = EditorState.push(editorState,  textWithEntity ,  'insert-characters');
    
    //create new block
    const _newBlock = new ContentBlock({
      key:  genKey(),
      type: 'unstyled',
      depth: 0,
      text: mentionData.name,
      characterList: List(Repeat(charData, mentionData.name.length)),
    });

    //set the entity
    const __newBlock =  applyEntityToContentBlock(_newBlock,0, mentionData.name.length, entityKey)

    //set new block in order..
    const blocksMap =
      Immutable.OrderedMap().withMutations(map => {
        if (lastKey) {
          //after the last non empty:
          for (let [k, v] of oldBlockMap.entries()) {
            map.set(k, v);
            if (lastKey === k) {
              map.set(k, v);
              map.set(__newBlock.key, __newBlock);
            }
          }
        }
        else {
          // first line:
          map.set(__newBlock.key, __newBlock);
        }
      });
   
    return EditorState.push(
      _editorState,
          ContentState
            .createFromBlockArray(Array.from(blocksMap.values()))
            .set('selectionBefore', contentState.getSelectionBefore())
            .set('selectionAfter', contentState.getSelectionAfter())
    )

  }

  function lastNonEmptyKey (content){
    const lastNonEmpty = content.getBlockMap().reverse().skipUntil((block, _) => block.getLength()).first();
 if (lastNonEmpty) return lastNonEmpty.getKey();
}

Thanks to all for sharing!

user_66629060
Related