From c76784b7744109225e49a59b27cea430c63628f2 Mon Sep 17 00:00:00 2001 From: zsviczian Date: Wed, 22 Dec 2021 14:25:34 +0100 Subject: [PATCH] fix: Scope drag and drop events to Excalidraw container to prevent overriding the host drag and drop events (#4445) * cross-env * reverting lib https://github.com/excalidraw/excalidraw/issues/4282 * Revert "reverting lib" This reverts commit 840726806a55ac53704024619a498abf767c60cb. * Update package.json * Update App.tsx * Update App.tsx * lint * updated changelog * Update src/packages/excalidraw/CHANGELOG.md Co-authored-by: Aakansha Doshi * Update src/packages/excalidraw/CHANGELOG.md * Move fixes above build header * Update src/packages/excalidraw/CHANGELOG.md * lint Co-authored-by: Aakansha Doshi Co-authored-by: David Luzar --- src/components/App.tsx | 24 ++++++++++++++++++++---- src/packages/excalidraw/CHANGELOG.md | 4 ++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index ea7c73ab..010fe929 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 8bfb5ed0..5c41c884 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)