[feature request]: convertFromHTML support custom entity.

https://github.com/facebook/draft-js/blob/5d5f1b4b89c509d17697965ce9a0d596ed220c43/src/model/encoding/convertFromHTMLToContentBlocks.js#L408

During this loop, draft-js should create a LINK typed entity if this child has href attribute and has valid link text.

We would like to handle the condition and create a custom entity (e.g., convert <img /> tag to an IMAGE entity ), just like :

while (child) {
  if (this.props.handleParseHTMLElement
    && entity = this.props.handleParseHTMLElement(child)
  ) {
    newEntityMap = addEntityToEntityMap(
        newEntityMap,
        entity
    );
    entityId = newEntityMap.keySeq().last();
 } else {
 // original logic...
}

[N1kto]

@gbbr thanks for the heads up. Didn’t follow DraftJS for a while, good to know and get ready for API changes. Need to study API changes to give a good answer, but the quick answer to your question is (also used this approach in our code) following: don’t use Entity, but use ContentBlock’s data prop in combination with custom block type. So, for example, this part from mentioned gist:

    const { imgSrc } = JSON.parse(block.getText())
    const entityData = {
      type: 'IMAGE',
      mutability: 'IMMUTABLE',
      data: { imgSrc }
    }
    const blockSpec = extend({ type: 'atomic', text: ' ' }, { entityData })

Should be replaced with this:

    const { imgSrc } = JSON.parse(block.getText())
    const blockSpec = { type: 'custom_type_name_it_whatever', data: { imgSrc } }

Of course, in createContentBlock you will also no longer need Entity-related code. So, as you see we store parsed data in data prop of the ContentBlock, which is part of ContentBlock API, also we set type to custom_type_name_it_whatever. And since we added custom type, we need to do 2 more things to get all working.

1. Need to update/set blockRenderMap Editor’s prop with our custom type
2. Need to update/create blockRendererFn Editor’s prop which will know how to render our custom (in this case it’s <image />) block with help of React.

It can be something like this:

const updatedRenderMap = Draft.DefaultDraftBlockRenderMap.merge(Immutable.Map({
  'custom_type_name_it_whatever':  { element: 'div' }
}))
const blockRendererFn = block => {
  if (block.getType() === 'custom_type_name_it_whatever') {
    return {
      component: ReactComponentToRenderImage,
      props: {...}  // arbitrary props to your ReactComponentToRenderImage
   }
  }
}

And then you pass both custom renderMap and blockRendererFn to DraftJS Editor:

<Editor blockRenderMap={ updatedRenderMap } blockRendererFn={ blockRendererFn } />

This is very primitive example, but the general idea should be clear and should work with 0.11 as I didn’t mentioned any notification about changing ContentBlock API and editor component API. Otherwise that will have to be revised 😃

[N1kto]

@michelson, hard to say why Draft doesn’t handle <video /> blocks in your case. It’s rather ‘special’ element whose children are not text nodes, maybe that causes Draft to fall back to unstyled blocks. Never the less a dirty hack I used might be helpful in your case. It’s pretty dump, but it works. Please refer to this gist. I ‘transpiled’ it from our project code which is written in coffeescript, so there can be typos/minor mistakes, just debug it in that case. It works for us - we convert images and custom tables (tables generated based on internal data with custom attributes) and it works fine.

The idea is to collect all required attributes from target element, e.g. src attribute of <img /> element (which would enable us to render it later with React component) to JSON, then stringify it and save as simple textContent within some “temporary” text block element which is recognizable by Draft, in mentioned gist it is <blockquote />. It has to be some element which you don’t normally use in your editor implementation to avoid collisions. I took <blockquote /> because we don’t use such element in our editor and it is recognizable by Draft out of the box, so no need to bother with custom blockRenderMap. Then after convertFromHTML successfully converted your content you replace <blockquote /> blocks with atomic ones, you parse JSON string into object and inject that data in Entity (or in block meta data - it’s implementation details). Later you render such atomic blocks with React component (<img /> src you will get from Entity data. Hope that helped.