Draft-js-plugins: How to use decorators for Link and Image entities

[svnm]

I am not sure how to use decorators when using the draft-js-plugins Editor.

My use case is that I need to have _images_, _links_ and import the initial state from _html_.

I want to use the draft-js-image-plugin and draft-js-linkify-plugin but in the example below you can see that when I try to add the decorators as used in Draft.js example for convertFromHTML I don't get any link showing up at all

Does anyone know how to correctly use entities with the draft-js-plugins Editor?

import React, { Component } from 'react'
import {EditorState, convertFromHTML, ContentState, CompositeDecorator, Entity } from 'draft-js'
import Editor from 'draft-js-plugins-editor'
import createImagePlugin from 'draft-js-image-plugin'

const imagePlugin = createImagePlugin()
const plugins = [imagePlugin]

export default class ImageEditor extends Component {

  constructor(props) {
    super(props)
    const decorator = new CompositeDecorator([
      { strategy: findLinkEntities, component: Link }
    ])

    const initalHtml = '<div><a href="http://www.g.co">Example link</a></div>'
    const blocksFromHTML = convertFromHTML(initalHtml)
    let state = ContentState.createFromBlockArray(blocksFromHTML)
    let initial = EditorState.createWithContent(state, decorator)
    this.state = { editorState: initial }
    this.onChange = (editorState) => this.setState({editorState});
  }

  render() {
    return (
      <div>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            plugins={plugins} />
      </div>
    )
  }
}

function findLinkEntities(contentBlock, callback) {
  contentBlock.findEntityRanges(
    (character) => {
      const entityKey = character.getEntity();
      return (
        entityKey !== null &&
        Entity.get(entityKey).getType() === 'LINK'
      )
    },
    callback
  )
}

const Link = (props) => {
  const {url} = Entity.get(props.entityKey).getData();
  return (
    <a href={url}>{props.children}</a>
  )
}

[svnm]

Looks like this is in the FAQ. The only difference was I needed to pass the decorators to the Editor as well as use them in EditorState.createWithContent so basically changing these 2 lines:

/* move this out of the constructor */
const decorators = [
  { strategy: findLinkEntities, component: Link }
]

/* update createWithContent in constructor */
let initial = EditorState.createWithContent(state, new CompositeDecorator(decorators))

/* pass the decorators through to Editor */
<Editor decorators={decorators} ... />

I am still trying to work out how to import Images from html as that is only in 0.10.0 I may be able to copy over the function, or see how draft-js-plugins work with the master branch. Will update with my progress on this here.

[nikgraf]

The issue here is that 0.10.0 need some significant changes in all plugins since the Entities moved into the editorState.

[po5i]

I spent hours debugging to find out what was it. Until I realize that I was using the Editor from draft-js-plugins-editor and not from draft-js, which the normal composite decorators examples were made for.