Can I have new task list in Menu/Slash button. Command is missing in playground website

[sytolk]

How can I add insertTaskListCommand here:
https://github.com/Milkdown/website/blob/main/src/components/playground-editor/editor-component/ListItem.tsx#L4

like this for diagram:

milkdown/packages/plugin-diagram/src/node.ts

Line 122 in aabeffa

export const insertDiagramCommand = $command('InsertDiagramCommand', () => () => setBlockType(diagramSchema.type(), { identity: getId() }))

[zgrybus]

@sytolk
Just simply use callCommand

useCallEditorCommand.tsx hook

export const useCallEditorCommand = () => {
  const [loading, getEditor] = useInstance();

  const onCallCommand = useCallback(<T,>(command: CmdKey<T>, payload?: T | undefined) => {
    const editor = getEditor();
    if (loading || !editor) {
      return;
    }
    editor.action(callCommand(command, payload));
  }, [loading, getEditor]);
 
  return { onCallCommand };
}

and.. call it:

export const Menu: React.FC = () => {
 const { onCallCommand } = useCallEditorCommand();
 
 return (
  <div>
   <button onClick={() => onCallCommand(liftListItemCommand.key)}>Insert Task List</button>
  </div>
 )
}

[sytolk]

Thanks @zgrybus but nothing happened if I call liftListItemCommand.key import { liftListItemCommand } from '@milkdown/preset-commonmark'
Maybe it's not the right command if I want to insert * [ ] in milkdown content

[zgrybus]

@sytolk Sorry, you should call insertTaskListCommand. I misspelled insertTaskListCommand with liftListItemCommand

[sytolk]

where is insertTaskListCommand ? it missing in @milkdown/preset-commonmark

[zgrybus]

What exactly you want to archive?
I wrote you what you need to do to invoke the command from the code level. I thought that was your question.

[sytolk]

I want to have insertTaskListCommand for the custom ListItem component https://github.com/Milkdown/website/blob/main/src/components/playground-editor/editor-component/ListItem.tsx#L4
but it's appears that implementation for this command is missing. To implement this command it's need schema and so on like diagramSchema

ListItem or ToDo list with checkboxes is not part of milkdown library. It exist only in webpage. Look at: #991 (comment)

[zgrybus]

Ohh I understand :)
I believe that you will need to write your own wrapper for https://github.com/landakram/remark-task-list.

remark-task-list-plugin.ts

export const remark taskListPlugin = $remark(() => taskListPlugin)

and then you will need to add taskListSchema and taskListAttr.
You may inspire from @milkdown/preset-commonmark/src/mark/link.ts.

I hope it helps