From dfab99b8d8a1392b052d657a4f89ba530d09cc0f Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sat, 17 Dec 2022 12:15:11 +0300
Subject: [PATCH] Drop selected element container (#648)

Looks like no longer used. All related logic moved to selected instance
connector.
---
 .../wrapper-component/wrapper-component.tsx   | 23 ++++---------------
 .../designer/app/canvas/shared/nano-states.ts |  5 ----
 .../shared/use-track-selected-element.ts      | 22 +-----------------
 3 files changed, 5 insertions(+), 45 deletions(-)

diff --git a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx b/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx
index 3091259b69..f82fd217ed 100644
--- a/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx
+++ b/apps/designer/app/canvas/features/wrapper-component/wrapper-component.tsx
@@ -12,10 +12,7 @@ import {
   useAllUserProps,
 } from "@webstudio-is/react-sdk";
 import { useTextEditingInstanceId } from "~/shared/nano-states";
-import {
-  useSelectedElement,
-  useSelectedInstance,
-} from "~/canvas/shared/nano-states";
+import { useSelectedInstance } from "~/canvas/shared/nano-states";
 import { useCssRules } from "~/canvas/shared/styles";
 import { publish } from "~/shared/pubsub";
 import { SelectedInstanceConnector } from "./selected-instance-connector";
@@ -28,14 +25,14 @@ const ContentEditable = ({
   ...props
 }: {
   Component: ReturnType<typeof getComponent>;
-  elementRef: (element: undefined | HTMLElement) => void;
+  elementRef: { current: undefined | HTMLElement };
 }) => {
   const [editor] = useLexicalComposerContext();
 
   const ref = useCallback(
     (rootElement: null | HTMLElement) => {
       editor.setRootElement(rootElement);
-      elementRef(rootElement ?? undefined);
+      elementRef.current = rootElement ?? undefined;
     },
     [editor, elementRef]
   );
@@ -61,7 +58,6 @@ export const WrapperComponentDev = ({
   const [editingInstanceId, setTextEditingInstanceId] =
     useTextEditingInstanceId();
   const [selectedInstance] = useSelectedInstance();
-  const [, setSelectedElement] = useSelectedElement();
 
   const [allUserProps] = useAllUserProps();
   const instanceProps = allUserProps[instance.id];
@@ -80,17 +76,6 @@ export const WrapperComponentDev = ({
 
   const instanceElementRef = useRef<HTMLElement>();
 
-  const refCallback = useCallback(
-    (element: undefined | HTMLElement) => {
-      // When entering text editing we unmount the instance element, so we need to update the reference, otherwise we have a detached element referenced and bounding box will be wrong.
-      if (element !== undefined) {
-        setSelectedElement(element);
-      }
-      instanceElementRef.current = element;
-    },
-    [setSelectedElement]
-  );
-
   const readonlyProps =
     instance.component === "Input" ? { readOnly: true } : undefined;
 
@@ -147,7 +132,7 @@ export const WrapperComponentDev = ({
         contentEditable={
           <ContentEditable
             {...props}
-            elementRef={refCallback}
+            elementRef={instanceElementRef}
             Component={Component}
           />
         }
diff --git a/apps/designer/app/canvas/shared/nano-states.ts b/apps/designer/app/canvas/shared/nano-states.ts
index 542c883bcb..1249e17f1b 100644
--- a/apps/designer/app/canvas/shared/nano-states.ts
+++ b/apps/designer/app/canvas/shared/nano-states.ts
@@ -10,8 +10,3 @@ export const hoveredInstanceContainer = createValueContainer<
   Instance | undefined
 >();
 export const useHoveredInstance = () => useValue(hoveredInstanceContainer);
-
-const selectedElementContainer = createValueContainer<
-  HTMLElement | undefined
->();
-export const useSelectedElement = () => useValue(selectedElementContainer);
diff --git a/apps/designer/app/canvas/shared/use-track-selected-element.ts b/apps/designer/app/canvas/shared/use-track-selected-element.ts
index 6c219d5ee7..d76668ec6b 100644
--- a/apps/designer/app/canvas/shared/use-track-selected-element.ts
+++ b/apps/designer/app/canvas/shared/use-track-selected-element.ts
@@ -5,16 +5,12 @@ import {
   getComponentNames,
 } from "@webstudio-is/react-sdk";
 import { useSubscribe } from "~/shared/pubsub";
-import { useSelectedElement, useSelectedInstance } from "./nano-states";
+import { useSelectedInstance } from "./nano-states";
 import {
   useRootInstance,
   useTextEditingInstanceId,
 } from "~/shared/nano-states";
 import { utils } from "@webstudio-is/project";
-import {
-  getInstanceElementById,
-  getInstanceIdFromElement,
-} from "~/shared/dom-utils";
 import { publish } from "~/shared/pubsub";
 
 declare module "~/shared/pubsub" {
@@ -28,7 +24,6 @@ const eventOptions = {
 };
 
 export const useTrackSelectedElement = () => {
-  const [selectedElement, setSelectedElement] = useSelectedElement();
   const [selectedInstance, setSelectedInstance] = useSelectedInstance();
   const [editingInstanceId, setEditingInstanceId] = useTextEditingInstanceId();
   const editingInstanceIdRef = useRef(editingInstanceId);
@@ -47,21 +42,6 @@ export const useTrackSelectedElement = () => {
 
   useSubscribe("selectInstanceById", selectInstance);
 
-  // Focus and select the element when selected instance changes
-  useEffect(() => {
-    if (
-      selectedInstance !== undefined &&
-      (selectedElement === undefined ||
-        selectedInstance?.id !== getInstanceIdFromElement(selectedElement))
-    ) {
-      const element = getInstanceElementById(selectedInstance.id);
-      if (element === null) {
-        return;
-      }
-      setSelectedElement(element);
-    }
-  }, [selectedInstance, selectedElement, setSelectedElement]);
-
   useEffect(() => {
     if (
       editingInstanceIdRef.current !== undefined &&