Hello,
I’m still trying to learn about ProseMirror and the various components that fit together. One of the things I’ve been trying to get working is to add a checkbox in a document.
I’m using the dino example as a starting point. Not sure what parts I’m doing incorrectly, but I believe I created:
- An input rule that recognizes “[]”, which I want to be converted into a checkbox.
- A menu option under the “Insert” section for a checkbox node.
- A “checkbox” node, and added it as a possible node under a “document”'s content.
I’ve defined a checkbox nodespec like so:
checkbox: {
defining: true,
attrs: {"checked": {default: ""}},
parseDOM: [{tag: 'input', attrs: {"type": "checkbox", "checked": "", "class": "myCheckbox"}}],
toDOM: node => ["input", {"type": "checkbox", "class": "myCheckbox", "checked": node.attrs.checked}]
}
For the Insert Menu item, I’ve written it like so:
let addCheckbox = function(state, dispatch) {
let {$from} = state.selection, index = $from.index()
if (!$from.parent.canReplaceWith(index, index, orgSchema.nodes.checkbox)) {
console.log("Can't insert checkbox")
return false
}
if (dispatch) {
dispatch(state.tr.replaceSelectionWith(orgSchema.nodes.checkbox.create()))
console.log("Created checkbox")
}
return true
}
let menu = buildMenuItems(schema)
menu.insertMenu.content.push(new MenuItem({
title: "Insert Checkbox",
label: "Checkbox",
enable(state) { return true }, // TODO: Figure out how this works...
run: addCheckbox
}))
Currently, whenever I try inserting via the menu, I just get the log message that I can’t insert a checkbox. I create a checkbox in straight HTML, but when Prosemirror interprets the document, the checkbox seems to be removed.
My initial thought is that I’m still defining the schema incorrectly… since the checkbox doesn’t appear on load. I’m not exactly sure what’s going incorrect about it. Any suggestions as to what I need to look into?
Here is a fuller code example of what I’ve been doing: https://glitch.com/edit/#!/obtainable-steel
(Sorry if it’s kind of messy)
Thanks for the help!