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

wip fix

This commit is contained in:
Rizky 2023-11-25 01:09:10 +07:00
parent 9fda5a00ee
commit 6cb7d5d8b7
6 changed files with 158 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/web/src/nova/ed/logic/tree/sync-walk.tsx
View File

@ -144,9 +144,10 @@ export const syncWalkMap = (
mitem_comp.set("ref_ids", new Y.Map() as any);
ref_ids = {};
}
const original_id = item.id;
const old_id = item.id;
mapItem(mcomp, item);
item.id = original_id;
item.originalId = item.id;
item.id = old_id;
const meta: EdMeta = {
item,

105
app/web/src/nova/ed/panel/popup/script/monaco.tsx
View File

@ -1,19 +1,20 @@
import type { OnMount } from "@monaco-editor/react";
import type { Monaco, OnMount } from "@monaco-editor/react";
import { createStore } from "idb-keyval";
import trim from "lodash.trim";
import { useGlobal, useLocal } from "web-utils";
import { jscript } from "../../../../../utils/script/jscript";
import { jsMount } from "../../../../../utils/script/mount";
import { monacoTypings } from "../../../../../utils/script/typings";
import { EDGlobal, active } from "../../../logic/ed-global";
import { EDGlobal, ISingleScope, active } from "../../../logic/ed-global";
import { declareScope } from "./scope";
import { useEffect } from "react";
export type MonacoEditor = Parameters<OnMount>[0];
export const ScriptMonaco = () => {
const p = useGlobal(EDGlobal, "EDITOR");
const local = useLocal({
editor: null as null | MonacoEditor,
reloading: false,
monaco: null as null | Monaco,
changeTimeout: 0 as any,
historyOpen: false,
idbstore: createStore(`prasi-page-${p.page.cur.id}`, "script-history"),
@ -23,10 +24,44 @@ export const ScriptMonaco = () => {
if (!Editor) return null;
let meta = p.page.meta[active.item_id];
if (active.comp_id) {
if (active.comp_id && p.comp.list[active.comp_id]) {
meta = p.comp.list[active.comp_id].meta[active.item_id];
}
useEffect(() => {
if (local.monaco && local.editor) {
const val: string = (
typeof adv[p.ui.popup.script.mode] === "string"
? adv[p.ui.popup.script.mode]
: ""
) as any;
local.monaco.editor.getModels().forEach((model) => {
const uri = model.uri.toString();
if (
uri.startsWith("inmemory://model") ||
uri.startsWith("ts:comp-") ||
uri.startsWith("ts:page-")
) {
model.dispose();
}
});
let model = local.monaco.editor.createModel(
val,
"typescript",
local.monaco.Uri.parse(
`ts:${
active.comp_id ? `comp-${active.comp_id}` : `page-${p.page.cur.id}`
}-${active.item_id}.tsx`
)
);
local.editor.setModel(model);
declareScope(p, local.editor, local.monaco).then(() => {
local.render();
});
}
}, [active.item_id]);
if (!meta) return null;
const item = meta.item;
@ -120,35 +155,47 @@ export const ScriptMonaco = () => {
)
);
editor.setModel(model);
}
monaco.editor.registerEditorOpener({
openCodeEditor(source, r, selectionOrPosition) {
const path = r.path.split("~");
const id = path[path.length - 1].replace(".d.ts", "");
const meta = p.page.meta[id];
monaco.editor.registerEditorOpener({
openCodeEditor(source, r, selectionOrPosition) {
const cpath = r.path.substring(`scope~`.length).split("__");
const comp_id = cpath[0];
const path = cpath[1].split("~");
const type = path[0] as "prop" | "passprop" | "local";
const id = path[path.length - 1].replace(".d.ts", "");
if (meta) {
console.log(meta.item, meta);
}
if (comp_id) {
let meta = p.page.meta[id];
if (active.comp_id) {
meta = p.comp.list[active.comp_id].meta[id];
}
// https://github.com/microsoft/vscode/pull/177064#issue-1623100628
return false;
},
});
if (meta && meta.item.originalId) {
active.item_id = meta.item.originalId;
}
active.comp_id = comp_id;
} else {
active.item_id = id;
}
p.render();
await jsMount(editor, monaco);
await monacoTypings(
{
site_dts: p.site_dts,
script: {
siteTypes: {},
return false;
},
site: p.site.config,
},
monaco,
{ types: {}, values: {} }
);
await declareScope(p, editor, monaco);
});
await jsMount(editor, monaco);
await monacoTypings(
{
site_dts: p.site_dts,
script: {
siteTypes: {},
},
site: p.site.config,
},
monaco,
{ types: {}, values: {} }
);
await declareScope(p, editor, monaco);
}
}}
/>
);

22
app/web/src/nova/ed/panel/popup/script/scope.tsx
View File

@ -12,10 +12,12 @@ export const declareScope = async (
let active_id = active.item_id;
let s = deepClone(p.page.scope[active_id]);
if (active.comp_id) {
if (active.comp_id && p.comp.list[active.comp_id]) {
s = deepClone(p.comp.list[active.comp_id].scope[active.item_id]);
}
if (!s) return;
monaco.editor.getModels().forEach((model) => {
if (model.uri.toString().startsWith("ts:scope~")) {
model.dispose();
@ -44,7 +46,7 @@ export const declareScope = async (
if (arg.type !== "local") {
addScope(
monaco,
`${arg.type}~${arg.name}`,
`${arg.comp_id || ""}__${arg.type}~${arg.name}~${arg.id}`,
`\
export const {};
declare global {
@ -54,7 +56,7 @@ declare global {
} else {
addScope(
monaco,
`${arg.type}~${arg.id}`,
`${arg.comp_id || ""}__${arg.type}~${arg.id}`,
`\
export const {};
const __val = ${arg.value};
@ -75,13 +77,15 @@ type IEachArgScope = {
id: string;
type: "local" | "prop" | "passprop";
index?: number;
isProp?: boolean;
is_prop?: boolean;
comp_id?: string;
};
const spreadScope = (
p: PG,
s: ISingleScope,
s: ISingleScope | undefined,
each: (arg: IEachArgScope) => void
) => {
if (!s) return;
const parents = [...s.p];
const layout_id = p.site.layout.id;
let layout = null as null | EPage;
@ -122,7 +126,7 @@ const spreadScope = (
if (!item) {
if (comp_id) {
item = p.comp.list[comp_id].scope[parent_id];
} else if (active.comp_id) {
} else if (active.comp_id && p.comp.list[active.comp_id]) {
item = p.comp.list[active.comp_id].scope[parent_id];
} else {
item = p.page.scope[parent_id];
@ -131,6 +135,7 @@ const spreadScope = (
if (item) {
if (item.c) {
comp_id = item.c;
mergeScopes(item.p, each, item.c);
}
@ -139,6 +144,7 @@ const spreadScope = (
if (scope.local)
each({
s,
comp_id,
type: "local",
id: parent_id,
name: scope.local.name,
@ -150,6 +156,7 @@ const spreadScope = (
for (const [k, v] of Object.entries(scope.passprop)) {
each({
s,
comp_id,
type: "passprop",
id: parent_id,
name: k,
@ -163,11 +170,12 @@ const spreadScope = (
for (const [k, v] of Object.entries(scope.props)) {
each({
s,
comp_id,
type: "prop",
id: parent_id,
name: k,
value: v.value,
isProp: true,
is_prop: true,
});
}
}

78
app/web/src/nova/ed/panel/tree/node/item/action.tsx
View File

@ -24,7 +24,45 @@ export const EdTreeAction = ({
if (!mode && item.adv?.html) mode = "html";
return (
<div className="flex items-center pr-1">
<div className="flex items-center pr-1 space-x-1">
{(!comp.enabled || (comp.enabled && comp.id === active.comp_id)) && (
<Tooltip
content={`Edit ${mode}`}
className={cx(
"border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
item.adv?.js || item.adv?.css || item.adv?.html
? `opacity-100`
: cx(
`opacity-0 action-script transition-all`,
css`
&:hover {
opacity: 1 !important;
}
`
),
!(item.adv?.js || item.adv?.css || item.adv?.html) &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "js" &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "css" &&
`bg-green-100 border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
mode === "html" &&
`bg-blue-100 border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
)}
onClick={() => {
p.ui.popup.script.open = true;
p.ui.popup.script.mode = (mode || "js") as any;
p.render();
}}
>
<div
dangerouslySetInnerHTML={{
__html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</Tooltip>
)}
{comp.enabled && (
<>
{comp.id !== active.comp_id && (
@ -78,44 +116,6 @@ export const EdTreeAction = ({
)}
</>
)}
{!comp.enabled && (
<Tooltip
content={`Edit ${mode}`}
className={cx(
"border rounded-sm text-[9px] flex w-[20px] h-[15px] items-center cursor-pointer justify-center uppercase",
item.adv?.js || item.adv?.css || item.adv?.html
? `opacity-100`
: cx(
`opacity-0 action-script transition-all`,
css`
&:hover {
opacity: 1 !important;
}
`
),
!(item.adv?.js || item.adv?.css || item.adv?.html) &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "js" &&
`bg-orange-100 border-orange-200 hover:border-orange-500 hover:text-orange-900 hover:bg-orange-300`,
mode === "css" &&
`bg-green-100 border-green-200 hover:border-green-500 hover:text-green-900 hover:bg-green-300`,
mode === "html" &&
`bg-blue-100 border-blue-200 hover:border-blue-500 hover:text-blue-900 hover:bg-blue-300`
)}
onClick={() => {
p.ui.popup.script.open = true;
p.ui.popup.script.mode = (mode || "js") as any;
p.render();
}}
>
<div
dangerouslySetInnerHTML={{
__html: `<svg width="12px" height="12px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</Tooltip>
)}
</div>
);
};

23
app/web/src/render/editor/panel/script/monaco/mount.tsx
View File

@ -41,13 +41,22 @@ export const jsMount = async (p: PG, editor: MonacoEditor, monaco: Monaco) => {
};
const jsxHgController = new MonacoJsxSyntaxHighlight(getWorker(), monaco);
const { highlighter } = jsxHgController.highlighterBuilder({
editor: editor,
});
highlighter();
editor.onDidChangeModelContent(() => {
highlighter();
});
try {
const { highlighter } = jsxHgController.highlighterBuilder({
editor: editor,
});
if (typeof editor.getModel === "function") {
highlighter();
}
editor.onDidChangeModelContent(() => {
if (typeof editor.getModel === "function") {
try {
highlighter();
} catch (e) {}
}
});
} catch (e) {}
monaco.languages.registerDocumentFormattingEditProvider("typescript", {
async provideDocumentFormattingEdits(model, options, token) {

11
app/web/src/utils/script/mount.tsx
View File

@ -143,9 +143,16 @@ export const jsMount = async (editor: MonacoEditor, monaco: Monaco) => {
const { highlighter } = jsxHgController.highlighterBuilder({
editor: editor,
});
highlighter();
editor.onDidChangeModelContent(() => {
if (typeof editor.getModel === "function") {
highlighter();
}
editor.onDidChangeModelContent(() => {
if (typeof editor.getModel === "function") {
try {
highlighter();
} catch (e) {}
}
});
}