midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
Rizky 2024-03-05 12:00:56 +07:00
parent 17053a5345
commit 0e7c9e5adc
9 changed files with 59 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/srv/ws/sync/actions/code_edit.ts
View File

@ -12,6 +12,8 @@ import { parseJs } from "../editor/parser/parse-js";
import { snapshot } from "../entity/snapshot";
import { validate } from "uuid";
import { gzipAsync } from "utils/diff/diff";
import { user } from "../entity/user";
import { loadComponent } from "../editor/load-component";
const decoder = new TextDecoder();
const timeout = {
@ -40,6 +42,8 @@ export const code_edit: SAction["code"]["edit"] = async function (
} else if (comp_id) {
save_to = "comp";
const ref = docs.comp[comp_id];
await loadComponent(comp_id, this);
if (ref) {
root = ref.doc.getMap("map").get("root");
doc = ref.doc as Doc;

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

@ -238,6 +238,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
<EdPropInstanceCode
mprop={mprop}
name={name}
label={cprop.label}
labelClick={labelClick}
onEditCode={createEditScript(p, "value", mprop, name)}
/>
@ -247,6 +248,7 @@ export const EdSidePropInstance: FC<{ meta: IMeta }> = ({ meta }) => {
{type === "text" && (
<EdPropInstanceText
mprop={mprop}
label={cprop.label}
name={name}
labelClick={labelClick}
/>

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

@ -5,15 +5,16 @@ import { useGlobal } from "web-utils";
import { EDGlobal, active } from "../../../logic/ed-global";
export const EdPropInstanceCode: FC<{
label?: string;
name: string;
mprop: FMCompDef;
labelClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
onEditCode: React.MouseEventHandler<HTMLDivElement> | undefined;
}> = ({ name, labelClick, onEditCode }) => {
}> = ({ label, name, labelClick, onEditCode }) => {
const p = useGlobal(EDGlobal, "EDITOR");
return (
<div className="flex items-center min-h-[28px]">
<EdPropLabel name={name} labelClick={labelClick} />
<EdPropLabel name={label || name} labelClick={labelClick} />
<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] select-none"

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

@ -100,7 +100,7 @@ else metaOptions = resOpt;
return (
<div className="flex items-stretch min-h-[28px]">
<EdPropLabel name={name} labelClick={labelClick} />
<EdPropLabel name={cprop.label || name} labelClick={labelClick} />
<div className="flex flex-1 justify-end">
{mode === "dropdown" && (
<>

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

@ -13,9 +13,10 @@ import { EDGlobal } from "../../../logic/ed-global";
export const EdPropInstanceText: FC<{
name: string;
label?: string;
mprop: FMCompDef;
labelClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
}> = ({ name, mprop, labelClick }) => {
}> = ({ label, name, mprop, labelClick }) => {
const p = useGlobal(EDGlobal, "EDITOR");
const val = mprop.get("value");
@ -32,7 +33,7 @@ export const EdPropInstanceText: FC<{
return (
<div className="flex items-center min-h-[28px]">
<EdPropLabel name={name} labelClick={labelClick} />
<EdPropLabel name={label || name} labelClick={labelClick} />
<AutoHeightTextarea
className="flex-1 outline-none border-l p-1 overflow-hidden focus:bg-blue-50"
value={local.value || ""}

7
app/web/src/nova/ed/panel/side/prop-master.tsx
View File

@ -7,14 +7,13 @@ import {
} from "@minoru/react-dnd-treeview";
import { FC, useState } from "react";
import { HTML5Backend } from "react-dnd-html5-backend";
import { useGlobal, useLocal } from "web-utils";
import { useGlobal } from "web-utils";
import { IItem } from "../../../../utils/types/item";
import { FMCompDef } from "../../../../utils/types/meta-fn";
import { EDGlobal, IMeta, active } from "../../logic/ed-global";
import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
import { propPopover } from "./prop-master/prop-form";
import { ChevronLeft } from "../popup/script/workbench";
import { treeRebuild } from "../../logic/tree/build";
import { propPopover } from "./prop-master/prop-form";
import { EdPropCompTreeItem, PropItem } from "./prop-master/tree-item";
const propRef = {
el: null as any,

40
app/web/src/nova/ed/panel/side/prop-master/prop-form.tsx
View File

@ -1,4 +1,4 @@
import { FC } from "react";
import { FC, useEffect } from "react";
import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
import { useGlobal, useLocal } from "web-utils";
import { TypedMap } from "yjs-types";
@ -23,12 +23,18 @@ export const EdPropPopoverForm: FC<{
const mmeta = mprop.get("meta");
const local = useLocal({
name,
label: "",
rename_timeout: null as any,
});
if (!mmeta) return null;
const type = mmeta.get("type");
useEffect(() => {
local.label = mprop.get("label") || local.name.replace(/\_/gi, " ");
local.render();
}, []);
const rename = () => {
const keys = Object.keys(mprop.parent?.toJSON());
if ([...keys, ...invalidKeyword].includes(local.name)) {
@ -113,6 +119,10 @@ export const EdPropPopoverForm: FC<{
.toLowerCase()
.replace(/\W/gi, "_");
if (!local.label) {
local.label = local.name.replace(/\_/gi, " ");
}
local.render();
}}
onBlur={() => {
@ -128,6 +138,32 @@ export const EdPropPopoverForm: FC<{
/>
</div>
<div className="border-t border-slate-300 px-2 pt-2 pb-1 flex flex-col items-stretch">
<div className="uppercase text-xs text-slate-500">Label</div>
<input
spellCheck={false}
type="text"
className="p-1 outline-none border focus:border-blue-500"
value={local.label}
onChange={(e) => {
local.label = e.currentTarget.value;
local.render();
}}
onBlur={() => {
mprop.set("label", local.label);
if (!local.label) {
local.label = local.name.replace(/\_/gi, " ");
local.render();
}
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.currentTarget.blur();
}
}}
/>
</div>
{type === "content-element" && (
<>
<div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
@ -139,7 +175,7 @@ export const EdPropPopoverForm: FC<{
EDIT CODE
</div>
</div>
<div className="border-t border-slate-300 pl-2 pt-1 flex justify-between items-center">
<div className="uppercase text-xs label self-stretch flex items-center">
Visible

5
app/web/src/nova/ed/panel/side/prop-master/tree-item.tsx
View File

@ -29,9 +29,12 @@ export const EdPropCompTreeItem: FC<{
if (node.data?.prop.meta?.type === "option") type = "OPT";
else if (node.data?.prop.meta?.type === "content-element") type = "JSX";
const plabel = node.data?.prop.label;
const label = (
<div className="flex items-center justify-between flex-1">
<div>{node.text}</div>
<div>
{node.text} {plabel && <span className="border px-1 ml-2 text-xs">{plabel}</span>}
</div>
<div className="text-[9px] px-1 border border-slate-400 ml-1 text-slate-500">
{type}
</div>

1
app/web/src/utils/types/meta-fn.ts
View File

@ -29,6 +29,7 @@ export type FNCompDef = {
idx: number;
typings: string;
type: string;
label?: string;
value: any;
valueBuilt: any;
gen?: string;