extract get target container func from hook

Author: softmarshmallow

editor/hooks/use-target-node.ts

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import type { ReflectSceneNode } from "@design-sdk/core";
+import type { DesignInput } from "@designto/config/input";
 import { useEditorState } from "core/states";
-import { DesignInput } from "@designto/config/input";
-
-import { utils as _design_utils } from "@design-sdk/core";
-const designq = _design_utils.query;
+import { getTargetContainer } from "utils/get-target-node";
 
 export function useTargetContainer() {
   const [t, setT] = useState<{ target: ReflectSceneNode; root: DesignInput }>({
@@ -13,36 +11,8 @@ export function useTargetContainer() {
   });
   const [state] = useEditorState();
 
-  //
   useEffect(() => {
-    const thisPageNodes = state.selectedPage
-      ? state.design.pages.find((p) => p.id == state.selectedPage).children
-      : null;
-
-    const targetId =
-      state?.selectedNodes?.length === 1 ? state.selectedNodes[0] : null;
-
-    const container_of_target =
-      designq.find_node_by_id_under_inpage_nodes(targetId, thisPageNodes) ||
-      null;
-
-    const root = thisPageNodes
-      ? container_of_target &&
-        (container_of_target.origin === "COMPONENT"
-          ? DesignInput.forMasterComponent({
-              master: container_of_target,
-              all: state.design.pages,
-              components: state.design.components,
-            })
-          : DesignInput.fromDesignWithComponents({
-              design: container_of_target,
-              components: state.design.components,
-            }))
-      : state.design?.input;
-
-    const target =
-      designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
-
+    const { root, target } = getTargetContainer(state);
     setT({ target, root });
   }, [state?.selectedNodes, state?.selectedPage, state?.design?.pages]);
 

editor/utils/get-target-node.ts

@@ -0,0 +1,34 @@
+import type { EditorState } from "core/states";
+import { DesignInput } from "@designto/config/input";
+import { utils as _design_utils } from "@design-sdk/core";
+const designq = _design_utils.query;
+
+export function getTargetContainer(state: EditorState) {
+  const thisPageNodes = state.selectedPage
+    ? state.design.pages.find((p) => p.id == state.selectedPage).children
+    : null;
+
+  const targetId =
+    state?.selectedNodes?.length === 1 ? state.selectedNodes[0] : null;
+
+  const container_of_target =
+    designq.find_node_by_id_under_inpage_nodes(targetId, thisPageNodes) || null;
+
+  const root = thisPageNodes
+    ? container_of_target &&
+      (container_of_target.origin === "COMPONENT"
+        ? DesignInput.forMasterComponent({
+            master: container_of_target,
+            all: state.design.pages,
+            components: state.design.components,
+          })
+        : DesignInput.fromDesignWithComponents({
+            design: container_of_target,
+            components: state.design.components,
+          }))
+    : state.design?.input;
+
+  const target =
+    designq.find_node_by_id_under_entry(targetId, root?.entry) ?? root?.entry;
+  return { root, target };
+}