Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

To do lists #107

Open
OscarGodson opened this Issue Jan 9, 2013 · 27 comments

Comments

Projects
None yet

https://github.com/blog/1375-task-lists-in-gfm-issues-pulls-comments

To be honest, I'm not entirely sure if Markdown should support this or not. Seems very, very Github centric, but curious what your thoughts are.

Owner

chjj commented Jan 10, 2013

Just testing so I can see the HTML.

  • a task list item
  • list syntax required
  • normal formatting, @mentions, #1234 refs
  • incomplete
  • completed

Oh, weird. I can't click on your tasks at all. they're read only. Probably because, I'm assuming, when you check one it sends an edit XHR request and adds an "X" inside the bracket.

  • Get stuff done
  • Just testing myself
  • First time using them...
Owner

chjj commented Jan 10, 2013

Yeah, you're right, that's very github specific. It generates checkboxes without a form. List items with certain data attr's and classes, catering to githubs specific stylesheet. Not to mention the js which adds the dynamic behavior. I see this as being really hard to standardize. ...maybe if they were renamed to just "GFM checkboxes" instead of "todo lists", since the "todo" list part entails the dynamic behavior.

edit: Anyway, I'll leave this open if anyone else wants to comment.

I like the idea to simply render checkboxes using this markup. In app you can add event handler to manage specific behaviour. [ ] a task list item just parses to label with input. What do you think? Also we could think about wrapper around this checkboxes.

IMO - something like this would be good as an extension.

@chjj chjj referenced this issue Jan 17, 2013

Closed

gfm-task-lists #111

1 of 5 tasks complete

another option maybe would be to render them as unicode entities since there's no implied interaction...

http://www.fileformat.info/info/unicode/char/2610/index.htm
http://www.fileformat.info/info/unicode/char/2611/index.htm

velsa commented Jan 17, 2013

But it would require a new markdown format for checkboxes, which is non standard even in gfm mode.
I.e. [ ] for unchecked and [x] or [v] for checked
Could be nice for showing todo lists with static marks..

I think this actually is useful, even in contexts where an HTML checkbox doesn't make sense.

+1 for generating unicode characters as in here and here.

In non-HTML environments, editors could choose to draw them as a bulleted list with strikethroughs for completed items.

I've been hoping for someone to cross Taskpaper's text-based todo lists with Markdown for a little while, and this seems a little more user-friendly. Taskpaper requires you to add an @done tag to the end of each line, which makes scanning plaintext to see what is done w/o syntax highlighting somewhat difficult. The GFM syntax is arguably more readable.

Yes, Github uses this feature to power some crazy custom features for Github Issues, but it's also generally useful.

Contributor

Mithgol commented Feb 19, 2013

Note: in GFM, [ ] (or [x]) has to be in the very beginning of a list item. (Only a whitespace may happen between the checkbox and the preceding bullet.) Bullets are not displayed for these lists (even for their items that do not start with checkboxes).

This was referenced May 29, 2013

Closed
Contributor

Mithgol commented Jul 3, 2013

GitHub has announced (in June 25) that task lists are supported in gists as well as in repositories.

This announcement widens (and generalizes) the area of their application, making more reasonable to support these lists in GFM-flavoured mode of marked.

I'm curious, though. If you do this, and there's no commensurate back-end to handle them, what good are they besides eye-candy? In Github, there is a running JavaScript observer waiting for you to click one of these, and backing that choice to a persistence layer somehow. Marked doesn't provide that, so who will?

Walter

On Jul 3, 2013, at 1:33 AM, Mithgol wrote:

A week ago GitHub announced that task lists are supported in gists as well as in repositories.

This announcement widens (and generalizes) the area of their application, making more reasonable to support these lists in GFM-flavoured mode of marked.


Reply to this email directly or view it on GitHub.

Contributor

Mithgol commented Jul 3, 2013

An eye-candy would already be as good as on GitHub where you cannot click other people's task lists (unless you are an owner of the repo).

and there's no commensurate back-end to handle them

@walterdavis Marked doesn't provide any backend service at all. All it does is parse out HTML. Without a backend you can't save anything anyway. Even if it's just an H1, it doesn't persist in any way.

Right. That was my understanding as well, and I was asking to make the point that adding the GFM checkboxes only does half the job.

Walter

On Jul 3, 2013, at 12:37 PM, Oscar Godson wrote:

and there's no commensurate back-end to handle them

