ProseMirror Menu example

1

Hello,

I am trying to customise the ProseMirror menu with the basic-schema, like this: `const mySchema = new Schema({ nodes: addListNodes(schema.spec.nodes, “paragraph block*”, “block”), marks: schema.spec.marks })

window.view = new EditorView(document.querySelector("#editor"), {
    state: EditorState.create({
        doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
        plugins: exampleSetup({
            schema: mySchema,
            menuContent: [[MenuItem(schema.spec.marks.strong)]],
            history: true
        })
    })
})`

But I get the following error: [Vue warn]: Error in mounted hook: "TypeError: undefined is not an object (evaluating 'this.spec = spec')"

Obviously I am doing something wrong. Please bare with me, I just started using ProseMirror and I am still trying to figure out how it works exactly. I must say though, great work ! It is a super powerfull editor :slight_smile:

2

Doesn’t immediately ring a bell (it seems to suggest this is undefined, which is odd). Did you get a backtrace?

3

I am not at my computer currently, I will check the traceback when I am back home. In the meanwhile, did I use the menuContent in the proper way ?

4

Oh, no, not at all, so that’s probably it. See the readme for how you use this—if you want an item for a mark, you’ll want the toggleMarkItem helper function.

5

I am sure U just cant find it, but the toggleMarkItem function is not exported anywhere, is it ?

6

Oh, you are right, it is still mentioned in the docs, but was removed. I’ve fixed that. You can look at menu.js in example-setup for some examples on how to use menu items (specifically, markItem probably does what you want).

7

Thank you so much marijn, using the following code: `const mySchema = new Schema({ nodes: addListNodes(schema.spec.nodes, “paragraph block*”, “block”), marks: schema.spec.marks })

window.view = new EditorView(document.querySelector("#editor"), {
    state: EditorState.create({
        doc: DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
        plugins: exampleSetup({
            schema: mySchema,
            menuContent: [[
                wrapItem(schema.spec.marks.get("strong"), 
                {title: "Toggle strong style", icon: icons.strong})
            ]],
            history: true
        })
    })
})`

I dont get any errors, which is great ! But the Item is not rendered, in others word no icon shows up, do I need to download the right .svg file anywhere ?