Monaco for Discord Desktop

author: Vendicated <vendicated@riseup.net> 2022-10-22 04:41:33 +0200
committer: Vendicated <vendicated@riseup.net> 2022-10-22 04:42:54 +0200
commit: 44f6f71c3efd2e4e0f9dbd97ab4680ec76536052 (patch)
tree: cd2ad847833ff428e009ca55b50eabd57031443d /src
parent: 23d4cae1230bd60da2f0497ecac9d4a32a326f5b (diff)
download: Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.tar.gz
Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.tar.bz2
Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.zip
8 files changed, 127 insertions, 71 deletions
diff --git a/src/components/Monaco.ts b/src/components/Monaco.ts
index 495f512..6b01891 100644
--- a/src/components/Monaco.ts
+++ b/src/components/Monaco.ts
@@ -16,80 +16,26 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-
 import { IpcEvents } from "../utils";
 import { debounce } from "../utils/debounce";
 import { find } from "../webpack/webpack";
+import monacoHtml from "@fileContent/monacoWin.html";
+import { Queue } from "../utils/Queue";
 
+const queue = new Queue();
 const setCss = debounce((css: string) => {
-    VencordNative.ipc.invoke(IpcEvents.SET_QUICK_CSS, css);
+    queue.add(() => 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() {
     const win = open("about:blank", void 0, "popup,width=1000,height=1000")!;
 
+    win.setCss = setCss;
     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>
+    win.getTheme = () => find(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings"))
+        .getCurrentValue().appearance.theme === 1
+        ? "vs-dark"
+        : "vs-light";
 
-`);
+    win.document.write(monacoHtml);
 }
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 6a5ea9d..8ffe111 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -77,7 +77,7 @@ export default ErrorBoundary.wrap(function Settings() {
                     Launch Directory
                 </Button>
                 <Button
-                    onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_QUICKCSS)}
+                    onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
                     size={Button.Sizes.SMALL}
                     disabled={settingsDir === "Loading..."}
                 >
diff --git a/src/components/monacoWin.html b/src/components/monacoWin.html
new file mode 100644
index 0000000..edf273d
--- /dev/null
+++ b/src/components/monacoWin.html
@@ -0,0 +1,52 @@
+<!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>
+        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 => {
+                var editor = monaco.editor.create(document.getElementById('container'), {
+                    value: css,
+                    language: 'css',
+                    theme: getTheme(),
+                });
+                editor.onDidChangeModelContent(() =>
+                    setCss(editor.getValue())
+                );
+                window.addEventListener("resize", () => {
+                    // make monaco re-layout
+                    editor.layout();
+                });
+            });
+        });
+
+
+    </script>
+</body>
+
+</html>
diff --git a/src/ipcMain/index.ts b/src/ipcMain/index.ts
index caa4e34..dc05079 100644
--- a/src/ipcMain/index.ts
+++ b/src/ipcMain/index.ts
@@ -22,8 +22,10 @@ import { open, readFile, writeFile } from "fs/promises";
 import { join } from "path";
 import { debounce } from "../utils/debounce";
 import IpcEvents from "../utils/IpcEvents";
+import monacoHtml from "@fileContent/../components/monacoWin.html;base64";
 
 import "./updater";
+import { Queue } from "../utils/Queue";
 
 const DATA_DIR = process.env.VENCORD_USER_DATA_DIR ?? (
     process.env.DISCORD_USER_DATA_DIR
@@ -71,15 +73,19 @@ ipcMain.handle(IpcEvents.OPEN_EXTERNAL, (_, url) => {
     shell.openExternal(url);
 });
 
+const cssWriteQueue = new Queue();
+const settingsWriteQueue = new Queue();
 
 ipcMain.handle(IpcEvents.GET_QUICK_CSS, () => readCss());
+ipcMain.handle(IpcEvents.SET_QUICK_CSS, (_, css) =>
+    cssWriteQueue.add(() => writeFile(QUICKCSS_PATH, css))
+);
 
 ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR);
 ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings());
 
-let settingsWriteQueue = Promise.resolve();
 ipcMain.handle(IpcEvents.SET_SETTINGS, (_, s) => {
-    settingsWriteQueue = settingsWriteQueue.then(() => writeFile(SETTINGS_FILE, s));
+    settingsWriteQueue.add(() => writeFile(SETTINGS_FILE, s));
 });
 
 
@@ -91,3 +97,13 @@ export function initIpc(mainWindow: BrowserWindow) {
         }, 50));
     });
 }
+
+ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
+    const win = new BrowserWindow({
+        title: "QuickCss Editor",
+        webPreferences: {
+            preload: join(__dirname, "preload.js"),
+        }
+    });
+    await win.loadURL(`data:text/html;base64,${monacoHtml}`);
+});
diff --git a/src/modules.d.ts b/src/modules.d.ts
index 11576d2..70bad2f 100644
--- a/src/modules.d.ts
+++ b/src/modules.d.ts
@@ -28,3 +28,8 @@ declare module "git-hash" {
     const hash: string;
     export default hash;
 }
+
+declare module "@fileContent/*" {
+    const content: string;
+    export default content;
+}
diff --git a/src/preload.ts b/src/preload.ts
index 7244a1d..5de4298 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -21,6 +21,7 @@ import { readFileSync } from "fs";
 import { join } from "path";
 import VencordNative from "./VencordNative";
 import IpcEvents from "./utils/IpcEvents";
+import { debounce } from "./utils/debounce";
 
 if (electron.desktopCapturer === void 0) {
     // Fix for desktopCapturer being main only in Electron 17+
@@ -39,6 +40,14 @@ if (electron.desktopCapturer === void 0) {
 
 contextBridge.exposeInMainWorld("VencordNative", VencordNative);
 
-webFrame.executeJavaScript(readFileSync(join(__dirname, "renderer.js"), "utf-8"));
-
-require(process.env.DISCORD_PRELOAD!);
+if (location.protocol !== "data:") {
+    // Discord
+    webFrame.executeJavaScript(readFileSync(join(__dirname, "renderer.js"), "utf-8"));
+    require(process.env.DISCORD_PRELOAD!);
+} else {
+    // Monaco Popout
+    contextBridge.exposeInMainWorld("setCss", debounce(s => VencordNative.ipc.invoke(IpcEvents.SET_QUICK_CSS, s)));
+    contextBridge.exposeInMainWorld("getCurrentCss", () => VencordNative.ipc.invoke(IpcEvents.GET_QUICK_CSS));
+    // shrug
+    contextBridge.exposeInMainWorld("getTheme", () => "vs-dark");
+}
diff --git a/src/utils/IpcEvents.ts b/src/utils/IpcEvents.ts
index b773f64..c6696f8 100644
--- a/src/utils/IpcEvents.ts
+++ b/src/utils/IpcEvents.ts
@@ -43,5 +43,6 @@ export default strEnum({
     GET_HASHES: "VencordGetHashes",
     UPDATE: "VencordUpdate",
     BUILD: "VencordBuild",
-    GET_DESKTOP_CAPTURE_SOURCES: "VencordGetDesktopCaptureSources"
+    GET_DESKTOP_CAPTURE_SOURCES: "VencordGetDesktopCaptureSources",
+    OPEN_MONACO_EDITOR: "VencordOpenMonacoEditor"
 } as const);
diff --git a/src/utils/Queue.ts b/src/utils/Queue.ts
new file mode 100644
index 0000000..269fd36
--- /dev/null
+++ b/src/utils/Queue.ts
@@ -0,0 +1,27 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Promisable } from "type-fest";
+
+export class Queue {
+    private promise = Promise.resolve();
+
+    add(func: () => Promisable<void>) {
+        this.promise = this.promise.then(func);
+    }
+}
author	Vendicated <vendicated@riseup.net>	2022-10-22 04:41:33 +0200
committer	Vendicated <vendicated@riseup.net>	2022-10-22 04:42:54 +0200
commit	44f6f71c3efd2e4e0f9dbd97ab4680ec76536052 (patch)
tree	cd2ad847833ff428e009ca55b50eabd57031443d /src
parent	23d4cae1230bd60da2f0497ecac9d4a32a326f5b (diff)
download	Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.tar.gz Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.tar.bz2 Vencord-44f6f71c3efd2e4e0f9dbd97ab4680ec76536052.zip