From c76784b7744109225e49a59b27cea430c63628f2 Mon Sep 17 00:00:00 2001
From: zsviczian <viczian.zsolt@gmail.com>
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 <aakansha1216@gmail.com>
* Update src/packages/excalidraw/CHANGELOG.md
* Move fixes above build header
* Update src/packages/excalidraw/CHANGELOG.md
* lint
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
Co-authored-by: David Luzar <luzar.david@gmail.com>
---
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 ea7c73abd..010fe929a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -917,8 +917,16 @@ class App extends React.Component<AppProps, AppState> {
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<AppProps, AppState> {
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 8bfb5ed0b..5c41c884a 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)