wip fix

app/web/src/nova/ed/panel/main/main-per-item.tsx

@@ -1,3 +1,4 @@
+import { produceCSS } from "../../../../utils/css/gen";
 import { IContent } from "../../../../utils/types/general";
 import {
   getSelectionOffset,
@@ -25,22 +26,34 @@ export const mainPerItemVisit = (
   meta: MPIVParam[0],
   parts: MPIVParam[1]
 ) => {
-  if ((meta.item as IContent).type === "text" && !meta.item.adv?.js) {
+  if ((meta.item as IContent).type === "text") {
-    parts.props.spellCheck = false;
+    const prop = meta.item.adv?.js ? parts.text_props : parts.props;
-    parts.props.contentEditable = true;
+
+    if (!meta.item.adv?.js) {
+      prop.dangerouslySetInnerHTML = { __html: meta.item.html || "" };
+      delete parts.props.children;
+    } else {
+      prop.dangerouslySetInnerHTML = { __html: meta.item.html || "" };
+      delete prop.children;
+    }
+
+    prop.spellCheck = false;
+    prop.contentEditable = true;
+
+    prop.suppressContentEditableWarning = true;
     if (meta.parent?.comp_id) {
       if (meta.parent.comp_id !== active.comp_id) {
-        parts.props.contentEditable = false;
+        prop.contentEditable = false;
       }
     }
 
-    parts.props.onBlur = (e) => {
+    prop.onBlur = (e) => {
       text_edit.prevent_select_all = false;
       const sel = window.getSelection();
       if (sel) sel.removeAllRanges();
     };
 
-    parts.props.ref = (el) => {
+    prop.ref = (el) => {
       if (el && text_edit.caret) {
         if (text_edit.id === meta.item.id) {
           setCaret(el, text_edit.caret);
@@ -49,7 +62,7 @@ export const mainPerItemVisit = (
       }
     };
 
-    parts.props.onKeyDown = (e) => {
+    prop.onKeyDown = (e) => {
       if (typeof text_edit.del_key_id === "string") {
         if (e.key === "Backspace" || e.key === "Delete") {
           e.currentTarget.blur();
@@ -61,7 +74,7 @@ export const mainPerItemVisit = (
       }
     };
 
-    parts.props.onInput = (e) => {
+    prop.onInput = (e) => {
       e.stopPropagation();
       e.preventDefault();
       const val = e.currentTarget.innerHTML;
@@ -147,7 +160,6 @@ export const mainPerItemVisit = (
     active.hover.renderTree();
   };
   parts.props.onPointerDown = (e) => {
-    console.log(p);
     e.stopPropagation();
 
     if ((meta.item as IContent).type === "text") {

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

@@ -1,7 +1,10 @@
+import { FC, ReactNode, Suspense } from "react";
 import { produceCSS } from "../../../utils/css/gen";
 import { IContent } from "../../../utils/types/general";
 import { IMeta } from "../../ed/logic/ed-global";
+import { ErrorBox } from "../utils/error-box";
 import { VG } from "./global";
+import { ViRender } from "./render";
 
 export type ViParts = {
   mode: "mobile" | "desktop";
@@ -9,34 +12,55 @@ export type ViParts = {
   active?: boolean;
 };
 
-export const viParts = (meta: IMeta, arg?: ViParts) => {
+type PROPS = React.DetailedHTMLProps<
-  const item = meta.item;
+  React.HTMLAttributes<HTMLDivElement>,
-  const content = meta.item as unknown as IContent;
+  HTMLDivElement
+>;
 
-  const props: React.DetailedHTMLProps<
+export const viParts = (
-    React.HTMLAttributes<HTMLDivElement>,
+  vi: {
-    HTMLDivElement
+    meta: Record<string, IMeta>;
-  > = {
+  },
+  meta: IMeta
+) => {
+  const item = meta.item;
+
+  const props: PROPS = {
     className: produceCSS(item, {
-      mode: arg?.mode || "desktop",
+      mode: "desktop",
-      hover: arg?.hover,
-      active: arg?.active,
     }),
   };
 
-  let shouldRenderChild = true;
+  let text_props: PROPS = {};
-  if (content.type === "text" && !item.adv?.js) {
-    props.dangerouslySetInnerHTML = { __html: item.html || "" };
-    shouldRenderChild = false;
-  }
 
-  if (content.adv?.html && !content.adv?.js) {
+  const childs = meta.item.childs;
-    props.dangerouslySetInnerHTML = { __html: content.adv.html };
+  let children = undefined;
-    shouldRenderChild = false;
+  if ((meta.item as IContent).type === "text") {
+    children = <HTMLChild props={text_props} />;
+  } else {
+    children =
+      Array.isArray(childs) &&
+      childs?.map((item) => {
+        if (!item) return null;
+        const { id } = item;
+
+        return (
+          <ErrorBox key={id} meta={meta}>
+            <Suspense>
+              <ViRender meta={vi.meta[id]} />
+            </Suspense>
+          </ErrorBox>
+        );
+      });
   }
+  props.children = children;
 
   return {
-    shouldRenderChild,
     props,
+    text_props,
   };
 };
+
+const HTMLChild: FC<{ props: PROPS }> = ({ props }) => {
+  return <span {...props} />;
+};

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

@@ -5,6 +5,7 @@ import { ErrorBox } from "../utils/error-box";
 import { ViGlobal } from "./global";
 import { viParts } from "./parts";
 import { ViScript } from "./script";
+import { IContent } from "../../../utils/types/general";
 
 export const ViRender: FC<{
   meta: IMeta;
@@ -26,27 +27,8 @@ export const ViChild: FC<{
   children?: ReactNode;
 }> = ({ meta, children }) => {
   const vi = useGlobal(ViGlobal, "VI");
-  const parts = viParts(meta);
+  const parts = viParts(vi, meta);
   if (vi.visit) vi.visit(meta, parts);
 
-  let renderChild = undefined;
+  return <div {...parts.props} />;
-
-  if (parts.shouldRenderChild) {
-    renderChild = children
-      ? children
-      : meta.item.childs?.map((item) => {
-          if (!item) return null;
-          const { id } = item;
-
-          return (
-            <ErrorBox key={id} meta={meta}>
-              <Suspense>
-                <ViRender meta={vi.meta[id]} />
-              </Suspense>
-            </ErrorBox>
-          );
-        });
-  }
-
-  return <div {...parts.props} children={renderChild} />;
 };

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

@@ -24,7 +24,6 @@ export const ViScript: FC<{ meta: IMeta; children: ReactNode }> = ({
 
   if (meta.item.adv?.js) {
     viEvalScript(vi, meta, scope);
-
     if (meta.script) return meta.script.result;
   }
   return <ViChild meta={meta}>{children}</ViChild>;

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

@@ -8,6 +8,7 @@ import { viScriptArg } from "./arg";
 import { updatePropScope } from "./eval-prop";
 import { createViLocal } from "./local";
 import { createViPassProp } from "./passprop";
+import { IContent } from "../../../../utils/types/general";
 
 export const viEvalScript = (
   vi: {
@@ -18,19 +19,9 @@ export const viEvalScript = (
   meta: IMeta,
   scope: any
 ) => {
-  const childs = meta.item.childs;
+  const parts = viParts(vi, meta);
-  const parts = viParts(meta);
   if (vi.visit) vi.visit(meta, parts);
 
-  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,
@@ -43,7 +34,7 @@ export const viEvalScript = (
   const exports = (window as any).exports;
   const arg = {
     useEffect,
-    children,
+    children: parts.props.children,
     props: parts.props,
     Local: script.Local,
     PassProp: script?.PassProp,

app/web/src/utils/css/gen.ts

@@ -21,7 +21,7 @@ export const produceCSS = (
 ): string => {
   try {
     return cx([
-      `s-${item.id}`,
+      item.id ? `s-${item.id}` : "",
       css`
         display: flex;
         position: relative;