3 files changed, 63 insertions, 65 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>