event description and custom page content html tag attributes

[kingspride]

Describe the bug
in older versions of indico, I could create custom event sites and custom pages via switching to source mode in the editor and paste my custom html with many class attributes and then style them with a custom layout css file.

now, on indico 3.2, these customized events still display correctly, but the new editor removes all my custom attributes and tags I was using, hence changes or a completely new site with custom styled tags are not possible anymore.

To Reproduce
Steps to reproduce the behavior:
create an event
try to set custom html, i.e.
<div class='custom_hello'>hello</div>

Expected behavior
on saving, indico should keep the html as entered when the editor was set to source mode.
this worked in older indico versions (2.8 or 3.0? not sure unfortunately)

Screenshots
here is the old html I created in the older indico version, and styled it with the custom layout css

heres what the description editor loads when trying to edit it. if I would save now, all my custom classes would be gone.

any possibility to get this functionality back, aka dont sanitize too much?
or add a button where I can upload a custom html and use it i.e. as the event descripton or as content of a custom page.

thanks alot!

[ThiefMaster]

Which custom tags/attributes are you using which are being stripped? Can you paste an example as code here so I can test?

[kingspride]

the site should be publicly available, take a look: https://indico.fhi-berlin.mpg.de/event/119

this should be it:

<div class="customTitleBox">
<div class="customTitleHeadline">
<div>A FEST</div>

<div class="stacked-title">to</div>

<div>CELEBRATE the 90th BIRTHDAYS</div>
</div>
</div>

<div class="customDivider">
<div>&nbsp;</div>
of

<div>&nbsp;</div>
</div>

<div class="imgbanner">
<div><img alt="Dudley Herschbach" src="https://indico.fhi-berlin.mpg.de/event/119/images/51-dudley_2_cc.jpg" style="height:231px; width:185px;">
<p><a href="https://chemistry.harvard.edu/people/dudley-herschbach" target="_blank">Dudley Herschbach</a></p>
</div>

<div><img alt="Dan Kleppner" src="https://indico.fhi-berlin.mpg.de/event/119/images/56-dan_3_cc2.jpg" style="height:231px; width:185px;">
<p><a href="https://physics.mit.edu/faculty/daniel-kleppner/" target="_blank">Dan Kleppner</a></p>
</div>
</div>

<div class="textblock">
<p>This Fest, to be held on June 18, 2022 at the American Academy in Cambridge, MA, will celebrate Dudley's and Dan's 90th birthdays. Talks by distinguished colleagues Yuan Lee and Bill Phillips will highlight the lives and work of the two jubilarians and celebrate their friendship.</p>

<p>In addition, a talk by Horst Schmidt-Böcking will mark the centenary of the Stern-Gerlach experiment that was paramount to the rise of the research areas of both celebrants. The current state of the art in these research areas will be reviewed by Kang-Kuen Ni.</p>

<p>The program will also include special musical interludes. A subsequent reception and dinner will provide good fare and opportunities for impromptu comments and merriments.</p>

<p>A detailed program of the Fest is posted on this website along with various materials about the celebrants, including memorable photos and links to interviews.</p>

<p>This <a href="https://indico.fhi-berlin.mpg.de/event/119/registrations">registration portal</a>&nbsp;is intended to help the organizers keep track of the attendance at the Fest.</p>
</div>

[kingspride]

I also tried to add more html tags like <details> and <iframe> on custom pages, everything gets stripped.

[ThiefMaster]

I'm pretty sure we always stripped <iframe>. Here's the list of tags allowed by the server side sanitizer: https://github.com/indico/indico/blob/master/indico/util/string.py#L42-L69

[kingspride]

currently I think its the editor thats stripping a lot of stuff when switching to source mode. which in turn kills all theoretically allowed tags and attributes in your mentioned file ( my class attributes are stripped)

[ThiefMaster]

Yes, we have to tweak the editor's sanitizer a bit more...

[kingspride]

okay. thanks for investigating, I look forward to getting a fixed version :)

[kingspride]

thanks for merging,
can I pull just this change into my current indico version which is installed via pip? or do I have to wait for a release? if yes, whats your planned next release date?

thanks!

[ThiefMaster]

You could build your own Python wheel from master: https://docs.getindico.io/en/latest/building/
Note that for this you need to have a development setup somewhere (usually locally); the production setup is not suitable for building this package.

Alternative wait a bit, I'm quite certain that I'll still release 3.2.2 this year.

[kingspride]

I'll try.

[ThiefMaster]

Actually, it's probably faster if I just build one: https://www.dropbox.com/s/xrf81462w25e69f/indico-3.2.2.dev0%2B202211281546.2dc24b7673-py3-none-any.whl?dl=0

You can simply pip install indico-*.whl that file and then restart uwsgi/celery.

[kingspride]

ok. nearly perfect, only one problem left:
indico doesnt let me save until I go out of source code mode, which then inserts unwanted <p> tags around the "of" at the very beginning of my customDivider div, which in turn kills my styling.

could you add that one can save directly from source mode?

[ThiefMaster]

No, because the editor does not update the field data until you leave source mode - that's why we disable submission until you leave it.

Do you have a minimal example of where this happens? Because I think it's pretty normal that editors wrap text in paragraphs,...

[kingspride]

hm like this?
original:

what ckeditor makes out of it:

maybe it would be better to provide a way to insert HTML directly and bypass ckeditor entirely? because right now, it feels quite restrictive.
I get that it might be a good idea to strip Javascript, but pure HTML with attributes? should be allowed as complete as possible in my eyes....

[kingspride]

original

<div class="title">
<div>
    &nbsp;
</div>
this
<div>
    &nbsp;
</div>

ckedit:

<div class="title">
    <div>
        &nbsp;
    </div>
    <p>
        this
    </p>
    <div>
        &nbsp;
    </div>
</div>

[ThiefMaster]

You haven't seen the crap people paste from MS Word and similar tools... ;)

But yes, at least for custom pages I think we could maybe consider adding an option to switch to a more code-based editor (e.g. monaco editor) and thus only apply the standard server-side sanitization (tag/attribute whitelist) without messing around with the HTML on the client side.

[ThiefMaster]

Maybe https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html could be an option as well...

[kingspride]

true, copy pasted stuff from casual software should still be possible and maybe even retain some sort of formatting - this is good usability.
BUT - for pros it would be cool to have i.e. a separate HTML source file upload button or, if that works, the embed function of ck enabled.

because with that and the custom layout CSS file, indico becomes quite powerful for themed and customized events / pages.
the people I made that website for, were very happy about the design while still being able to use all the planning etc features of indico by themselves.

[ThiefMaster]

Give this wheel a try; it includes the ckeditor html snippets plugin which should let you add your HTML untouched.

[kingspride]

thanks, works as expected.
only thing left is that I'd like to see that HTML embed for the event description aswell.
then Im 100% satisfied. :)

thanks for your good work!

[ThiefMaster]

Here we go: https://www.dropbox.com/s/qfj28aymbzewy98/indico-3.2.2.dev0%2B202211301038.f33f47dc29-py3-none-any.whl?dl=0

[kingspride]

Hey, a bit late, but now everything works to my desire.
thanks alot!

[ThiefMaster]

great. this will also be included in the next release (3.2.2). feel free to stick with that wheel i built until then, it contains everything from 3.2.2 plus this PR's changes

[kingspride]

good to know. maybe you could enable more HTML5 elements / tags, like <video>, but it has no priority.
(https://www.w3schools.com/tags/tag_video.asp)