Draft-js: How does one create a targetRange selection from a contentBlock for use with applyEntity

[kristoferjoseph]

The entity examples are incomplete in that they start off with entityRanges already created. Most real world scenarios ( blue background added to mentions etc. ) would require one to generate entities dynamically from user input. For the life of me I cannot discover a way to do this. Can you help me out with an example?

Seems like you would somehow need to create a new selection with the start and end point of the text you want to set as an entity, just not sure how.

[hellendag]

Take a look at the link example, which does create entities via RichUtils: https://github.com/facebook/draft-js/blob/master/src/model/modifier/RichTextEditorUtil.js#L377

A target range is a SelectionState object, so if you don't already have a target range object in hand, it can be created on the fly via the SelectionState constructor.

[kristoferjoseph]

Yes I looked at those. I am attempting to create a SelectionRange. How does one determine the anchor and focus keys?

  parse(contentBlock, callback) {
    let editorState = this.state.editorState.getCurrentContent()
    let value = contentBlock.getText()
    let obj = inerpret(value)
    let raw = obj.raw
    obj.parsed.forEach(chunk => {
      let klazz = styles[chunk.className] || ''
      let className = klazz? `class=${klazz}`: ''
      let text = chunk.text
      let start = raw.indexOf(text)
      let end = start + text.length
      const entityKey = Entity.create(chunk.className, 'MUTABLE', {klazz})

      let targetRange = new SelectionState({
        anchorKey:?,
        anchorOffset: ?,
        focusKey: ?,
        focusOffset: ?
      })

      let contentState = Modifier.applyEntity(
        editorState,
        targetRange,
        entityKey
      )

      const newState = EditorState.push(editorState, contentState)

      callback(start, end)
    })
  }