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 (
@@ -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={}
@@ -140,7 +141,7 @@ export const InstanceTree = (
);
},
- [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
);
-export const $editingItemId = atom(undefined);
+export const $editingItemSelector = atom(
+ undefined
+);
export const $textEditingInstanceSelector = atom<
undefined | InstanceSelector