From 4b1e96b76ee4eea16fcb3b5cae74e173541b3c74 Mon Sep 17 00:00:00 2001 From: Vendicated Date: Fri, 21 Oct 2022 23:58:41 +0200 Subject: Vencord Web: QuickCss Monaco Editor --- src/components/Monaco.ts | 80 +++++++++++++++++++++++++++++++++++++++++++++ src/components/Settings.tsx | 9 +++++ 2 files changed, 89 insertions(+) create mode 100644 src/components/Monaco.ts (limited to 'src/components') diff --git a/src/components/Monaco.ts b/src/components/Monaco.ts new file mode 100644 index 0000000..b23d27b --- /dev/null +++ b/src/components/Monaco.ts @@ -0,0 +1,80 @@ +// this is not actually a Component but I'll put it here anyway trolley + +import { IpcEvents } from "../utils"; +import { debounce } from "../utils/debounce"; +import { find } from "../webpack/webpack"; + +const setCss = debounce((css: string) => { + VencordNative.ipc.invoke(IpcEvents.SET_QUICK_CSS, css); +}); + +// FIXME: Discord Desktop support. +// open() fails to create the popup and returns null. Probably have to +// do some logic in main + +// adapted from https://stackoverflow.com/a/63179814 +export async function launchMonacoEditor() { + // TODO: Making the popup larger does not enlarge the editor and instead + // just adds white space + const win = open("about:blank", void 0, "popup,width=1000,height=1000")!; + + win.getCurrentCss = () => VencordNative.ipc.invoke(IpcEvents.GET_QUICK_CSS); + win.callback = (editor: any) => { + editor.onDidChangeModelContent(() => + setCss(editor.getValue()) + ); + }; + + let { theme } = find(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings")) + .getCurrentValue().appearance; + theme = theme === 1 ? "vs-dark" : "vs-light"; + + // problem? + win.document.write(` + + + + + + QuickCss Editor + + + + +
+ + + + + + +`); +} diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx index ba7d71d..e3d40f1 100644 --- a/src/components/Settings.tsx +++ b/src/components/Settings.tsx @@ -5,6 +5,7 @@ import { useAwaiter } from "../utils/misc"; import { Alerts, Button, Forms, Margins, Parser, React, Switch } from "../webpack/common"; import ErrorBoundary from "./ErrorBoundary"; import { Flex } from "./Flex"; +import { launchMonacoEditor } from "./Monaco"; export default ErrorBoundary.wrap(function Settings() { const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke(IpcEvents.GET_SETTINGS_DIR), "Loading..."); @@ -66,6 +67,14 @@ export default ErrorBoundary.wrap(function Settings() { } + {IS_WEB && } +