Markdown checklists should not show bullets

[damufo]

The current markdown preview render is showing bullets:

• checked list item
• unchecked list item

↓↓↓

The bullets are hidden in most implementations, including GitHub, which is the original.

[zefhemel]

Interesting. However I often mix regular and task items in bulleted lists. That would look odd then, or there would have to be a special case for bulleted lists with just tasks.

[damufo]

github implementation

• item one
• item two
• item three
• item four
• item five

When no task show bullet.

[kolmone]

Github seems to show a bulleted task with the syntax - - [ ] or * * [ ]

• task with - [ ]
• • task with - - [ ]
• regular bulleted item

(Actually in the posted comment it does not look as nice as in the preview so it might not be "official" syntax?)

[damufo]

• item
• • item2

• Iem 3
• • Item 4

- [ ] item
-  - [ ] item2
* [ ] Iem 3 
* *  [ ] Item 4

[mjf]

I also tend to think the checkboxes should not be preceded with the bullets while rendered. If we make such change, I would like to see some proper alignment of the items values (see below the poor's man vizualization to get the idea of what I mean; even GitHub have it wrong and ugly - we should do better 😃 ):

The ordinary

- [x] task item
- list item
- list item
- [ ] task item
- list item

will show up aligned nicely:

[x] task item
 •  list item
 •  list item
[ ] task item
 •  list item

(Not sure how to achieve it. Perhaps throw some grid to it? Some CSS mastery is probably needed...)

[zefhemel]

Sadly with the way CodeMirror generates HTML this may not be that easy to perfectly align, but worth a shot.

[KitAmbraid]

Hey there, here's a bit of css that fixes it, you can add it as a space-style block.
Notes:

• you can play with the --editor-indent-multiplier theme variable to find the spacing that works best for you
• depending on your font, the bullet points might not be perfectly aligned with the checkboxes: tinker with the --li-touchup var to find your proper setting

/* Scoping on lists */
@scope (#sb-main .cm-editor .sb-line-ul.sb-line-li-1) {
  & { 
    --li-touchup: -8px;

    --base-indent: calc(3ch * var(--editor-indent-multiplier));
    --depth: 1;
  }

  &.sb-line-li-2 { --depth: 2; }
  &.sb-line-li-2.sb-line-li-3 { --depth: 3; }
  &.sb-line-li-2.sb-line-li-3.sb-line-li-4 { --depth: 4; }
  &.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5 { --depth: 5; }

  @scope (
    &,
    &.sb-line-li-2,
    &.sb-line-li-2.sb-line-li-3,
    &.sb-line-li-2.sb-line-li-3.sb-line-li-4,
    &.sb-line-li-2.sb-line-li-3.sb-line-li-4.sb-line-li-5
  ) {
    & {
      padding-left: calc(var(--base-indent) * (calc(var(--depth) - 1)));
      text-indent: 0;
    }

    & .cm-list-bullet::after {
      width: var(--base-indent);
      min-width: var(--base-indent);
      text-align: center;
      text-indent: 0;
      display: inline-block;
      position: relative;
      left: 0;
      margin-left: var(--li-touchup);
    }

    & > .sb-list:first-child { display: none; }
    & > .sb-li-cursor .sb-list.sb-meta { display: inline; }

    /* Scoping on tasks */
    @scope (&.sb-line-task) {
      & {
        text-indent: 0;
        padding-left: calc(var(--base-indent) * (calc(var(--depth) - 1)));
      }
      
      & .cm-list-bullet::after { 
        display: none; 
      }
  
      
      & .sb-checkbox {
        width: var(--base-indent);
        min-width: var(--base-indent);
        text-align: center;
        display: inline-block;
        text-indent: initial;
      }
  
      & .sb-list:has(~ .sb-checkbox),
      & .cm-list-bullet {
        display: none;
      }
      & .cm-task-checked .sb-list.sb-task { display: inline; }
      
      /* task when cursor is next to that part: - [ ] */
      @scope (&:has(.sb-task-state)) {
        & .sb-list,
        & .cm-list-bullet {
          display: inline;
          visibility: visible;
        }
      }
    }
  }
}

What it looks like with my settings:

I may or may not write down a proper PR, may or may not have the time & energy some day soonish, so anyone wanting to do it instead please leave a comment so that I know you're on it.

Edit: fixed done tasks title not showing up & make the css much nicer
Edit 2: fixed links not showing up

[damufo]

@KitAmbraid

I'm not requesting support, I'm just commenting on the case in case any corrections need to be made to the CSS.

I add your css for my space-style SETTINGS but not work for me.

I reload system and user interface.

Result:

[zefhemel]

This is cool. If somebody's willing to merge this into the main code base and issue a PR I'd appreciate it a lot 😄