From 1e523892bc101d1b50c14403f18677fd5078393e Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Sun, 18 Feb 2024 16:12:56 +0700
Subject: [PATCH] wip fix name

---
 app/srv/ws/sync/actions/code_edit.ts          | 14 ++--
 .../src/nova/ed/panel/header/mid/add-item.tsx | 10 +++
 .../src/nova/ed/panel/header/mid/add-text.tsx | 11 +++
 .../src/nova/ed/panel/popup/script/monaco.tsx |  5 +-
 .../src/nova/ed/panel/tree/node/item/name.tsx | 67 ++++++++++++++-----
 5 files changed, 78 insertions(+), 29 deletions(-)

diff --git a/app/srv/ws/sync/actions/code_edit.ts b/app/srv/ws/sync/actions/code_edit.ts
index 86d42cd8..5e54f037 100644
--- a/app/srv/ws/sync/actions/code_edit.ts
+++ b/app/srv/ws/sync/actions/code_edit.ts
@@ -48,7 +48,6 @@ export const code_edit: SAction["code"]["edit"] = async function (
 
     if (root) {
       const mitem = findId(root, item_id);
-
       if (mitem) {
         if (arg.type === "adv") {
           const mode = arg.mode;
@@ -228,15 +227,14 @@ const findId = (mitem: MContent | MRoot, id: string) => {
 
   if (!found) {
     const mprops = m.get("component")?.get("props");
+
     if (mprops) {
       mprops.forEach((mprop) => {
-        if (mprop.get("meta")?.get("type") === "content-element") {
-          const mcontent = mprop.get("content");
-          if (mcontent) {
-            const f = findId(mcontent, id);
-            if (f) {
-              found = f;
-            }
+        const mcontent = mprop.get("content");
+        if (mcontent) {
+          const f = findId(mcontent, id);
+          if (f) {
+            found = f;
           }
         }
       });
diff --git a/app/web/src/nova/ed/panel/header/mid/add-item.tsx b/app/web/src/nova/ed/panel/header/mid/add-item.tsx
index 9311bf0b..d8ae5f47 100644
--- a/app/web/src/nova/ed/panel/header/mid/add-item.tsx
+++ b/app/web/src/nova/ed/panel/header/mid/add-item.tsx
@@ -38,6 +38,16 @@ export const EdAddItem = () => {
           },
         } as IItem;
 
+        if (meta.item.component?.id && meta.item.component.props.child) {
+          const child_id = meta.item.component.props.child.content?.id;
+          if (child_id) {
+            const child_meta = getMetaById(p, child_id);
+            if (child_meta) {
+              meta = child_meta;
+            }
+          }
+        }
+
         let mitem = meta.mitem;
         if (mitem) {
           const item = meta.item as IContent;
diff --git a/app/web/src/nova/ed/panel/header/mid/add-text.tsx b/app/web/src/nova/ed/panel/header/mid/add-text.tsx
index 5b54c64f..84bc81db 100644
--- a/app/web/src/nova/ed/panel/header/mid/add-text.tsx
+++ b/app/web/src/nova/ed/panel/header/mid/add-text.tsx
@@ -28,6 +28,16 @@ export const EdAddText = () => {
         }
         if (!meta) return null;
 
+        if (meta.item.component?.id && meta.item.component.props.child) {
+          const child_id = meta.item.component.props.child.content?.id;
+          if (child_id) {
+            const child_meta = getMetaById(p, child_id);
+            if (child_meta) {
+              meta = child_meta;
+            }
+          }
+        }
+
         meta.mitem?.doc?.transact(() => {
           if (!meta) return null;
 
@@ -45,6 +55,7 @@ export const EdAddText = () => {
           } as IText;
 
           let mitem = meta.mitem as MContent;
+
           if (mitem) {
             const item = meta.item as IContent;
 
diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
index 76dd411d..4fcb0bdf 100644
--- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx
+++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx
@@ -9,7 +9,7 @@ import { jscript } from "../../../../../utils/script/jscript";
 import { jsMount } from "../../../../../utils/script/mount";
 import { monacoTypings } from "../../../../../utils/script/typings";
 import { Loading } from "../../../../../utils/ui/loading";
-import { getActiveMeta } from "../../../logic/active/get-meta";
+import { getActiveMeta, getMetaById } from "../../../logic/active/get-meta";
 import { EDGlobal, IMeta, active } from "../../../logic/ed-global";
 import { edMonacoDefaultVal } from "./default-val";
 import { declareScope } from "./scope/scope";
@@ -169,7 +169,6 @@ declare global {
 }
 `
                       );
-
                     }
 
                     const nmodel = monaco.editor.createModel(
@@ -398,7 +397,7 @@ declare global {
         clearTimeout(scriptEdit.timeout);
         const applyChanges = async () => {
           if (!p.sync) return;
-          
+
           const value = local.value;
           const meta = getActiveMeta(p);
           const mode = p.ui.popup.script.mode;
diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
index dcb861ce..218bc376 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
@@ -24,13 +24,18 @@ export const EdTreeName = ({
   const item = node.data?.item;
 
   if (!item) return <></>;
-  const is_jsx_prop = !!node.data?.jsx_prop?.is_root;
+  let is_jsx_prop = !!node.data?.jsx_prop?.is_root;
 
   const isRenaming = p.ui.tree.rename_id === item.id;
   let name = item.name;
   if (item.component?.id && p.comp.loaded[item.component.id]) {
     name = p.comp.loaded[item.component.id].name;
+
+    if (item.component.props.child) {
+      is_jsx_prop = true;
+    }
   }
+
   return (
     <div className="text-[14px] relative flex flex-col justify-center cursor-pointer flex-1">
       {/* <div className="text-[10px]">{item.id}</div> */}
@@ -144,7 +149,7 @@ const Name: FC<{ name: string; is_jsx_prop: boolean; meta?: IMeta }> = ({
           P
         </Tooltip>
         <div className="flex-1">{name}</div>
-        {meta && meta.mitem && <GenerateJSX mitem={meta.mitem} />}
+        {meta && meta.mitem && <GenerateJSX meta={meta} />}
         {meta && !meta.mitem && (
           <Tooltip
             delay={0}
@@ -185,28 +190,54 @@ Please put {${name}} somewhere inside component JS.`}</div>
   return <div>{name}</div>;
 };
 
-const GenerateJSX: FC<{ mitem: MItem }> = ({ mitem }) => {
+const GenerateJSX: FC<{ meta: IMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
   return (
     <Tooltip
       content="Generate JSX"
       onClick={() => {
-        const genJSX = findDefaultJSX(p, mitem);
-        const ijson = mitem.toJSON() as IItem;
-        mitem.doc?.transact(() => {
-          syncronize(mitem as any, {
-            type: "item",
-            dim: { w: "full", h: "full" },
-            childs: [],
-            ...(genJSX as any),
-            name: ijson.name,
-            id: ijson.id,
-            hidden: false,
-            originalId: ijson.originalId,
+        let mitem = undefined as undefined | MItem;
+        let is_child = false;
+        if (meta.item.component?.id) {
+          mitem = meta.mitem
+            ?.get("component")
+            ?.get("props")
+            ?.get("child")
+            ?.get("content");
+          is_child = true;
+        } else {
+          mitem = meta.mitem;
+        }
+
+        if (mitem) {
+          const genJSX = findDefaultJSX(p, mitem);
+          const ijson = mitem.toJSON() as IItem;
+
+          mitem.doc?.transact(() => {
+            syncronize(mitem as any, {
+              type: "item",
+              dim: { w: "full", h: "full" },
+              childs: [],
+              ...(genJSX as any),
+              name: ijson.name,
+              id: ijson.id,
+              hidden: false,
+              originalId: ijson.originalId,
+              ...(is_child
+                ? {
+                    adv: {
+                      css: "",
+                      js: "<>{children}</>",
+                      jsBuilt:
+                        "render(/* @__PURE__ */ React.createElement(React.Fragment, null, children));\n",
+                    },
+                  }
+                : {}),
+            });
           });
-        });
-        treeRebuild(p);
-        p.render();
+          treeRebuild(p);
+          p.render();
+        }
       }}
     >
       <div