Checklists for Quill

[gdjohnson]

Description

Github-style to-do/checklist for Quill editor. Unlike Github, checklists are only editable by the creator of the checklist, via thread or comment editing (i.e. saved/submitted Quill and Markdown-formatted posts cannot have the 'checked'/'unchecked' state of their lists changed.) A v2.0 of this feature can include this capability pending discussion.

Technical Context

Quill has some capacity for handling checklists, but the feature is not fully supported (see Quill issue 759 & PR 1944). A change was made to the block-format handler which completes the missing HTML capability, and Sass was written to compensate for an unfortunate side-effect of the current handler, which organizes checked/unchecked at the ul level rather than the li level (hence splitting up elements which are checked or unchecked into separate lists, leading to inconsistent element padding).

How Has This Been Tested?

• Creating new checklists in Markdown and Quill
• Rendering submitted checklists in Markdown and Quill

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• My change should be included in the release notes.
• I have updated the documentation accordingly.
• I have linted the code locally prior to submission.

[raykyri]

The Unicode checkboxes don't look like native checkboxes at all and make for a jarring experience. Would it be possible to port over the CSS styles from .cui-control-indicator here: https://vrimar.github.io/construct-ui/#/components/checkbox instead? That seems like the easiest way to get us to nice checklists.

If that is not an option, I started a branch (raymond.quill-checklist-html) to swap out the Unicode checkboxes with HTML checkboxes. That is blocked on us implementing a checkbox in Quill blots that lets us customize the exact way they are rendered, which we could accomplish by using a custom blot like this one, and modifying TaskListItem to render an HTML input + label, rather than an LI element: https://stackblitz.com/edit/quill-demo?file=blots%2Ftask-list.blot.js

[gdjohnson]

The Unicode checkboxes don't look like native checkboxes at all and make for a jarring experience. Would it be possible to port over the CSS styles from .cui-control-indicator here: https://vrimar.github.io/construct-ui/#/components/checkbox instead? That seems like the easiest way to get us to nice checklists.

Sure, I was just using the default icons. I'll look into customizing.

[gdjohnson]

@raykyri The icons for submitted posts have been changed to implement the Construct CSS. I initially implemented for active editors, but things didn't look so hot to my eye—a little visually jarring/distinct from the current style. However, if this functionality's desired, it's as simple as changing the following SCSS in quill_editor.scss:

// Checklist styling
    .ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] {
        pointer-events: none;
    }
    .ql-editor ul[data-checked=true] > li::before, .ql-editor ul[data-checked=false] > li::before {
        color: #777;
        cursor: pointer;
        pointer-events: all;
    }
    .ql-editor ul[data-checked="true"] li {
        text-decoration: line-through;
    }
    .ql-editor ul[data-checked=true] > li::before {
        content: '\2611';
    }
    .ql-editor ul[data-checked=false] > li::before {
        content: '\2610';
    }

to

 .ql-editor ul[data-checked=true], .ql-editor ul[data-checked=false] {
        pointer-events: none;
    }
    .ql-editor ul[data-checked=true] > li::before, .ql-editor ul[data-checked=false] > li::before {
        cursor: pointer;
        pointer-events: all;
        font-family: "fontello";
    }
    .ql-editor ul[data-checked="true"] li {
        text-decoration: line-through;
    }
    .ql-editor ul[data-checked=true] > li::before {
        content: '\f14a';
        color: #5c6bc0;
    }
    .ql-editor ul[data-checked=false] > li::before {
        content: '\f096';
        color: #b0bec5;
    }

[raykyri]

Maybe we have different fonts? I'm not as into the default checkboxes that are appearing on my screen...

[raykyri]

I don't think I like the construct-ui checkboxes more than I like the OS native ones. But they are consistent between the editor and display, and I think they will look a little better after general styling tweaks on how we show rendered text.