wip fix

app/web/src/nova/ed/logic/ed-global.ts

@@ -158,6 +158,8 @@ export const EDGlobal = {
     siteTypes: {} as Record<string, string>,
     loaded: false,
     do_edit: async (newval: string, all?: boolean) => {},
+    db: null as any,
+    api: null as any,
   },
   page: {
     root_id: "root",

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

@@ -4,9 +4,10 @@ import { IItem } from "../../../../utils/types/item";
 import { FMCompDef } from "../../../../utils/types/meta-fn";
 import { Menu, MenuItem } from "../../../../utils/ui/context-menu";
 import { EDGlobal, EdMeta, active } from "../../logic/ed-global";
+import { EdPropInstanceCode } from "./prop-instance/prop-code";
+import { EdPropInstanceOptions } from "./prop-instance/prop-option";
 import { reset } from "./prop-instance/prop-reset";
 import { EdPropInstanceText } from "./prop-instance/prop-text";
-import { Loading } from "../../../../utils/ui/loading";
 
 export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -33,8 +34,11 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
       let mprop = mprops.get(key);
 
       const type = m.get("meta")?.get("type") || "text";
+      const visible = mprop?.get("visible") || "";
       if (meta.propvis) {
         if (meta.propvis[key] === false) return;
+      } else if (visible) {
+        return;
       }
 
       if (!local.showJSX && type === "content-element") {
@@ -119,6 +123,13 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
           )}
           {filtered.map(({ name, mprop }) => {
             const type = mprop.get("meta")?.get("type") || "text";
+            let hasCode = false;
+
+            const value = mprop.get("value") || "";
+            if (!!value && ![`"`, "'", "`"].includes(value[0])) {
+              hasCode = true;
+            }
+
             return (
               <div
                 key={name}
@@ -130,12 +141,25 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
                   local.render();
                 }}
               >
-                <>
+                {hasCode ? (
-                  {type === "text" && (
+                  <>
-                    <EdPropInstanceText mprop={mprop} name={name} />
+                    <EdPropInstanceCode mprop={mprop} name={name} />
-                  )}
+                  </>
-                  {type !== "text" && <div className="p-1">{name}</div>}
+                ) : (
-                </>
+                  <>
+                    {type === "text" && (
+                      <EdPropInstanceText mprop={mprop} name={name} />
+                    )}
+                    {type === "option" && (
+                      <EdPropInstanceOptions mprop={mprop} name={name} />
+                    )}
+                    {type === "content-element" && (
+                      <div className="min-h-[28px] px-1 flex items-center">
+                        {name}
+                      </div>
+                    )}
+                  </>
+                )}
               </div>
             );
           })}

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

