wip fix

app/web/src/nova/ed/panel/popup/comp/comp-preview.tsx

@@ -7,6 +7,8 @@ import { EDGlobal, PG, active } from "../../../logic/ed-global";
 import { EdCompPreviewTree } from "./comp-preview-tree";
 import { compPicker, reloadCompPicker } from "./comp-reload";
 import { loadComponent } from "../../../logic/comp/load";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import { CompItem } from "./comp-tree";
 
 export const EdCompPreview = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -23,6 +25,23 @@ export const EdCompPreview = () => {
         p.render();
       });
     }
+
+    let found = compPicker.tree.find((e) => e.id === comp_id);
+    if (!found) {
+      found = compPicker.trash.find((e) => e.id === comp_id);
+    }
+    if (found) {
+      const root = ref.tree.find((e) => e.parent === "root");
+      if (root) {
+        if (root.text !== found.text) {
+          found.text = root.text;
+          db.component.update({
+            where: { id: comp_id },
+            data: { name: found.text },
+          });
+        }
+      }
+    }
   }, [comp_id]);
 
   const isTrashed = !!compPicker.trash.find((e) => e.id === comp_id);

app/web/src/nova/ed/panel/popup/comp/comp-reload.ts

@@ -1,5 +1,5 @@
 import { NodeModel } from "@minoru/react-dnd-treeview";
