Setting HTML messes with cke

[soerenmeier]

Describe the bug

Well this is probably a big edge case.

I read the html of the editor and then set it again (see repro code).
If a cke is inside a block the formatting inside that block is lost after saving.

See this video for an example:

Screencast.From.2025-11-27.17-18-59.webm

Steps to reproduce

1. Install Control Panel JS:
   Add the following js as its content:

document.addEventListener('onVizyConfigReady', () => {
    let first = true;

    Craft.Vizy.Config.registerExtensions((extensions, vizyInput) => {
        if (!first) return;
        first = false;

        window.vizyGetSetHTML = () => {
            const html = vizyInput.editor.getHTML();
            vizyInput.editor.chain().focus().setContent(html, true).run();
            console.log('set content to: ', html);
        };

        console.log('vizyGetSetHTML registered');
	});
});

2. Open a page with a vizy field with a cke field inside a block (see video).
3. Go into the console and execute the function vizyGetSetHTML().
4. After reloading the page, the formatting in the cke is gone.

Craft CMS version

5.8.20

Plugin version

3.0.12

Multi-site?

No

Additional context

No response

[engram-design]

Fixed for the next release. To get this early, run composer require verbb/vizy:"dev-craft-5 as 3.0.12".

[soerenmeier]

Thanks, I just updated to 3.0.13 but i don't see any difference. The described behaviour still occurs.

[engram-design]

Ah, right, I can replicate this one as well. Looks like some strange behaviour with encoding HTML using getHTML(). I can't seem to track down where that's happening (Tiptap or Vizy). But as of the dev-craft-5 branch, we no longer encode/sanitize anything in a special way at this stage, it should be saved as raw HTML.

Any chance you can change this to use the JSON schema, which doesn't seem to have the issue? I assume you're probably trying to manipulate the HTML though, so it might not be feasible.

window.vizyGetSetHTML = () => {
    const json = vizyInput.editor.getJSON();
    vizyInput.editor.chain().focus().setContent(json).run();
    console.log('set content to: ', json);
};