diff options
| author | Vendicated <vendicated@riseup.net> | 2022-10-21 23:58:41 +0200 |
|---|---|---|
| committer | Vendicated <vendicated@riseup.net> | 2022-10-21 23:58:41 +0200 |
| commit | 4b1e96b76ee4eea16fcb3b5cae74e173541b3c74 (patch) | |
| tree | 34da83427a29bae343e34681a9d7a08704b6d51d /src/components | |
| parent | e93111fb67e415b0828418b23811152d7e4eee86 (diff) | |
| download | Vencord-4b1e96b76ee4eea16fcb3b5cae74e173541b3c74.tar.gz Vencord-4b1e96b76ee4eea16fcb3b5cae74e173541b3c74.tar.bz2 Vencord-4b1e96b76ee4eea16fcb3b5cae74e173541b3c74.zip | |
Vencord Web: QuickCss Monaco Editor
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Monaco.ts | 80 | ||||
| -rw-r--r-- | src/components/Settings.tsx | 9 |
2 files changed, 89 insertions, 0 deletions
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(` + + <!doctype html> + <html lang="en"> + <head> + <meta charset="utf-8"> + <title>QuickCss Editor</title> + <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css"> + <style> + html, body, #container { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + } + </style> + </head> + <body> + <div id="container"></div> + <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"></script> + + <script> + var editor; + require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' }}); + require(["vs/editor/editor.main"], () => { + getCurrentCss().then(css => { + callback(editor = monaco.editor.create(document.getElementById('container'), { + value: css, + language: 'css', + theme: '${theme}', + })); + }); + }); + + window.addEventListener("resize", () => { + // make monaco re-layout + editor.layout(); + }); + </script> + </body> + </html> + +`); +} 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<string>(IpcEvents.GET_SETTINGS_DIR), "Loading..."); @@ -66,6 +67,14 @@ export default ErrorBoundary.wrap(function Settings() { </Button> </Flex>} + {IS_WEB && <Button + onClick={launchMonacoEditor} + size={Button.Sizes.SMALL} + disabled={settingsDir === "Loading..."} + > + Open QuickCSS File + </Button>} + <Forms.FormDivider /> <Switch value={settings.useQuickCss} |