[Bug] Brackets not rendered as checkbox but disappear (Vue 3 + gfm)

[kkalle]

Initial checklist

• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected packages and versions

7.2.1

Link to runnable example

No response

Steps to reproduce

Code:

<!-- Milkdown.vue -->
<script setup>
import { Milkdown, useEditor } from "@milkdown/vue";
import { defaultValueCtx, Editor, rootCtx } from "@milkdown/core";
import { replaceAll } from "@milkdown/utils";
import { commonmark } from "@milkdown/preset-commonmark";
import { gfm } from "@milkdown/preset-gfm";
import { defineProps, watch } from "vue";
import "prosemirror-view/style/prosemirror.css";

const props = defineProps({
  markdown: {
    type: String,
    default: "",
  },
});

const editor = useEditor((root) => {
  return Editor.make()
    .config((ctx) => {
      ctx.set(rootCtx, root);
      ctx.set(defaultValueCtx, props.markdown);
    })
    .use(commonmark)
    .use(gfm);
});

</script>

<template>
  <Milkdown />
</template>

Type this in the editor:
- [ ] Task 1

Expected behavior

Show bullet point with checkbox and text "Task 1"

Actual behavior

Brackets [ ] disappear immediately after hitting space after the brackets. There is no checkbox.

HTML rendering changes to this:
<li data-item-type="task" data-label="•" data-list-type="bullet" data-spread="false" data-checked="false"><p>Task 1</p></li>

Runtime

Chrome

OS

macOS

Build and bundle tools

Vite

[Saul-Mirone]

It's by design, you need to write your own node view renderer like what we did in documentation website.

[kkalle]

OK, thanks @Saul-Mirone. Could you point me to the right place in the documentation, please? I could not find this in the docs.

[Saul-Mirone]

https://github.com/Milkdown/website/blob/main/src/components/playground-editor/editor-component/ListItem.tsx

[Saul-Mirone]

https://github.com/Milkdown/vscode/blob/main/src/view/components/list-item.ts

[knownasilya]

Tried the provided code, nodeViewFactory is called, but nothing renders and the component passed is not in the DOM. Not sure what's up, using 7.2.4 for all deps. I'm doing this in React, not vue