diff --git a/backend/main.py b/backend/main.py index 405656f..589a412 100644 --- a/backend/main.py +++ b/backend/main.py @@ -4039,6 +4039,14 @@ if FRONTEND_DIR.exists(): return HTMLResponse(content=popout_file.read_text(encoding="utf-8")) raise HTTPException(status_code=404, detail="Popout template not found") + @app.get("/editor-poc") + async def serve_editor_poc(): + """Serve the standalone Editor POC page (multi-zone toolbar demo).""" + poc_file = FRONTEND_DIR / "editor-poc.html" + if poc_file.exists(): + return HTMLResponse(content=poc_file.read_text(encoding="utf-8")) + raise HTTPException(status_code=404, detail="Editor POC not found") + @app.get("/{full_path:path}") async def serve_spa(full_path: str): """Serve the SPA index.html for all non-API routes.""" diff --git a/frontend/app.js b/frontend/app.js index 3eee3f6..f1502ee 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -4069,6 +4069,15 @@ }); } + function initEditorPocBtn() { + var btn = document.getElementById("editor-poc-btn"); + if (!btn) return; + btn.addEventListener("click", function() { + closeHeaderMenu(); + window.open("/editor-poc", "_blank"); + }); + } + function initHelpNavigation() { const helpContent = document.querySelector(".help-content"); const helpBody = document.getElementById("help-body"); @@ -7819,6 +7828,7 @@ initSidebarTabs(); initHelpModal(); initConfigModal(); + initEditorPocBtn(); initSidebarFilter(); initSidebarResize(); initEditor(); diff --git a/frontend/editor-poc.html b/frontend/editor-poc.html new file mode 100644 index 0000000..3167c09 --- /dev/null +++ b/frontend/editor-poc.html @@ -0,0 +1,1225 @@ + + + + + +ObsiGate — Editor POC (Multi-Zone Toolbar) + + + + + +
+
+ + ObsiGate + +
+
+ + + +
+ Saved +
+
+
+ + +
+
+ + +
+
+
🖼
+
Drop files here
+
Images, PDFs, documents
+
+
+ + +
+

Introduction

+

This document demonstrates the multi-zone toolbar architecture proposed for ObsiGate's next-generation editor. The design draws inspiration from Notion, Medium, Dropbox Paper, and Cursor.

+

+

Key Principles

+

Modern editors no longer use a single fixed toolbar. Controls are distributed across 5 contextual zones that appear only when relevant.

+

The core principle: "Show the right control, in the right place, at the right time."

+

+

+
+ + +
+
+ +
+
Formatting
+
+ 📝 +
+
Text
+
Just start writing plain text
+
+
+
+ H1 +
+
Heading 1
+
Big section heading
+
+
+
+ H2 +
+
Heading 2
+
Medium section heading
+
+
+
+ • +
+
Bullet List
+
Simple unordered list
+
+
+
+ 1. +
+
Numbered List
+
Ordered list
+
+
+
+ ❝ +
+
Quote
+
Block quote section
+
+
+
+ </> +
+
Code Block
+
Syntax-highlighted code
+
+
+
+
Insert
+
+ 🎨 +
+
Insert Image
+
Upload or embed an image
+
+
+
+ 📄 +
+
Insert PDF
+
Attach a PDF document
+
+
+
+ 📊 +
+
Insert Table
+
Data table
+
+
+
+
AI Actions
+
+ ✨ +
+
AI: Continue writing
+
Let AI continue from here
+
+
+
+ ✨ +
+
AI: Improve writing
+
Enhance style and clarity
+
+
+
+ ✨ +
+
AI: Summarize
+
Condense this document
+
+
+
+ ✨ +
+
AI: Translate
+
Translate to another language
+
+
+
+ + +
+ + + + + + + + +
+
✨ Improve writing
+
✅ Fix grammar
+
🌐 Translate to...
+
➕ Continue writing
+
📝 Summarize
+
🎶 Change tone
+
+
+ + + +
+ + + +
+ + +
+
+ Type / for slash menu + Ctrl+J for AI panel + ✨ AI processing... +
+
+ 42 words +
+
+ + +
+ + + + + \ No newline at end of file diff --git a/frontend/index.html b/frontend/index.html index 1e8e6f4..4e3eff1 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -649,6 +649,30 @@ > + diff --git a/frontend/js/app.js b/frontend/js/app.js index ee47153..03b0186 100644 --- a/frontend/js/app.js +++ b/frontend/js/app.js @@ -38,6 +38,7 @@ async function init() { Legacy.initSidebarTabs(); Legacy.initHelpModal(); Legacy.initConfigModal(); + Legacy.initEditorPocBtn(); Sidebar.initSidebarFilter(); UI.initSidebarResize(); Utils.initEditor(); diff --git a/frontend/js/config.js b/frontend/js/config.js index 53ff49b..954b18a 100644 --- a/frontend/js/config.js +++ b/frontend/js/config.js @@ -218,6 +218,14 @@ function initHelpModal() { }); } +function initEditorPocBtn() { + var btn = document.getElementById("editor-poc-btn"); + if (!btn) return; + btn.addEventListener("click", function() { + window.open("/editor-poc", "_blank"); + }); +} + function initHelpNavigation() { const helpBody = document.getElementById("help-body"); const navList = document.getElementById("help-nav-list"); @@ -1289,6 +1297,7 @@ export { initHelpModal, closeHelpModal, initRecentTab, + initEditorPocBtn, loadAbout as initAboutSection, loadHiddenFilesSettings as initHiddenFilesConfig, switchSidebarTab, diff --git a/frontend/js/legacy.js b/frontend/js/legacy.js index d384286..6a92553 100644 --- a/frontend/js/legacy.js +++ b/frontend/js/legacy.js @@ -25,7 +25,7 @@ import { } from './dashboard.js'; // --- Re-exports from modules that already have these functions --- -export { initSidebarTabs, initConfigModal, initHelpModal, initRecentTab } from './config.js'; +export { initSidebarTabs, initConfigModal, initHelpModal, initRecentTab, initEditorPocBtn } from './config.js'; export { initSyncStatus } from './sync.js'; export { DashboardRecentWidget } from './dashboard.js';