- Issue created by @kopeboy
- First commit to issue fork.
- Merge request !163472777 119 Added elements used by todo list to allowed for Limit allowed HTML tags filter → (Merged) created by salmonek
- 🇵🇱Poland salmonek
Hi @kopeboy
Thank you for bringing this oversight to our attention.
Posted patch adds tags required by todo list to the "Allowed HTML tags" list. - 🇮🇹Italy kopeboy Milan
Since we are here (😅😇).. I noticed that the relevant CSS is not applied to the front-end theme, ie. when there is no CKEditor active on the page..
so shouldn't we remove the
.ck-content
class prefix from this CSS below, to make it look good out-of-the-box everywhere?.ck-content .todo-list .todo-list__label .todo-list__label__description { vertical-align: middle; }
.ck-content .todo-list { list-style: none; }
The margins top & bottom instead are irrelevant as a frontend theme will always have them already on lists (so I wouldn't touch all other CSS), but the margin-left is needed and missing from the frontend (see below), so I would add
margin-left: 1ch;
to the first declaration above (without the.ck-content
class prefix).AS IS while editing (with Claro default theme):
AS IS while viewing (with Olivero default theme):
TO BE while viewing (with Olivero default theme and the edits I described):
- Status changed to Needs work
26 days ago 8:06am 5 February 2025 - 🇵🇱Poland salmonek
I've merged the fix and it will be published in new release today.
The styling part will be added as merge request this week and will land in next release. - 🇺🇸United States w01f
Just chiming in, this is what we added to make the checklist look correct on our site:
/* CKEditor Plugin Pack overrides */ .todo-list { list-style: none; margin: 2rem 0; } .todo-list .todo-list__label { vertical-align: middle; } .todo-list .todo-list__label input[type="checkbox"] { margin-right: .5rem; }
- 🇵🇱Poland salmonek
salmonek → changed the visibility of the branch 1.2.x to hidden.
- Merge request !203472777 Add option to attach To-Do List styles to all pages → (Open) created by salmonek
- 🇵🇱Poland salmonek
New MR adds an option to attach To-Do List styles to all pages. It is located in the text format settings in the "CKEditor 5 plugin settings" tabs.
Additionally a "checked" attribute is added to the allowed list, so checked boxes will not be displayed as empty on forntend. Change requires again to disable plugin form active plugins selection and re-add it. To refresh the "Allowed HTML tags" field.