wip fix

app/web/src/nova/ed/logic/tree/build.tsx

@@ -62,20 +62,20 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
       }
 
       p.page.root_id = root_id;
+    }
 
-      if (p.site.layout && p.site.layout.id === p.page.cur.id) {
+    if (p.site.layout && p.site.layout.id === p.page.cur.id) {
-        p.page.meta = meta;
+      p.page.meta = meta;
-      } else {
+    } else {
-        if (root_id !== "root") {
+      if (root_id !== "root") {
-          for (const m of Object.values(meta)) {
+        for (const m of Object.values(meta)) {
-            if (m.parent?.id === "root") {
+          if (m.parent?.id === "root") {
-              m.parent.id = root_id;
+            m.parent.id = root_id;
-            }
           }
-          p.page.meta = { ...p.site.layout.meta, ...meta };
-        } else {
-          p.page.meta = meta;
         }
+        p.page.meta = { ...p.site.layout.meta, ...meta };
+      } else {
+        p.page.meta = meta;
       }
     }
   }

app/web/src/nova/ed/panel/main/main.tsx

@@ -19,177 +19,6 @@ export const EdMain = () => {
       </div>
     </div>
   );
-
-  // const local = useLocal({
-  //   el: null as ReactNode,
-  // });
-  // active.hover.renderMain = local.render;
-
-  // if (code.mode && !p.page.building) {
-  //   local.el = (
-  //     <View
-  //       mode={p.mode}
-  //       code_mode={code.mode}
-  //       layout={{ show: false }}
-  //       isEditor={true}
-  //       api_url={p.site.config.api_url}
-  //       component={{
-  //         async load(id_comp) {
-  //           await loadComponent(p, id_comp);
-  //         },
-  //       }}
-  //       load={{
-  //         mode: "tree_meta",
-  //         meta: p.page.meta,
-  //         entry: p.page.entry,
-  //         scope: p.page.scope,
-  //       }}
-  //       site_id={p.site.id}
-  //       page_id={p.page.cur.id}
-  //       bind={({ render }) => {
-  //         p.page.render = render;
-  //       }}
-  //       hidden={(meta) => {
-  //         if (meta.item.hidden) return true;
-  //         return false;
-  //       }}
-  //       hover={{
-  //         get(meta) {
-  //           return false;
-  //         },
-  //         set(meta) {
-  //           const outer = getOuterItem(meta);
-  //           if (outer) {
-  //             if (active.hover.id !== outer.id) {
-  //               active.hover.id = outer.id;
-  //               active.hover.renderTree();
-  //               active.hover.renderMain();
-  //             }
-  //           }
-  //         },
-  //       }}
-  //       active={{
-  //         get(meta) {
-  //           return active.item_id === meta.item.id;
-  //         },
-  //         set(meta) {
-  //           const outer = getOuterItem(meta);
-  //           if (outer) {
-  //             active.item_id = outer.id;
-  //           }
-
-  //           p.render();
-  //           p.page.render();
-  //           focus();
-  //         },
-  //         text({ meta }) {
-  //           const { item } = meta;
-
-  //           useEffect(() => {
-  //             return () => {
-  //               active.text.id = "";
-  //               p.render();
-  //             };
-  //           }, []);
-
-  //           const updateWithTimeout = (timeout: number) => {
-  //             return new Promise<void>((resolve) => {
-  //               const saving = {
-  //                 id: active.text.id,
-  //                 content: active.text.content,
-  //               };
-
-  //               clearTimeout(active.text.timeout);
-  //               active.text.timeout = setTimeout(() => {
-  //                 const meta = getMetaById(p, saving.id);
-  //                 if (meta && meta.mitem) {
-  //                   meta.mitem.set("html", saving.content);
-  //                 }
-  //                 resolve();
-  //               }, timeout);
-  //             });
-  //           };
-
-  //           if (active.text.id !== item.id) {
-  //             clearTimeout(active.text.timeout);
-  //             active.text.id = item.id;
-  //             active.text.content = item.html || "";
-  //             active.text.el = (
-  //               <div
-  //                 className={cx(
-  //                   `v-text-${item.id} v-text-${item.originalId} outline-none`
-  //                 )}
-  //                 ref={(ref) => {
-  //                   if (ref !== document.activeElement && ref) {
-  //                     const renaming = document.querySelector(".rename-item");
-  //                     const modals = document.querySelectorAll(
-  //                       "[data-floating-ui-portal]"
-  //                     );
-  //                     if (modals.length === 0 && !renaming) {
-  //                       ref.focus();
-  //                       setEndOfContenteditable(ref);
-  //                     }
-  //                   }
-  //                 }}
-  //                 onPointerDownCapture={(e) => {
-  //                   e.stopPropagation();
-  //                 }}
-  //                 contentEditable
-  //                 spellCheck={false}
-  //                 onInput={(e) => {
-  //                   const val = e.currentTarget.innerHTML;
-  //                   item.html = val;
-  //                   active.text.id = item.id;
-  //                   active.text.content = val;
-  //                   updateWithTimeout(100);
-  //                 }}
-  //                 dangerouslySetInnerHTML={{ __html: item.html || "" }}
-  //               ></div>
-  //             );
-  //           }
-
-  //           return active.text.el;
-  //         },
-  //       }}
-  //     />
-  //   );
-  // }
-
-  // return (
-  //   <div
-  //     className={cx(
-  //       "flex flex-1 relative overflow-auto ",
-  //       css`
-  //         contain: content;
-  //       `,
-  //       active.hover.id &&
-  //         active.hover.id !== active.item_id &&
-  //         css`
-  //           .s-${active.hover.id} {
-  //             position: relative;
-
-  //             &::after {
-  //               content: " ";
-  //               pointer-events: none;
-  //               position: absolute;
-  //               z-index: 100;
-  //               left: 0;
-  //               right: 0;
-  //               bottom: 0;
-  //               top: 0;
-  //               border: 2px solid #b2d2fd;
-  //             }
-  //           }
-  //         `
-  //     )}
-  //   >
-  //     {/* <div className="absolute bg-white px-1 z-10">{active.hover.id}</div> */}
-  //     <div className="absolute inset-0 flex flex-col">
-  //       {!!p.page.building && <Loading backdrop={false} />}
-  //       {!p.page.building && code.mode !== "" && local.el}
-  //     </div>
-  //   </div>
-  // );
 };
 
 function setEndOfContenteditable(div: any) {

app/web/src/nova/ed/panel/side/prop-instance.tsx

@@ -35,9 +35,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
 
       const type = m.get("meta")?.get("type") || "text";
       const visible = mprop?.get("visible") || "";
-      if (meta.propvis) {
+      if (visible) {
-        if (meta.propvis[key] === false) return;
-      } else if (visible) {
         return;
       }
 
@@ -129,6 +127,9 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
             if (!!value && ![`"`, "'", "`"].includes(value[0])) {
               hasCode = true;
             }
+            if (value.length > 100) {
+              hasCode = true;
+            }
 
             return (
               <div

app/web/src/nova/ed/panel/side/prop-instance/prop-label.tsx

@@ -3,8 +3,10 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
 
 export const EdPropLabel: FC<{ name: string }> = ({ name }) => {
   const label = (
-    <div className="pl-1 min-w-[70px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center">
+    <div className="px-1">
-      {name}
+      <div className=" w-[70px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center">
+        {name}
+      </div>
     </div>
   );
 

app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx

@@ -5,19 +5,16 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { useGlobal, useLocal } from "web-utils";
+import { useLocal } from "web-utils";
 import { FMCompDef } from "../../../../../utils/types/meta-fn";
-import { EDGlobal } from "../../../logic/ed-global";
 import { EdPropLabel } from "./prop-label";
 
 export const EdPropInstanceText: FC<{
   name: string;
   mprop: FMCompDef;
 }> = ({ name, mprop }) => {
-  const p = useGlobal(EDGlobal, "EDITOR");
-
   const local = useLocal({
-    value: mprop.get("value"),
+    value: unquote(mprop.get("value")),
     codeEditing: false,
     timeout: null as any,
   });
@@ -45,6 +42,18 @@ export const EdPropInstanceText: FC<{
   );
 };
 
+const unquote = (text: string) => {
+  const str = text.trim();
+  const first = str[0];
+
+  if (['"', "'", "`"].includes(first)) {
+    if (first === str[str.length - 1]) {
+      return str.slice(1, -1);
+    }
+  }
+  return str;
+};
+
 export function AutoHeightTextarea({
   minRows = 1,
   ...props

app/web/src/nova/vi/render/parts.tsx

@@ -28,6 +28,11 @@ export const viParts = (meta: IMeta, arg?: ViParts) => {
     props.dangerouslySetInnerHTML = { __html: item.html || "" };
     shouldRenderChild = false;
   }
+  
+  if (content.adv?.html && !content.adv?.js) {
+    props.dangerouslySetInnerHTML = { __html: content.adv.html };
+    shouldRenderChild = false;
+  }
 
   return {
     shouldRenderChild,

app/web/src/nova/vi/render/render.tsx

@@ -14,9 +14,17 @@ export const ViRender: FC<{
   if (!meta) return null;
 
   if (meta.item.adv?.js || meta.item.component?.id) {
-    return <ViScript meta={meta} />;
+    return <ViScript meta={meta}>{children}</ViScript>;
   }
 
+  return <ViChild meta={meta}>{children}</ViChild>;
+};
+
+export const ViChild: FC<{
+  meta: IMeta;
+  children?: ReactNode;
+}> = ({ meta, children }) => {
+  const vi = useGlobal(ViGlobal, "VI");
   const parts = viParts(meta);
   let renderChild = undefined;
 
@@ -37,5 +45,5 @@ export const ViRender: FC<{
         });
   }
 
-  return <div {...parts.props}>{renderChild}</div>;
+  return <div {...parts.props} children={renderChild} />;
 };

app/web/src/nova/vi/render/script.tsx

@@ -1,17 +1,16 @@
-import { FC, ReactNode, useEffect } from "react";
+import { FC, ReactNode } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { IMeta } from "../../ed/logic/ed-global";
-import { ErrorBox } from "../utils/error-box";
+import { ViGlobal } from "./global";
-import { VG, ViGlobal } from "./global";
+import { viEvalProps } from "./script/eval-prop";
-import { viParts } from "./parts";
+import { viEvalScript } from "./script/eval-script";
-import { ViRender } from "./render";
-import { createViLocal } from "./script/local";
-import { createViPassProp } from "./script/passprop";
 import { getScopeMeta, getScopeValue } from "./script/scope-meta";
-import { updatePropScope, viEvalProps } from "./script/eval-prop";
+import { ViChild } from "./render";
-import { viScriptArg } from "./script/arg";
 
-export const ViScript: FC<{ meta: IMeta }> = ({ meta }) => {
+export const ViScript: FC<{ meta: IMeta; children: ReactNode }> = ({
+  meta,
+  children,
+}) => {
   const vi = useGlobal(ViGlobal, "VI");
   const local = useLocal({});
   meta.render = local.render;
@@ -23,62 +22,10 @@ export const ViScript: FC<{ meta: IMeta }> = ({ meta }) => {
     viEvalProps(vi, meta, scope);
   }
 
-  viEvalScript(vi, meta, scope);
+  if (meta.item.adv?.jsBuilt) {
+    viEvalScript(vi, meta, scope);
 
-  if (meta.script) return meta.script.result;
+    if (meta.script) return meta.script.result;
-  return null;
-};
-
-export const viEvalScript = (
-  vi: { meta: VG["meta"] },
-  meta: IMeta,
-  scope: any
-) => {
-  const childs = meta.item.childs;
-  const parts = viParts(meta);
-
-  let children = undefined;
-  if (parts.shouldRenderChild) {
-    children =
-      Array.isArray(childs) &&
-      childs.map(({ id }) => {
-        return <ViRender key={id} meta={vi.meta[id]} />;
-      });
   }
-
+  return <ViChild meta={meta}>{children}</ViChild>;
-  if (!meta.script) {
-    meta.script = {
-      result: null,
-      Local: createViLocal(meta, scope),
-      PassProp: createViPassProp(vi, meta, scope),
-    };
-  }
-  const script = meta.script;
-
-  const exports = (window as any).exports;
-  const arg = {
-    useEffect,
-    children,
-    props: parts.props,
-    Local: script.Local,
-    PassProp: script?.PassProp,
-    ErrorBox: ErrorBox,
-    newElement: () => {},
-    render: (jsx: ReactNode) => {
-      script.result = jsx;
-    },
-    ...viScriptArg(),
-    ...exports,
-    ...scope,
-  };
-
-  const fn = new Function(
-    ...Object.keys(arg),
-    `// ${meta.item.name}: ${meta.item.id} 
-${meta.item.adv?.jsBuilt || ""}
-  `
-  );
-  fn(...Object.values(arg));
-
-  updatePropScope(meta, scope);
 };

app/web/src/nova/vi/render/script/eval-script.tsx

@@ -0,0 +1,64 @@
+import { ReactNode, useEffect } from "react";
+import { IMeta } from "../../../ed/logic/ed-global";
+import { ErrorBox } from "../../utils/error-box";
+import { VG } from "../global";
+import { viParts } from "../parts";
+import { ViRender } from "../render";
+import { viScriptArg } from "./arg";
+import { updatePropScope } from "./eval-prop";
+import { createViLocal } from "./local";
+import { createViPassProp } from "./passprop";
+
+export const viEvalScript = (
+  vi: { meta: VG["meta"] },
+  meta: IMeta,
+  scope: any
+) => {
+  const childs = meta.item.childs;
+  const parts = viParts(meta);
+
+  let children = undefined;
+  if (parts.shouldRenderChild) {
+    children =
+      Array.isArray(childs) &&
+      childs.map(({ id }) => {
+        return <ViRender key={id} meta={vi.meta[id]} />;
+      });
+  }
+
+  if (!meta.script) {
+    meta.script = {
+      result: null,
+      Local: createViLocal(meta, scope),
+      PassProp: createViPassProp(vi, meta, scope),
+    };
+  }
+  const script = meta.script;
+
+  const exports = (window as any).exports;
+  const arg = {
+    useEffect,
+    children,
+    props: parts.props,
+    Local: script.Local,
+    PassProp: script?.PassProp,
+    ErrorBox: ErrorBox,
+    newElement: () => {},
+    render: (jsx: ReactNode) => {
+      script.result = jsx;
+    },
+    ...viScriptArg(),
+    ...exports,
+    ...scope,
+  };
+
+  const fn = new Function(
+    ...Object.keys(arg),
+    `// ${meta.item.name}: ${meta.item.id} 
+${meta.item.adv?.jsBuilt || ""}
+  `
+  );
+  fn(...Object.values(arg));
+
+  updatePropScope(meta, scope);
+};