latex-stickies 1.4.1 → 1.4.3

package/README.md

@@ -169,6 +169,7 @@ node scripts/render-check.js      # the first-run note renders correctly
 node scripts/ghost-check.js       # autocomplete suggests, and Tab accepts
 node scripts/snapshot-check.js    # a long note is captured whole
 node scripts/conflict-check.js    # the changed-on-disk banner behaves
+node scripts/denied-check.js      # a notes folder it may not read is reported
 node scripts/verify-install.js    # the install path, end to end (macOS)
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-stickies",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Sticky notes for your desktop that render LaTeX and Markdown.",
   "main": "src/main.js",
   "scripts": {
@@ -25,6 +25,9 @@
     ],
     "mac": {
       "category": "public.app-category.productivity",
+      "extendInfo": {
+        "NSDocumentsFolderUsageDescription": "LaTeX Stickies keeps your notes as Markdown files in Documents, so you can read and edit them with any other app."
+      },
       "target": [
         "dmg",
         "zip"

package/scripts/brand-electron.js

@@ -94,6 +94,10 @@ function isCurrent(version) {
   }
 }
 
+/** Shown in the macOS prompt asking to let the app read the notes folder. */
+const DOCUMENTS_REASON = 'LaTeX Stickies keeps your notes as Markdown files in '
+  + 'Documents, so you can read and edit them with any other app.';
+
 function setPlist(plist, key, value) {
   try {
     run('plutil', ['-replace', key, '-string', value, plist]);
@@ -126,6 +130,10 @@ function build(app, version) {
   setPlist(plist, 'CFBundleDisplayName', NAME);
   setPlist(plist, 'CFBundleIdentifier', APP_ID);
   setPlist(plist, 'CFBundleExecutable', NAME);
+  // Without this key macOS denies the notes folder without ever asking. The
+  // app then starts, reads nothing and shows no window, which looks exactly
+  // like a launch that failed.
+  setPlist(plist, 'NSDocumentsFolderUsageDescription', DOCUMENTS_REASON);
 
   const from = path.join(TARGET, 'Contents', 'MacOS', 'Electron');
   const to = path.join(TARGET, 'Contents', 'MacOS', NAME);

package/src/editor/entry.js

@@ -10,14 +10,19 @@
  * @codemirror/language-data, which loads grammars with dynamic import -- that
  * would leave the bundle with chunks it cannot fetch over file://.
  */
-import { EditorState, StateField, StateEffect, RangeSetBuilder, Prec } from '@codemirror/state';
+import {
+  EditorState, EditorSelection, StateField, StateEffect, RangeSetBuilder, Prec,
+} from '@codemirror/state';
 import {
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
 } from '@codemirror/view';
 import {
   defaultKeymap, history, historyKeymap, indentWithTab,
+  cursorLineUp, cursorLineDown, selectLineUp, selectLineDown,
 } from '@codemirror/commands';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import {
+  markdown, markdownLanguage, insertNewlineContinueMarkup,
+} from '@codemirror/lang-markdown';
 import {
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
   LanguageDescription,
@@ -63,10 +68,11 @@ const codeLanguages = [
 ];
 
 window.CM = {
-  EditorState, StateField, StateEffect, RangeSetBuilder, Prec,
+  EditorState, EditorSelection, StateField, StateEffect, RangeSetBuilder, Prec,
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
   defaultKeymap, history, historyKeymap, indentWithTab,
-  markdown, markdownLanguage,
+  cursorLineUp, cursorLineDown, selectLineUp, selectLineDown,
+  markdown, markdownLanguage, insertNewlineContinueMarkup,
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
   tags, codeLanguages,
   search, searchKeymap, highlightSelectionMatches, openSearchPanel,

package/src/main.js

@@ -527,6 +527,37 @@ function watchNotesFolder() {
   });
 }
 
+/**
+ * macOS can refuse the notes folder outright, and quietly.
+ *
+ * Documents is protected, and permission is tied to the app's signature -- so
+ * a rebuilt copy is a different app to the system and starts again with no
+ * access. Reading the folder then fails, nothing is restored and no window
+ * opens, which is indistinguishable from a launch that crashed. Say what
+ * happened instead, and offer the settings pane that fixes it.
+ */
+function reportNoAccess(err) {
+  // Printed as well as shown: the dialog is the answer for the person at the
+  // screen, this line is what a harness or a bug report can see.
+  console.error(`notes folder refused: ${err.code} ${store.DIR}`);
+  const settings = 'x-apple.systempreferences:com.apple.preference.security'
+    + '?Privacy_DocumentsFolder';
+  const choice = dialog.showMessageBoxSync({
+    type: 'error',
+    message: 'LaTeX Stickies cannot read your notes',
+    detail: `macOS is not letting it open ${store.DIR}.\n\n`
+      + 'Allow it under Privacy & Security, in Files and Folders, then open '
+      + `the app again.\n\n(${err.code}: ${err.message})`,
+    buttons: ['Open Privacy Settings', 'Quit'],
+    defaultId: 0,
+  });
+  if (choice === 0 && process.platform === 'darwin') shell.openExternal(settings);
+  app.quit();
+}
+
+/** True when the filesystem said no, rather than the folder being absent. */
+const denied = (err) => err && (err.code === 'EPERM' || err.code === 'EACCES');
+
 app.whenReady().then(async () => {
   // Run from npm there is no .app bundle of our own to carry the icon, so
   // macOS would show the generic Electron atom in the Dock. Set it explicitly.
@@ -546,9 +577,15 @@ app.whenReady().then(async () => {
     }
   }
 
-  await buildMenu();
-  restoreNotes();
-  watchNotesFolder();
+  try {
+    await buildMenu();
+    restoreNotes();
+    watchNotesFolder();
+  } catch (err) {
+    if (!denied(err)) throw err;
+    reportNoAccess(err);
+    return;
+  }
 
   if (SMOKE_CLOSE_MS) {
     setTimeout(() => {

package/src/renderer/live-editor.js

@@ -15,9 +15,11 @@
  */
 
 const {
-  EditorState, StateField, EditorView, Decoration, WidgetType, keymap, Prec,
+  EditorState, EditorSelection, StateField, StateEffect, EditorView, Decoration,
+  WidgetType, ViewPlugin, keymap, Prec,
   defaultKeymap, history, historyKeymap, indentWithTab,
-  markdown, markdownLanguage, codeLanguages,
+  cursorLineUp, cursorLineDown, selectLineUp, selectLineDown,
+  markdown, markdownLanguage, codeLanguages, insertNewlineContinueMarkup,
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle, tags,
   search, searchKeymap, highlightSelectionMatches,
 } = window.CM;
@@ -126,18 +128,19 @@ class BulletWidget extends WidgetType {
 }
 
 class CopyButtonWidget extends WidgetType {
-  constructor(code) {
+  constructor(code, visible) {
     super();
     this.code = code;
+    this.visible = visible;
   }
 
   eq(other) {
-    return other.code === this.code;
+    return other.code === this.code && other.visible === this.visible;
   }
 
   toDOM() {
     const button = document.createElement('span');
-    button.className = 'cm-copy';
+    button.className = this.visible ? 'cm-copy cm-copy-open' : 'cm-copy';
     button.textContent = 'Copy';
     button.title = 'Copy this block';
     button.addEventListener('mousedown', (e) => {
@@ -291,6 +294,34 @@ class RuleWidget extends WidgetType {
 
 const HIDE = Decoration.replace({});
 
+/**
+ * A syntax marker that is hidden by width rather than removed.
+ *
+ * Replacing "## " takes it out of the rendered line entirely, so the caret
+ * jumps over it and the heading pops between two widths as you arrive. Kept as
+ * a mark at font-size 0 the characters stay in the line box and can simply
+ * slide back in. Only their width animates -- the heading text beside them
+ * already sets the line height -- so CodeMirror's vertical measurements, which
+ * drive cursor placement and scrolling, are never in motion.
+ *
+ * The class never varies. A decoration with a different class is a different
+ * decoration, and CodeMirror rebuilds the span rather than restyling it --
+ * a brand new element has no previous width to animate from, so the marker
+ * snapped back into place. The reveal is `markerReveal` below, which sets a
+ * class on the existing element and leaves the decoration alone.
+ */
+const MARKER = Decoration.mark({ class: 'cm-md-marker' });
+
+
+
+/** Elements whose markers are shown while the caret is inside them. */
+const REVEAL = new Set([
+  'Emphasis', 'StrongEmphasis', 'Strikethrough', 'InlineCode', 'FencedCode',
+  'Blockquote', 'ListItem', 'Link',
+  'ATXHeading1', 'ATXHeading2', 'ATXHeading3',
+  'ATXHeading4', 'ATXHeading5', 'ATXHeading6',
+]);
+
 /** Line classes for blocks that keep their markdown but are styled as blocks. */
 const LINE_CLASS = {
   Table: 'cm-md-table',
@@ -310,6 +341,47 @@ const MARKS = new Set([
   'QuoteMark', 'StrikethroughMark',
 ]);
 
+/**
+ * Which fenced block the pointer is over, as its start position, or -1.
+ *
+ * Each line is its own element with nothing wrapping the block, so there is no
+ * element to hang a CSS :hover on -- hovering has to be worked out from the
+ * pointer's document position instead.
+ */
+const setHoveredFence = StateEffect.define();
+
+const hoveredFence = StateField.define({
+  create: () => -1,
+  update(value, tr) {
+    for (const effect of tr.effects) if (effect.is(setHoveredFence)) return effect.value;
+    return tr.docChanged ? -1 : value;
+  },
+});
+
+/** Reports the fenced block under the pointer, dispatching only on a change. */
+const fenceHover = EditorView.domEventHandlers({
+  mousemove(event, view) {
+    const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+    let fence = -1;
+    if (pos !== null) {
+      for (let node = syntaxTree(view.state).resolveInner(pos, 1); node; node = node.parent) {
+        if (node.name === 'FencedCode') {
+          fence = node.from;
+          break;
+        }
+      }
+    }
+    if (fence !== view.state.field(hoveredFence)) {
+      view.dispatch({ effects: setHoveredFence.of(fence) });
+    }
+  },
+  mouseleave(_event, view) {
+    if (view.state.field(hoveredFence) !== -1) {
+      view.dispatch({ effects: setHoveredFence.of(-1) });
+    }
+  },
+});
+
 function buildDecorations(state) {
   const sel = state.selection.main;
   const ranges = [];
@@ -389,7 +461,10 @@ function buildDecorations(state) {
             ranges.push({
               from: openLine.to,
               to: openLine.to,
-              value: Decoration.widget({ widget: new CopyButtonWidget(body), side: 1 }),
+              value: Decoration.widget({
+                widget: new CopyButtonWidget(body, state.field(hoveredFence, false) === node.from),
+                side: 1,
+              }),
             });
           }
         }
@@ -444,13 +519,10 @@ function buildDecorations(state) {
         return;
       }
 
-      // The ``` runs are punctuation, not content. Hide them unless the caret
-      // is in this block; the language name stays as the block's label.
+      // The ``` runs are punctuation, not content. They stay hidden until the
+      // caret is on their line; the language name is the block's label.
       if (node.name === 'CodeMark' && node.to - node.from >= 3) {
-        const fence = node.node.parent || node;
-        if (!cursorInside(fence.from, fence.to)) {
-          ranges.push({ from: node.from, to: node.to, value: HIDE });
-        }
+        ranges.push({ from: node.from, to: node.to, value: MARKER });
         return;
       }
 
@@ -493,7 +565,7 @@ function buildDecorations(state) {
         ranges.push({
           from: node.from,
           to: node.to,
-          value: isTask ? HIDE : Decoration.replace({ widget: new BulletWidget() }),
+          value: isTask ? MARKER : Decoration.replace({ widget: new BulletWidget() }),
         });
         return;
       }
@@ -502,24 +574,18 @@ function buildDecorations(state) {
         // Inline backticks only: hiding a fence would strand its language
         // label and the block's boundaries.
         if (node.to - node.from > 2) return;
-        const parent = node.node.parent || node;
-        if (!cursorInside(parent.from, parent.to)) {
-          ranges.push({ from: node.from, to: node.to, value: HIDE });
-        }
+        ranges.push({ from: node.from, to: node.to, value: MARKER });
         return;
       }
 
       if (MARKS.has(node.name)) {
-        const parent = node.node.parent || node;
-        if (cursorInside(parent.from, parent.to)) return;
-
         // Take the space that follows a heading or quote marker with it.
         // Hiding "#" alone leaves the title indented by one space.
         let to = node.to;
         if (node.name === 'HeaderMark' || node.name === 'QuoteMark') {
           while (state.doc.sliceString(to, to + 1) === ' ') to += 1;
         }
-        ranges.push({ from: node.from, to, value: HIDE });
+        ranges.push({ from: node.from, to, value: MARKER });
       }
     },
   });
@@ -529,6 +595,77 @@ function buildDecorations(state) {
   return Decoration.set(ranges.map((r) => r.value.range(r.from, r.to)), true);
 }
 
+/**
+ * Shows the markers of whichever element the caret is in.
+ *
+ * This is a plugin rather than a decoration because the reveal has to leave
+ * the DOM node alone: change the decoration and CodeMirror builds a new span,
+ * which has no width to animate from and snaps. Setting a class on the element
+ * already there is what lets it slide.
+ *
+ * It also asks for a re-measure when the slide finishes. The caret is
+ * positioned once, at the start of the transition, so without this it sits a
+ * few pixels off the text until the next keystroke -- which reads as a click
+ * that did not take.
+ */
+const markerReveal = ViewPlugin.fromClass(class {
+  constructor(view) {
+    this.view = view;
+    this.onEnd = (event) => {
+      if (event.target.classList.contains('cm-md-marker')) view.requestMeasure();
+    };
+    view.contentDOM.addEventListener('transitionend', this.onEnd);
+    this.sync();
+  }
+
+  update() {
+    // Every update, not only the ones that moved the caret. The parser runs
+    // behind the keystroke, so the first "#" of a heading arrives as a plain
+    // character and becomes a marker on a later update that changed neither
+    // the document nor the selection. Skipping those left the reveal one
+    // keystroke behind: a heading stayed hidden while it was being typed.
+    this.sync();
+  }
+
+  destroy() {
+    this.view.contentDOM.removeEventListener('transitionend', this.onEnd);
+  }
+
+  sync() {
+    const { view } = this;
+    const sel = view.state.selection.main;
+    let from = -1;
+    let to = -1;
+    if (!snapshotMode) {
+      const tree = syntaxTree(view.state);
+      // Both sides of the caret, and the side before it first. Typing "###"
+      // leaves the caret at the end of the line, where the node *starting*
+      // here is the document, not the heading -- so looking forward only, a
+      // heading stayed hidden the whole time you were typing it.
+      const enclosing = (side) => {
+        for (let node = tree.resolveInner(sel.from, side); node; node = node.parent) {
+          if (REVEAL.has(node.name) && sel.to <= node.to) return node;
+        }
+        return null;
+      };
+      const node = enclosing(-1) || enclosing(1);
+      if (node) {
+        from = node.from;
+        to = node.to;
+      }
+    }
+    for (const el of view.contentDOM.querySelectorAll('.cm-md-marker')) {
+      let pos;
+      try {
+        pos = view.posAtDOM(el);
+      } catch (_) {
+        continue; // mid-update, and the next sync will catch it
+      }
+      el.classList.toggle('cm-md-marker-open', pos >= from && pos < to);
+    }
+  }
+});
+
 /**
  * Decorations live in a state field rather than a view plugin. Display maths
  * replaces a whole line, and CodeMirror only accepts block decorations from a
@@ -537,7 +674,10 @@ function buildDecorations(state) {
 const livePreview = StateField.define({
   create: (state) => buildDecorations(state),
   update(deco, tr) {
-    if (tr.docChanged || tr.selection || snapshotDirty) return buildDecorations(tr.state);
+    const hovered = tr.effects.some((effect) => effect.is(setHoveredFence));
+    if (tr.docChanged || tr.selection || hovered || snapshotDirty) {
+      return buildDecorations(tr.state);
+    }
     return deco.map(tr.changes);
   },
   provide: (field) => EditorView.decorations.from(field),
@@ -545,9 +685,24 @@ const livePreview = StateField.define({
 
 /* ---------- how markdown reads ---------- */
 
+/**
+ * Markers are punctuation, not prose, and should not compete with the text
+ * they mark up. CodeMirror's default paints them #404740 -- all but the ink
+ * colour -- because every marker carries tags.processingInstruction, a child
+ * of meta, and defaultHighlightStyle is loaded here for its code colours.
+ *
+ * A flat grey rather than a faded ink: fading a marker into the paper is what
+ * made an H1 and an H2 indistinguishable while one was being typed.
+ */
+const MARKER_INK = '#757575';
+
 const markdownStyle = HighlightStyle.define([
   // textDecoration: 'none' is deliberate -- defaultHighlightStyle, loaded for
   // the colours inside code fences, underlines every heading.
+  // One entry covers every marker: the hashes, the stars, the backticks, the
+  // quote arrow, the list dash, a table's pipes and a strikethrough's tildes
+  // all carry this tag.
+  { tag: tags.processingInstruction, color: MARKER_INK },
   { tag: tags.heading, textDecoration: 'none' },
   { tag: tags.heading1, fontSize: '1.35em', fontWeight: '600', textDecoration: 'none' },
   { tag: tags.heading2, fontSize: '1.18em', fontWeight: '600', textDecoration: 'none' },
@@ -586,6 +741,91 @@ function wrapCommand(key) {
   };
 }
 
+/**
+ * ArrowUp and ArrowDown that cannot skip a line.
+ *
+ * CodeMirror moves the caret by screen geometry, and its measurements assume
+ * one text height for the whole document -- a single number, measured once
+ * from one short line. This note is not like that: code is smaller than the
+ * prose, headings are bigger. When a probe lands in a line's padding rather
+ * than on its glyphs, `posAtCoords` does not clamp into that line, it moves to
+ * the top of the block and tries again, so one press could clear a whole code
+ * block, the heading above it and the table above that.
+ *
+ * Only vertical motion hits this: it is the one caller that passes a scan
+ * direction. The public posAtCoords, used below to find the column, does not.
+ *
+ * So the built-in command still decides *whether* to move -- it knows about
+ * wrapped lines, which this must not break -- and this only pulls the caret
+ * back when it has flown past a line it could have landed on.
+ *
+ * Extending a selection goes through the same geometry, so it gets the same
+ * treatment: only the head moves, the anchor is left where the selection
+ * started.
+ */
+function verticalStep(forward, base, extend) {
+  return (view) => {
+    const { doc } = view.state;
+    const start = view.state.selection.main;
+    const startLine = doc.lineAt(start.head);
+    if (!base(view)) return false;
+
+    const landed = view.state.selection.main;
+    const landedNumber = doc.lineAt(landed.head).number;
+    const moved = forward ? landedNumber - startLine.number : startLine.number - landedNumber;
+    // 0 is a step within a wrapped line, 1 is the next line: both are right.
+    if (moved <= 1) return true;
+
+    const next = doc.line(forward ? startLine.number + 1 : startLine.number - 1);
+
+    // A widget standing in for whole lines has nowhere to put a caret, so
+    // flying over a table is the correct answer, not a bug to undo.
+    const block = view.lineBlockAt(next.from);
+    if (block.from !== next.from || block.to !== next.to) return true;
+
+    // Coming up, the caret belongs on the line's last wrapped row.
+    const edge = forward ? next.from : next.to;
+    const goal = landed.goalColumn ?? start.goalColumn;
+    let pos = null;
+    if (goal != null) {
+      const coords = view.coordsAtPos(edge);
+      if (coords) {
+        const left = view.contentDOM.getBoundingClientRect().left;
+        pos = view.posAtCoords({ x: left + goal, y: (coords.top + coords.bottom) / 2 }, false);
+      }
+    }
+    if (pos == null || doc.lineAt(pos).number !== next.number) {
+      pos = Math.min(next.to, next.from + (start.head - startLine.from));
+    }
+
+    view.dispatch({
+      selection: extend
+        ? EditorSelection.range(start.anchor, pos, goal ?? undefined)
+        : EditorSelection.cursor(pos, undefined, undefined, goal ?? undefined),
+      scrollIntoView: true,
+    });
+    return true;
+  };
+}
+
+/**
+ * Enter carries a list on: a new bullet, the next number, another empty task
+ * box, or a second quote line -- and a second Enter on an item with nothing in
+ * it ends the list instead of adding to it.
+ *
+ * Without this, pressing Enter after "- [ ] milk" left a bare line, and typing
+ * "[ ] eggs" there looks like a task and is not one: the box only means
+ * anything inside a list item.
+ */
+const continueList = [{ key: 'Enter', run: insertNewlineContinueMarkup }];
+
+const verticalKeymap = [
+  { key: 'ArrowUp', run: verticalStep(false, cursorLineUp), preventDefault: true },
+  { key: 'ArrowDown', run: verticalStep(true, cursorLineDown), preventDefault: true },
+  { key: 'Shift-ArrowUp', run: verticalStep(false, selectLineUp, true), preventDefault: true },
+  { key: 'Shift-ArrowDown', run: verticalStep(true, selectLineDown, true), preventDefault: true },
+];
+
 const shortcuts = [
   { key: 'Mod-b', run: wrapCommand('b') },
   { key: 'Mod-i', run: wrapCommand('i') },
@@ -605,6 +845,8 @@ function createLiveEditor({ parent, doc, onChange }) {
         history(),
         // Ahead of the defaults, so Mod-i and friends are not swallowed.
         Prec.high(keymap.of(shortcuts)),
+        Prec.high(keymap.of(verticalKeymap)),
+        Prec.high(keymap.of(continueList)),
         // Search ahead of the defaults: Cmd+F must open the panel rather than
         // fall through to anything else bound to it.
         Prec.high(keymap.of(searchKeymap)),
@@ -614,7 +856,10 @@ function createLiveEditor({ parent, doc, onChange }) {
         markdown({ base: markdownLanguage, codeLanguages }),
         Prec.high(syntaxHighlighting(markdownStyle)),
         syntaxHighlighting(defaultHighlightStyle), // colours inside code fences
+        hoveredFence,
         livePreview,
+        markerReveal,
+        fenceHover,
         ghostCompletion(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {

package/src/renderer/note.css

@@ -160,20 +160,32 @@ body.editing #tools > * { visibility: visible; }
   opacity: 0.85;
 }
 
+/* Smaller text, but the same line box as prose. CodeMirror moves the caret
+   vertically by one default line height, so a line shorter than that gets
+   stepped over: arrowing up out of a code block landed above it, and clicking
+   a line put the caret on the one below. Dividing the prose line height by the
+   font size keeps the block looking the same and the geometry uniform. */
 .cm-editor .cm-md-table {
   font-family: ui-monospace, Menlo, monospace;
   font-size: 0.9em;
+  line-height: calc(1.55 / 0.9);
   background: rgba(0, 0, 0, 0.04);
 }
 
 .cm-editor .cm-md-code {
   font-family: ui-monospace, Menlo, monospace;
   font-size: 0.86em;
+  line-height: calc(1.55 / 0.86);
   background: rgba(0, 0, 0, 0.07);
-  /* Negative margin pulls the tint just past the text, then padding puts the
-     code back where it was -- so the block reads as a panel with breathing
-     room, without the tint running into the window edge. */
-  margin: 0 2px;
+  /* The block reads as a panel with breathing room, without the tint running
+     into the window edge. Transparent borders rather than a margin: a margin
+     takes those 2px out of the line's box, and CodeMirror could then not hit
+     the line at that x -- clicking there did nothing, and arrowing up out of
+     a code block sailed over the whole block looking for something it could
+     land on. */
+  border-left: 2px solid transparent;
+  border-right: 2px solid transparent;
+  background-clip: padding-box;
   padding-left: 8px;
   padding-right: 8px;
 }
@@ -196,6 +208,44 @@ body.editing #tools > * { visibility: visible; }
   padding-bottom: 5px;
 }
 
+/* Syntax markers -- "## ", "**", the backticks -- are hidden by width, not
+   removed, so the caret still lands on them and they can slide back in when
+   it reaches their element.
+
+   font-size: 0 is the obvious way to do that and it breaks arrow keys. A span
+   with no font size has a rect with no *height*, so a line beginning with a
+   marker cannot be hit at any y, and moving up or down steps straight over it
+   -- the caret would skip every heading. Clipping a full-size box keeps the
+   height and takes the width, which is what the caret is measured against.
+
+   max-width rather than width because there is nothing to animate towards:
+   the open state has to be wide enough for the longest marker and let the
+   content stop it short. Only the width moves; the text beside a marker is
+   already at full size and owns the line height, so nothing CodeMirror
+   measures vertically changes mid-transition. Heading sizes deliberately snap
+   for the same reason.
+
+   The open class is put on by hand in live-editor.js, not by a decoration:
+   CodeMirror rebuilds a span whose decoration changed, and a new element has
+   no width to animate from. */
+.cm-editor .cm-md-marker {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  vertical-align: bottom;
+  max-width: 0;
+  opacity: 0;
+  transition: max-width 0.12s ease, opacity 0.12s ease;
+}
+/* Full strength, not a hint. A revealed marker is there to be edited -- you
+   are counting hashes to see what level a heading is, or putting the caret
+   between a pair of stars -- and a washed-out one is hard to read against
+   the paper. It is the hiding that keeps the note clean, not the fading. */
+.cm-editor .cm-md-marker-open {
+  max-width: 4em;
+  opacity: 1;
+}
+
 /* Sits at the end of a block's opening fence line, beside the language name. */
 .cm-editor .cm-copy {
   float: right;
@@ -210,14 +260,17 @@ body.editing #tools > * { visibility: visible; }
   cursor: default;
   transition: opacity 0.12s ease;
 
-  /* Always visible, just quiet. CodeMirror renders each line as its own
-     element with nothing wrapping the block, so there is no "hovering the
-     code block" to hang a reveal on -- keying it to the fence line alone made
-     the button findable only by someone who already knew it was there. */
-  opacity: 0.4;
-}
-.cm-editor .cm-md-code-first:hover .cm-copy { opacity: 0.75; }
-.cm-editor .cm-copy:hover { opacity: 1; background: rgba(0, 0, 0, 0.16); }
+  /* Hidden until the pointer is anywhere in the block. CodeMirror renders
+     each line as its own element with nothing wrapping the block, so there is
+     no element to hang a :hover on -- live-editor.js works the hovered block
+     out from the pointer's document position and adds .cm-copy-open. Keying
+     it to the fence line alone left the button findable only by someone who
+     already knew it was there. */
+  opacity: 0;
+  pointer-events: none;
+}
+.cm-editor .cm-copy-open { opacity: 0.55; pointer-events: auto; }
+.cm-editor .cm-copy-open:hover { opacity: 1; background: rgba(0, 0, 0, 0.16); }
 .cm-editor .cm-copy.done { opacity: 1; background: rgba(47, 107, 74, 0.22); }
 
 .cm-editor .cm-table {