Hi,
At this moment, I am trying to create an adaptive menubar in ProseMirror. I am looking for the possibility to enable/buttons in my adaptive menubar depending on which node you are. For example: if you are within the ‘ul’ tag, I would like to enable the ‘li’ button, so that I can add some ‘li’ nodes nested within the ‘ul’ node. I know that the ‘select-attribute’ in ‘MenuItem’ determines if the button is enabled or not, but how do I define (in the schema?) that the ‘li’-button only appear when you are within the ‘ul’-node?
By using the code in project ‘prosemirror-example-setup’, I succeeded to create two (passive) buttons in my adaptive menubar. For now: the two buttons always appear in my menubar, with no intelligation.
(Actually, there is another problem: I don’t succeed to nest the nodes in a proper way… the ‘ul’-nodes and the ‘li’-nodes are both always on the basic level)
At first, I created some nodes in my schema.js, as can be seen here below:
const nodes = {
ul: {group: "block", content: "li+", parseDOM: [{tag: "ul"}],
toDOM() {
return ["ul" ,0]
}},
li: {group: "block", content: "inline<_>*", parseDOM: [{tag: "li"}],
toDOM() {
return ["li" ,0]
}}
}
And, this is my adaptive menubar:
let myMenu = menu.menuBar({
floating: true,
content:
[
[
new MenuItem({
title: "ul",
label: "ul",
select(state) {
return canInsert(state, schema.nodes.ul)
},
run (state, dispatch) {
dispatch(state.tr.replaceSelectionWith(schema.nodes.ul.create()))
}
})
],
[
new MenuItem({
title: "li",
label: "li",
select(state) {
return canInsert(state, schema.nodes.li);
},
run (state, dispatch) {
dispatch(state.tr.replaceSelectionWith(schema.nodes.li.create()))
}
})
]
]
})
function canInsert(state, nodeType, attrs) {
let $from = state.selection.$from
for (let d = $from.depth; d >= 0; d--) {
let index = $from.index(d)
if ($from.node(d).canReplaceWith(index, index, nodeType, attrs)) return true
}
return false
}