-import { PG } from "../../../logic/ed-global";
+import { IMeta, PG } from "../../../logic/ed-global";
 import { CompItem } from "./comp-tree";
 
 export const compPicker = {
@@ -57,6 +57,24 @@ export const reloadCompPicker = async (p: PG) => {
           ? compPicker.tree
           : compPicker.trash;
 
+      if (p.comp.list[comp.id]) {
+        const tree = p.comp.list[comp.id].tree;
+        if (tree) {
+          const root = tree.find(
+            (e) => e.parent === "root"
+          ) as NodeModel<IMeta>;
+          if (root) {
+            if (root.data?.item.name && comp.name !== root.data?.item.name) {
+              comp.name = root.data.item.name;
+              db.component.update({
+                where: { id: comp.id },
+                data: { name: comp.name },
+              });
+            }
+          }
+        }
+      }
+
       tree.push({
         id: comp.id,
         parent: comp.id_component_group,

app/web/src/nova/ed/panel/tree/node/item/ctx-menu.tsx

@@ -55,7 +55,7 @@ export const EdTreeCtxMenu = ({
   const comp = (item as IItem).component as FNComponent | undefined;
   const isComponent = comp?.id;
   const isActiveComponent = active.comp_id === comp?.id;
-
+  const isJSXProp = node.data?.jsx_prop?.is_root;
   if (!item) {
     return (
       <Menu mouseEvent={event} onClose={onClose}>
@@ -69,7 +69,10 @@ export const EdTreeCtxMenu = ({
 
   return (
     <Menu mouseEvent={event} onClose={onClose}>
-      {type === "item" && !isActiveComponent && !item.component?.id && (
+      {type === "item" &&
+        !isActiveComponent &&
+        !isJSXProp &&
+        !item.component?.id && (
           <MenuItem
             label="Attach Component"
             onClick={() => edActionAttach(p, item)}
@@ -81,7 +84,7 @@ export const EdTreeCtxMenu = ({
           onClick={() => edActionDetach(p, item)}
         />
       )}
-      {type === "item" && !comp?.id && (
+      {type === "item" && !comp?.id && !isJSXProp && (
         <MenuItem
           label="Create Component"
           onClick={(e) => edActionNewComp(p, item, e)}
@@ -91,35 +94,46 @@ export const EdTreeCtxMenu = ({
         label={item.hidden ? "Unhide" : "Hide"}
         onClick={() => edActionHide(p, item)}
       />
+      {!isJSXProp && (
         <MenuItem
           label="Rename"
           hotKey={"↵"}
           onClick={() => edActionRename(p, item)}
         />
+      )}
+      {!isJSXProp && (
         <MenuItem
           label="Cut"
           // hotKey={<HotKey shortcut={"X"} />}
           onClick={() => edActionCut(p, item)}
         />
-      {!isActiveComponent && (
+      )}
+
+      {!isActiveComponent && !isJSXProp && (
         <MenuItem
           label="Delete"
           hotKey="⌫"
           onClick={() => edActionDelete(p, item)}
         />
       )}
+
+      {!isJSXProp && (
         <MenuItem label="Clone" onClick={() => edActionClone(p, item)} />
+      )}
+
+      {!isJSXProp && (
         <MenuItem label="Copy" onClick={() => edActionCopy(p, item)} />
+      )}
       {local.allowCopy &&
         local.allowPaste &&
         !isComponent &&
         item.type !== "text" && (
           <MenuItem label="Paste" onClick={() => edActionPaste(p, item)} />
         )}
-      {["text", "item"].includes(item.type) && (
+      {["text", "item"].includes(item.type) && !isJSXProp && (
         <MenuItem label="Wrap" onClick={() => edActionWrap(p, item as IItem)} />
       )}
-      {["item"].includes(item.type) && !isComponent && (
+      {["item"].includes(item.type) && !isJSXProp && !isComponent && (
         <MenuItem
           label="Unwrap"
           onClick={() => edActionUnwrap(p, item as IItem)}

app/web/src/nova/ed/panel/tree/node/item/name.tsx

@@ -3,6 +3,7 @@ import { FC, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal, IMeta, active } from "../../../../logic/ed-global";
 import { Tooltip } from "../../../../../../utils/ui/tooltip";
+import { treeRebuild } from "../../../../logic/tree/build";
 
 export const EdTreeName = ({
   node,
@@ -38,9 +39,17 @@ export const EdTreeName = ({
           spellCheck={false}
           defaultValue={local.rename}
           onFocus={(e) => {
+            if (node.data?.jsx_prop?.is_root) {
+              p.ui.tree.rename_id = "";
+              p.render();
+            } else {
               e.currentTarget.select();
+            }
           }}
           onBlur={() => {
+            if (node.data?.jsx_prop?.is_root) {
+              return;
+            }
             item.name = local.rename;
 
             let mitem = node.data?.mitem;
@@ -49,10 +58,9 @@ export const EdTreeName = ({
               mitem = comp?.doc.getMap("map").get("root");
             }
 
-            if (mitem) {
-              mitem.doc?.transact(() => {
             if (mitem) {
               mitem.set("name", item.name);
+            }
 
             if (active.comp_id === item.component?.id) {
               db.component.update({
@@ -64,11 +72,9 @@ export const EdTreeName = ({
                 },
               });
             }
-                }
-              });
-            }
 
             p.ui.tree.rename_id = "";
+            treeRebuild(p);
             p.render();
           }}
           onKeyDown={(e) => {
@@ -98,9 +104,9 @@ export const EdTreeName = ({
       ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
-          <div className={"text-[9px] text-gray-500 -mt-1"}>
+          {/* <div className={"text-[9px] text-gray-500 -mt-1"}>
             {node.id} - {item.originalId}
-          </div>
+          </div> */}
         </div>
       )}
     </div>

app/web/src/nova/ed/panel/tree/node/on-drop.tsx

@@ -45,12 +45,14 @@ export const nodeOnDrop: (
               toChilds.insert(relativeIndex, [map]);
             }
 
+            if (!fromMeta?.jsx_prop?.is_root) {
               from.parent.forEach((e, idx) => {
-              if (from && e.get("id") === from.get("id")) {
+                if (from && !!e && !!e.get && e.get("id") === from.get("id")) {
                   from.parent.delete(idx);
                 }
               });
             }
+          }
         });
         treeRebuild(p);
         p.render();