feat: enforce read-only mode UI lockdown for shared documents

ijbo · ijbo · commit 8ef357cd85cb · 2026-03-18T00:52:01.000+09:00
- Add body.editor-readonly CSS class to disable all editing buttons
- Toggle class in showSharedBanner/hideSharedBanner (cloud-share.js)
- Add capturing click interceptor with toast notification
- Add JS safety-net guards to core text-mutation functions
- Guard file import, drag-drop, image paste, keyboard shortcuts
diff --git a/changelogs/CHANGELOG-readonly-lockdown.md b/changelogs/CHANGELOG-readonly-lockdown.md
@@ -0,0 +1,34 @@
+# Read-Only Mode UI Lockdown
+
+**Date:** 2026-03-18
+
+## Summary
+
+Enforces true read-only mode when viewing shared documents. Previously only the textarea was made read-only via the HTML `readOnly` attribute, but all toolbar buttons (formatting, tags, templates, etc.) remained fully functional and could modify content programmatically. Now all editing UI is visually disabled and functionally blocked.
+
+## Changes
+
+### styles.css
+- Added `body.editor-readonly` CSS rules targeting all editing buttons (`.fmt-btn`, tag buttons, QAB write controls, find/replace, dropzone)
+- Disabled buttons show `opacity: 0.35`, `cursor: not-allowed`, and `user-select: none` with `!important`
+
+### js/cloud-share.js
+- `showSharedBanner()`: adds `editor-readonly` class to `<body>` alongside `readOnly = true`
+- `hideSharedBanner()`: removes `editor-readonly` class alongside `readOnly = false`
+- Added capturing click interceptor for disabled buttons — shows "🔒 Read-only mode — editing is disabled" toast
+
+### js/editor-features.js
+- Added `if (M.markdownEditor.readOnly) return;` guard to 7 core functions:
+  - `wrapSelection()`, `insertAtCursor()`, `insertLinePrefix()` (formatting)
+  - `replaceOne()`, `replaceAll()` (find & replace)
+  - Image paste handler
+  - Keyboard shortcut handler (Ctrl+B, Ctrl+I, Ctrl+K)
+
+### js/app-init.js
+- Added read-only guard to `handleDrop()` (drag & drop file import)
+- Added read-only guard to file input change handler
+
+## What remains enabled in read-only mode
+- View mode switching, theme toggle, zen/focus mode
+- Export (MD, HTML, PDF, LLM Memory)
+- Copy markdown, scrolling, AI panel browsing
diff --git a/js/app-init.js b/js/app-init.js
@@ -137,6 +137,7 @@
     });
 
     function handleDrop(e) {
+        if (M.markdownEditor.readOnly) return;
         var dt = e.dataTransfer;
         var files = dt.files;
         if (files.length) {
@@ -492,6 +493,7 @@
     // FILE INPUT & EXPORT
     // ========================================
     M.fileInput.addEventListener('change', function (e) {
+        if (M.markdownEditor.readOnly) return;
         if (e.target.files.length) M.importFile(e.target.files[0]);
     });
     M.importButton.addEventListener('click', function () {
diff --git a/js/cloud-share.js b/js/cloud-share.js
@@ -11,6 +11,7 @@
 
     // --- View Lock for shared links (ppt / preview) ---
     M.sharedViewLock = null;   // null = no lock, 'ppt' | 'preview' = locked
+    var readonlyClickHandlerInstalled = false;
 
     // --- Firebase Config ---
     var firebaseConfig = {
@@ -433,6 +434,7 @@
         document.body.classList.add('shared-view-active');
         document.body.classList.remove('banner-collapsed');
         M.markdownEditor.readOnly = true;
+        document.body.classList.add('editor-readonly');
 
         // If view-locked, disable all view mode buttons that don't match
         if (M.sharedViewLock) {
@@ -444,6 +446,26 @@
         bannerAutoHideTimer = setTimeout(function () {
             collapseBannerToPill();
         }, 4000);
+
+        // Intercept clicks on disabled editing buttons and show a toast
+        if (!readonlyClickHandlerInstalled) {
+            readonlyClickHandlerInstalled = true;
+            document.addEventListener('click', function (e) {
+                if (!M.markdownEditor.readOnly) return;
+                var target = e.target.closest(
+                    '.fmt-btn, #new-document-btn, #template-btn, #share-button, ' +
+                    '#mobile-share-button, #speech-to-text-btn, #run-all-btn, ' +
+                    '#qab-new, #qab-import, #qab-template, #qab-share, #qab-voice, ' +
+                    '#qab-copy, .ai-action-chip, .ai-ctx-btn, ' +
+                    '#replace-one, #replace-all, #qab-replace-one, #qab-replace-all'
+                );
+                if (target) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    if (M.showToast) M.showToast('🔒 Read-only mode — editing is disabled', 'warning');
+                }
+            }, true); // capturing phase
+        }
     }
 
     /**
@@ -514,6 +536,7 @@
         pill.style.display = 'none';
         document.body.classList.remove('shared-view-active', 'banner-collapsed');
         M.markdownEditor.readOnly = false;
+        document.body.classList.remove('editor-readonly');
         clearTimeout(bannerAutoHideTimer);
         clearTimeout(bannerReShowTimer);
     }
diff --git a/js/editor-features.js b/js/editor-features.js
@@ -161,6 +161,7 @@
     // IMAGE PASTE FROM CLIPBOARD
     // ========================================
     M.markdownEditor.addEventListener('paste', function (e) {
+        if (M.markdownEditor.readOnly) return;
         var items = e.clipboardData && e.clipboardData.items;
         if (!items) return;
         for (var i = 0; i < items.length; i++) {
@@ -182,6 +183,7 @@
     // FORMATTING TOOLBAR HELPERS
     // ========================================
     function wrapSelection(before, after, placeholder) {
+        if (M.markdownEditor.readOnly) return;
         var start = M.markdownEditor.selectionStart;
         var end = M.markdownEditor.selectionEnd;
         var text = M.markdownEditor.value;
@@ -200,6 +202,7 @@
     }
 
     function insertAtCursor(text) {
+        if (M.markdownEditor.readOnly) return;
         var start = M.markdownEditor.selectionStart;
         var end = M.markdownEditor.selectionEnd;
         var value = M.markdownEditor.value;
@@ -211,6 +214,7 @@
     M.insertAtCursor = insertAtCursor;
 
     function insertLinePrefix(prefix) {
+        if (M.markdownEditor.readOnly) return;
         var start = M.markdownEditor.selectionStart;
         var end = M.markdownEditor.selectionEnd;
         var text = M.markdownEditor.value;
@@ -395,6 +399,7 @@
     // --- Keyboard Shortcuts for Formatting ---
     M.markdownEditor.addEventListener('keydown', function (e) {
         if (!(e.ctrlKey || e.metaKey)) return;
+        if (M.markdownEditor.readOnly) return;
         if (e.key === 'z' || e.key === 'Z') {
             e.preventDefault();
             if (e.shiftKey) performRedo(); else performUndo();
@@ -526,6 +531,7 @@
     function findPrev() { if (findMatches.length === 0) return; selectMatch((findCurrentIndex - 1 + findMatches.length) % findMatches.length); }
 
     function replaceOne() {
+        if (M.markdownEditor.readOnly) return;
         if (findCurrentIndex < 0 || findCurrentIndex >= findMatches.length) return;
         var els = getActiveFindEls();
         var match = findMatches[findCurrentIndex];
@@ -538,6 +544,7 @@
     function escapeRegExpChars(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }
 
     function replaceAll() {
+        if (M.markdownEditor.readOnly) return;
         var els = getActiveFindEls();
         var query = els.findInput ? els.findInput.value : '';
         var replacement = els.replaceInput ? els.replaceInput.value : '';
diff --git a/styles.css b/styles.css
@@ -6406,4 +6406,32 @@ body.focus-mode #markdown-editor {
     width: auto;
     max-height: 60vh;
   }
+}
+
+/* ========================================
+   READ-ONLY MODE — disable editing UI
+   Applied when viewing a shared document.
+   Only scrolling and read-safe actions remain.
+   ======================================== */
+body.editor-readonly .fmt-btn,
+body.editor-readonly #new-document-btn,
+body.editor-readonly #template-btn,
+body.editor-readonly #share-button,
+body.editor-readonly #mobile-share-button,
+body.editor-readonly #speech-to-text-btn,
+body.editor-readonly #qab-new,
+body.editor-readonly #qab-import,
+body.editor-readonly #qab-template,
+body.editor-readonly #qab-share,
+body.editor-readonly #qab-voice,
+body.editor-readonly .ai-action-chip,
+body.editor-readonly .ai-ctx-btn,
+body.editor-readonly #replace-one,
+body.editor-readonly #replace-all,
+body.editor-readonly #qab-replace-one,
+body.editor-readonly #qab-replace-all,
+body.editor-readonly .dropzone-wrapper {
+  opacity: 0.35 !important;
+  cursor: not-allowed !important;
+  user-select: none !important;
 }
