How to handle drag-n-drop or paste events

Hello! I could not figure out how to create callback for paste or drag-n-drop events in CodeMirror 6.
I’m trying to handle image paste event. For now I’m using
window.addEventListener('drop', (event: DragEvent) => {}) and
window.addEventListener('paste', (event: ClipboardEvent) => {}).
Thanks in advance!

You can use the domEventHandlers facet to register such handlers. I.e. add something like this to your extensions:

  EditorView.domEventHandlers.of({
    drop(event, view) { ... },
    paste(event, view) { ... }
  })
3 Likes

It doesn’t seem to work。

I try to use

EditorView.domEventHandlers({
    paste() {
        console.log(1);
    }
})

That’s OK

EditorView.domEventHandlers should be EditorView.domEventHandlers.of (missing .of at the end).

And, you need to pass this in the extensions array.

i try this, that throw me an error: TypeError: EditorView.domEventHandlers.of is not a function

EditorView.domEventHandlers.of({
    paste(){
        console.log(1);
    }
}),

You are right, I am sorry for the noise and confusion. It should be EditorView.domEventHandlers like you said.

Arrived here from Google. For completeness, the result of EditorView.domEventHandlers is an extension that should be passed to the CodeMirror instance:

const eventHandlers = CV.EditorView.domEventHandlers({
	paste(event, view) {
		console.log("codeMirror :: paste ::", event);
	}
})

// configure codemirror
this._codeMirror = new CV.EditorView({
	doc: /* ... */,
	extensions: [/* extensions here */, eventHandlers],
})