React-draft-wysiwyg: Displaying initial HTML text(specially the attributes) has issues in the newer versions.

[sachintha88]

your latest changes in react-draft-wysiwyg (later than 1.8.3 with confident) has unexplained behavior that initial setup of my editorState is not getting identified by the editor even though the blocks are identical when I perform same styles using the editor. I am receiving HTML text from the database and I manually populate the rawObject of the EditorState to show the contents I wanted to show in editor. It works perfectly on 1.8.3.

My initialization as follow.

import {Editor} from "react-draft-wysiwyg";
import {convertFromHTML, EditorState, ContentState, convertToRaw, convertFromRaw} from "draft-js";
import {stateFromHTML} from "draft-js-import-html";
import hexRgb from "hex-rgb";

...class definitions

constructor(props) {
super(props);

    let editorState;
    if (props.value) {

        //creating HTML object using the given html string
        const htmlString = props.value;
        const parentElement = document.createElement('div');
        parentElement.innerHTML = htmlString;
        console.log("element:", parentElement);

        //creating editor State with created element
        let rawObject = convertToRaw(EditorState.createWithContent(stateFromHTML(htmlString)).getCurrentContent());

        for (let i = 0; i < rawObject.blocks.length; i++) {
            let paragraphElement = parentElement.getElementsByTagName("P")[i];

            //add text align
            if (paragraphElement.align) {
                rawObject.blocks[i].data["text-align"] = paragraphElement.align.toLowerCase();
            }

            //modify current raw object styles
            this.fontElementFinder(parentElement.childNodes[i], rawObject, i);
        }
        let newContentState = convertFromRaw(rawObject);
        editorState = EditorState.createWithContent(newContentState);
    }
    this.state = {editorState};
}

//recursive method to crawl through every childNode of HTML element
fontElementFinder(currentNode, rawObject, block, offsets: Array = [], ofs: number = 0) {
    let offsetArr = offsets;
    let offset = ofs;
    for (let z = 0; z < currentNode.childNodes.length; z++) {

        let nodeName = currentNode.childNodes[z].nodeName.toLowerCase();
        if (nodeName === 'font') {
            offsetArr.push(offset);
            let length;
            for (let i = 0; i < currentNode.childNodes[z].childNodes.length; i++) {
                if (currentNode.childNodes[z].childNodes[i].nodeName.toLowerCase() === '#text') {
                    length = currentNode.childNodes[z].childNodes[i].textContent.length;
                }
            }
            if (currentNode.childNodes[z].color) {
                let rgba;
                if (currentNode.childNodes[z].color.charAt(0) === '#') {
                    rgba = hexRgb(currentNode.childNodes[z].color);
                }
                else {
                    rgba = currentNode.childNodes[z].color;
                }
                let inlineStyleRangeObject = {
                    length: length,
                    offset: offset,
                    style: "color-rgb(" + rgba + ")"
                };
                rawObject.blocks[block].inlineStyleRanges.push(inlineStyleRangeObject);
            }

            if (currentNode.childNodes[z].size) {
                let inlineStyleRangeObject = {
                    length: length,
                    offset: offset,
                    style: "fontsize-" + currentNode.childNodes[z].size
                };
                rawObject.blocks[block].inlineStyleRanges.push(inlineStyleRangeObject);
            }

            if (currentNode.childNodes[z].childNodes.length > 0) {
                offset = this.fontElementFinder(currentNode.childNodes[z], rawObject, block, offsetArr, offset);
            }
        }
        else if (nodeName === 'u') {
            let inlineStyleRangeObject = {
                length: currentNode.childNodes[z].textContent.length,
                offset: offset,
                style: "UNDERLINE"
            };
            rawObject.blocks[block].inlineStyleRanges.push(inlineStyleRangeObject);
            let childNode = currentNode.childNodes[z];
            let currentElementLength = childNode.textContent.length;
            offset = offset + currentElementLength;
        }
        else {
            let childNode = currentNode.childNodes[z];
            let currentElementLength = childNode.textContent.length;
            offset = offset + currentElementLength;
        }
    }
    return offset;
}

This is how the object is created after manipulating

But this is not getting applied as styles. Works pefectly with 1.8.3.
Color and the Size is not applied.

[jpuri]

@sachintha88 : Yep that is issue with some of latest releases, you should very soon expect a fix. I will let you know as I release the fix.

Thanks a lot.

[sachintha88]

Hi jpuri,
Thank you for the fast reply. It is nice to hear that there will be a fix soon. I appreciate if you can update me as soon as you fix the issue. I will be using 1.8.3 until the fix.

Thank you! 👍

[jpuri]

Hi @sachintha88 ,

I just published [email protected] with the fix.

[sachintha88]

Hi @jpuri,
I have tested 1.9.5 and its working great! cheers!!
Thank you. 💯

[sachintha88]

Hi @jpuri,
I am sorry that saying it works 100% but it seems like still there is one issue which I would like to mention you. I hope that if every other function works fine, the font size is not still getting applied. I set fontsizes manually like object[1] in the above screenshot but it is not getting applied. I hope soon there would be a fix for that too.
once I was like, "wow that's cool !", and then, "Oh wait! where are the font sizes?".
something is blocking the fontsizes but not fontcolors. colors working fine.
Thank you in advance!

[jpuri]

Thanks a lot for pointing this out - font size did passed my testing.
But might be I missed something - I will soon check it again.

[chetanmotamarri]

There seems to problem with both font size and font family.
May be fix is changing fontsize, fontfamily to camel case in line 245, 247. https://github.com/jpuri/draftjs-utils/blob/master/js/inline.js

[sachintha88]

Hi @jpuri,
Thanx for the fast reply again,
Yes, I think something is missing. I hope you could reproduce the issue.
If you can't reproduce it I may have some info that you may need.
If you require something, please ask.

[sachintha88]

It shows 14 as you can see in the fontSize box, but it is not rendering 14 but it can output 14.

[jpuri]

Thanks @sachintha88 : I will try to fix it earliest.

[jpuri]

Just published [email protected] with the fix.

[sachintha88]

Hi @jpuri,
This time it works perfectly so far. Thank you for the effort 👍 . I hope @chetanmotamarri 's issue is also fixed.
Your support for this issue is indeed thankful.

Cheers! 💯

[jpuri]

Thanks for reporting the issue and helping in fixing it 👍