fix

app/web/src/render/ed/logic/ed-global.ts

@@ -3,9 +3,8 @@ import { clientStartSync } from "../../../utils/sync/ws-client";
 import { IContent, MContent } from "../../../utils/types/general";
 import { IItem, MItem } from "../../../utils/types/item";
 import { DComp, DPage, IRoot } from "../../../utils/types/root";
-import { IText, MText } from "../../../utils/types/text";
-import { FNCompDef } from "../../../utils/types/meta-fn";
 import { ISection } from "../../../utils/types/section";
+import { IText, MText } from "../../../utils/types/text";
 
 const EmptySite = {
   id: "",
@@ -31,6 +30,20 @@ const EmptyComp = {
   snapshot: null as null | Uint8Array,
 };
 
+const target = { active_id: false as any };
+export const active = {
+  get item_id() {
+    if (target.active_id === false) {
+      target.active_id = localStorage.getItem("prasi-active-id") || "";
+    }
+    return target.active_id;
+  },
+  set item_id(val: string) {
+    localStorage.setItem("prasi-active-id", val);
+    target.active_id = val;
+  },
+};
+
 export type EdMeta = {
   item: IItem | IText | ISection;
   mitem?: MItem | MText;
@@ -59,7 +72,7 @@ export const EDGlobal = {
     root: null as null | IRoot,
     entry: [] as string[],
     tree: [] as NodeModel<EdMeta>[],
-    meta: {} as Record<string, { item: IContent; mitem?: MContent }>,
+    meta: {} as Record<string, EdMeta>,
     list: {} as Record<string, EPage>,
   },
   comp: {
@@ -69,9 +82,6 @@ export const EDGlobal = {
     list: {} as Record<string, { cur: EComp; doc: DComp }>,
   },
   ui: {
-    select: {
-      id: "",
-    },
     tree: {
       open: {} as Record<string, string[]>,
     },

app/web/src/render/ed/panel/tree/node/item/action/attach.tsx

@@ -2,7 +2,6 @@ import { IItem } from "../../../../../../../utils/types/item";
 import { PG } from "../../../../../logic/ed-global";
 
 export const edActionAttach = (p: PG, item: IItem) => {
-  p.ui.select.id = item.id;
   const pick = () => {
     p.ui.popup.comp = (comp_id) => {};
     p.render();

app/web/src/render/ed/panel/tree/node/item/action/paste.tsx

@@ -1,7 +1,7 @@
 import { syncronize } from "y-pojo";
 import { IContent } from "../../../../../../../utils/types/general";
 import { MItem } from "../../../../../../../utils/types/item";
-import { PG } from "../../../../../logic/ed-global";
+import { PG, active } from "../../../../../logic/ed-global";
 import { treeRebuild } from "../../../../../logic/tree/build";
 import { fillID } from "../../../../../../editor/tools/fill-id";
 
@@ -31,8 +31,10 @@ export const edActionPaste = async (p: PG, item: IContent) => {
             }
           }
           const map = new Y.Map();
-          syncronize(map, fillID(child));
+          const newchild = fillID(child);
+          syncronize(map, newchild);
           mchilds.push([map]);
+          active.item_id = newchild.id;
         }
       });
     }

app/web/src/render/ed/panel/tree/node/item/indent-hook.ts

@@ -1,6 +1,6 @@
 import { TreeMethods } from "@minoru/react-dnd-treeview";
 import { useEffect } from "react";
-import { PG } from "../../../../logic/ed-global";
+import { PG, active } from "../../../../logic/ed-global";
 
 export const indentHook = (
   p: PG,
@@ -9,9 +9,26 @@ export const indentHook = (
   useEffect(() => {
     const open = JSON.parse(localStorage.getItem("prasi-tree-open") || "{}");
     p.ui.tree.open = open;
-    if (open[p.page.cur.id] && local.tree) {
-      local.tree.open(open[p.page.cur.id]);
+
+    let shouldOpen = open[p.page.cur.id] || [];
+
+    let meta = p.page.meta[active.item_id];
+    while (meta) {
+      if (meta.item.id) shouldOpen.push(meta.item.id);
+      meta = p.page.meta[meta.parent_item.id];
+    }
+
+    if (shouldOpen.length > 0 && local.tree) {
+      local.tree.open(shouldOpen);
       local.render();
+      if (active.item_id) {
+        setTimeout(() => {
+          const el = document.getElementsByClassName(active.item_id);
+          if (el.length > 0) {
+            el[0].scrollIntoView({ behavior: "instant", block: "center" });
+          }
+        });
+      }
     }
   }, [p.page.tree]);
 };

app/web/src/render/ed/panel/tree/node/render.tsx

@@ -1,13 +1,13 @@
 import { NodeRender } from "@minoru/react-dnd-treeview";
-import { EdMeta } from "../../../logic/ed-global";
+import { useGlobal, useLocal } from "web-utils";
+import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
 import { EdTreeAction } from "./item/action";
 import { EdTreeCtxMenu } from "./item/ctx-menu";
 import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
-import { indentHook } from "./item/indent-hook";
-import { useLocal } from "web-utils";
 
 export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     rightClick: null as null | React.MouseEvent<HTMLDivElement, MouseEvent>,
   });
@@ -18,14 +18,21 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
   return (
     <div
       className={cx(
-        "relative border-b flex items-stretch hover:bg-blue-50 min-h-[26px]",
-        isComponent && `bg-purple-50`
+        item.id,
+        "relative border-b flex items-stretch  min-h-[26px]",
+        active.item_id === item.id
+          ? ["bg-blue-100"]
+          : ["hover:bg-blue-50", isComponent && `bg-purple-50`]
       )}
       onContextMenu={(event) => {
         event.preventDefault();
         local.rightClick = event;
         local.render();
       }}
+      onClick={() => {
+        active.item_id = item.id;
+        p.render();
+      }}
     >
       {local.rightClick && (
         <EdTreeCtxMenu

app/web/src/render/ed/panel/tree/tree.tsx

@@ -9,7 +9,7 @@ export const EdTree = () => {
   return (
     <div className="flex flex-col min-w-[300px] relative border-r">
       <div className=""></div>
-      <div className="flex relative flex-1 overflow-y-auto overflow-x-hidden">
+      <div className="tree-body flex relative flex-1 overflow-y-auto overflow-x-hidden">
         <div className="absolute inset-0">
           <DndProvider backend={MultiBackend} options={getBackendOptions()}>
             <EdTreeBody />

pkgs/web-utils/src/use-global.ts

@@ -43,7 +43,7 @@ export const useGlobal = <T extends object>(
   const { global, render } = ctx;
 
   if (!global[_id]) {
-    global[_id] = deepClone(defaultValue);
+    global[_id] = defaultValue;
   }
 
   useEffect(() => {