customHTMLRenderer behavior in Markdown vs WYSIWYG mode

[jasperarmstrong]

Summary

I am trying to set up text-align left, center, and right functionality in my app. I have it working how I want in Markdown mode and in the viewer, but it doesn't fully work in WYSIWYG mode.

I'll put some screenshots below, but I've noticed that in the viewer and markdown modes, each paragraph block stays within one p tag, while each line in the WYSIWYG mode is its own separate p tag. Only the first p tag per paragraph is being affected by my customHTMLRenderer code. Also [left], [center], and [right] are not being removed from the displayed text.

I've looked through the docs and tried every sane way I could think of to make the WYSIWYG mode work consistently with the other modes, but I'm running out of ideas. Is there a way to make this work? I'm using the following code:

let lastAlignment;
const alignFunc = (node, context) => {
    const { entering, origin } = context;

    if (node.firstChild?.literal?.startsWith("[center]")) lastAlignment = "center";
    else if (node.firstChild?.literal?.startsWith("[right]")) lastAlignment = "right";
    else if (node.firstChild?.literal?.startsWith("[left]") || node.prev === null) lastAlignment = "left";

    if (entering) {
        let output = origin();
        output.attributes = {
            style: `text-align: ${lastAlignment};`,
        };
        return output;
    }
    return origin();
};
const customHTMLRenderer = {
    heading: alignFunc,
    paragraph: alignFunc,
    text(node, context) {
        const {origin} = context;
        let output = origin();
        output.content = output.content.replace(/^\[(left|center|right)\] ?/g, "");
        return output;
    }
}

Screenshots

Viewer:

Markdown Mode:

WYSIWYG Mode:

Version

3.2.2