@@ -1,3 +1,31 @@
-export const propCode = () => {
+import { FC } from "react";
-  return <div className="flex">Code</div>;
+import { FMCompDef } from "../../../../../utils/types/meta-fn";
+import { EdPropLabel } from "./prop-label";
+
+export const EdPropInstanceCode: FC<{
+  name: string;
+  mprop: FMCompDef;
+}> = ({ name, mprop }) => {
+  return (
+    <div className="flex items-center min-h-[28px]">
+      <EdPropLabel name={name} />
+      <div className="flex-1 flex justify-end pr-1">
+        <div
+          className="m-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px]"
+          onClick={() => {}}
+        >
+          EDIT CODE
+        </div>
+
+        <div
+          className={
+            "my-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px] flex items-center"
+          }
+          dangerouslySetInnerHTML={{
+            __html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
+          }}
+        ></div>
+      </div>
+    </div>
+  );
 };

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

@@ -0,0 +1,98 @@
+import { FC } from "react";
+import { useGlobal, useLocal } from "web-utils";
+import { createAPI, createDB } from "../../../../../utils/script/init-api";
+import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
+import { EDGlobal } from "../../../logic/ed-global";
+import { EdPropLabel } from "./prop-label";
+
+export const EdPropInstanceOptions: FC<{
+  name: string;
+  mprop: FMCompDef;
+}> = ({ name, mprop }) => {
+  const prop = mprop.toJSON() as FNCompDef;
+  const local = useLocal({
+    codeEditing: false,
+    loading: false,
+    loaded: false as any,
+    isOpen: false,
+    val: "",
+    metaFn: null as null | (() => Promise<{ label: string; value: any }[]>),
+  });
+  const p = useGlobal(EDGlobal, "EDITOR");
+
+  let metaOptions: { label: string; value: any }[] = [];
+
+  if (prop.meta?.options || prop.meta?.optionsBuilt) {
+    if (!local.loaded) {
+      try {
+        if (p.site.config.api_url) {
+          if (!p.script.db) p.script.db = createDB(p.site.config.api_url);
+          if (!p.script.api) p.script.api = createAPI(p.site.config.api_url);
+        }
+
+        const args = {
+          ...window.exports,
+          db: p.script.db,
+          api: p.script.api,
+        };
+        eval(`
+${Object.entries(args)
+  .map((e) => `const ${e[0]} = args["${e[0]}"]`)
+  .join(";\n")}
+const resOpt = ${prop.meta.optionsBuilt || prop.meta.options};
+if (typeof resOpt === 'function')  local.metaFn = resOpt;
+else metaOptions = resOpt;
+`);
+      } catch (e) {
+        console.error(e);
+      }
+    } else {
+      metaOptions = local.loaded;
+    }
+
+    if (local.metaFn && !local.loaded && !local.loading) {
+      local.loading = true;
+      local.metaFn().then((e) => {
+        local.loading = false;
+        local.loaded = e;
+        local.render();
+      });
+    }
+  }
+
+  let evalue: any = null;
+  try {
+    eval(`evalue = ${prop.value}`);
+  } catch (e) {}
+
+  let mode = prop.meta?.option_mode;
+  if (!mode) mode = "button";
+  return (
+    <div className="flex items-center min-h-[28px]">
+      <EdPropLabel name={name} />
+      <div className="flex flex-1 justify-end">
+        {mode === "button" && (
+          <div className="flex-1 pt-1 px-2 flex flex-wrap justify-end space-x-1">
+            {Array.isArray(metaOptions) &&
+              metaOptions.map((item, idx) => {
+                return (
+                  <div
+                    key={idx}
+                    className={cx(
+                      "flex px-2 text-xs mb-1 border rounded-sm cursor-pointer  justify-center ",
+                      item.value !== evalue
+                        ? "bg-white  text-blue-700 hover:bg-blue-50 hover:border-blue-500"
+                        : "bg-blue-700 text-white border-blue-700"
+                    )}
+                    onClick={() => {}}
+                  >
+                    {item.label}
+                  </div>
+                );
+              })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -5,10 +5,10 @@ import {
   useEffect,
   useRef,
 } from "react";
-import { FMCompDef } from "../../../../../utils/types/meta-fn";
 import { useGlobal, useLocal } from "web-utils";
+import { FMCompDef } from "../../../../../utils/types/meta-fn";
 import { EDGlobal } from "../../../logic/ed-global";
-import { Tooltip } from "../../../../../utils/ui/tooltip";
+import { EdPropLabel } from "./prop-label";
 
 export const EdPropInstanceText: FC<{
   name: string;
@@ -36,21 +36,9 @@ export const EdPropInstanceText: FC<{
     local.render();
   }, [val, valBuilt]);
 
-  const label = (
-    <div className="pl-1 w-[70px] overflow-hidden text-ellipsis whitespace-nowrap">
-      {name}
-    </div>
-  );
-
   return (
-    <div className="flex items-center">
+    <div className="flex items-center min-h-[28px]">
-      {name.length > 8 ? (
+      <EdPropLabel name={name} />
-        <Tooltip content={name} placement="left" delay={100}>
-          {label}
-        </Tooltip>
-      ) : (
-        label
-      )}
       <AutoHeightTextarea
         className="flex-1 outline-none border-l p-1 ml-1 overflow-hidden focus:bg-blue-50"
         value={local.value || ""}

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

@@ -35,6 +35,7 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
         if (meta.propvis[node.data.jsx_prop_name] === false) return <></>;
       } else {
         if (!jsxPropLoadingRender[meta.item.id]) {
+          setTimeout(p.render, 500);
           jsxPropLoadingRender[meta.item.id] = node.data.jsx_prop_name;
         }
         if (jsxPropLoadingRender[meta.item.id] === node.data.jsx_prop_name) {