wip fix
This commit is contained in:
Rizky
parent
ed5360bbc4
commit
8bdc357d7f
|
|
@ -62,6 +62,7 @@ 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) {
|
||||
p.page.meta = meta;
|
||||
|
|
@ -78,7 +79,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const getMetaById = (p: PG, id: string) => {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 (meta.propvis[key] === false) return;
|
||||
} else if (visible) {
|
||||
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
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@ 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">
|
||||
<div className=" w-[70px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center">
|
||||
{name}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return name.length > 8 ? (
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@ export const viParts = (meta: IMeta, arg?: ViParts) => {
|
|||
shouldRenderChild = false;
|
||||
}
|
||||
|
||||
if (content.adv?.html && !content.adv?.js) {
|
||||
props.dangerouslySetInnerHTML = { __html: content.adv.html };
|
||||
shouldRenderChild = false;
|
||||
}
|
||||
|
||||
return {
|
||||
shouldRenderChild,
|
||||
props,
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 { VG, ViGlobal } from "./global";
|
||||
import { viParts } from "./parts";
|
||||
import { ViRender } from "./render";
|
||||
import { createViLocal } from "./script/local";
|
||||
import { createViPassProp } from "./script/passprop";
|
||||
import { ViGlobal } from "./global";
|
||||
import { viEvalProps } from "./script/eval-prop";
|
||||
import { viEvalScript } from "./script/eval-script";
|
||||
import { getScopeMeta, getScopeValue } from "./script/scope-meta";
|
||||
import { updatePropScope, viEvalProps } from "./script/eval-prop";
|
||||
import { viScriptArg } from "./script/arg";
|
||||
import { ViChild } from "./render";
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
if (meta.item.adv?.jsBuilt) {
|
||||
viEvalScript(vi, meta, scope);
|
||||
|
||||
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]} />;
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
return <ViChild meta={meta}>{children}</ViChild>;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
Loading…
Reference in New Issue