fix: only handle cut/paste events inside excalidraw (#3484)

* fix: only hand cut/paste events inside excalidraw

* changelog

* check if excalidraw is active for copy event

* check if active element is part of excalidraw

src/components/App.tsx

@@ -1153,7 +1153,10 @@ class App extends React.Component<AppProps, AppState> {
   // Copy/paste
 
   private onCut = withBatchedUpdates((event: ClipboardEvent) => {
-    if (isWritableElement(event.target)) {
+    const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
+      document.activeElement,
+    );
+    if (!isExcalidrawActive || isWritableElement(event.target)) {
       return;
     }
     this.cutAll();
@@ -1161,22 +1164,10 @@ class App extends React.Component<AppProps, AppState> {
   });
 
   private onCopy = withBatchedUpdates((event: ClipboardEvent) => {
-    const activeSelection = document.getSelection();
+    const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
-    // if there's a selected text is outside the component, prevent our copy
+      document.activeElement,
-    // action
+    );
-    if (
+    if (!isExcalidrawActive || isWritableElement(event.target)) {
-      activeSelection?.anchorNode &&
-      // it can happen that certain interactions will create a selection
-      // outside (or potentially inside) the component without actually
-      // selecting anything (i.e. the selection range is collapsed). Copying
-      // in such case wouldn't copy anything to the clipboard anyway, so prevent
-      // our copy handler only if the selection isn't collapsed
-      !activeSelection.isCollapsed &&
-      !this.excalidrawContainerRef.current!.contains(activeSelection.anchorNode)
-    ) {
-      return;
-    }
-    if (isWritableElement(event.target)) {
       return;
     }
     this.copyAll();
@@ -1239,6 +1230,13 @@ class App extends React.Component<AppProps, AppState> {
     async (event: ClipboardEvent | null) => {
       // #686
       const target = document.activeElement;
+      const isExcalidrawActive = this.excalidrawContainerRef.current?.contains(
+        target,
+      );
+      if (!isExcalidrawActive) {
+        return;
+      }
+
       const elementUnderCursor = document.elementFromPoint(cursorX, cursorY);
       if (
         // if no ClipboardEvent supplied, assume we're pasting via contextMenu

src/packages/excalidraw/CHANGELOG.md

@@ -38,6 +38,7 @@ Please add the latest change on the top under the correct section.
 
 ### Fixes
 
+- Only handle cut/paste events inside excalidraw [#3484](https://github.com/excalidraw/excalidraw/pull/3484).
 - Make history local to a given Excalidraw instance. This fixes a case where history was getting shared when you have multiple Excalidraw components on the same page [#3481](https://github.com/excalidraw/excalidraw/pull/3481).
 
 - Use active Excalidraw component when editing text. This fixes a case where text editing was not working when you have multiple Excalidraw components on the same page [#3478](https://github.com/excalidraw/excalidraw/pull/3478).