[Bug]: HTML code modified by Publii with WYSIWYG editor

[Ni-Ti]

Operating system

Fedora 40

Publii version

0.45.2

Post editor

WYSIWYG editor

Bug description

I'm trying to integrate html code into one of my articles to display this type of view: https://image-compare-component.netlify.app/

The code added is:

<image-compare label-text="Screen Reader Label Text">
  <img slot="image-1" alt="Alt Text" src="/colorzones_color.jpg"/>
  <img slot="image-2" alt="Alt text" src="/colorzones_BW_neutral.jpg"/>
</image-compare>

However, for reasons I can't explain, once the HTML code area is closed, Publii replaces the code with this:

<p><img src="/colorzones_color.jpg" alt="Alt Text"><img src="/colorzones_BW_neutral.jpg" alt="Alt text"></p>

I tried the same experiment with the block editor, and this time the code is well interpreted.

Why is it replacing the code with this editor, and how can it be prevented from doing so?

Steps to reproduce

Enregistrement d'écran_20240531_194317.webm

No response

Relevant log output

No response

[candidexmedia]

You've probably already seen this discussion post, but I'll share it just in case: https://github.com/GetPublii/Publii/discussions/1516

Give those tips a try. Hopefully, they'll work for you!

[Ni-Ti]

Thanks, I hadn't seen that option. The html code is well managed now, but nothing is displayed on the site, despite the presence of the code on the page. I don't really understand why... Maybe I'll migrate to the block editor, but it's quite complicated for other aspects, it's still convenient to switch to raw code locally which this editor doesn't allow.

[dziudek]

@Ni-Ti - because you are using some custom HTML component which probably requires some additional JS code to work :)

[Ni-Ti]

The additional JS code is called on my website. The exact same code works fine with the block editor. ^^ I've finally switched to the other editor, and for the moment I'm able to do everything I want on it. :)

[candidexmedia]

@Ni-Ti Forgot to mention this earlier, but there's a plugin by a community member using a different image comparison library that may work with the WYSIWYG editor (haven't tested it yet):

https://p4p.pages.dev/plugin-imagecomparison/

[Ni-Ti]

Wow, awesome. I've just tested it and it works really well (with WYSIWYG editor). I'll take a look at the customization and maybe use it in production. :+1: