Hello! This is my first time posting and I’m pretty new to ProseMirror. Thank you for this wonderful library.
I am trying to create a plugin to integrate a pre-existing image picker into ProseMirror. The existing picker is an entirely separate application, accessed by calling window.open
when the user clicks the plugin’s menu item, then broadcasting the user’s selection via window.postMessage
. I have a listener registered to receive the data from that message, and up to that point everything seems to work fine.
The run
method of the menu item adds the message
event listener, stores state.tr.selection
in a variable called currentSelection
(scoped to the plugin module) and opens the popup.
The message
listener receives image data, closes the popup, creates a new image node, and creates a transaction. The transaction is created from the current state (at the time the message
is received) which is accessed using the method found here. The pm-specific stuff looks like this:
let imageData = e.data.imageData,
imageAtts = {src: imageData.id, title: "a title", alt:"an alt"},
newImageNode = schema.nodes.image.create(imageAtts),
state = getState(),
tr = state.tr
currentSelection.replaceWith(tr, newImageNode)
view.dispatch(tr)
view
is the top-level EditorView instance, which is passed to the plugin module after it is instantiated with a function that just goes:
const mountEditorViewToImagePlugin = (viewInstance) => {
view = viewInstance
}
I have tried many variations on the above theme and so far nothing is working. I’ve run into a lot of different errors but the most common one is that the above code throws a RangeError: Position X out of range
. It’s a little baffling because as far as I can tell, ProseMirror is pulling the ranges from the selection. But the selection was generated by ProseMirrror. So I would expect that to be within range.
This seems like it should be a very simple thing (inserting a node into a document) so I spent a solid couple days trying to figure it out myself before posting here - digging through source code, comparing to examples, searching for similar questions here, etc … but I seem to keep running into the same walls. Any help would be greatly appreciated. Thanks!