@walterdavis Marked doesn't provide any backend service at all. All it does is parse out HTML. Without a backend you can't save anything anyway. Even if it's just an H1, it doesn't persist in any way.


Reply to this email directly or view it on GitHub.

chjj added a commit that referenced this issue Feb 26, 2014

Owner

chjj commented Feb 26, 2014

Added a rough implementation for task lists that's been sitting in my todo list file for several months. Let's see how it works on master for now.

cc @OscarGodson @walterdavis @Mithgol

chjj added a commit that referenced this issue Mar 10, 2014

chjj added a commit that referenced this issue Mar 10, 2014

styfle commented Apr 26, 2014

+1
Even if this doesn't make it to the gfm flag, an extension would be great.

evanwon commented May 6, 2014

@chjj What was the reason for the revert?

+1 for unicode characters rather than checkboxes (for renderer default behaviour). Anyone can customize it to add checkboxes with the current api

renderer.whateverNameHasTheFeature = function customizeIt( ){ /* ... */ };

@chjj Maybe the implementation makes more sense thinking on a inline level method rather than a block level method? I've noticed the check marks can be ommited on any list items:

  • Completed
  • Not Completed
  • Not a task at all
  • Another task
  • Not a task at all

This leads me to think marked doesn't need a new inline level method at all, featuring an enhancement to the current block-level listitem

listitem(string text, undefined|bool check)

That is

  • true for [x]
  • false for [ ]
  • undefined if "checkmark" is not present or gfm is disabled or whatever-option is disabled

Does this make sense?

So it's quite easy to build your own. Here's one I'm using in vue-github:

var renderer = new marked.Renderer();
renderer.listitem = function(text) {
if (/^\s*\[[x ]\]\s*/.test(text)) {
text = text
  .replace(/^\s*\[ \]\s*/, '<i class="empty checkbox icon"></i> ')
  .replace(/^\s*\[x\]\s*/, '<i class="checked checkbox icon"></i> ');
    return '<li style="list-style: none">' + text + '</li>';
  } else {
    return '<li>' + text + '</li>';
  }
};

Changing it to output the Unicode characters should be trivial.

dwendt commented Oct 31, 2014

hey, any info on why the rough impl got reverted? relying on something that uses marked, I think it'd be nice to have this gfm feature upstream(even if it's doing nothing more than producing enabled/disabled checkbox html) instead of as an extension. check-lists are useful in a variety of writing environments that aren't github.

@cben cben referenced this issue in huboard/huboard Dec 3, 2014

Open

GFM checklist not rendered in Preview #455

toolbear commented Jan 3, 2015

👍

For another perspective, I'm coming at this as a user of marked's lexer. My use case is extracting complete and incomplete tasks from README.md, TODO.md, and GitHub pull request descriptions.

I'm hoping task list support isn't implemented exclusively in the renderer. Something akin to this from the lexer:

markdown       | `completed` property of | `typeof token.completed` | `task` property of
               | list_item_start token   |                          | corresponding text token
---------------|-------------------------|--------------------------|------------------------
* an item      |                         | 'undefined'              | an item
* [x] did it   | true                    | 'boolean'                | did it
* [v] this too | true                    | 'boolean'                | this too
* [ ] to-do    | false                   | 'boolean'                | to-do

This would be a non-breaking change. Custom renderers can opt-in by testing for a defined value of the completed property. We avoid a proliferation of "strip off the ballot box markdown" code by providing the already stripped text in the task property.

Example

doc = """
* [x] my completed task
* [ ] my incomplete task
"""

coffee> new Lexer({ gfm: false }).lex(doc)
[ { type: 'list_start', ordered: false },
  { type: 'list_item_start' },
  { type: 'text',
    text: '[x] my completed task' },
  { type: 'list_item_end' },
  { type: 'list_item_start' },
  { type: 'text',
    text: '[ ] my incomplete task' },
  { type: 'list_item_end' },
  { type: 'list_end' },
  links: {} ]

coffee> new Lexer({ gfm: true }).lex(doc)
[ { type: 'list_start', ordered: false },
  { type: 'list_item_start', completed: true },
  { type: 'text',
    text: '[x] my completed task',
    task: 'my completed task' },
  { type: 'list_item_end' },
  { type: 'list_item_start', completed: false },
  { type: 'text',
    text: '[ ] my incomplete task',
    task: 'my incomplete task' },
  { type: 'list_item_end' },
  { type: 'list_end' },
  links: {} ]

