Using check boxes and bullet points in the same list

aosavi commented 7 months ago

Bug description

Check boxes get a bullet if they are in the same list as bullet points without a check box, whereas they do not get a bullet if they are in a list with only checkboxes.
In RStudio's visual editor, bullets are always shown with check boxes.
Also, lists do not seem to get separated if one or multiple empty lines separate them (possibly, the empty lines indicate that it must be a wide list).

Steps to reproduce

---
title: "Check boxes"
format: html
---

List A

-   [ ] Check box
-   No check box

-   [ ] Check box
-   [ ] Another check box

List C

-   [ ] Check box
-   [ ] Another check box

Expected behavior

Check boxes should not get a bullet.
Visual editor shouldn't show bullets if these aren't shown in the rendered document.

Actual behavior

Check boxes get a bullet if they are in the same list as bullet points without a check box.
Visual editor shows bullets even if these aren't shown in the rendered document.

Your environment

IDE: 2023.12.1 Build 402
OS: macOS 14.3.1 (23D60)

Quarto check output

Quarto 1.4.549 [✓] Checking versions of quarto binary dependencies... Pandoc version 3.1.11: OK Dart Sass version 1.69.5: OK Deno version 1.37.2: OK [✓] Checking versions of quarto dependencies......OK [✓] Checking Quarto installation......OK Version: 1.4.549 Path: /Applications/quarto/bin

[✓] Checking tools....................OK TinyTeX: (external install) Chromium: (not installed)

[✓] Checking LaTeX....................OK Using: TinyTex Path: /Users/.../Library/TinyTeX/bin/universal-darwin Version: 2021

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK Version: 3.11.5 (Conda) Path: /opt/homebrew/Caskroom/miniconda/base/bin/python Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with conda install jupyter

[✓] Checking R installation...........OK Version: 4.3.2 Path: /Library/Frameworks/R.framework/Resources LibPaths:

/Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/library knitr: 1.43 rmarkdown: 2.23

[✓] Checking Knitr engine render......OK

cscheid commented 7 months ago

Check boxes should not get a bullet.

Why do you think so? That's the rendering in GitHub, but I don't think RStudio or Quarto promise that.

In RStudio's visual editor

If it's an RStudio problem, then you should file that at https://github.com/rstudio/rstudio

Also, lists do not seem to get separated if one or multiple empty lines separate them (possibly, the empty lines indicate that it must be a wide list).

This is not markdown works; you need to separate consecutive lists by different markers or some non-list content.

aosavi commented 7 months ago

Thanks for the quick reply. Just to be sure, is it intended behavior that check boxes get no bullets if there are only check boxes in the list, and do get bullets if there are also non-check boxes in the list?

cscheid commented 7 months ago

Let me say that I was wrong about GFM's behavior, since it's slightly diferent:

[ ] no bullets
[ ] because they're all checkboxes

but

[ ] yes bullets
because they're not all checkboxes

With that said,

is it intended behavior

I can't answer that question, because the behavior you're seeing is in RStudio. Quarto and RStudio are different programs.

mcanouil commented 7 months ago

FYI, "visual editor"[^1] related questions, feedbacks, and bug reports are to be made on https://github.com/quarto-dev/quarto.

[^1]: The visual editor is a side component of Quarto CLI specifically for RStudio and VSCode IDE (at least).

aosavi commented 7 months ago

I shouldn't have combined two issues in one! The main issue actually is not about the visual editor, but rather how the lists are rendered. Not sure if this is the right place to ask, but now it renders like this:

If instead I'd like to have it rendered like this (as it's done in Obsidian):

Should I somehow change the markdown flavor that is used?

cderv commented 6 months ago

Some context as I am answering a question about this elsewhere : THis is Pandoc behavior. See conversion below

quarto pandoc --to html
List A

-   [ ] Check box
-   No check box

-   [ ] Check box
-   [ ] Another check box

List C

-   [ ] Check box
-   [ ] Another check box
^Z
<p>List A</p>
<ul>
<li><p><label><input type="checkbox" />Check box</label></p></li>
<li><p>No check box</p></li>
<li><p><label><input type="checkbox" />Check box</label></p></li>
<li><p><label><input type="checkbox" />Another check
box</label></p></li>
</ul>
<p>List C</p>
<ul class="task-list">
<li><label><input type="checkbox" />Check box</label></li>
<li><label><input type="checkbox" />Another check box</label></li>
</ul>

For List C, the ul element has a class task-list. By adding this, they then can apply the below CSS rules (https://github.com/jgm/pandoc/blob/0ad5684996239ff731d428374a2b6e0096e9a344/data/templates/styles.html#L185-L191)

ul.task-list[class]{list-style: none;}
ul.task-list li input[type="checkbox"] {
  font-size: inherit;
  width: 0.8em;
  margin: 0 0.8em 0.2em -1.6em;
  vertical-align: middle;
}

The List A won't have task-list class applies, and have no specific class on the li either. Maybe you can find a CSS rules that would help for what you are looking for. I don't know how obsidian does it - you can try check that.

But here, we inherit Pandoc's behavior and CSS.

quarto-dev / quarto-cli