Drop selected element container (#648)

Looks like no longer used. All related logic moved to selected instance
connector.

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}
           />
         }

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

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 &&