To-do document list not working

Created on 7 September 2024, 3 months ago

Problem/Motivation

The class todo-list is not added to the list, hence the checkboxes are shown only while editing the content in CKEditor. When viewing the content it's a normal list like this: <ul><li>one</li><li>two</li></ul>

Steps to reproduce

  1. install ckeditor5_plugin_pack_todo_document_list on a fresh Drupal 10.3.2
  2. at /admin/config/content/formats/manage/basic_html activate the "To-Do List" button, save
  3. add an article with a todo list, save.

Proposed resolution

I'm not an expert but I would expect to see <ul class> at the bottom of the text format config page, under "Allowed HTML tags".

🐛 Bug report
Status

Active

Version

1.2

Component

Code

Created by

🇮🇹Italy kopeboy Milan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @kopeboy
  • First commit to issue fork.
  • 🇵🇱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

    Yep, that worked, thanks!

  • 🇮🇹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):

Production build 0.71.5 2024