Toggle elements in tree when selected on right panel

_dev/src/components/tree/Element.vue

@@ -71,13 +71,20 @@ import {
   FieldContent,
 } from "../../core-logic/entities/ComponentContent";
 import { useZoneStore } from "../../core-logic/store/zoneStore.js";
-import { ref, nextTick, computed } from "vue";
+import { ref, nextTick, computed, watch, onMounted } from "vue";
 import Subfields from "./Subfields.vue";
 import Icon from "../Icon.vue";
 import { PrimitiveFieldType } from "../../core-logic/entities/ElementType";
 import { PrimitiveFieldContent } from "../../core-logic/entities/PrimitiveFieldContent";
 import { useNavigationStore } from "../../core-logic/store/navigationStore";
 import { storeToRefs } from "pinia";
+import {
+  findComponentById,
+  findComponentByIdInRepeater,
+  findComponentByIdInSubfields,
+  SearchComponentResult,
+} from "../../core-logic/utils/finder";
+import { Repeater } from "../../core-logic/entities/Repeater";
 
 const { element, children, isDeletable, isMovable, isDuplicable } =
   defineProps<{
@@ -97,6 +104,26 @@ const { selectedElement } = storeToRefs(navigationStore);
 
 const isSelected = computed(() => selectedElement.value?.id === element.id);
 
+const checkToggle = () => {
+  let foundComponent: SearchComponentResult;
+  if (element.type === "repeater")
+    foundComponent = findComponentByIdInRepeater(
+      element as Repeater<FieldContent>,
+      selectedElement.value?.id
+    );
+  if (element.type === "component" || element.type === "block")
+    foundComponent = findComponentByIdInSubfields(
+      element as BlockContent | ComponentContent,
+      selectedElement.value?.id
+    );
+  if (foundComponent) {
+    isCollapsed.value = false;
+  }
+};
+
+watch(selectedElement, checkToggle);
+onMounted(checkToggle);
+
 const deleteMap = {
   block: zoneStore.deleteBlockById,
   component: zoneStore.deleteComponentById,

_dev/src/core-logic/utils/finder.ts

@@ -43,7 +43,7 @@ export const findComponentByIdInBlock = (
   return findComponentByIdInSubfields(tree, id);
 };
 
-const findComponentByIdInSubfields = (
+export const findComponentByIdInSubfields = (
   tree: BlockContent | ComponentContent,
   id: string
 ) => {
@@ -73,15 +73,18 @@ const findComponentByIdInRepeaterFields = (
   }
 };
 
-const findComponentByIdInRepeater = (
-  repeater: Repeater<ComponentContent>,
+export const findComponentByIdInRepeater = (
+  repeater: Repeater<FieldContent>,
   id: string
 ) => {
   for (const field of repeater.sub_elements) {
     // Check if subfield matches
     if (field.id === id) return { node: field, parent: repeater };
     // Else check recursively
-    const foundElement = findComponentByIdInBlock(field, id);
+    const foundElement = findComponentByIdInBlock(
+      field as ComponentContent,
+      id
+    );
     if (foundElement) return foundElement;
   }
 };