From 5cca7e4bfb175d511f9b40c467689caf454cedb2 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 4 Jul 2022 01:04:03 +0200
Subject: [PATCH] handle correctly click outside to exit text editing mode

---
 .../wrapper-component/wrapper-component.tsx   |  4 ----
 .../shared/use-track-selected-element.ts      | 22 +++++++++++++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/app/canvas/features/wrapper-component/wrapper-component.tsx b/app/canvas/features/wrapper-component/wrapper-component.tsx
index 22d053fa1e..a316969df0 100644
--- a/app/canvas/features/wrapper-component/wrapper-component.tsx
+++ b/app/canvas/features/wrapper-component/wrapper-component.tsx
@@ -70,10 +70,6 @@ export const WrapperComponentDev = ({
     "data-id": instance.id,
     ref: refCallback,
     onClick: (event: MouseEvent) => {
-      // Prevent click handler for element selection
-      if (isEditing) {
-        event.stopPropagation();
-      }
       if (instance.component === "Link") {
         event.preventDefault();
       }
diff --git a/app/canvas/shared/use-track-selected-element.ts b/app/canvas/shared/use-track-selected-element.ts
index 5309d29c0d..15529e9b5f 100644
--- a/app/canvas/shared/use-track-selected-element.ts
+++ b/app/canvas/shared/use-track-selected-element.ts
@@ -61,12 +61,26 @@ export const useTrackSelectedElement = () => {
       // Notify in general that document was clicked
       // e.g. to hide the side panel
       publish<"clickCanvas">({ type: "clickCanvas" });
+      let element = event.target as HTMLElement;
 
-      if (!(event.target instanceof HTMLElement)) return;
+      // If we click on an element that is not a component, we search for a parent component.
+      if (element.dataset.component === undefined) {
+        const instanceElement =
+          element.closest<HTMLElement>("[data-component]");
+        if (instanceElement === null) {
+          return;
+        }
+        element = instanceElement;
+      }
 
-      const { id, dataset } = event.target;
+      const { id, dataset } = element;
 
-      // It's a second click in a double click.
+      // Enable clicking inside of content editable without trying to select the element as an instance.
+      if (editingInstanceIdRef.current === id) {
+        return;
+      }
+
+      // It's the second click in a double click.
       if (event.detail === 2) {
         const component = dataset.component as Instance["component"];
         if (component === undefined || component in primitives === false) {
@@ -76,7 +90,7 @@ export const useTrackSelectedElement = () => {
         // When user double clicks on an inline instance, we need to select the parent instance and put it indo text editing mode.
         // Inline instances are not directly, only through parent instance.
         if (isInlineOnly) {
-          const parentId = event.target.parentElement?.id;
+          const parentId = element.parentElement?.id;
           if (parentId) {
             selectInstance(parentId);
             setEditingInstanceId(parentId);