Task List checkbox not rendering?

[coreyog]

I'm attempting to render a task list of checkboxes using the following markdown:

- [x] One
- [ ] Two

But the list is rendering as a bulleted list without any checkboxes.

I'm importing and configuring the module as so:

imports: [
...
    MarkdownModule.forRoot({
      markedOptions: {
        provide: MarkedOptions,
        useValue: {
          gfm: true,
          breaks: false,
          pedantic: false,
          smartLists: true,
          smartypants: false,
        },
      },
    }),
...
]

I'm using the markdown component:

<markdown [data]="segment.content"></markdown>

segment.content is a string containing the above markdown.

I tried setting the renderer in options as mentioned in https://github.com/markedjs/marked/issues/107 resulting in a renderer looking like this:

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

Note the debugger line, I found that at that point text already seems to be parsed and included a checkbox: <input checked="" disabled="" type="checkbox"> One. The custom renderer ends up doing nothing but the checkbox is removed somewhere before being added to the page. I tried setting sanitize: false on the options to see if that was removing the checkboxes but there was no change.

I don't get any errors anywhere. How can I fix this?

[jfcere]

Hi @coreyog,

In order to get checkboxes you got to...

• set smartLists: true through MarkdownModule.forRoot()
• disable sanitization using sanitize: SecurityContext.NONE

Note that sanitize: false has been removed a while ago in ngx-markdown v9.0.0.

imports: [
    BrowserModule,
    FormsModule,
    MarkdownModule.forRoot({
      markedOptions: {
         provide: MarkedOptions,
         useValue: {
           gfm: true,
           breaks: false,
           pedantic: false,
           smartLists: true, // enable smartLists
           smartypants: false,
        },
      },
      sanitize: SecurityContext.NONE // disable sanitization
    }),
]

⚡ See StackBlitz Example

[coreyog]

That worked! It looks like it was the sanitize line that I was missing/mis-using. Now it's working as expected.

[thoefler]

How did you manage to get a HTML Form around the input fields? Or how did you use the values from your inputs?