diff --git a/src/components/App.tsx b/src/components/App.tsx index ea7c73abda..010fe929af 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -917,8 +917,16 @@ class App extends React.Component { window.removeEventListener(EVENT.RESIZE, this.onResize, false); window.removeEventListener(EVENT.UNLOAD, this.onUnload, false); window.removeEventListener(EVENT.BLUR, this.onBlur, false); - window.removeEventListener(EVENT.DRAG_OVER, this.disableEvent, false); - window.removeEventListener(EVENT.DROP, this.disableEvent, false); + this.excalidrawContainerRef.current?.removeEventListener( + EVENT.DRAG_OVER, + this.disableEvent, + false, + ); + this.excalidrawContainerRef.current?.removeEventListener( + EVENT.DROP, + this.disableEvent, + false, + ); document.removeEventListener( EVENT.GESTURE_START, @@ -987,8 +995,16 @@ class App extends React.Component { window.addEventListener(EVENT.RESIZE, this.onResize, false); window.addEventListener(EVENT.UNLOAD, this.onUnload, false); window.addEventListener(EVENT.BLUR, this.onBlur, false); - window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false); - window.addEventListener(EVENT.DROP, this.disableEvent, false); + this.excalidrawContainerRef.current?.addEventListener( + EVENT.DRAG_OVER, + this.disableEvent, + false, + ); + this.excalidrawContainerRef.current?.addEventListener( + EVENT.DROP, + this.disableEvent, + false, + ); } componentDidUpdate(prevProps: AppProps, prevState: AppState) { diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 8bfb5ed0b8..5c41c884a1 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -64,6 +64,10 @@ Please add the latest change on the top under the correct section. The `Appearance` type is now removed and renamed to `Theme` so `Theme` type needs to be used. +### Fixes + +- Scope drag and drop events to Excalidraw container to prevent overriding host application drag and drop events. + ### Build - Remove `file-loader` so font assets are not duplicated by webpack and use webpack asset modules for font generation [#4380](https://github.com/excalidraw/excalidraw/pull/4380)