Incorrectly displayed RawDraftEntity

[lafonju]

In my editor, I provided custom HTML code. In this code, I have some tags that have specific data attribute. In my example, you can see var tag. For that, I use the htmlToDraft method, with a customChunkRenderer for my personal tag

constructor(props: TMyEditorProps) {
        super(props);

        const html = '<p><span style="font-size: 16px;font-family: Georgia, serif;">test with default style <var data-name="$test"></span></p>'
            + '<p><span style="font-size: 16px;font-family: Georgia, serif;"><strong>test bold</strong></span></p>'
            + '<p><span style="font-size: 16px;font-family: Georgia, serif;"><em>test italic</em></span></p>'
            + '<p><span style="font-size: 16px;font-family: Georgia, serif;"><ins>test underline</ins></span></p>'
            + '<p><span style="font-size: 16px;font-family: Georgia, serif;"><strong><em><ins>test bold &amp; italic &amp; underline</ins></em></strong></span></p>'
            + '<p><span style="font-size: 17px;font-family: Georgia, serif;">test 17px</span></p>'
            + '<p><span style="font-size: 16px;font-family: cursive;">test cursive</span></p>'
            + '<p><span style="font-size: 17px;font-family: cursive;">test 17px &amp; </span><span style="color: rgb(0,0,0);font-size: 17px;font-family: cursive;">cursive</span></p>'
            + '<p><span style="color: rgb(255,0,0);font-size: 16px;font-family: Georgia, serif;">red font</span></p>'
            + '<p><span style="color: rgb(0,0,0);background-color: rgb(0,128,255);font-size: 16px;font-family: Georgia, serif;">blue background</span></p>'
            + '<p><span style="color: rgb(255,0,0);background-color: rgb(255,255,0);font-size: 16px;font-family: Georgia, serif;">red font &amp; yellow background</span></p>'
            + '<p><span style="color: rgb(255,0,0);background-color: rgb(255,255,0);font-size: 20px;font-family: cursive;">font &amp; yellow background &amp; 20px &amp; cursive</span></p>',
            contentBlock = htmlToDraft(html, MyEditor.customChunkRenderer),
            compositeDecorator = MyEditor.getCompositeDecorator();
        let editorState: EditorState;
        if (contentBlock) {
            const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
            editorState = EditorState.createWithContent(contentState, compositeDecorator);
        } else {
            editorState = EditorState.createEmpty(compositeDecorator);
        }

        extractInlineStyle(editorState);

        this.state = {
            editorState
        };
        this.onChangeEditor = this.onChangeEditor.bind(this);
        this.onChangeBold = this.onChangeBold.bind(this);
        this.onChangeItalic = this.onChangeItalic.bind(this);
        this.onChangeUnderline = this.onChangeUnderline.bind(this);
        this.onChangeFontFamily = this.onChangeFontFamily.bind(this);
        this.onChangeFontSize = this.onChangeFontSize.bind(this);
        this.onChangeColor = this.onChangeColor.bind(this);
        this.onChangeBGColor = this.onChangeBGColor.bind(this);
        this.onSelectAll = this.onSelectAll.bind(this);
        this.onClickRemoveAllInlineStyle = this.onClickRemoveAllInlineStyle.bind(this);
        this.onAddVariable = this.onAddVariable.bind(this);
    }

    private static customChunkRenderer(nodeName: string, node: HTMLElement): RawDraftEntity | undefined {
        let draftEntity: RawDraftEntity | undefined;
        if (nodeName === 'var') {
            const data = {
                name: node.dataset.name
            };
            draftEntity = {
                type: 'VARIABLE',
                mutability: 'IMMUTABLE',
                data: data
            };
        }
        return draftEntity;
    }
...
private static getCompositeDecorator(): CompositeDecorator {
        const compositeDecorator: CompositeDecorator = new CompositeDecorator([
            {
                strategy: MyEditor.findLinkEntities,
                component: MyEditor.variableComponent
            }
        ]);

        return compositeDecorator;
    }

    private static findLinkEntities(contentBlock: ContentBlock, callback: FStrategyCallback) {
        contentBlock.findEntityRanges(
            (character) => {
                const entityKey = character.getEntity();
                return (
                    entityKey !== null &&
                    Entity.get(entityKey).getType() === VariableType
                );
            },
            callback
        );
    }

    private static variableComponent(props): JSX.Element {
        const data: TVariableData = props.contentState.getEntity(props.entityKey).getData();
        return <span style={{ textDecoration: 'underline' }}>{data.name}</span>;
    }
...

Unfortunately, when displaying my var tag in my editor, it does not display correctly. The displayed text does not seem to be in the span that contains all of the style I want to associate with it anymore.

I would like my var tag to display with the style of the span that contains it and on the same line as the previous text.
When I get the html code from the editor state, with the draftToHtml method (git draftjs-to-html project), we see that my var tag is outside the starting span. You can see it in the textarea below the editor.

Thank you very much