latex-stickies 1.4.1 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-stickies",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Sticky notes for your desktop that render LaTeX and Markdown.",
   "main": "src/main.js",
   "scripts": {

package/src/editor/entry.js

@@ -10,12 +10,15 @@
  * @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 {
@@ -63,9 +66,10 @@ const codeLanguages = [
 ];
 
 window.CM = {
-  EditorState, StateField, StateEffect, RangeSetBuilder, Prec,
+  EditorState, EditorSelection, StateField, StateEffect, RangeSetBuilder, Prec,
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
   defaultKeymap, history, historyKeymap, indentWithTab,
+  cursorLineUp, cursorLineDown, selectLineUp, selectLineDown,
   markdown, markdownLanguage,
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
   tags, codeLanguages,

package/src/renderer/live-editor.js

@@ -15,8 +15,10 @@
  */
 
 const {
-  EditorState, StateField, EditorView, Decoration, WidgetType, keymap, Prec,
+  EditorState, EditorSelection, StateField, StateEffect, EditorView, Decoration,
+  WidgetType, ViewPlugin, keymap, Prec,
   defaultKeymap, history, historyKeymap, indentWithTab,
+  cursorLineUp, cursorLineDown, selectLineUp, selectLineDown,
   markdown, markdownLanguage, codeLanguages,
   syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle, tags,
   search, searchKeymap, highlightSelectionMatches,
@@ -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,32 @@ 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 +339,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 +459,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 +517,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 +563,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 +572,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 +593,63 @@ 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(update) {
+    if (update.docChanged || update.selectionSet || update.viewportChanged) 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) {
+      for (let node = syntaxTree(view.state).resolveInner(sel.from, 1); node; node = node.parent) {
+        if (REVEAL.has(node.name) && sel.to <= node.to) {
+          from = node.from;
+          to = node.to;
+          break;
+        }
+      }
+    }
+    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 +658,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),
@@ -586,6 +710,80 @@ 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;
+  };
+}
+
+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 +803,7 @@ 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)),
         // 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 +813,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,40 @@ 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;
+}
+.cm-editor .cm-md-marker-open {
+  max-width: 4em;
+  opacity: 0.35;
+}
+
 /* Sits at the end of a block's opening fence line, beside the language name. */
 .cm-editor .cm-copy {
   float: right;
@@ -210,14 +256,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 {