Reloading state from HTML with colors?

[sontek]

I added a color picker to my toolbar, had it change the color and stored it as HTML.

import draftToHtml from 'draftjs-to-html';
const html = draftToHtml(draftState);

Now I want to edit the content again so I use:

import {stateFromHTML} from 'draft-js-import-html';
stateFromHTML(html);

The HTML I have is:

<p>Given <span style="color: #2a00ff;"><strong>Name</strong></span></p>

after I load the HTML back in I no longer have the color.

[sontek]

I found a snippet that almost makes this work:

            const options = {
                customInlineFn: (element, { Style }) => {
                    if (element.style.color) {
                        return Style('color-' + element.style.color); // this one
                    }
                }
            };
            source = EditorState.createWithContent(stateFromHTML(props.text, options));

but as #114 states, you can't have a color and a font style at the same time.

[gtwilliams03]

I have the same problem. No styles are carrying over to draft from stateFromHtml(html, options).

I am using your snippet to try this and logging out the result of the Style call at the end of the function. It seems to be returning something that looks like a draft Style, but the draft editor is plain.

        const options = {
            customInlineFn: (element, { Style }) => {
                if (element.style && element.style.color) {
                    console.log(Style('color-' + element.style.color)) // logs {type: "STYLE", style: "color-rgb(102, 102, 102)"}
                    return Style('color-' + element.style.color)
                }
            }
        }

[FadiAboMsalam]

@gtwilliams03 same here , i console log the color and i have the same result did you manage to fix that if so please tell me how
@sontek anything missing from the snippet ?

[FadiAboMsalam]

actually after spending 4 hours understanding how the plugin works and investigating more
i found that the snippet above from @sontek needs a bit modification and it works

const options = { customInlineFn: (element, { Style,Entity }) => { if (element.style.color) { return Style('CUSTOM_COLOR_' + element.style.color); // this one } } };
and it works just fine

[RobertJoseR]

I was struggling with this problem for few hours but but maybe this can be helpful for somebody else.

const importOptions: any = {
customInlineFn: (element: any, { Style, Entity }: any) => {
if (element.style.color) {
return Style('color-' + element.style.color);
}
}
};

....
const state = stateFromHTML({Html}, importOptions);

now I get the colors imported into my Editor.

[ckastrinos]

@RobertJoseR You just saved my day...

For those that don't use typescript,

const options = { customInlineFn: (element, { Style }) => { if (element.style.color) { return Style('color-' + element.style.color); } }, };

worked for me.

[timuster]

@ckastrinos Do you have the customStyleFn and customStyleMap props set for your 'Editor' component? Could you please share a snippet/Codepen for your code segment?

[siddhesh-nalawade]

Anyone knows how to add background-color for text. The solution given in #120 (comment) worked for text color. I want solution for the background color. I have tried the following code but it is not working.

const options = {
            customInlineFn: (element, { Style }) => {
                if (element.style.backgroundColor) {
                    return Style('background-color-' + element.style.backgroundColor);
                }
                else if (element.style.color) {
                    return Style('color-' + element.style.color);
                }

            }
        };
        let contentState = stateFromHTML(this.props.description, options);

[evamike]

Anyone knows how to add background-color for text. The solution given in #120 (comment) worked for text color. I want solution for the background color. I have tried the following code but it is not working.

Maybe useful for someone else:
When setting the background property, eg.:
const styleMap = { 'HIGHLIGHT': { background: 'rgb(255,69,0)' } };

The following approach worked for me:
const options = { customInlineFn: (element, {Style}) => { if (element.style.color) { return Style('CUSTOM_COLOR_' + element.style.color); } else if (element.style.background) { return Style('CUSTOM_BACKGROUND_' + element.style.background); } } }; const contentState = stateFromHTML(html, options); setEditorState(EditorState.createWithContent(contentState ));

[susnatapaul0001]

If you are using react-draft-wysiwyg as your editor, this worked for me for font-color as well as background-color when converting html to editor state. Hope it helps. :)

const options = {
	customInlineFn: (element, { Style }) => {
		if (element.style.color) {
			return Style('color-' + element.style.color);
		} else if (element.style.backgroundColor) {
			return Style('bgcolor-' + element.style.backgroundColor);
		}
	}
};

const fromHTML = (html) => {
	const contentState = stateFromHTML(html, options);
	const editorState = EditorState.createWithContent(contentState);
	return editorState;
   }

But both font-color and background-color not working at the same time. Anyone have the solution so that font-color and background-color works at the same time?