wip fix

app/web/src/nova/ed/ed-base.tsx

@@ -10,10 +10,10 @@ import { edUndoManager } from "./logic/ed-undo";
 import { EdPane } from "./panel/main/pane-resize";
 import { EdPopCode } from "./panel/popup/code/code";
 import { EdPopCompGroup } from "./panel/popup/comp/comp-group";
-import { EdPopScript } from "./panel/popup/script/script";
+import { EdPagePop } from "./panel/popup/page/page-popup";
+import { EdPopScript } from "./panel/popup/script/pop-script";
 import { EdPopSite } from "./panel/popup/site/site-popup";
 import { EdScriptInit } from "./panel/script/monaco/init";
-import { EdPagePop } from "./panel/popup/page/page-popup";
 
 export const EdBase = () => {
   const p = useGlobal(EDGlobal, "EDITOR");

app/web/src/nova/ed/panel/tree/node/key-map.tsx

@@ -0,0 +1,184 @@
+import { RenderParams } from "@minoru/react-dnd-treeview";
+import { KeyboardEvent } from "react";
+import { IContent } from "../../../../../utils/types/general";
+import { PG, active } from "../../../logic/ed-global";
+import { edActionDelete } from "./item/action/del";
+
+export const treeItemKeyMap = (p: PG, prm: RenderParams, item: IContent) => {
+  return (e: KeyboardEvent) => {
+    p.ui.prevent_indent_hook = true;
+    if (e.key === "ArrowLeft") {
+      if (prm.isOpen) {
+        prm.onToggle();
+        return;
+      }
+      const up = e.currentTarget.parentElement?.parentElement?.parentElement;
+      if (up) {
+        const c = up.children[0] as HTMLInputElement;
+        if (c) c.focus();
+      }
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      if (prm.hasChild) {
+        if (!prm.isOpen) {
+          prm.onToggle();
+        }
+
+        const target = e.currentTarget;
+        setTimeout(() => {
+          let next = target.nextElementSibling;
+          if (next) {
+            if (next.children[0].children[0].childElementCount > 1) {
+              const c = next.children[0].children[0] as HTMLInputElement;
+              c.focus();
+            }
+          }
+        });
+      } else {
+        let up = e.currentTarget.parentElement;
+        while (up) {
+          if (up.nextElementSibling) {
+            break;
+          }
+          up = up.parentElement;
+        }
+
+        if (up) {
+          let next = up.nextElementSibling;
+          while (next && next.children[0]) {
+            if (next.children[0].classList.contains("has-child")) {
+              const c = next.children[0] as HTMLInputElement;
+              if (c) {
+                c.focus();
+                break;
+              }
+            }
+            if (next.nextElementSibling) {
+              next = next.nextElementSibling;
+            } else {
+              (next as HTMLInputElement).focus();
+              break;
+            }
+          }
+        }
+      }
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      const child = e.currentTarget.nextElementSibling;
+      if (child) {
+        const c = child.children[0]?.children[0] as HTMLInputElement;
+        if (c) c.focus();
+        return;
+      }
+      let up = e.currentTarget.parentElement;
+      while (up) {
+        if (up.nextElementSibling) {
+          break;
+        }
+        up = up.parentElement;
+      }
+
+      if (up) {
+        const next = up.nextElementSibling;
+        if (next) {
+          const c = next.children[0] as HTMLInputElement;
+          if (c) c.focus();
+        }
+      }
+      return;
+    }
+
+    if (e.key === "ArrowUp") {
+      let down = e.currentTarget.parentElement?.previousElementSibling;
+      if (down) {
+        if (down.childElementCount === 2) {
+          while (down) {
+            if (down.childElementCount === 2) {
+              down = down.children[1].lastElementChild;
+            } else {
+              if (down.nextElementSibling) {
+                down = down.nextElementSibling;
+              } else break;
+            }
+          }
+        }
+        if (down) {
+          (down.children[0] as HTMLInputElement).focus();
+          return;
+        }
+      } else {
+        const up = e.currentTarget.parentElement?.parentElement?.parentElement;
+
+        if (up) {
+          if (!up.classList.contains("absolute")) {
+            const c = up.children[0] as HTMLInputElement;
+            if (c) {
+              c.focus();
+              return;
+            }
+          }
+        }
+      }
+
+      p.ui.tree.search_ref?.focus();
+      return;
+    }
+
+    if (e.key === "Enter") {
+      if (p.ui.tree.search) {
+        p.ui.tree.search = "";
+        p.ui.prevent_indent_hook = false;
+        active.item_id = "";
+        p.render();
+        setTimeout(() => {
+          active.item_id = item.id;
+          p.render();
+          setTimeout(() => {
+            const f = document.querySelector(
+              `.tree-${item.id}`
+            ) as HTMLInputElement;
+            if (f) {
+              f.focus();
+            }
+          });
+        });
+      } else {
+        p.ui.tree.rename_id = item.id;
+        p.render();
+      }
+      return;
+    }
+
+    if (e.key === "Backspace" || e.key === "Delete") {
+      let last = "";
+      let found = null as HTMLInputElement | null;
+      p.page.meta[item.id].parent_item.mitem?.get("childs")?.forEach((e) => {
+        if (e.get("id") === item.id) {
+          found = document.querySelector(`.tree-${last}`);
+        }
+        if (!found) {
+          last = e.get("id");
+        }
+      });
+
+      if (!found) {
+        last = p.page.meta[item.id].parent_item.mitem?.get("id") || "";
+        found = document.querySelector(`.tree-${last}`);
+      }
+
+      edActionDelete(p, item);
+
+      if (found) {
+        found.focus();
+      }
+      return;
+    }
+
+    if (e.key.length === 1 && !e.altKey && !e.metaKey && !e.shiftKey) {
+      p.ui.tree.search_ref?.focus();
+    }
+  };
+};

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

@@ -1,12 +1,12 @@
 import { NodeRender } from "@minoru/react-dnd-treeview";
 import { useGlobal, useLocal } from "web-utils";
+import { Loading } from "../../../../../utils/ui/loading";
 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 { Loading } from "../../../../../utils/ui/loading";
+import { treeItemKeyMap } from "./key-map";
-import { edActionDelete } from "./item/action/del";
 
 export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -45,186 +45,7 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
           : [isComponent && `bg-purple-50`],
         active.hover_id === item.id && "bg-blue-50"
       )}
