Update

devplacepy/static/css/workspace.css

@@ -111,6 +111,92 @@
     border-left: 3px solid var(--text-secondary);
 }
 
+.workspace-editor-heading {
+    margin: var(--space-lg) 0 var(--space-xs);
+    color: var(--text-primary);
+}
+
+.workspace-editor-restart {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    margin-bottom: var(--space-md);
+    border-left: 3px solid var(--warning);
+    border-radius: var(--radius);
+    background: var(--overlay-light);
+    color: var(--text-primary);
+}
+
+.workspace-editor-summary {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--space-sm);
+    list-style: none;
+    margin: 0 0 var(--space-md);
+    padding: 0;
+}
+
+.workspace-editor-summary li {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--space-sm);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--bg-secondary);
+}
+
+.workspace-editor-summary span {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+}
+
+.workspace-editor-summary strong {
+    color: var(--text-primary);
+    text-transform: capitalize;
+}
+
+.workspace-editor-summary em {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    font-style: normal;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.workspace-editor-form {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--space-sm);
+}
+
+.workspace-editor-form label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.workspace-editor-actions {
+    grid-column: 1 / -1;
+    display: flex;
+    gap: var(--space-sm);
+}
+
+.workspace-editor-reset {
+    margin-top: var(--space-sm);
+}
+
+@media (max-width: 768px) {
+    .workspace-editor-summary,
+    .workspace-editor-form {
+        grid-template-columns: 1fr;
+    }
+}
+
 @media (max-width: 768px) {
     .workspace-meters {
         flex-direction: column;

devplacepy/static/js/Application.js

@@ -42,6 +42,7 @@ import { LiveNotifications } from "./LiveNotifications.js";
 import { PresenceManager } from "./PresenceManager.js";
 import { OnlineUsers } from "./OnlineUsers.js";
 import { LocalTime } from "./LocalTime.js";
+import { EditorLauncher } from "./EditorLauncher.js";
 import { ScrollMemory } from "./ScrollMemory.js";
 import { GameFarm } from "./GameFarm.js";
 import { Accessibility } from "./Accessibility.js";
@@ -112,6 +113,7 @@ class Application {
         this.onlineUsers = new OnlineUsers(this.pubsub);
         this.localTime = new LocalTime();
         this.scrollMemory = new ScrollMemory();
+        this.editorLauncher = new EditorLauncher();
         this.gameFarm = new GameFarm();
         this.overflowTabs = new OverflowTabs();
     }

devplacepy/static/js/EditorLauncher.js

@@ -0,0 +1,58 @@
+// retoor <retoor@molodetz.nl>
+
+export class EditorLauncher {
+    constructor() {
+        document.addEventListener("click", (event) => this.onClick(event));
+    }
+
+    onClick(event) {
+        const trigger = event.target.closest("[data-editor-open]");
+        if (!trigger) return;
+        const mode = trigger.dataset.editorMode || "tab";
+        if (mode === "tab") return;
+        const opened = window.open(
+            trigger.href,
+            trigger.dataset.editorName || "devplace-editor",
+            this.features(mode, trigger),
+        );
+        if (!opened) return;
+        event.preventDefault();
+        opened.focus();
+    }
+
+    features(mode, trigger) {
+        const size = this.size(mode, trigger);
+        const left = Math.max(0, Math.round((window.screen.availWidth - size.width) / 2));
+        const top = Math.max(0, Math.round((window.screen.availHeight - size.height) / 2));
+        return [
+            `width=${size.width}`,
+            `height=${size.height}`,
+            `left=${left}`,
+            `top=${top}`,
+            "noopener",
+            "resizable=yes",
+            "scrollbars=yes",
+        ].join(",");
+    }
+
+    size(mode, trigger) {
+        if (mode === "fullscreen") {
+            return {
+                width: window.screen.availWidth,
+                height: window.screen.availHeight,
+            };
+        }
+        return {
+            width: this.clamp(trigger.dataset.editorWidth, 640, window.screen.availWidth),
+            height: this.clamp(trigger.dataset.editorHeight, 480, window.screen.availHeight),
+        };
+    }
+
+    clamp(raw, minimum, maximum) {
+        const value = parseInt(raw, 10);
+        if (!Number.isFinite(value)) return maximum;
+        return Math.max(minimum, Math.min(maximum, value));
+    }
+}
+
+export default EditorLauncher;

devplacepy/static/js/WorkspaceManager.js

@@ -20,7 +20,7 @@ export class WorkspaceManager {
     bind() {
         this.root.addEventListener("submit", (event) => {
             const form = event.target.closest("form");
-            if (!form || form.dataset.confirm) return;
+            if (!form || form.dataset.confirm || form.dataset.native !== undefined) return;
             event.preventDefault();
             this.send(form);
         });