obsidian-list-callouts [FR] Checkbox List

Currently the list callout doesn't work on checkbox items. It would be great if it worked.

Preferably after the "- [ ] <Char Here>" so it doesn't break the writing flow.

Jul 15 '22 14:07 rapatel0

I really want this feature implemented, but I don't know how to compile TypeScript and don't have time to learn it right now. I might get to it in a couple of weeks/months if no-one else picks it up. However, I think that fixing the bug should be relatively straightforward.

It seems that the syntax selection is handled by the regex on line 89 of main.ts. https://github.com/mgmeyers/obsidian-list-callouts/blob/ca0c448ad275f790c7ea5b8e0fe13ec041a0e914/src/main.ts#L84-L93

Using regex101.com, it appears that (^\s*[-*+] |^\s*\d+[\.\)] ) (not double-escaped) detects the following (outlined by pipes |):

|- |! test # pass
- [ ] ! test # fail
|- |! [ ] test # pass
|1. |! test # pass
2. [ ] ! test # fail
|3. |! [ ] test # pass

Changing the regex to (^\s*[-*+] |^\s*\d+[\.\)] )(\[ \] )?(?!.? \[ \] ) appears to select the text in the way that @rapatel0 wants:

|- |! test # pass
|- [ ] |! test # pass
- ! [ ] test # fail
|1. |! test # pass
|2. [ ] |! test # pass
3. ! [ ] test # fail

Based on this, I think someone just has to insert the regex, potentially modify the logic in the following line (I'm not exactly sure how the TypeScript regex engine works), build the project, and make a pull request. https://github.com/mgmeyers/obsidian-list-callouts/blob/ca0c448ad275f790c7ea5b8e0fe13ec041a0e914/src/extension.ts#L94

Jul 30 '22 02:07 mattrmd

I got a bit excited about the idea and implemented this change this afternoon. I only needed to change two lines (regex and css). @mgmeyers, is there a way that I can make push my changes to a new branch and make a pull request?

Note: I accidentally used my uni account for my previous comment, so that's why I have 2 usernames.

Jul 30 '22 20:07 m4ttr4ymond

Awesome, thanks @m4ttr4ymond ! If you fork this repo you can push your changes there and then make a PR from your fork

Jul 30 '22 20:07 mgmeyers

@mgmeyers I actually found a bug in my implementation. It appears that the ordering of a span element with the class cm-list-1 changes depending on whether a bullet point or a check-box is used. The class number changes with the indentation (e.g. cm-list-n for indent level n). I think the span with class cm-list-n is being added by the main Obsidian renderer, and it has a padding of zero. This means that the padding-left: inherit in the CSS inherits zero instead of the indent from lc-list-callout when lc-list-bg is nested under cm-list-n`:

I'm trying to move the highlight outside the cm-list-n span, but I'm having some difficulty. I'll try to work on it more later, but it looks like it's only partially functional at the moment :/.

Using list:

<div class="lc-list-callout HyperMD-list-line HyperMD-list-line-1 cm-line" style="--lc-callout-color: 255, 23, 68;text-indent:-8px;padding-left:12px">
    <span class="cm-formatting cm-formatting-list cm-formatting-list-ul cm-list-1">
        <span class="list-bullet">-</span>
    </span>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span class="lc-list-bg" aria-hidden="true" contenteditable="false"></span>
    <span class="lc-list-marker" aria-hidden="true" contenteditable="false">!</span>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span class="cm-list-1"> test</span>
</div>

Using check-boxes:

<div class="lc-list-callout HyperMD-list-line HyperMD-list-line-1 HyperMD-task-line cm-line" data-task=" " style="--lc-callout-color: 255, 23, 68;text-indent:-25px;padding-left:29px">
    <div class="cm-fold-indicator" contenteditable="false">
        <div class="collapse-indicator collapse-icon">
            <svg viewBox="0 0 100 100" class="right-triangle" width="8" height="8">
                <path fill="currentColor" stroke="currentColor" d="M94.9,20.8c-1.4-2.5-4.1-4.1-7.1-4.1H12.2c-3,0-5.7,1.6-7.1,4.1c-1.3,2.4-1.2,5.2,0.2,7.6L43.1,88c1.5,2.3,4,3.7,6.9,3.7 s5.4-1.4,6.9-3.7l37.8-59.6C96.1,26,96.2,23.2,94.9,20.8L94.9,20.8z"></path>
            </svg>
        </div>
    </div>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span contenteditable="false"></span>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <img class="cm-widgetBuffer" aria-hidden="true">
    <label class="task-list-label" contenteditable="false">
        <input class="task-list-item-checkbox" type="checkbox" data-task=" ">
    </label>
    <img class="cm-widgetBuffer" aria-hidden="true">
    <span class="cm-list-1"> <img class="cm-widgetBuffer" aria-hidden="true">
        <span class="lc-list-bg" aria-hidden="true" contenteditable="false"></span>
        <span class="lc-list-marker" aria-hidden="true" contenteditable="false">!</span> test
    </span>
</div>

Jul 30 '22 22:07 m4ttr4ymond

Added support for checkboxes in the latest version. Let me know if you run into any issues with it.

Oct 14 '22 22:10 mgmeyers

It seems like checkbox callouts still have an extra dot on preview mode, I'm guessing this comes from their list behavior.

Edit mode: