fix: copy/past and focus shortcuts don't require elements to be focused

#562

Author: Julien Moreau-Mathis

editor/src/editor/layout/graph.tsx

@@ -31,6 +31,7 @@ import {
 } from "../../ui/shadcn/ui/context-menu";
 
 import { isSound } from "../../tools/guards/sound";
+import { isDomTextInputFocused } from "../../tools/dom";
 import { isSceneLinkNode } from "../../tools/guards/scene";
 import { updateAllLights } from "../../tools/light/shadows";
 import { getCollisionMeshFor } from "../../tools/mesh/collision";
@@ -129,8 +130,8 @@ export class EditorGraph extends Component<IEditorGraphProps, IEditorGraphState>
 		onTextureModifiedObservable.add((texture) => this._handleNodeModified(texture));
 		onParticleSystemModifiedObservable.add((particleSystem) => this._handleNodeModified(particleSystem));
 
-		document.addEventListener("copy", () => this.state.isFocused && this.copySelectedNodes());
-		document.addEventListener("paste", () => this.state.isFocused && this.pasteSelectedNodes());
+		document.addEventListener("copy", () => !isDomTextInputFocused() && this.copySelectedNodes());
+		document.addEventListener("paste", () => !isDomTextInputFocused() && this.pasteSelectedNodes());
 	}
 
 	public render(): ReactNode {

editor/src/editor/layout/preview.tsx

@@ -42,6 +42,7 @@ import { Editor } from "../main";
 import { isSound } from "../../tools/guards/sound";
 import { Tween } from "../../tools/animation/tween";
 import { isVector3 } from "../../tools/guards/math";
+import { isDomTextInputFocused } from "../../tools/dom";
 import { isNodeLocked } from "../../tools/node/metadata";
 import { registerUndoRedo } from "../../tools/undoredo";
 import { initializeHavok } from "../../tools/physics/init";
@@ -189,10 +190,7 @@ export class EditorPreview extends Component<IEditorPreviewProps, IEditorPreview
 		ipcRenderer.on("gizmo:rotation", () => this.setActiveGizmo("rotation"));
 		ipcRenderer.on("gizmo:scaling", () => this.setActiveGizmo("scaling"));
 
-		document.addEventListener("copy", () => this.state.isFocused && this.props.editor.layout.graph.copySelectedNodes());
-		document.addEventListener("paste", () => this.state.isFocused && this.props.editor.layout.graph.pasteSelectedNodes());
-
-		ipcRenderer.on("preview:focus", () => this.state.isFocused && this.focusObject());
+		ipcRenderer.on("preview:focus", () => !isDomTextInputFocused() && this.focusObject());
 		ipcRenderer.on("preview:edit-camera", () => this.props.editor.layout.inspector.setEditedObject(this.props.editor.layout.preview.scene.activeCamera));
 
 		onTextureAddedObservable.add(() => checkProjectCachedCompressedTextures(props.editor));

editor/src/tools/dom.ts

@@ -29,3 +29,15 @@ export function isDomElementDescendantOf(element: HTMLElement, parent: HTMLEleme
 
 	return false;
 }
+
+/**
+ * Returns wether or not the currently focused DOM element is any text input.
+ */
+export function isDomTextInputFocused() {
+	const element = document.activeElement as HTMLInputElement | HTMLTextAreaElement;
+	if (!element) {
+		return false;
+	}
+
+	return (element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.isContentEditable) && !element.readOnly && !element.disabled;
+}