fix

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

@@ -99,6 +99,7 @@ export const EDGlobal = {
         HTML: false,
         CSS: false,
       },
+      rename_id: "",
       open: {} as Record<string, string[]>,
     },
     popup: {

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

@@ -17,14 +17,15 @@ export const edActionDetach = (p: PG, item: IItem) => {
       if (comp) {
         fillID(comp);
         comp.id = item.id;
-        delete comp.component;
+        if (comp.component) comp.component.id = "";
         mitem.doc?.transact(() => {
           mitem.parent.forEach((e, k) => {
-            if (e == mitem) {
+            if (e.get("id") === mitem.get("id")) {
               mitem.parent.delete(k);
               const nmap = new Y.Map();
               syncronize(nmap, comp);
               mitem.parent.insert(k, [nmap]);
+              console.log(nmap.toJSON());
             }
           });
         });

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

@@ -1,12 +1,21 @@
 import { IContent } from "../../../../../../../utils/types/general";
 import { PG } from "../../../../../logic/ed-global";
 
-export const edActionHide = (p: PG, item: IContent) => {
+export const edActionHide = (
+  p: PG,
+  item: IContent,
+  mode = "toggle" as "toggle" | "switch"
+) => {
   const mitem = p.page.meta[item.id].mitem;
   if (mitem) {
     const hidden = mitem.get("hidden");
+    if (mode === "toggle") {
+      if (!hidden) mitem.set("hidden", "all");
+      else mitem.delete("hidden");
+    } else {
       if (!hidden) mitem.set("hidden", "all");
       else if (hidden === "all") mitem.set("hidden", "only-editor");
       else if (hidden === "only-editor") mitem.delete("hidden");
     }
+  }
 };

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

@@ -0,0 +1,7 @@
+import { IContent } from "../../../../../../../utils/types/general";
+import { PG } from "../../../../../logic/ed-global";
+
+export const edActionRename = (p: PG, item: IContent) => {
+  p.ui.tree.rename_id = item.id;
+  p.render();
+};

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

@@ -14,6 +14,8 @@ import { edActionNewComp } from "./action/new-comp";
 import { edActionPaste } from "./action/paste";
 import { edActionWrap } from "./action/wrap";
 import { edActionUnwrap } from "./action/unwrap";
+import { edActionRename } from "./action/rename";
+import { edActionDelete } from "./action/del";
 
 export const EdTreeCtxMenu = ({
   node,
@@ -85,11 +87,28 @@ export const EdTreeCtxMenu = ({
           onClick={(e) => edActionNewComp(p, item, e)}
         />
       )}
-      {!item.hidden && (
+      <MenuItem
-        <MenuItem label="Hide" onClick={() => edActionHide(p, item)} />
+        label={item.hidden ? "Unhide" : "Hide"}
+        onClick={() => edActionHide(p, item)}
+      />
+      {!isComponent && (
+        <MenuItem
+          label="Rename"
+          hotKey={"↵"}
+          onClick={() => edActionRename(p, item)}
+        />
       )}
+      <MenuItem
+        label="Cut"
+        hotKey={<HotKey shortcut={"X"} />}
+        onClick={() => edActionCut(p, item)}
+      />
+      <MenuItem
+        label="Delete"
+        hotKey="⌫"
+        onClick={() => edActionDelete(p, item)}
+      />
       <MenuItem label="Clone" onClick={() => edActionClone(p, item)} />
-      <MenuItem label="Cut" onClick={() => edActionCut(p, item)} />
       <MenuItem label="Copy" onClick={() => edActionCopy(p, item)} />
       {local.allowCopy &&
         local.allowPaste &&
@@ -109,3 +128,18 @@ export const EdTreeCtxMenu = ({
     </Menu>
   );
 };
+
+const HotKey = (arg: { shortcut: string }) => {
+  const ctrl =
+    navigator.platform.toUpperCase().indexOf("MAC") >= 0 ? (
+      <div>⌘</div>
+    ) : (
+      <div className="text-[8px]">CTRL</div>
+    );
+  return (
+    <div className="hot-key border border-slate-400 text-[10px] rounded-[3px] px-1 -mr-[2px] flex items-center space-x-1">
+      {ctrl}
+      <div>+</div> <div>{arg.shortcut}</div>
+    </div>
+  );
+};

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

@@ -1,5 +1,6 @@
 import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
-import { EdMeta } from "../../../../logic/ed-global";
+import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
+import { useGlobal, useLocal } from "web-utils";
 
 export const EdTreeName = ({
   node,
@@ -8,14 +9,63 @@ export const EdTreeName = ({
   node: NodeModel<EdMeta>;
   prm: RenderParams;
 }) => {
+  const p = useGlobal(EDGlobal, "EDITOR");
+  const local = useLocal(
+    {
+      rename: "",
+    },
+    () => {
+      local.rename = item?.name || "";
+    }
+  );
   const item = node.data?.item;
-  if (!item) return <></>;
+  const mitem = node.data?.mitem;
+  if (!item || !mitem) return <></>;
+  const isRenaming = p.ui.tree.rename_id === item.id;
   return (
-    <div className="text-[14px] flex items-center cursor-pointer flex-1">
+    <div className="text-[14px] relative flex items-center cursor-pointer flex-1">
+      {isRenaming ? (
+        <input
+          className={cx(
+            "absolute inset-0 outline-none border border-blue-500 my-[2px] mr-[1px] px-1"
+          )}
+          autoFocus
+          spellCheck={false}
+          value={local.rename}
+          onFocus={(e) => {
+            e.currentTarget.select();
+          }}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter" || e.key === "Escape") {
+              if (e.key === "Escape") {
+                local.rename = item.name;
+              } else {
+                item.name = local.rename;
+                mitem.set("name", item.name);
+              }
+
+              p.ui.tree.rename_id = "";
+              p.render();
+              setTimeout(() => {
+                const el = document.querySelector(
+                  `.tree-${item.id}`
+                ) as HTMLInputElement;
+                if (el) el.focus();
+              });
+            }
+          }}
+          onChange={(e) => {
+            local.rename = e.target.value;
+            p.render();
+          }}
+        />
+      ) : (
         <div className="flex flex-col">
           {node.data?.el || item.name}
           {/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
         </div>
+      )}
     </div>
   );
 };

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

@@ -169,6 +169,7 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         }
 
         if (e.key === "Enter") {
+          if (p.ui.tree.search) {
             p.ui.tree.search = "";
             p.ui.prevent_indent_hook = false;
             active.item_id = "";
@@ -185,6 +186,10 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
                 }
               });
             });
+          } else {
+            p.ui.tree.rename_id = item.id;
+            p.render();
+          }
           return;
         }
 

app/web/src/utils/ui/context-menu.css

@@ -16,13 +16,17 @@
   width: 100%;
   background: white;
   font-size: 14px;
-  padding: 3px 20px 3px 10px;
+  padding: 3px 5px 3px 10px;
   text-align: left;
   line-height: 1.5;
   margin: 0;
   outline: 0;
 }
 
+.MenuItem:hover .hot-key {
+  border-color: white !important;
+}
+
 .MenuItem:last-child {
   border-bottom: 0px;
 }

app/web/src/utils/ui/context-menu.tsx

@@ -29,13 +29,14 @@ export const MenuItem = forwardRef<
   HTMLButtonElement,
   React.ButtonHTMLAttributes<HTMLButtonElement> & {
     label: ReactNode;
+    hotKey?: ReactNode;
     disabled?: boolean;
   }
->(({ label, disabled, ...props }, ref) => {
+>(({ label, disabled, hotKey, ...props }, ref) => {
   return (
     <button
       {...props}
-      className="MenuItem"
+      className="MenuItem flex justify-between items-center"
       ref={ref}
       role="menuitem"
       disabled={disabled}
@@ -45,6 +46,7 @@ export const MenuItem = forwardRef<
       }}
     >
       {label}
+      {hotKey && <div className="hotKey">{hotKey}</div>}
     </button>
   );
 });
@@ -165,7 +167,7 @@ export const Menu = forwardRef<
         // >
         //   <FloatingFocusManager context={context} initialFocus={refs.floating}>
         <div
-          className="ContextMenu"
+          className="ContextMenu min-w-[150px]"
           ref={refs.setFloating}
           style={floatingStyles}
           {...getFloatingProps()}