From 63fc4338b6a0385d6bdc9e6810a1736d4ea437ee Mon Sep 17 00:00:00 2001 From: ZDDC Date: Mon, 18 May 2026 09:47:21 -0500 Subject: [PATCH] fix(browse): trim markdown read-only banner + drop YAML front-matter placeholder MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Read-only markdown files mount as Toast UI Viewer, which already has no edit toolbar / no caret — the absence is itself the cue. Drop the explicit red banner; keep the disabled-Save tooltip. - YAML front-matter textarea no longer shows a placeholder example (title/date/tags). A file without front matter renders as a genuinely empty pane instead of looking like it has content. - YAML editor's banner stays — CodeMirror readOnly has no built-in visual signal beyond the disabled caret. Co-Authored-By: Claude Opus 4.7 (1M context) --- browse/css/base.css | 11 ++++++----- browse/js/preview-markdown.js | 19 ++++++++----------- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/browse/css/base.css b/browse/css/base.css index 38f7de4..1179c70 100644 --- a/browse/css/base.css +++ b/browse/css/base.css @@ -41,11 +41,12 @@ body { .status-bar--error { color: #b00020; } .status-bar--info { color: var(--primary); } -/* Read-only banners — surfaced by preview-markdown.js / preview-yaml.js - when the listing's `writable` bit was false. Inline at the top of - the editor host so the user can't miss it; muted styling so it - doesn't fight the editor chrome. */ -.md-readonly-banner, +/* Read-only banner for the YAML editor — surfaced by preview-yaml.js + when the listing's `writable` bit was false. CodeMirror's readOnly + mode has no built-in visual signal beyond the disabled caret, so a + banner here is the explicit cue. The markdown editor doesn't need + one because its read-only mount uses Toast UI's Viewer (no edit + toolbar at all). */ .yaml-readonly-banner { background: rgba(220, 53, 69, 0.10); color: var(--text); diff --git a/browse/js/preview-markdown.js b/browse/js/preview-markdown.js index d23e29f..668085c 100644 --- a/browse/js/preview-markdown.js +++ b/browse/js/preview-markdown.js @@ -373,7 +373,10 @@ fmTextarea.spellcheck = false; fmTextarea.autocapitalize = 'off'; fmTextarea.autocomplete = 'off'; - fmTextarea.placeholder = 'title: Document Title\ndate: 2026-05-13\ntags: [example]'; + // No placeholder text — files with no YAML front matter render + // as a genuinely empty pane. Showing a synthetic example would + // make the file look like it had data when it doesn't. + fmTextarea.placeholder = ''; fmBody.appendChild(fmTextarea); fmSection.appendChild(fmHeader); fmSection.appendChild(fmBody); @@ -530,19 +533,13 @@ var editor; if (!writableMode) { // Read-only mount uses Toast UI's Viewer (rendered markdown, - // no edit toolbar, no caret). Clear visual signal that the - // file isn't editable — much better than letting the user - // type into an Editor whose Save button is disabled. + // no edit toolbar, no caret). The disabled Save button + + // its tooltip carry the read-only signal — no banner here + // since the Viewer's lack of edit chrome is already a + // clear visual cue. editor = window.toastui.Editor.factory(Object.assign({}, editorOpts, { viewer: true, })); - // Read-only banner above the editor explains why. - var roBanner = document.createElement('div'); - roBanner.className = 'md-readonly-banner'; - roBanner.innerHTML = '' - + ' Read-only — you don\'t have write access to this file.' - + ' Save is disabled; changes won\'t persist.'; - editorHost.insertBefore(roBanner, editorHost.firstChild); } else { editor = new window.toastui.Editor(Object.assign({}, editorOpts, { // WYSIWYG by default — most users want the rendered view