I lost inline style when import from html

[Uysim]

After edit text I save it as html then I import from that html I lost all inline style example like color and font size

[jpuri]

@Uysim: which lib did you used to re-generate draftjs state.

Another important thing, I strongly recommend not converting content to html just for saving it. Save it in JSON and convert to HTML when needed for display.

[santhosh-umapathi-appymango]

Hi @jpuri, I have the same issue, i create my content with editor and once i convert the content to

const rawContentState = convertToRaw(blogContent.getCurrentContent());
const content = draftToHtml(rawContentState);

css is already lost in the blocks and inline styles looks empty. So when converted to html, it has no styles.

[SreenathKK]

@jpuri @Uysim Do we have any solution for this? I am also facing the same issue.. All the inline styles are being lost after saving.. only bold,underline etc which are having specific html tags are being retained

[taj567]

same issue for me also is there any solution.

first time saving working fine when converting losing all styles & alignments EditorState.createWithContent( ContentState.createFromBlockArray( convertFromHTML(Fields.topic[topicIndex].subTopics[subTopicIndex].contentData) ) )

[ranguisj]

No update on this topic ? I'm still facing same issue. Colors works fine in the editor even if I'm obliged to process it with inlineStyleFn :

inlineStyleFn: (styles) => {
    const key = 'color-';
    const color = styles.filter((value) => value.startsWith(key)).first();
    const keySize = 'fontsize-';
    const size = styles.filter((value) => value.startsWith(keySize)).first();
    if (color) {
      console.log("proj : ", color);
      return {
        element: 'span',
        style: {
          color: color.replace(key, ''),
        },
      };
    }if (size) {
      return {
        element: 'span',
        style: {
          'font-size': size.replace(keySize, ''),
        },
      };
    }
    return 0
  }

But when I load it with EditorState.createWithContent(stateFromHTML(htmlContentTitre)) I lose color (not font size).

[sangeetha-armtek]

Is there a work around for this? Facing the same issue in our project. Data is saved in raw draft state. Using draftToHtml to display the data, and there is none of the formatting (code block, colour, text size...).

[ojongclinton]

Fixed the issue , All i had to do was install the html-to-draftjs package and then import and use the htmlToDraft that came from t while initializing the default value so istead of :

  const [editorState, setEditorState] = React.useState(() => {
    if (initialValue) {
      const blocksFromHTML = convertFromHTML(initialValue);
      const contentState = ContentState.createFromBlockArray(blocksFromHTML);
      return EditorState.createWithContent(contentState);
    }
    return EditorState.createEmpty();
  });

I used this that worked

  const [editorState, setEditorState] = React.useState(() => {
    if (initialValue) {
      const blocksFromHTML = htmlToDraft(initialValue);
      const contentState = ContentState.createFromBlockArray(blocksFromHTML);
      return EditorState.createWithContent(contentState);
    }
    return EditorState.createEmpty();
  });

[QTC-van-cong]

Fixed the issue , All i had to do was install the html-to-draftjs package and then import and use the htmlToDraft that came from t while initializing the default value so istead of :

  const [editorState, setEditorState] = React.useState(() => {
    if (initialValue) {
      const blocksFromHTML = convertFromHTML(initialValue);
      const contentState = ContentState.createFromBlockArray(blocksFromHTML);
      return EditorState.createWithContent(contentState);
    }
    return EditorState.createEmpty();
  });

I used this that worked

  const [editorState, setEditorState] = React.useState(() => {
    if (initialValue) {
      const blocksFromHTML = htmlToDraft(initialValue);
      const contentState = ContentState.createFromBlockArray(blocksFromHTML);
      return EditorState.createWithContent(contentState);
    }
    return EditorState.createEmpty();
  });

Tks you, it fucking work