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--error { color: #b00020; }
.status-bar--info { color: var(--primary); } .status-bar--info { color: var(--primary); }
/* Read-only banners surfaced by preview-markdown.js / preview-yaml.js /* Read-only banner for the YAML editor surfaced by preview-yaml.js
when the listing's `writable` bit was false. Inline at the top of when the listing's `writable` bit was false. CodeMirror's readOnly
the editor host so the user can't miss it; muted styling so it mode has no built-in visual signal beyond the disabled caret, so a
doesn't fight the editor chrome. */ banner here is the explicit cue. The markdown editor doesn't need
.md-readonly-banner, one because its read-only mount uses Toast UI's Viewer (no edit
toolbar at all). */
.yaml-readonly-banner { .yaml-readonly-banner {
background: rgba(220, 53, 69, 0.10); background: rgba(220, 53, 69, 0.10);
color: var(--text); color: var(--text);

View file

@ -373,7 +373,10 @@
fmTextarea.spellcheck = false; fmTextarea.spellcheck = false;
fmTextarea.autocapitalize = 'off'; fmTextarea.autocapitalize = 'off';
fmTextarea.autocomplete = '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); fmBody.appendChild(fmTextarea);
fmSection.appendChild(fmHeader); fmSection.appendChild(fmHeader);
fmSection.appendChild(fmBody); fmSection.appendChild(fmBody);
@ -530,19 +533,13 @@
var editor; var editor;
if (!writableMode) { if (!writableMode) {
// Read-only mount uses Toast UI's Viewer (rendered markdown, // Read-only mount uses Toast UI's Viewer (rendered markdown,
// no edit toolbar, no caret). Clear visual signal that the // no edit toolbar, no caret). The disabled Save button +
// file isn't editable — much better than letting the user // its tooltip carry the read-only signal — no banner here
// type into an Editor whose Save button is disabled. // since the Viewer's lack of edit chrome is already a
// clear visual cue.
editor = window.toastui.Editor.factory(Object.assign({}, editorOpts, { editor = window.toastui.Editor.factory(Object.assign({}, editorOpts, {
viewer: true, 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 { } else {
editor = new window.toastui.Editor(Object.assign({}, editorOpts, { editor = new window.toastui.Editor(Object.assign({}, editorOpts, {
// WYSIWYG by default — most users want the rendered view // WYSIWYG by default — most users want the rendered view