How to approach clickable checklist items?

[johannesjo]

I would like to make my checklist - [x] bla bla clickable so that the click toggles the checkmark. I tried adding a onclick handler to the listitem renderer, but that is stripped away. Any suggestions how I can approach this?

[UziTech]

You can override the checkbox renderer and remove the disabled attribute

marked/src/Renderer.ts

Lines 101 to 105 in 17ca80c

	checkbox({ checked }: Tokens.Checkbox): string {
	return '<input '
	+ (checked ? 'checked="" ' : '')
	+ 'disabled="" type="checkbox">';
	}

[johannesjo]

Thanks for your reply!! The problem is that I also need to change the underlying model. Changing the view value would not be enough unfortunately.

[UziTech]

If you need to add a click handler you can do that after running through marked. Something like:

document.body.append(marked.parse(markdown));

for(const checkbox of document.queryAll("li input[type=checkbox]")) {
  checkbox.addEventListener("change", doSomething);
}

[johannesjo]

Thank you. It is a bit more complicated in my case as I am using angular and ngx-markdown, but that is probably the approach I need to go for.

[johannesjo]

I build the logic for attaching a click handler. Does anybody have any suggestions on how to identify and change the relevant markdown?

[johannesjo]

This seems to work:

private _handleCheckboxClick(ev: MouseEvent): void {
    const allCheckboxes =
      this.previewEl?.element.nativeElement.querySelectorAll('.checkbox-wrapper');

    const checkIndex = Array.from(allCheckboxes || []).findIndex(
      (el) => el === ev.target,
    );
    if (checkIndex !== -1 && this._model) {
      // Find all to-do items in the markdown string
      const todoItems = this._model.match(/- \[[ x]\] .*/g);

      if (todoItems && todoItems[checkIndex]) {
        // Replace the value at checkIndex with the opposite value
        const updatedItem = todoItems[checkIndex].includes('[ ]')
          ? todoItems[checkIndex].replace('[ ]', '[x]')
          : todoItems[checkIndex].replace('[x]', '[ ]');

        // Update the markdown string
        this._model = this._model.replace(todoItems[checkIndex], updatedItem);
        console.log(this._model);
      }
    }
  }