fix(browse): trim markdown read-only banner + drop YAML front-matter placeholder

- 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) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-05-18 09:47:21 -05:00
parent 55328c8c28
commit 63fc4338b6
2 changed files with 14 additions and 16 deletions

View file

@ -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);

View file

@ -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 = '<span aria-hidden="true">🔒</span>'
+ ' 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