handle correctly click outside to exit text editing mode

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();
       }

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);