@import url("/assets/md.css")feat: pop out

@import url("/assets/md.css")

2 files changed, 22 insertions, 0 deletions

diff --git a/README.md b/README.md
index 2dddaf7..338b5c0 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,12 @@ An extension that simply exposes the [browser.webRequest](https://developer.mozi
 
 Once installed, go to `about:extensions` -> httptool -> Preferences, then edit shit.
 
+## Opening a larger (full-screen) editor
+
+Press Alt+Backslash to re-open the editor in a new tab.
+
+Note that if you have multiple editors open, whichever editor makes the most recent change is the one that gets saved.
+
 ## Applying Changes
 
 Changes are autosaved on edit, however to apply them, you need to disable and re-enable the addon, or restart the browser. This is to prevent us from needing to handle unregistering & re-registering anything.
diff --git a/src/routes/Monaco.svelte b/src/routes/Monaco.svelte
index 03663d0..409ab39 100644
--- a/src/routes/Monaco.svelte
+++ b/src/routes/Monaco.svelte
@@ -106,6 +106,22 @@ declare global {
       theme: 'redirext',
       autoDetectHighContrast: false,
     });
+    editor.addCommand(Monaco.KeyMod.Alt | Monaco.KeyCode.Backslash, () => {
+      const win = window.open(location.href);
+      if (win) {
+        const el = document.createElement('div');
+        el.setAttribute(
+          'style',
+          'display:flex;width:100vw;height:100vh;position:fixed;left:0;top:0;align-items:center;justify-content:center;text-align:center;z-index:9999;background:#23222B;'
+        );
+        el.textContent = 'Popped out';
+        document.body.appendChild(el);
+        win.addEventListener('close', () => {
+          el.textContent = 'Popping In...';
+          location.reload();
+        });
+      }
+    });
     editor.getModel()?.onDidChangeContent((e) => {
       writeDebounce = true;
       const upd = () => {