wip fix

app/web/src/nova/ed/logic/tree/sync-walk.tsx

@@ -144,9 +144,10 @@ export const syncWalkMap = (
           mitem_comp.set("ref_ids", new Y.Map() as any);
           ref_ids = {};
         }
-        const original_id = item.id;
+        const old_id = item.id;
         mapItem(mcomp, item);
-        item.id = original_id;
+        item.originalId = item.id;
+        item.id = old_id;
 
         const meta: EdMeta = {
           item,

app/web/src/nova/ed/panel/popup/script/monaco.tsx

@@ -1,19 +1,20 @@
-import type { OnMount } from "@monaco-editor/react";
+import type { Monaco, OnMount } from "@monaco-editor/react";
 import { createStore } from "idb-keyval";
 import trim from "lodash.trim";
 import { useGlobal, useLocal } from "web-utils";
 import { jscript } from "../../../../../utils/script/jscript";
 import { jsMount } from "../../../../../utils/script/mount";
 import { monacoTypings } from "../../../../../utils/script/typings";
-import { EDGlobal, active } from "../../../logic/ed-global";
+import { EDGlobal, ISingleScope, active } from "../../../logic/ed-global";
 import { declareScope } from "./scope";
+import { useEffect } from "react";
 
 export type MonacoEditor = Parameters<OnMount>[0];
 export const ScriptMonaco = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const local = useLocal({
     editor: null as null | MonacoEditor,
-    reloading: false,
+    monaco: null as null | Monaco,
     changeTimeout: 0 as any,
     historyOpen: false,
     idbstore: createStore(`prasi-page-${p.page.cur.id}`, "script-history"),
@@ -23,10 +24,44 @@ export const ScriptMonaco = () => {
   if (!Editor) return null;
 
   let meta = p.page.meta[active.item_id];
-  if (active.comp_id) {
+  if (active.comp_id && p.comp.list[active.comp_id]) {
     meta = p.comp.list[active.comp_id].meta[active.item_id];
   }
 
+  useEffect(() => {
+    if (local.monaco && local.editor) {
+      const val: string = (
+        typeof adv[p.ui.popup.script.mode] === "string"
+          ? adv[p.ui.popup.script.mode]
+          : ""
+      ) as any;
+      local.monaco.editor.getModels().forEach((model) => {
+        const uri = model.uri.toString();
+        if (
+          uri.startsWith("inmemory://model") ||
+          uri.startsWith("ts:comp-") ||
+          uri.startsWith("ts:page-")
+        ) {
+          model.dispose();
+        }
+      });
+
+      let model = local.monaco.editor.createModel(
+        val,
+        "typescript",
+        local.monaco.Uri.parse(
+          `ts:${
+            active.comp_id ? `comp-${active.comp_id}` : `page-${p.page.cur.id}`
+          }-${active.item_id}.tsx`
+        )
+      );
+      local.editor.setModel(model);
+      declareScope(p, local.editor, local.monaco).then(() => {
+        local.render();
+      });
+    }
+  }, [active.item_id]);
+
   if (!meta) return null;
 
   const item = meta.item;
@@ -120,35 +155,47 @@ export const ScriptMonaco = () => {
             )
           );
           editor.setModel(model);
-        }
+          monaco.editor.registerEditorOpener({
-        monaco.editor.registerEditorOpener({
+            openCodeEditor(source, r, selectionOrPosition) {
-          openCodeEditor(source, r, selectionOrPosition) {
+              const cpath = r.path.substring(`scope~`.length).split("__");
-            const path = r.path.split("~");
+              const comp_id = cpath[0];
-            const id = path[path.length - 1].replace(".d.ts", "");
+              const path = cpath[1].split("~");
-            const meta = p.page.meta[id];
+              const type = path[0] as "prop" | "passprop" | "local";
+              const id = path[path.length - 1].replace(".d.ts", "");
 
-            if (meta) {
+              if (comp_id) {
-              console.log(meta.item, meta);
+                let meta = p.page.meta[id];
-            }
+                if (active.comp_id) {
+                  meta = p.comp.list[active.comp_id].meta[id];
+                }
 
-            // https://github.com/microsoft/vscode/pull/177064#issue-1623100628
+                if (meta && meta.item.originalId) {
-            return false;
+                  active.item_id = meta.item.originalId;
-          },
+                }
-        });
+                active.comp_id = comp_id;
+              } else {
+                active.item_id = id;
+              }
+              p.render();
 
-        await jsMount(editor, monaco);
+              return false;
-        await monacoTypings(
-          {
-            site_dts: p.site_dts,
-            script: {
-              siteTypes: {},
             },
-            site: p.site.config,
+          });
-          },
+
-          monaco,
+          await jsMount(editor, monaco);
-          { types: {}, values: {} }
+          await monacoTypings(
-        );
+            {
-        await declareScope(p, editor, monaco);
+              site_dts: p.site_dts,
+              script: {
+                siteTypes: {},
+              },
+              site: p.site.config,
+            },
+            monaco,
+            { types: {}, values: {} }
+          );
+          await declareScope(p, editor, monaco);
+        }
       }}
     />
   );