-      onKeyDown={(e) => {
+      onKeyDown={treeItemKeyMap(p, prm, item)}
-        p.ui.prevent_indent_hook = true;
-        if (e.key === "ArrowLeft") {
-          if (prm.isOpen) {
-            prm.onToggle();
-            return;
-          }
-          const up =
-            e.currentTarget.parentElement?.parentElement?.parentElement;
-          if (up) {
-            const c = up.children[0] as HTMLInputElement;
-            if (c) c.focus();
-          }
-          return;
-        }
-        if (e.key === "ArrowRight") {
-          if (prm.hasChild) {
-            if (!prm.isOpen) {
-              prm.onToggle();
-            }
-
-            const target = e.currentTarget;
-            setTimeout(() => {
-              let next = target.nextElementSibling;
-              if (next) {
-                if (next.children[0].children[0].childElementCount > 1) {
-                  const c = next.children[0].children[0] as HTMLInputElement;
-                  c.focus();
-                }
-              }
-            });
-          } else {
-            let up = e.currentTarget.parentElement;
-            while (up) {
-              if (up.nextElementSibling) {
-                break;
-              }
-              up = up.parentElement;
-            }
-
-            if (up) {
-              let next = up.nextElementSibling;
-              while (next && next.children[0]) {
-                if (next.children[0].classList.contains("has-child")) {
-                  const c = next.children[0] as HTMLInputElement;
-                  if (c) {
-                    c.focus();
-                    break;
-                  }
-                }
-                if (next.nextElementSibling) {
-                  next = next.nextElementSibling;
-                } else {
-                  (next as HTMLInputElement).focus();
-                  break;
-                }
-              }
-            }
-          }
-          return;
-        }
-
-        if (e.key === "ArrowDown") {
-          const child = e.currentTarget.nextElementSibling;
-          if (child) {
-            const c = child.children[0]?.children[0] as HTMLInputElement;
-            if (c) c.focus();
-            return;
-          }
-          let up = e.currentTarget.parentElement;
-          while (up) {
-            if (up.nextElementSibling) {
-              break;
-            }
-            up = up.parentElement;
-          }
-
-          if (up) {
-            const next = up.nextElementSibling;
-            if (next) {
-              const c = next.children[0] as HTMLInputElement;
-              if (c) c.focus();
-            }
-          }
-          return;
-        }
-
-        if (e.key === "ArrowUp") {
-          let down = e.currentTarget.parentElement?.previousElementSibling;
-          if (down) {
-            if (down.childElementCount === 2) {
-              while (down) {
-                if (down.childElementCount === 2) {
-                  down = down.children[1].lastElementChild;
-                } else {
-                  if (down.nextElementSibling) {
-                    down = down.nextElementSibling;
-                  } else break;
-                }
-              }
-            }
-            if (down) {
-              (down.children[0] as HTMLInputElement).focus();
-              return;
-            }
-          } else {
-            const up =
-              e.currentTarget.parentElement?.parentElement?.parentElement;
-
-            if (up) {
-              if (!up.classList.contains("absolute")) {
-                const c = up.children[0] as HTMLInputElement;
-                if (c) {
-                  c.focus();
-                  return;
-                }
-              }
-            }
-          }
-
-          p.ui.tree.search_ref?.focus();
-          return;
-        }
-
-        if (e.key === "Enter") {
-          if (p.ui.tree.search) {
-            p.ui.tree.search = "";
-            p.ui.prevent_indent_hook = false;
-            active.item_id = "";
-            p.render();
-            setTimeout(() => {
-              active.item_id = item.id;
-              p.render();
-              setTimeout(() => {
-                const f = document.querySelector(
-                  `.tree-${item.id}`
-                ) as HTMLInputElement;
-                if (f) {
-                  f.focus();
-                }
-              });
-            });
-          } else {
-            p.ui.tree.rename_id = item.id;
-            p.render();
-          }
-          return;
-        }
-
-        if (e.key === "Backspace" || e.key === "Delete") {
-          let last = "";
-          let found = null as HTMLInputElement | null;
-          p.page.meta[item.id].parent_item.mitem
-            ?.get("childs")
-            ?.forEach((e) => {
-              if (e.get("id") === item.id) {
-                found = document.querySelector(`.tree-${last}`);
-              }
-              if (!found) {
-                last = e.get("id");
-              }
-            });
-
-          if (!found) {
-            last = p.page.meta[item.id].parent_item.mitem?.get("id") || "";
-            found = document.querySelector(`.tree-${last}`);
-          }
-
-          edActionDelete(p, item);
-
-          if (found) {
-            found.focus();
-          }
-          return;
-        }
-
-        if (e.key.length === 1 && !e.altKey && !e.metaKey && !e.shiftKey) {
-          p.ui.tree.search_ref?.focus();
-        }
-      }}
       onContextMenu={(event) => {
         event.preventDefault();
         local.rightClick = event;