wip fix

app/web/src/nova/ed/panel/header/mid/comp-picker.tsx

@@ -9,7 +9,6 @@ import { loadComponent } from "../../../logic/comp/load";
 import { EDGlobal, active } from "../../../logic/ed-global";
 import { fillID } from "../../../logic/tree/fill-id";
 import { TopBtn } from "../top-btn";
-import { useEffect } from "react";
 
 export const EdCompPicker = () => {
   const p = useGlobal(EDGlobal, "EDITOR");

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

@@ -130,7 +130,7 @@ export const EdScriptMonaco: FC<{}> = () => {
                 case "prop-master":
                   {
                     const nmodel = monaco.editor.createModel(
-                      val,
+                      trim(val),
                       "typescript",
                       monaco.Uri.parse("file:///active.tsx")
                     );
@@ -140,7 +140,7 @@ export const EdScriptMonaco: FC<{}> = () => {
                 case "prop-instance":
                   {
                     const nmodel = monaco.editor.createModel(
-                      val,
+                      trim(val),
                       "typescript",
                       monaco.Uri.parse("file:///active.tsx")
                     );
@@ -175,7 +175,7 @@ export const EdScriptMonaco: FC<{}> = () => {
                     types._raw = declareScope(p, meta, monaco);
 
                     const model = monaco.editor.createModel(
-                      val,
+                      trim(val),
                       "typescript",
                       monaco.Uri.parse("file:///active.tsx")
                     );

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

@@ -31,9 +31,19 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
     }
   }
 
-  const vars: Record<string, { mode: "local"; val: string }> = {};
+  const vars: Record<string, { mode: "local" | "prop"; val: string }> = {};
   for (const m of cur_path) {
     if (m !== meta) {
+      if (m.item.component?.id === active.comp_id) {
+        for (const [name, prop] of Object.entries(m.item.component.props)) {
+          if (prop.meta?.type === "content-element") {
+            vars[name] = { mode: "prop", val: "ReactElement" };
+          } else {
+            vars[name] = { mode: "prop", val: prop.value };
+          }
+        }
+      }
+
       const script = m.item.script;
       if (script) {
         if (script.local) {
@@ -50,6 +60,10 @@ export const declareScope = (p: PG, meta: IMeta, monaco: Monaco) => {
 const \$\$_${k} = ${v.val};
 const ${k} = null as unknown as (typeof \$\$_${k} & { render: ()=> void });
 `);
+    } else if (v.mode === "prop") {
+      raw_types.push(`\
+const \$\$_${k} = ${v.val};
+const ${k} = null as unknown as typeof \$\$_${k};`);
     }
   }
 

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

@@ -1,10 +1,87 @@
-import { IItem } from "../../../../../../../utils/types/item";
+import { IContent, MContent } from "../../../../../../../utils/types/general";
-import { PG } from "../../../../../logic/ed-global";
+import { IItem, MItem } from "../../../../../../../utils/types/item";
+import { MSection } from "../../../../../../../utils/types/section";
+import {
+  getActiveMeta,
+  getMetaById,
+} from "../../../../../logic/active/get-meta";
+import { loadComponent } from "../../../../../logic/comp/load";
+import { PG, active } from "../../../../../logic/ed-global";
+import { fillID } from "../../../../../logic/tree/fill-id";
 
 export const edActionAttach = (p: PG, item: IItem) => {
   const pick = () => {
-    p.ui.popup.comp.open = (comp_id) => {};
+    p.ui.popup.comp.open = async (comp_id) => {
+      let comp_ref = p.comp.list[comp_id];
+      if (!comp_ref) {
+        await loadComponent(p, comp_id);
+        comp_ref = p.comp.list[comp_id];
+      }
+
+      if (!comp_ref) {
+        alert("Cannot load component!");
+        return;
+      }
+
+      const comp = comp_ref.doc.getMap("map").get("root")?.toJSON() as IItem;
+
+      if (!comp) {
+        alert("Failed to load component!");
+        return;
+      }
+
+      let active_meta = getActiveMeta(p);
+      if (!active_meta) {
+        alert("Please select an item/section to add component!");
+      } else {
+        let item = active_meta.item as IContent;
+        if (
+          item.type === "item" &&
+          item.component?.id &&
+          active_meta.parent?.id &&
+          item.component?.id !== active.comp_id
+        ) {
+          active_meta = getMetaById(p, active_meta.parent.id);
+
+          if (active_meta) {
+            item = active_meta.item;
+          } else {
+            alert("Warning: Please edit component first before adding. ");
+            return;
+          }
+        }
+
+        const mitem = active_meta.mitem;
+
+        if (item && mitem) {
+          if (item.type !== "text") {
+            addComponent(mitem as MItem, comp);
+          }
+        } else {
+          alert("Failed to add component!");
+        }
+      }
+    };
     p.render();
   };
   pick();
 };
+
+const addComponent = (mitem: MItem | MSection, comp: IItem) => {
+  const map = new Y.Map() as MContent;
+  if (map) {
+    comp.originalId = comp.id;
+
+    if (comp.component && !comp.component?.instances) {
+      comp.component.instances = {};
+    }
+
+    syncronize(map as any, fillID(comp));
+    const childs = mitem.get("childs");
+    if (childs) {
+      childs.push([map]);
+    }
+    const newitem = map.toJSON();
+    active.item_id = newitem.id;
+  }
+};

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

@@ -31,7 +31,7 @@ export const EdTreeName = ({
   if (item.component?.id && p.comp.loaded[item.component.id]) {
     name = p.comp.loaded[item.component.id].name;
 
-    if (item.component.props.child) {
+    if (item.component.props && item.component.props.child) {
       is_jsx_prop = true;
     }
   }