unable to import html if it contains <img> tag

[akshaygoyal88]

Hi, The import is working fine if I there is no img tag in html but if img comes in html it generates error

Uncaught Invariant Violation: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Thanks in advance for your help.

[jmsherry]

react-rte, the module this comes from, currently does not support images

[akshaygoyal88]

I have done it manually by converting draftjs content to HTML as Draft.js provides a function called convertToRaw(for exporting data) and convertFromRaw(for importing data).

[optimatex]

@akshaygoyal88 can u tell more details how did u do that? This repos is about convertation from html to contantState but those methods (convertToRaw and convertFromRaw) perform convertation from contentState to json and vise versa. How did u use them with html?

[akshaygoyal88]

Hi @optimatex , I have done it in this way while saving data in database I converted it to RAW as this

var content = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()))

For displaying data on html web page you can convert it to html as below code

<p dangerouslySetInnerHTML={{__html: stateToHTML(convertFromRaw(JSON.parse(content)))}}>

You need to import stateToHTML from plugin draft-js-export-html

Please let me know if this answers to your query or you can chat with me on [email protected]

[xu-ai-liang]

const entity = Entity.get(props.block.getEntityAt(0));
const { src } = entity.getData();
const type = entity.getType().toLowerCase();

let media;
if (type === 'audio') {
  media = <audio controls src={src} className="editor-img" />;
} else if (type === 'image') {
  media = <img src={src} className="editor-img" />;
} else if (type === 'video') {
  media = <video controls src={src} className="editor-img" />;
}

return media;

const type = entity.getType().toLowerCase();

console.log(type), is "IMAGE"

[tathagatbanerjee]

This might be a silly question, but I don't understand the use case here. Could one not just use?

const clean = DOMPurify.sanitize(dirty);

const blocksFromHTML = convertFromHTML(clean);
const state = ContentState.createFromBlockArray(
  blocksFromHTML.contentBlocks,
  blocksFromHTML.entityMap,
);

const md = stateToMarkdown(state);
console.log(md);

I'm obviously using react-rte and draft-js-export-markdown, which are both awesome. But I don't understand the use case for draft-js-import-html?

Thank so much. Tat

[gtwilliams03]

@xu-ai-liang Thank you! That worked great (changing .getType() to lower case).