This is a pretty big request on my part. If you're favorable to the idea of changing the lexer I'd be happy to work on a PR for just that part, leaving rendering alone for now.

anaran commented Jan 19, 2015

github task list support is not implemented yet, right?

It's kind of hard to follow the situation about them.

This issue calling them To do lists does not help either with explorability of the subject matter.

Rename it to github task lists please.

dwendt commented Jan 20, 2015

It's a GFM task list if you want to be pedantic. Simply "GitHub task list" implies some integration into github's systems(which is undesirable for something as simple as a mark/unmarked checkbox list).

If you really want to be pedantic, it is integrated into GitHub's systems: it has special rendering in all places Markdown is accepted; in a few places the task list is interactive.

jhollingworth added a commit to jhollingworth/marked that referenced this issue May 6, 2015

Github Task Lists
Add support for Github Task Lists under the gfm flag.

Changes to API

* list(*string* body, *boolean* ordered, *boolean* taskList)
* listitem(*string* text, [*boolean* checked]).

`checked` is defined when you have a list item which starts with `[ ] ` or
`[x] `.If defined its a boolean depending on whether the `x` is
present. When checked is defined we add a input type type `checkbox` to
the list item and add the class `task-list-item-checkbox`.

`taskList` is true if a list has any list items where `checked` is
defined. When true we add the class `task-list` to the list.

Resolves chjj/marked#107

I've just opened #587 which should resolve this issue

clehner added a commit to ssbc/marked that referenced this issue Apr 24, 2016

Github Task Lists
Add support for Github Task Lists under the gfm flag.

Changes to API

* list(*string* body, *boolean* ordered, *boolean* taskList)
* listitem(*string* text, [*boolean* checked]).

`checked` is defined when you have a list item which starts with `[ ] ` or
`[x] `.If defined its a boolean depending on whether the `x` is
present. When checked is defined we add a input type type `checkbox` to
the list item and add the class `task-list-item-checkbox`.

`taskList` is true if a list has any list items where `checked` is
defined. When true we add the class `task-list` to the list.

Resolves chjj/marked#107

Fogetti pushed a commit to Fogetti/marked that referenced this issue May 13, 2016

Fogetti pushed a commit to Fogetti/marked that referenced this issue May 13, 2016

Fogetti pushed a commit to Fogetti/marked that referenced this issue May 13, 2016

Fogetti pushed a commit to Fogetti/marked that referenced this issue May 13, 2016

gilbert added a commit to reactorcore/marked that referenced this issue Sep 8, 2016

Github Task Lists
Add support for Github Task Lists under the gfm flag.

Changes to API

* list(*string* body, *boolean* ordered, *boolean* taskList)
* listitem(*string* text, [*boolean* checked]).

`checked` is defined when you have a list item which starts with `[ ] ` or
`[x] `.If defined its a boolean depending on whether the `x` is
present. When checked is defined we add a input type type `checkbox` to
the list item and add the class `task-list-item-checkbox`.

`taskList` is true if a list has any list items where `checked` is
defined. When true we add the class `task-list` to the list.

Resolves chjj/marked#107

Reificator commented Sep 13, 2016 edited

👍 for unicode substitution. I use a great many things that take advantage of marked, including Visual Studio Code's markdown preview. Would love the ability to render a ☐ and a ☑ and maybe even a ☒.

I often use markdown that includes lists of tasks, even for things that don't end up on Github. Due to using Github I expected this to just work out of the box.

https://en.wikipedia.org/wiki/Checkbox#Unicode

jungor commented Feb 6, 2017

This works for me...

renderer.listitem = function (text, level) {
  let isCheckedTaskItem = checkedTaskItemPtn.test(text);
  let isUncheckedTaskItem = uncheckedTaskItemPtn.test(text);
  if (isCheckedTaskItem) text = text.replace(checkedTaskItemPtn, '<i class="fa fa-check-square" aria-hidden="true"></i>')+'\n';
  if (isUncheckedTaskItem) text = text.replace(uncheckedTaskItemPtn, '<i class="fa fa-square-o" aria-hidden="true"></i>')+'\n';
  let cls = (isCheckedTaskItem || isUncheckedTaskItem) ? ' class="todo-list-item"' : '';
  return '<li'+ cls + '>' + text + '</li>\n';
};

I use icons from fontawesome, but can just use html checkbox simply, of course. Don't remember to create you own marked.Renderer instance and make config right.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment