I am trying to implement ProseMirror footnotes. I have followed the example at http://prosemirror.net/examples/footnote/ and I have it working. The editor shows up, I can write a single unformatted footnote, serialize it, and reload it. I can also use the formatting commands from the outer editor to apply formatting to the entire footnote, e.g. italicize the entire contents or bold the entire contents. However, I am stumped at how to
- insert linebreaks
- allow formatting of parts of the footnotes, e.g. italicize some words and not others
I suspect that either I am close, and just need to pass correct arguments to the key functions, or I am more fundamentally misunderstanding how the example sets up the footnote node and the example given does not allow for multiple runs within the footnote node.
I have been trying to add more keybindings to the keymap function in the footnoteView class described in the example:
I tried to add this for linebreaks. I have passed it various arguments that I believed might be the correct target, but none have worked "
Enter": () => splitListItem(schema.nodes.list_item),
I tried to add this for italics. again, I have not been able to figure out the correct arguments
‘Mod-i’: () => toggleMark(schema.marks.em)
open() {
// Append a tooltip to the outer node
let tooltip = this.dom.appendChild(document.createElement("div"))
tooltip.className = "footnote-tooltip"
// And put a sub-ProseMirror into that
this.innerView = new EditorView(tooltip, {
// You can use any node as an editor document
state: EditorState.create({
doc: this.node,
plugins: [keymap({
"Mod-z": () => undo(this.outerView.state, this.outerView.dispatch),
"Mod-y": () => redo(this.outerView.state, this.outerView.dispatch),
//I tried to add this for linebreaks. I have passed it various arguments that I believed might be the correct target, but none have worked
"Enter": () => splitListItem(schema.nodes.list_item),
//I tried to add this for italics. again, I have not been able to figure out the correct arguments
'Mod-i': () => toggleMark(schema.marks.em)
})]
}),
// This is the magic part
dispatchTransaction: this.dispatchInner.bind(this),
handleDOMEvents: {
mousedown: () => {
// Kludge to prevent issues due to the fact that the whole
// footnote is node-selected (and thus DOM-selected) when
// the parent editor is focused.
if (this.outerView.hasFocus()) this.innerView.focus()
}
}
})
}
I have read through the documents and the posts here on discuss that mentioned ‘footnotes’ or ‘nesting’ and I have not found anything that I could use to solve this issue. If anyone can give me the correct arguments for the commands or point me to the part of the documentation that will help me figure out how to do it I’d appreciate it.
Thanks.