To-do document list not working

Created on 7 September 2024, 6 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):

  • Status changed to Needs work 26 days ago
  • 🇵🇱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.

  • 🇵🇱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.

Production build 0.71.5 2024