Utilizing `domEventHandlers` for scroll element events

v6
1

Hi Marijn & CodeMirror team, Thanks for the great editor!

Currently, I use domEventHandlers to handle the drop event, as shown below:

EditorView.domEventHandlers({
  drop() {
    // upload images
  }
});

According to the documentation, these event handlers are registered on the content element. However, my specific requirement is to register the event handler on the scroll element, allowing the entire scrollable area to accept and handle dropped images.

Here’s the approach I’m currently using to achieve this:

view.scrollDOM.addEventListener('drop', (event) => {
  event.preventDefault()
  event.stopPropagation()
  if (event.target !== view.scrollDOM) return

  view.contentDOM.dispatchEvent(new DragEvent('drop', event))
})

This method involves delegating the drop event from the scrollDOM to the contentDOM, and it’s been working well so far. However, I was wondering if there might be a better way to do it.

Thanks!

1 Like
2

Doing it like that, preferably in a view plugin constructor whose destroy method makes sure to unregister the handler, is the recommended way to register handlers like this.

2 Likes
3

Thank you for your response, I will take note of it!