I have tried basic packages but I don't seem to get whats going on,
Here is something that I tried;
const {
convertFromHTML,
ContentState
} = require('draft-js');
const htmlToDraft = require('html-to-draftjs');
const converter = () => {
const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href=";>Example link</a>';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(blocksFromHTML);
console.log('state: ', state);
}
converter();
It was really clear on which library to use. I am getting weird looking outputs, what I expect looks something like this;
{
"blocks": [
{
"depth": 0,
"inlineStyleRanges": [
{
"length": 9,
"style": "BOLD",
"offset": 0
},
{
"length": 12,
"style": "ITALIC",
"offset": 11
}
],
"entityRanges": [
{
"length": 12,
"key": 0,
"offset": 25
}
],
"data": {},
"text": "Bold text, Italics text\n\nexample link ",
"key": "9jc4q",
"type": "unstyled"
}
],
"entityMap": {
"0": {
"type": "LINK",
"mutability": "MUTABLE",
"data": {
"url": ";,
"targetOption": "_blank"
}
}
}
}
Any insights ? (code in server side )
I have tried basic packages but I don't seem to get whats going on,
Here is something that I tried;
const {
convertFromHTML,
ContentState
} = require('draft-js');
const htmlToDraft = require('html-to-draftjs');
const converter = () => {
const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href="http://www.google.">Example link</a>';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(blocksFromHTML);
console.log('state: ', state);
}
converter();
It was really clear on which library to use. I am getting weird looking outputs, what I expect looks something like this;
{
"blocks": [
{
"depth": 0,
"inlineStyleRanges": [
{
"length": 9,
"style": "BOLD",
"offset": 0
},
{
"length": 12,
"style": "ITALIC",
"offset": 11
}
],
"entityRanges": [
{
"length": 12,
"key": 0,
"offset": 25
}
],
"data": {},
"text": "Bold text, Italics text\n\nexample link ",
"key": "9jc4q",
"type": "unstyled"
}
],
"entityMap": {
"0": {
"type": "LINK",
"mutability": "MUTABLE",
"data": {
"url": "http://www.google.",
"targetOption": "_blank"
}
}
}
}
Any insights ? (code in server side )
Share Improve this question asked Sep 17, 2020 at 4:21 VPRVPR 1651 gold badge2 silver badges10 bronze badges 5- npmjs./package/html-to-draftjs – Makwana Prahlad Commented Sep 17, 2020 at 4:26
- @MakwanaPrahlad Tried that, it giving me this output... EditorState { _immutable: Record { "allowUndo": true, "currentContent": ContentState { "entityMap": [object Object], "blockMap": OrderedMap { someObjects here } } – VPR Commented Sep 17, 2020 at 4:31
- 1 @MakwanaPrahlad html-to-draftjs is giving me -> ReferenceError: window is not defined – VPR Commented Sep 17, 2020 at 4:34
- Plz not use version 1.2.0 it has build issues. – Makwana Prahlad Commented Sep 17, 2020 at 4:35
- @MakwanaPrahlad I'm using 1.5.0 – VPR Commented Sep 17, 2020 at 4:54
2 Answers
Reset to default 3const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href="http://www.facebook.">Example link</a>';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap,
);
this.state = {
editorState: EditorState.createWithContent(state),
};
I am following the code and my code is running fine. I don't have any problem, you can check by copying my code.
import htmlToDraft from 'html-to-draftjs';
import { ContentState, EditorState } from 'draft-js';
const htmlToDraftBlocks = (html) => {
const blocksFromHtml = htmlToDraft(html);
const { contentBlocks, entityMap } = blocksFromHtml;
const contentState = ContentState.createFromBlockArray(contentBlocks, entityMap);
const editorState = EditorState.createWithContent(contentState);
return editorState;
}
useEffect(()=>{
setEditorState(htmlToDraftBlocks("<p>Hello</p>"));
},[])