React-draft-wysiwyg: Image aligning or wrapping

[FriOne]

Hey @jpuri, thanks for the lib.
Image aligning doesn't work for me, after I convert state to html, I get images that is not wrapped with p tag or smth else. So image is always inline.
I also made modal window that makes possible to edit raw html, but after converting state by htmlToDraft any tags that wrapping images become p tag and also images go outside of it.

I see the same behavior here https://jpuri.github.io/react-draft-wysiwyg/#/demo

Could you give me the right direction? Do I need to write customBlockRenderFunc to fix this?

[FriOne]

Sorry, I guess the issue similar to this.
So sad to know that this library can't work with images :(

[perlavianey]

I finished making my own wrapper around the images to get a correct alignment. I used regex to get img tags and I replaced them with a div (with width:100% and text-align:center, right or left) wrapping that img tag, like this:

<img src=... alt=... style="float:right">
is replaced by
<div style="text-align:right" ><img....> </div>

So I get the image aligned to the right.

I just finished the function, it needs optimization, but I hope the idea helps.

const rawContentState = convertToRaw(editor.getCurrentContent());
let htmlText = draftToHtml(rawContentState);
let htmlConverted = this.convertImages(htmlText); //here I call the function that converts the <img/> to <div><img/></div>. 

//Now the function:
convertImages = (htmlText) =>{
        const regex =  /<img\s[^>]*?style\s*=\s*['\"]float([^'\"]*?)['\"][^>]*?>/g;
        let m;
        while ((m = regex.exec(htmlText)) !== null) {
            if (m.index === regex.lastIndex) regex.lastIndex++;
            let repl = null,type = null;
            m.forEach((match, groupIndex) => {
                if(groupIndex==0)repl = match;
                if(groupIndex==1)type = match;
                if(repl && type){
                    if(type.includes('none')) htmlText = htmlText.replace(repl, `<div style="text-align: center;width: 100%;">`+repl+'</div>');
                    else htmlText = htmlText.replace(repl, `<div style="text-align ${type}; width: 100%;">`+repl+'</div>');
                    repl = null;
                    type = null;
                }
            });
        }
       return htmlText;
 }

[pratiknikam]

Any update on official fix around this @jpuri rather using custom hacks?