app/web/src/nova/ed/panel/popup/script/scope.tsx

@@ -12,10 +12,12 @@ export const declareScope = async (
   let active_id = active.item_id;
   let s = deepClone(p.page.scope[active_id]);
 
-  if (active.comp_id) {
+  if (active.comp_id && p.comp.list[active.comp_id]) {
     s = deepClone(p.comp.list[active.comp_id].scope[active.item_id]);
   }
 
+  if (!s) return;
+
   monaco.editor.getModels().forEach((model) => {
     if (model.uri.toString().startsWith("ts:scope~")) {
       model.dispose();
@@ -44,7 +46,7 @@ export const declareScope = async (
     if (arg.type !== "local") {
       addScope(
         monaco,
-        `${arg.type}~${arg.name}`,
+        `${arg.comp_id || ""}__${arg.type}~${arg.name}~${arg.id}`,
         `\
 export const {};
 declare global {
@@ -54,7 +56,7 @@ declare global {
     } else {
       addScope(
         monaco,
-        `${arg.type}~${arg.id}`,
+        `${arg.comp_id || ""}__${arg.type}~${arg.id}`,
         `\
 export const {};
 const __val = ${arg.value};
@@ -75,13 +77,15 @@ type IEachArgScope = {
   id: string;
   type: "local" | "prop" | "passprop";
   index?: number;
-  isProp?: boolean;
+  is_prop?: boolean;
+  comp_id?: string;
 };
 const spreadScope = (
   p: PG,
-  s: ISingleScope,
+  s: ISingleScope | undefined,
   each: (arg: IEachArgScope) => void
 ) => {
+  if (!s) return;
   const parents = [...s.p];
   const layout_id = p.site.layout.id;
   let layout = null as null | EPage;
@@ -122,7 +126,7 @@ const spreadScope = (
       if (!item) {
         if (comp_id) {
           item = p.comp.list[comp_id].scope[parent_id];
-        } else if (active.comp_id) {
+        } else if (active.comp_id && p.comp.list[active.comp_id]) {
           item = p.comp.list[active.comp_id].scope[parent_id];
         } else {
           item = p.page.scope[parent_id];
@@ -131,6 +135,7 @@ const spreadScope = (
 
       if (item) {
         if (item.c) {
+          comp_id = item.c;
           mergeScopes(item.p, each, item.c);
         }
 
@@ -139,6 +144,7 @@ const spreadScope = (
           if (scope.local)
             each({
               s,
+              comp_id,
               type: "local",
               id: parent_id,
               name: scope.local.name,
@@ -150,6 +156,7 @@ const spreadScope = (
             for (const [k, v] of Object.entries(scope.passprop)) {
               each({
                 s,
+                comp_id,
                 type: "passprop",
                 id: parent_id,
                 name: k,
@@ -163,11 +170,12 @@ const spreadScope = (
             for (const [k, v] of Object.entries(scope.props)) {
               each({
                 s,
+                comp_id,
                 type: "prop",
                 id: parent_id,
                 name: k,
                 value: v.value,
-                isProp: true,
+                is_prop: true,
               });
             }
           }

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

@@ -24,7 +24,45 @@ export const EdTreeAction = ({
   if (!mode && item.adv?.html) mode = "html";
 
   return (
-    <div className="flex items-center pr-1">
+    <div className="flex items-center pr-1 space-x-1">
+      {(!comp.enabled || (comp.enabled && comp.id === active.comp_id)) && (
+        <Tooltip
+          content={`Edit ${mode}`}
+          className={cx(
+            "border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
+            item.adv?.js || item.adv?.css || item.adv?.html
+              ? `opacity-100`
+              : cx(
+                  `opacity-0 action-script transition-all`,
+                  css`
+                    &:hover {
+                      opacity: 1 !important;
+                    }
+                  `
+                ),
+            !(item.adv?.js || item.adv?.css || item.adv?.html) &&
+              `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
+            mode === "js" &&
+              `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
+            mode === "css" &&
+              `bg-green-100  border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
+            mode === "html" &&
+              `bg-blue-100  border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
+          )}
+          onClick={() => {
+            p.ui.popup.script.open = true;
+            p.ui.popup.script.mode = (mode || "js") as any;
+            p.render();
+          }}
+        >
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+            }}
+          ></div>
+        </Tooltip>
+      )}
+
       {comp.enabled && (
         <>
           {comp.id !== active.comp_id && (
@@ -78,44 +116,6 @@ export const EdTreeAction = ({
           )}
         </>
       )}
-
-      {!comp.enabled && (
-        <Tooltip
-          content={`Edit ${mode}`}
-          className={cx(
-            "border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
-            item.adv?.js || item.adv?.css || item.adv?.html
-              ? `opacity-100`
-              : cx(
-                  `opacity-0 action-script transition-all`,
-                  css`
-                    &:hover {
-                      opacity: 1 !important;
-                    }
-                  `
-                ),
-            !(item.adv?.js || item.adv?.css || item.adv?.html) &&
-              `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
-            mode === "js" &&
-              `bg-orange-100  border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
-            mode === "css" &&
-              `bg-green-100  border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
-            mode === "html" &&
-              `bg-blue-100  border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
-          )}
-          onClick={() => {
-            p.ui.popup.script.open = true;
-            p.ui.popup.script.mode = (mode || "js") as any;
-            p.render();
-          }}
-        >
-          <div
-            dangerouslySetInnerHTML={{
-              __html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
-            }}
-          ></div>
-        </Tooltip>
-      )}
     </div>
   );
 };

app/web/src/render/editor/panel/script/monaco/mount.tsx

@@ -41,13 +41,22 @@ export const jsMount = async (p: PG, editor: MonacoEditor, monaco: Monaco) => {
   };
 
   const jsxHgController = new MonacoJsxSyntaxHighlight(getWorker(), monaco);
-  const { highlighter } = jsxHgController.highlighterBuilder({
+  try {
-    editor: editor,
+    const { highlighter } = jsxHgController.highlighterBuilder({
-  });
+      editor: editor,
-  highlighter();
+    });
-  editor.onDidChangeModelContent(() => {
+
-    highlighter();
+    if (typeof editor.getModel === "function") {
-  });
+      highlighter();
+    }
+    editor.onDidChangeModelContent(() => {
+      if (typeof editor.getModel === "function") {
+        try {
+          highlighter();
+        } catch (e) {}
+      }
+    });
+  } catch (e) {}
 
   monaco.languages.registerDocumentFormattingEditProvider("typescript", {
     async provideDocumentFormattingEdits(model, options, token) {

app/web/src/utils/script/mount.tsx

@@ -143,9 +143,16 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
       const { highlighter } = jsxHgController.highlighterBuilder({
         editor: editor,
       });
-      highlighter();
+
-      editor.onDidChangeModelContent(() => {
+      if (typeof editor.getModel === "function") {
         highlighter();
+      }
+      editor.onDidChangeModelContent(() => {
+        if (typeof editor.getModel === "function") {
+          try {
+            highlighter();
+          } catch (e) {}
+        }
       });
     }