I've been usage from handleDrop form TipTap (ProseMirror) in oder to identify which component is then set the specificed node.
For example:
const imageTypes = ["gif", "png", "jpeg", "jpg", "bmp", "webp"];
if (imageTypes.includes(type)) {
that.editor
.chain()
.focus()
.setCustomImage({ droppedFile: event.dataTransfer.files[0] })
.run();
}
if the drop component is image, will set the custom image node then, inside node, is manipulate the image (send to bucket and put in on).
However, recently it didn't worked anymore.
There are two wierd trouble:
1- According to the first sent video, the logical works on (the node is set up), however, after any modification in Editor the node disappear (erro): index.js:830 Uncaught RangeError: Applying a mismatched transaction
at EditorState.applyInner (index.js:830:19)
at EditorState.applyTransaction (index.js:794:45)
at EditorState.apply (index.js:770:21)
at Editor2.dispatchTransaction (Editor.ts:341:30)
at EditorView.dispatch (index.js:5257:33)
at readDOMChange (index.js:4536:18)
at DOMObserver.handleDOMChange (index.js:4885:81)
at DOMObserver.flush (index.js:4377:18)
at DOMObserver.onSelectionChange (index.js:4308:14)
2- Not even the node is set (second video). Erro:
RangeError: Index 2 out of range for <paragraph, paragraph>
at Fragment.child (index.js:239:19)
at Fragment.findIndex (index.js:288:28)
at Node.nodeAt (index.js:1327:50)
at setNodeMarkup (index.js:1088:23)
at Transaction.setNodeMarkup (index.js:1928:9)
at NodeView.ts:255:10
at command.ts:15:10
at Object.method [as com
This is not the Tiptap bug tracker, so if Tiptap is needed to reproduce your issue, this is the wrong place for it. If this can be reproduced with (reasonably idiomatic) ProseMirror code, feel free to reopen.
Hey, dears!
I've been usage from handleDrop form TipTap (ProseMirror) in oder to identify which component is then set the specificed node. For example: const imageTypes = ["gif", "png", "jpeg", "jpg", "bmp", "webp"]; if (imageTypes.includes(type)) { that.editor .chain() .focus() .setCustomImage({ droppedFile: event.dataTransfer.files[0] }) .run(); } if the drop component is image, will set the custom image node then, inside node, is manipulate the image (send to bucket and put in on). However, recently it didn't worked anymore. There are two wierd trouble: 1- According to the first sent video, the logical works on (the node is set up), however, after any modification in Editor the node disappear (erro): index.js:830 Uncaught RangeError: Applying a mismatched transaction at EditorState.applyInner (index.js:830:19) at EditorState.applyTransaction (index.js:794:45) at EditorState.apply (index.js:770:21) at Editor2.dispatchTransaction (Editor.ts:341:30) at EditorView.dispatch (index.js:5257:33) at readDOMChange (index.js:4536:18) at DOMObserver.handleDOMChange (index.js:4885:81) at DOMObserver.flush (index.js:4377:18) at DOMObserver.onSelectionChange (index.js:4308:14) 2- Not even the node is set (second video). Erro: RangeError: Index 2 out of range for <paragraph, paragraph> at Fragment.child (index.js:239:19) at Fragment.findIndex (index.js:288:28) at Node.nodeAt (index.js:1327:50) at setNodeMarkup (index.js:1088:23) at Transaction.setNodeMarkup (index.js:1928:9) at NodeView.ts:255:10 at command.ts:15:10 at Object.method [as com
https://github.com/ProseMirror/prosemirror/assets/101409366/45ed8d58-080b-40a4-9b2b-376f3a29a47c
mand] (CommandManager.ts:39:43) at VueNodeView.updateAttributes (NodeView.ts:252:26) at Proxy.updateAttributes (VueNodeViewRenderer.ts:81:51)
What I figure out: just is setup the node when has a paragraph with content previously (in second video).
Could you help me? Need more information?
Thank a lot!