Gitea-VSCode icon indicating copy to clipboard operation
Gitea-VSCode copied to clipboard

Feature Request: Render Checkboxes for list items starting with square brackets

Open RichardWepner opened this issue 1 year ago • 1 comments

On Gitea (as well as GitHub, Gitlab, and probably other issue systems using Markdown), list entries starting with a pair of square brackets and either a space or an x in between (i. e. starting with - [ ] or - [x]) are not rendered with the regular list bullet point, but rather with a checkbox.

Example

## Tasks

- [ ] Create repositories and projects as necessary
- [ ] add annotations to declare types to use generated serializers
- [ ] find all applicable types in the project

would be rendered in Gitea as

Gitea Screenshot

image

but is rendered in VSCode as

VSCode Screenshot

image

As a comparison, this is the same from above here on GitHub:

Markdown
  • [ ] Create repositories and projects as necessary
  • [ ] add annotations to declare types to use generated serializers
  • [ ] find all applicable types in the project

List Nesting

Please keep in mind that since this is done inside of lists, nesting needs to be respected and the indentation should be respected. Here is an example on Github how this could look like:

Markdown with multiple levels
  • Level 1 Without
  • [ ] Level 1 With
    • Level 2 Without
    • [ ] Level 2 With
  • [x] Level 1 checked

Checking of Checkboxes

In most issue trackers, checking a checkbox created with this would automatically update the issue by setting an x into the square brackets.

As long as this extension offers only read-only access to the issues, the checkboxes should be rendered as readonly or disabled. This is also used in the preview mode of platforms using this feature.

Once write access to the Gitea instance is established, another feature to be implemented would be to interpret checkbox clicks as edits and updating the issue. However, this is out of scope for this issue and should be implemented afterwards.

RichardWepner avatar Dec 27 '23 14:12 RichardWepner

I just did a quick search to see how this could be done (I didn't yet do any VSCode Extension development). In extension.ts line 26, an instance of MarkdownIt is created. It seems like the approach the Markdown Checkbox extension uses in its index.ts could be an approach here. This would mean:

  • add a dependency to markdown-it-task-lists
  • add import * as taskList from 'markdown-it-task-lists';
  • call MarkdownIt.use with taskList and the right options.

The rendering in the example of the plugin looks like this would not yield the same rendering as Gitea (bullet points are still rendered), however this would already be an improvement and a first step. I didn't check however if the markdown-it-task-lists package offers more options that allow this to be configured.

In order to test this myself (and to open a Pull Request), I first would need to set up a development environment for VSCode extensions, so it's quite possible that I might only attempt this at some point in the future or maybe not at all. =( (In other words: if anyone else feels like attempting this, just go ahead.)

Further, after taking a look at the sources, I'm not so sure anymore if reacting to clicks on the checkboxes would be possible the way it's implemented right now, but this is something that can be addressed in the future when it's actually becoming relevant.

RichardWepner avatar Dec 28 '23 11:12 RichardWepner