From 0848bc4b1e2751bfdf975b636d67b4edb2cd6976 Mon Sep 17 00:00:00 2001 From: Rizky Date: Sat, 23 Dec 2023 18:07:03 +0700 Subject: [PATCH] wip fix --- .../src/nova/ed/panel/main/main-per-item.tsx | 30 ++++++--- app/web/src/nova/vi/render/parts.tsx | 62 +++++++++++++------ app/web/src/nova/vi/render/render.tsx | 24 +------ app/web/src/nova/vi/render/script.tsx | 1 - .../src/nova/vi/render/script/eval-script.tsx | 15 +---- app/web/src/utils/css/gen.ts | 2 +- 6 files changed, 71 insertions(+), 63 deletions(-) diff --git a/app/web/src/nova/ed/panel/main/main-per-item.tsx b/app/web/src/nova/ed/panel/main/main-per-item.tsx index cfc500cd..e07e7a97 100644 --- a/app/web/src/nova/ed/panel/main/main-per-item.tsx +++ b/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) { - parts.props.spellCheck = false; - parts.props.contentEditable = true; + if ((meta.item as IContent).type === "text") { + const prop = meta.item.adv?.js ? parts.text_props : parts.props; + + 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") { diff --git a/app/web/src/nova/vi/render/parts.tsx b/app/web/src/nova/vi/render/parts.tsx index 991be30b..4a4d97dc 100644 --- a/app/web/src/nova/vi/render/parts.tsx +++ b/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) => { - const item = meta.item; - const content = meta.item as unknown as IContent; +type PROPS = React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLDivElement +>; - const props: React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLDivElement - > = { +export const viParts = ( + vi: { + meta: Record; + }, + meta: IMeta +) => { + const item = meta.item; + + const props: PROPS = { className: produceCSS(item, { - mode: arg?.mode || "desktop", - hover: arg?.hover, - active: arg?.active, + mode: "desktop", }), }; - let shouldRenderChild = true; - if (content.type === "text" && !item.adv?.js) { - props.dangerouslySetInnerHTML = { __html: item.html || "" }; - shouldRenderChild = false; - } + let text_props: PROPS = {}; - if (content.adv?.html && !content.adv?.js) { - props.dangerouslySetInnerHTML = { __html: content.adv.html }; - shouldRenderChild = false; + const childs = meta.item.childs; + let children = undefined; + if ((meta.item as IContent).type === "text") { + children = ; + } else { + children = + Array.isArray(childs) && + childs?.map((item) => { + if (!item) return null; + const { id } = item; + + return ( + + + + + + ); + }); } + props.children = children; return { - shouldRenderChild, props, + text_props, }; }; + +const HTMLChild: FC<{ props: PROPS }> = ({ props }) => { + return ; +}; diff --git a/app/web/src/nova/vi/render/render.tsx b/app/web/src/nova/vi/render/render.tsx index 9edc639d..5c496810 100644 --- a/app/web/src/nova/vi/render/render.tsx +++ b/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; - - if (parts.shouldRenderChild) { - renderChild = children - ? children - : meta.item.childs?.map((item) => { - if (!item) return null; - const { id } = item; - - return ( - - - - - - ); - }); - } - - return
; + return
; }; diff --git a/app/web/src/nova/vi/render/script.tsx b/app/web/src/nova/vi/render/script.tsx index ad544b41..45ee09b3 100644 --- a/app/web/src/nova/vi/render/script.tsx +++ b/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 {children}; diff --git a/app/web/src/nova/vi/render/script/eval-script.tsx b/app/web/src/nova/vi/render/script/eval-script.tsx index afc8ad01..7dcb1098 100644 --- a/app/web/src/nova/vi/render/script/eval-script.tsx +++ b/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(meta); + const parts = viParts(vi, meta); if (vi.visit) vi.visit(meta, parts); - let children = undefined; - if (parts.shouldRenderChild) { - children = - Array.isArray(childs) && - childs.map(({ id }) => { - return ; - }); - } - 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, diff --git a/app/web/src/utils/css/gen.ts b/app/web/src/utils/css/gen.ts index 172e5b27..d2dc81b8 100644 --- a/app/web/src/utils/css/gen.ts +++ b/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;