React-draft-wysiwyg: component shows image as camera icon

[sahar922]

Hey,
I'm using "react-draft-wysiwyg": "^1.12.4".

while adding an image to the text, everything goes well, but when I'm loading the HTML with the img tag back to the component, I get a camera icon instead of showing the image.

the parsing process looks like :

const blocksFromHTML = convertFromHTML(response['signature']);
      const text = ContentState.createFromBlockArray(
          blocksFromHTML.contentBlocks,
          blocksFromHTML.entityMap
        );

        this.setState({
          editorState: EditorState.createWithContent(text)
})

response.signature is the HTML, looks like :

<p>-- -- <br><strong>Lunes Test</strong>  |  Sales Executive<br>[phone]</p>
<img src="https://s3.amazonaws.com/exceedbot-webchat/monday.gif" alt="undefined" style="float:left;height: auto;width: auto"/>
<p></p>

Thanks for helping!

[jpuri]

It works for me in storybook:

[sahar922]

@jpuri what works for you?
as I said, when I write it through the editor it works for me as well.
but when I load the HTML to the editor the image shown as a camera icon

[sahar922]

just to clarify my problem,
the HTML written by the editor is correct, but after I save the HTML, and load it back to the component, I expect to see the image, instead, I see this icon.

maybe I am loading the HTML to the editor wrong?

[jpuri]

I used this html as input to editor

<p>-- -- <br><strong>Lunes Test</strong>  |  Sales Executive<br>[phone]</p>
<img src="https://s3.amazonaws.com/exceedbot-webchat/monday.gif" alt="undefined" style="float:left;height: auto;width: auto"/>
<p></p>

here: https://github.com/jpuri/react-draft-wysiwyg/tree/master/stories/ConvertFromHTML

And it worked.

[lefnire]

Same issue as @sahar922. When initializing the WYSIWYG with default content, either via defaultEditorState or editorState with an HTML->EditorState (like @sahar922's code), the images convert to camera icons. Adding images directly in the Editor and it works as expected.

[lefnire]

@jpuri thanks for pointing out the example code, using html-to-draftjs (rather than the official Draft.js example code posted by @sahar922) works. I'd tried https://github.com/sstur/draft-js-utils, so figured it wasn't a tooling thing.

[sahar922]

thanks @jpuri !

[BuiXuanNhanTriSE052111]

@lefnire i use draft-js-import-html but it not worrking
https://www.npmjs.com/package/draft-js-import-html

[jpuri]

@caominhtung1992 : did you tried html-to-draftjs https://github.com/jpuri/html-to-draftjs ?

[Shamanpreet]

I used this html as input to editor

<p>-- -- <br><strong>Lunes Test</strong>  |  Sales Executive<br>[phone]</p>
<img src="https://s3.amazonaws.com/exceedbot-webchat/monday.gif" alt="undefined" style="float:left;height: auto;width: auto"/>
<p></p>

here: https://github.com/jpuri/react-draft-wysiwyg/tree/master/stories/ConvertFromHTML

And it worked.
it's working

[BuiXuanNhanTriSE052111]

@jpuri Thanks bro!

[negati-ve]

Hi,

For those trying to understand where the magic happens?
its your CompositeDecorator
you'll need a strategy to find the images in your content like so

function findImageEntities(contentBlock, callback, contentState) {
    contentBlock.findEntityRanges(character => {
      const entityKey = character.getEntity();

      return (
        entityKey !== null &&
        contentState.getEntity(entityKey).getType() === 'IMAGE' &&
        !isVideoType(contentState.getEntity(entityKey).getData().src)
      );
    }, callback);
  }

and component like this to take care of the images

import React from 'react';
import PropTypes from 'prop-types';

const Image = props => {
  const { alt, height, src, width } = props.contentState.getEntity(props.entityKey).getData();
  const url = src;

  return <img alt={alt} src={url} height={height} width={width} style={{ maxWidth: '100%' }} />;
};

Image.propTypes = {
  contentState: PropTypes.object.isRequired,
  entityKey: PropTypes.string.isRequired,
};

export default Image;

and finally in your composite decorator
```
const decorator = new CompositeDecorator([
{
strategy: findImageEntities,
component: Image,
},
]);

then
convert to html using draftJS inbuilt convertFromHTML
and update editorstate with your converted content and decorator!
EditorState.createWithContent(state, decorator)

Hope this helps someone.