From 1ac6a9d00a2e209b06e0247ddab6d832a6c8d7cb Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 26 Feb 2024 12:07:06 +0300
Subject: [PATCH] fix: support renaming of instances inside collection (#2947)

Found a bug with renaming because edited instance
is stored as id instead of selector.

## Steps for reproduction

1. create collection
2. try to rename its content
---
 apps/builder/app/builder/shared/commands.ts      |  5 ++---
 apps/builder/app/builder/shared/tree/index.tsx   | 15 ++++++++-------
 apps/builder/app/shared/nano-states/instances.ts |  4 +++-
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/builder/app/builder/shared/commands.ts b/apps/builder/app/builder/shared/commands.ts
index 9e23b33939..3f3d2e071f 100644
--- a/apps/builder/app/builder/shared/commands.ts
+++ b/apps/builder/app/builder/shared/commands.ts
@@ -1,7 +1,7 @@
 import { createCommandsEmitter, type Command } from "~/shared/commands-emitter";
 import {
   $isPreviewMode,
-  $editingItemId,
+  $editingItemSelector,
   $instances,
   $selectedInstanceSelector,
   $textEditingInstanceSelector,
@@ -229,8 +229,7 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
         if (selectedInstanceSelector === undefined) {
           return;
         }
-        const [targetInstanceId] = selectedInstanceSelector;
-        $editingItemId.set(targetInstanceId);
+        $editingItemSelector.set(selectedInstanceSelector);
       },
     },
 
diff --git a/apps/builder/app/builder/shared/tree/index.tsx b/apps/builder/app/builder/shared/tree/index.tsx
index 63e6973643..5b2825e67b 100644
--- a/apps/builder/app/builder/shared/tree/index.tsx
+++ b/apps/builder/app/builder/shared/tree/index.tsx
@@ -13,7 +13,7 @@ import type { Instance } from "@webstudio-is/sdk";
 import { collectionComponent } from "@webstudio-is/react-sdk";
 import {
   $propValuesByInstanceSelector,
-  $editingItemId,
+  $editingItemSelector,
   getIndexedInstanceId,
   $instances,
   $registeredComponentMetas,
@@ -23,6 +23,7 @@ import { useContentEditable } from "~/shared/dom-hooks";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { serverSyncStore } from "~/shared/sync";
 import type { InstanceSelector } from "~/shared/tree-utils";
+import { shallowEqual } from "shallow-equal";
 
 export const InstanceTree = (
   props: Omit<
@@ -32,7 +33,7 @@ export const InstanceTree = (
 ) => {
   const metas = useStore($registeredComponentMetas);
   const instances = useStore($instances);
-  const editingItemId = useStore($editingItemId);
+  const editingItemSelector = useStore($editingItemSelector);
   const propValues = useStore($propValuesByInstanceSelector);
 
   const canLeaveParent = useCallback(
@@ -118,7 +119,7 @@ export const InstanceTree = (
         return <></>;
       }
       const label = getInstanceLabel(props.itemData, meta);
-      const isEditing = props.itemData.id === editingItemId;
+      const isEditing = shallowEqual(props.itemSelector, editingItemSelector);
 
       return (
         <TreeItemBody {...props} selectionEvent="focus">
@@ -129,8 +130,8 @@ export const InstanceTree = (
               updateInstanceLabel(props.itemData.id, val);
             }}
             onChangeEditing={(isEditing) => {
-              $editingItemId.set(
-                isEditing === true ? props.itemData.id : undefined
+              $editingItemSelector.set(
+                isEditing === true ? props.itemSelector : undefined
               );
             }}
             prefix={<MetaIcon icon={meta.icon} />}
@@ -140,7 +141,7 @@ export const InstanceTree = (
         </TreeItemBody>
       );
     },
-    [metas, updateInstanceLabel, editingItemId]
+    [metas, updateInstanceLabel, editingItemSelector]
   );
 
   return (
@@ -149,7 +150,7 @@ export const InstanceTree = (
       canLeaveParent={canLeaveParent}
       getItemChildren={getItemChildren}
       renderItem={renderItem}
-      editingItemId={editingItemId}
+      editingItemId={editingItemSelector?.[0]}
     />
   );
 };
diff --git a/apps/builder/app/shared/nano-states/instances.ts b/apps/builder/app/shared/nano-states/instances.ts
index 7fd15c83b3..c3b2a3421c 100644
--- a/apps/builder/app/shared/nano-states/instances.ts
+++ b/apps/builder/app/shared/nano-states/instances.ts
@@ -8,7 +8,9 @@ export const $selectedInstanceSelector = atom<undefined | InstanceSelector>(
   undefined
 );
 
-export const $editingItemId = atom<undefined | string>(undefined);
+export const $editingItemSelector = atom<undefined | InstanceSelector>(
+  undefined
+);
 
 export const $textEditingInstanceSelector = atom<
   undefined | InstanceSelector