latex-stickies 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-stickies",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Sticky notes for your desktop that render LaTeX and Markdown.",
   "main": "src/main.js",
   "scripts": {
@@ -10,7 +10,9 @@
     "icon": "node scripts/make-icon.js",
     "dist": "node scripts/build-dmg.js",
     "install-app": "npm run dist && rm -rf \"/Applications/LaTeX Stickies.app\" && cp -R \"dist/mac-arm64/LaTeX Stickies.app\" /Applications/ && xattr -dr com.apple.quarantine \"/Applications/LaTeX Stickies.app\"",
-    "prepublishOnly": "npm test"
+    "prepublishOnly": "npm test",
+    "postinstall": "node scripts/brand-electron.js",
+    "brand": "node scripts/brand-electron.js"
   },
   "build": {
     "appId": "com.kevinjusak.latexsticky",
@@ -74,6 +76,7 @@
   "files": [
     "src/",
     "bin/",
+    "scripts/brand-electron.js",
     "build/icon.icns",
     "build/icon.png"
   ],

package/scripts/brand-electron.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * Gives the Electron shell this app's name and icon, on macOS.
+ *
+ * Run from source or from npm there is no .app bundle of our own, so macOS
+ * takes the Dock name and icon from the shell being launched -- which is called
+ * "Electron" and wears the atom logo. app.setName() cannot change that: the
+ * Dock reads it from the bundle before any of our code runs.
+ *
+ * Editing Info.plist invalidates the bundle's ad-hoc signature, so it is
+ * re-signed afterwards. That matters: an unsigned bundle will not launch on
+ * Apple Silicon at all, which is a far worse outcome than a wrong name. If
+ * anything here fails, the original Info.plist goes back and the install
+ * continues quietly -- a cosmetic nicety must never break someone's install.
+ */
+const { execFileSync } = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+const NAME = 'LaTeX Stickies';
+
+function main() {
+  if (process.platform !== 'darwin') return; // only macOS names apps this way
+
+  let appPath;
+  try {
+    const binary = require(require.resolve('electron', { paths: [path.join(__dirname, '..')] }));
+    // .../Electron.app/Contents/MacOS/Electron -> .../Electron.app
+    appPath = path.resolve(path.dirname(binary), '..', '..');
+  } catch (_) {
+    return; // no runtime installed; nothing to brand
+  }
+
+  const plist = path.join(appPath, 'Contents', 'Info.plist');
+  if (!fs.existsSync(plist)) return;
+
+  const read = (key) => {
+    try {
+      return execFileSync('plutil', ['-extract', key, 'raw', plist]).toString().trim();
+    } catch (_) {
+      return '';
+    }
+  };
+
+  if (read('CFBundleName') === NAME) return; // already done
+
+  const backup = fs.readFileSync(plist);
+  try {
+    for (const key of ['CFBundleName', 'CFBundleDisplayName']) {
+      try {
+        execFileSync('plutil', ['-replace', key, '-string', NAME, plist]);
+      } catch (_) {
+        execFileSync('plutil', ['-insert', key, '-string', NAME, plist]);
+      }
+    }
+
+    // The bundle icon is what shows before the app can set its own.
+    const icon = path.join(__dirname, '..', 'build', 'icon.icns');
+    const target = path.join(appPath, 'Contents', 'Resources', 'electron.icns');
+    if (fs.existsSync(icon) && fs.existsSync(target)) fs.copyFileSync(icon, target);
+
+    // Required: the edits above invalidate the ad-hoc signature, and macOS
+    // refuses to launch a bundle whose signature does not match its contents.
+    execFileSync('codesign', ['--force', '--deep', '--sign', '-', appPath], {
+      stdio: 'ignore',
+    });
+    execFileSync('codesign', ['--verify', appPath], { stdio: 'ignore' });
+
+    console.log(`named the Electron shell "${NAME}"`);
+  } catch (err) {
+    fs.writeFileSync(plist, backup);
+    try {
+      execFileSync('codesign', ['--force', '--deep', '--sign', '-', appPath], {
+        stdio: 'ignore',
+      });
+    } catch (_) { /* leave it as found */ }
+    console.log(`could not rename the Electron shell (${err.message.split('\n')[0]})`);
+  }
+}
+
+try {
+  main();
+} catch (err) {
+  // Never fail an install over the name in the Dock.
+  console.log('skipped naming the Electron shell:', err.message.split('\n')[0]);
+}

package/src/ai.js

@@ -0,0 +1,171 @@
+/**
+ * Talks to Ollama, if it happens to be running.
+ *
+ * Requests are made from the main process rather than the renderer. The note
+ * page runs under `default-src 'none'` with no connect-src, so it cannot reach
+ * the network at all -- and that is worth keeping. Widening the policy so a
+ * page full of untrusted note text can open connections would trade a real
+ * guarantee for a convenience.
+ *
+ * Everything here fails quietly. Ollama is optional: if it is not installed,
+ * not running, or slow to answer, the feature simply does not appear.
+ */
+const HOST = process.env.OLLAMA_HOST || 'http://127.0.0.1:11434';
+
+const STATUS_TIMEOUT_MS = 1500;
+const COMPLETE_TIMEOUT_MS = 8000;
+
+/** In-flight completion, so a new keystroke can cancel the last request. */
+let pending = null;
+
+async function withTimeout(url, options, ms) {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), ms);
+  try {
+    return await fetch(url, { ...options, signal: controller.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/** Is Ollama reachable, and what has it got? */
+async function status() {
+  try {
+    const res = await withTimeout(`${HOST}/api/tags`, {}, STATUS_TIMEOUT_MS);
+    if (!res.ok) return { available: false, models: [] };
+    const data = await res.json();
+    const models = (data.models || [])
+      // Embedding models cannot generate text; offering one would just fail.
+      .filter((m) => !/embed/i.test(m.name))
+      .map((m) => ({ name: m.name, size: m.size || 0 }))
+      .sort((a, b) => a.size - b.size);
+    return { available: true, models, host: HOST };
+  } catch (_) {
+    return { available: false, models: [] };
+  }
+}
+
+/**
+ * Which model to suggest when none has been chosen.
+ *
+ * Size matters more than quality here: this runs on every pause in typing, and
+ * a 27B model answering in four seconds is worse than a small one answering in
+ * two hundred milliseconds. Prefer a code-completion model, then the smallest.
+ */
+function pickDefault(models) {
+  if (!models.length) return '';
+  const coder = models.find((m) => /coder|code/i.test(m.name));
+  if (coder) return coder.name;
+  // Sort here rather than trusting the caller: relying on the list arriving
+  // in size order is the kind of assumption that quietly stops being true.
+  return [...models].sort((a, b) => (a.size || 0) - (b.size || 0))[0].name;
+}
+
+/**
+ * Drops any part of the answer that repeats what is already typed.
+ *
+ * Asked to continue "- milk\n- eggs\n- ", a model will often reply "- bread",
+ * which would insert the bullet twice. Trim the longest overlap between the end
+ * of the prefix and the start of the completion.
+ */
+function trimOverlap(prefix, completion) {
+  const tail = prefix.slice(-40);
+  for (let k = Math.min(tail.length, completion.length); k > 0; k -= 1) {
+    if (completion.slice(0, k) === tail.slice(-k)) return completion.slice(k);
+  }
+  return completion;
+}
+
+/**
+ * Models trained to fill a gap, which is exactly what autocomplete is.
+ *
+ * Asked with an ordinary instruction, an instruct-tuned model answers as an
+ * assistant: given "hello my name is " it replied "Qwen." -- its own name.
+ * The fill-in-the-middle format asks it to complete the text rather than
+ * respond to it.
+ */
+const FIM = /coder|starcoder|codellama|codegemma|codestral/i;
+
+function buildRequest({ prefix, suffix, model }) {
+  if (FIM.test(model)) {
+    return {
+      prompt: `<|fim_prefix|>${prefix}<|fim_suffix|>${suffix || ''}<|fim_middle|>`,
+      stop: ['\n', '<|fim_pad|>', '<|endoftext|>', '<|file_sep|>'],
+    };
+  }
+  // No FIM support: raw mode at least skips the chat template, so the model
+  // continues the text instead of replying to it.
+  return { prompt: prefix, stop: ['\n'] };
+}
+
+/**
+ * Tidies a raw completion into something worth showing.
+ *
+ * Cuts to one line, ends at the first sentence rather than trailing off, and
+ * drops a half-finished word when the model simply ran out of budget.
+ */
+function tidy(text, prefix, truncated) {
+  let out = String(text || '').replace(/^[\r\n]+/, '').split('\n')[0];
+  out = trimOverlap(prefix, out);
+
+  // End at the first sentence. The terminator must be followed by a space or
+  // the end, so "3.14" is not mistaken for the end of a sentence.
+  const sentence = /^[\s\S]*?[.!?](?=\s|$)/.exec(out);
+  if (sentence) out = sentence[0];
+
+  // Nothing to cut at: cap the length, and drop a half-finished word -- but
+  // only when the model actually ran out of budget, which it tells us. Judging
+  // that from the text alone throws away perfectly complete last words.
+  if (out.length > 90) out = out.slice(0, 90).replace(/\s+\S*$/, '');
+  else if (truncated && !/[\s.!?,;:)\]}]$/.test(out)) {
+    out = out.replace(/\s+\S*$/, '');
+  }
+  return out.trimEnd();
+}
+
+/**
+ * Asks for a continuation of `prefix`.
+ *
+ * Cancels whatever was already in flight: the caller types faster than the
+ * model answers, and a stale suggestion is worse than none.
+ */
+async function complete({ prefix, suffix, model }) {
+  if (!prefix || !prefix.trim()) return '';
+
+  if (pending) pending.abort();
+  const controller = new AbortController();
+  pending = controller;
+
+  const timer = setTimeout(() => controller.abort(), COMPLETE_TIMEOUT_MS);
+  try {
+    const { prompt, stop } = buildRequest({ prefix, suffix, model });
+    const res = await fetch(`${HOST}/api/generate`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      signal: controller.signal,
+      body: JSON.stringify({
+        model,
+        prompt,
+        // Skips the chat template, so the model continues rather than replies.
+        raw: true,
+        stream: false,
+        options: {
+          // Short and fairly literal: this is a completion, not an essay.
+          num_predict: 24,
+          temperature: 0.15,
+          stop,
+        },
+      }),
+    });
+    if (!res.ok) return '';
+    const data = await res.json();
+    return tidy(data.response, prefix, data.done_reason === 'length');
+  } catch (_) {
+    return ''; // aborted, unreachable, or malformed -- all mean "no suggestion"
+  } finally {
+    clearTimeout(timer);
+    if (pending === controller) pending = null;
+  }
+}
+
+module.exports = { status, complete, pickDefault, trimOverlap, tidy, HOST };

package/src/editor/entry.js

@@ -10,7 +10,7 @@
  * @codemirror/language-data, which loads grammars with dynamic import -- that
  * would leave the bundle with chunks it cannot fetch over file://.
  */
-import { EditorState, StateField, RangeSetBuilder, Prec } from '@codemirror/state';
+import { EditorState, StateField, StateEffect, RangeSetBuilder, Prec } from '@codemirror/state';
 import {
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
 } from '@codemirror/view';
@@ -60,7 +60,7 @@ const codeLanguages = [
 ];
 
 window.CM = {
-  EditorState, StateField, RangeSetBuilder, Prec,
+  EditorState, StateField, StateEffect, RangeSetBuilder, Prec,
   EditorView, keymap, Decoration, WidgetType, ViewPlugin,
   defaultKeymap, history, historyKeymap, indentWithTab,
   markdown, markdownLanguage,

package/src/main.js

@@ -1,6 +1,8 @@
 const {
-  app, BrowserWindow, ipcMain, Menu, clipboard, ClipboardItem, screen, shell,
+  app, BrowserWindow, dialog, ipcMain, Menu, clipboard, ClipboardItem,
+  nativeImage, screen, shell,
 } = require('electron');
+const fs = require('fs');
 const path = require('path');
 
 // Pin the identity before anything derives a path from it.
@@ -15,6 +17,7 @@ app.setPath('userData', path.join(app.getPath('appData'), 'latex-stickies'));
 
 // Required after the path is set: store.js resolves notes.json when it loads.
 const store = require('./store');
+const ai = require('./ai');
 
 const ICON = path.join(__dirname, '..', 'build', 'icon.png');
 
@@ -158,7 +161,25 @@ function restoreNotes() {
 
 const { WELCOME } = require('./welcome');
 
-function buildMenu() {
+async function buildMenu() {
+  const saved = store.settings();
+  // Only ask Ollama when the feature is on: a cold check on every menu build
+  // would add a wait to startup for people who never enable it.
+  const { available, models } = saved.aiEnabled
+    ? await ai.status()
+    : { available: false, models: [] };
+
+  const modelItems = models.map((m) => ({
+    label: `${m.name}  (${(m.size / 1e9).toFixed(1)} GB)`,
+    type: 'radio',
+    checked: m.name === saved.aiModel,
+    click: () => {
+      store.saveSettings({ aiModel: m.name });
+      buildMenu();
+      windows.forEach((w) => w.webContents.send('ai-settings-changed'));
+    },
+  }));
+
   const template = [
     {
       label: app.name,
@@ -200,6 +221,46 @@ function buildMenu() {
           accelerator: 'CmdOrCtrl+E',
           click: () => BrowserWindow.getFocusedWindow()?.webContents.send('toggle-edit'),
         },
+        {
+          label: 'Autocomplete (Ollama)',
+          type: 'checkbox',
+          checked: saved.aiEnabled,
+          click: async (item) => {
+            if (!item.checked) {
+              store.saveSettings({ aiEnabled: false });
+            } else {
+              const found = await ai.status();
+              if (!found.available || !found.models.length) {
+                item.checked = false;
+                dialog.showMessageBox({
+                  type: 'info',
+                  message: 'Ollama is not running',
+                  detail: 'Autocomplete runs entirely on this machine through '
+                    + `Ollama, which was not reachable at ${ai.HOST}.\n\n`
+                    + 'Start it with "ollama serve", or install it from '
+                    + 'ollama.com and pull a model:\n    ollama pull qwen2.5-coder:1.5b',
+                  buttons: ['OK'],
+                });
+                return;
+              }
+              store.saveSettings({
+                aiEnabled: true,
+                aiModel: saved.aiModel || ai.pickDefault(found.models),
+              });
+            }
+            await buildMenu(); // the model list only appears once it is on
+            windows.forEach((w) => w.webContents.send('ai-settings-changed'));
+          },
+        },
+        {
+          label: 'Autocomplete Model',
+          // Populated once autocomplete is on and Ollama has answered.
+          submenu: modelItems.length
+            ? modelItems
+            : [{ label: available ? 'No usable models' : 'Turn on autocomplete first',
+                 enabled: false }],
+        },
+        { type: 'separator' },
         {
           label: 'Copy Note as Image',
           accelerator: 'CmdOrCtrl+Shift+C',
@@ -280,18 +341,22 @@ function surfaceNotes() {
 
 app.on('second-instance', surfaceNotes);
 
-app.whenReady().then(() => {
+app.whenReady().then(async () => {
   // Run from npm there is no .app bundle to carry the icon, so macOS would show
   // the generic Electron atom in the Dock. Set it explicitly.
-  if (process.platform === 'darwin' && app.dock) {
+  // Only when running from source or from npm. A packaged app already carries
+  // its icon in the bundle, and build/ is not shipped inside it -- trying
+  // anyway logged a missing-file error on every launch of the built app.
+  if (!app.isPackaged && process.platform === 'darwin' && app.dock) {
     try {
-      app.dock.setIcon(ICON);
+      const image = nativeImage.createFromBuffer(fs.readFileSync(ICON));
+      if (!image.isEmpty()) app.dock.setIcon(image);
     } catch (err) {
       console.error('could not set dock icon', err);
     }
   }
 
-  buildMenu();
+  await buildMenu();
   restoreNotes();
 
   if (SMOKE_CLOSE_MS) {
@@ -403,6 +468,30 @@ ipcMain.handle('note:openExternal', (_e, url) => openExternal(url));
 
 ipcMain.handle('note:copyText', (_e, text) => clipboard.writeText(String(text)));
 
+/**
+ * Whether autocomplete is on, and with which model.
+ *
+ * Off unless Ollama is actually answering: the feature is optional, and a
+ * setting that promises something the machine cannot do is worse than no
+ * setting at all.
+ */
+ipcMain.handle('ai:settings', async () => {
+  const saved = store.settings();
+  if (!saved.aiEnabled) return { enabled: false };
+
+  const { available, models } = await ai.status();
+  if (!available || !models.length) return { enabled: false, reason: 'ollama-unreachable' };
+
+  // models are { name, size } objects; the setting is a name. Fall back to a
+  // sensible pick if the chosen model has been removed.
+  const names = models.map((m) => m.name);
+  const model = names.includes(saved.aiModel) ? saved.aiModel : ai.pickDefault(models);
+  if (model !== saved.aiModel) store.saveSettings({ aiModel: model });
+  return { enabled: true, model };
+});
+
+ipcMain.handle('ai:complete', (_e, payload) => ai.complete(payload || {}));
+
 /**
  * Puts a PNG on the clipboard.
  *

package/src/preload.js

@@ -29,10 +29,17 @@ contextBridge.exposeInMainWorld('sticky', {
   flush: (body) => ipcRenderer.sendSync('note:flush', { id: noteId, body }),
   mathMenu: (payload) => ipcRenderer.invoke('note:mathMenu', payload),
   copyNote: (payload) => ipcRenderer.invoke('note:copyNote', payload),
+
+  // Optional, local-only autocomplete. Requests are made in the main process:
+  // this page cannot reach the network, and should not be able to.
+  ai: {
+    settings: () => ipcRenderer.invoke('ai:settings'),
+    complete: (payload) => ipcRenderer.invoke('ai:complete', payload),
+  },
   on: (channel, fn) => {
     const allowed = [
       'toggle-edit', 'request-delete', 'font-size', 'always-on-top-changed',
-      'copy-note-image',
+      'copy-note-image', 'ai-settings-changed',
     ];
     if (!allowed.includes(channel)) return;
     ipcRenderer.on(channel, (_e, payload) => fn(payload));

package/src/renderer/ghost.js

@@ -0,0 +1,205 @@
+/**
+ * Inline autocomplete: a grey continuation after the caret, accepted with Tab.
+ *
+ * The suggestion is never inserted into the document until it is accepted. It
+ * lives in a state field as a decoration, so nothing typed here can be saved to
+ * a note by accident, and dismissing it costs nothing.
+ *
+ * It asks only after a pause, and only in the quiet cases: no suggestion while
+ * text is selected, mid-word, or immediately after another suggestion was
+ * dismissed. A notes app that interrupts every keystroke is worse than one that
+ * never suggests anything.
+ */
+
+// Wrapped, because these are classic scripts sharing one global scope: naming
+// the same CodeMirror exports here and in live-editor.js is a redeclaration.
+let ghostCompletion;
+let refreshGhostSettings;
+
+(() => {
+// Continue.dev, the closest comparison for local FIM autocomplete, debounces
+// at 250-350ms against a ~1024 token prompt budget. The whole industry target
+// for a completion is around 500ms, so spending all of it waiting before even
+// asking, as an earlier 500ms debounce did, leaves nothing for the model.
+const IDLE_MS = 300;
+// Enough context to say something useful, but low enough that a new note is
+// not silently dead: at 12 characters, typing "hello" in a fresh note produced
+// nothing at all and looked broken.
+const MIN_CONTEXT = 4;
+const PREFIX_CHARS = 2000;
+const SUFFIX_CHARS = 600;
+
+let enabled = false;
+let model = '';
+let timer = null;
+let requestId = 0;
+
+/** Turns suggestions on or off; called at startup and when the setting changes. */
+refreshGhostSettings = async function refreshGhostSettings() {
+  // The bridge may not offer it at all -- an older preload, or the snapshot
+  // window. Absent means off, never an error.
+  if (!window.sticky || !window.sticky.ai) {
+    enabled = false;
+    return false;
+  }
+  const settings = await window.sticky.ai.settings();
+  enabled = !!settings.enabled;
+  model = settings.model || '';
+  return enabled;
+};
+
+/* ---------- the suggestion itself ---------- */
+
+const { StateField, StateEffect, EditorView, Decoration, WidgetType, keymap, Prec } = window.CM;
+
+const setGhost = StateEffect.define();
+const clearGhost = StateEffect.define();
+
+class GhostWidget extends WidgetType {
+  constructor(text) {
+    super();
+    this.text = text;
+  }
+
+  eq(other) {
+    return other.text === this.text;
+  }
+
+  toDOM() {
+    const span = document.createElement('span');
+    span.className = 'cm-ghost';
+    span.textContent = this.text;
+    return span;
+  }
+
+  ignoreEvent() {
+    return true;
+  }
+}
+
+const ghostField = StateField.define({
+  create: () => ({ text: '', pos: -1, deco: Decoration.none }),
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(clearGhost)) {
+        return { text: '', pos: -1, deco: Decoration.none };
+      }
+      if (effect.is(setGhost)) {
+        const { text, pos } = effect.value;
+        return {
+          text,
+          pos,
+          deco: Decoration.set([
+            Decoration.widget({ widget: new GhostWidget(text), side: 1 }).range(pos),
+          ]),
+        };
+      }
+    }
+    // Any edit or cursor move invalidates it.
+    if (tr.docChanged || tr.selection) {
+      return { text: '', pos: -1, deco: Decoration.none };
+    }
+    return value;
+  },
+  provide: (field) => EditorView.decorations.from(field, (v) => v.deco),
+});
+
+/* ---------- asking ---------- */
+
+function shouldAsk(state) {
+  const sel = state.selection.main;
+  if (!sel.empty) return false; // not while selecting
+  if (sel.from < MIN_CONTEXT) return false;
+
+  // Never inside a word, where the suggestion would sit on top of what is
+  // already written. The end of a line, or before a space or punctuation, is
+  // fair game -- including mid-line, which is where revising a note happens.
+  const after = state.doc.sliceString(sel.from, sel.from + 1);
+  return !after || /[\s.,;:!?)\]}$]/.test(after);
+}
+
+/**
+ * The text either side of the caret, cut at line boundaries.
+ *
+ * Slicing by character count alone lands mid-word, mid-table-row, or inside a
+ * code fence whose opening line has been cut away -- the model then has to
+ * guess what it is inside. Snapping to whole lines costs nothing and keeps the
+ * context syntactically intact.
+ *
+ * The note's first line comes along when it would otherwise be cut, since in a
+ * long note the heading says what the whole thing is about.
+ */
+function contextAround(state, pos) {
+  const doc = state.doc;
+
+  const startLine = doc.lineAt(Math.max(0, pos - PREFIX_CHARS));
+  let prefix = doc.sliceString(startLine.from, pos);
+
+  if (startLine.number > 1) {
+    const title = doc.line(1).text.trim();
+    // A heading is worth its handful of characters: without it a long note
+    // reads to the model as an unlabelled fragment.
+    if (title) prefix = `${title}\n...\n${prefix}`;
+  }
+
+  const endLine = doc.lineAt(Math.min(doc.length, pos + SUFFIX_CHARS));
+  const suffix = doc.sliceString(pos, endLine.to);
+
+  return { prefix, suffix };
+}
+
+function requestGhost(view) {
+  clearTimeout(timer);
+  if (!enabled) return;
+
+  timer = setTimeout(async () => {
+    if (!shouldAsk(view.state)) return;
+    const sel = view.state.selection.main;
+    const { prefix, suffix } = contextAround(view.state, sel.from);
+
+    const id = ++requestId;
+    const text = await window.sticky.ai.complete({ prefix, suffix, model });
+
+    // The caret has moved on, or a newer request overtook this one.
+    if (id !== requestId || !text) return;
+    if (view.state.selection.main.from !== sel.from) return;
+
+    view.dispatch({ effects: setGhost.of({ text, pos: sel.from }) });
+  }, IDLE_MS);
+}
+
+/* ---------- keys ---------- */
+
+const acceptGhost = (view) => {
+  const ghost = view.state.field(ghostField, false);
+  if (!ghost || !ghost.text) return false; // let Tab indent as usual
+  view.dispatch({
+    changes: { from: ghost.pos, to: ghost.pos, insert: ghost.text },
+    selection: { anchor: ghost.pos + ghost.text.length },
+    effects: clearGhost.of(null),
+  });
+  return true;
+};
+
+const dismissGhost = (view) => {
+  const ghost = view.state.field(ghostField, false);
+  if (!ghost || !ghost.text) return false;
+  view.dispatch({ effects: clearGhost.of(null) });
+  return true;
+};
+
+/** The extension to hand CodeMirror. */
+ghostCompletion = function ghostCompletion() {
+  return [
+    ghostField,
+    // Ahead of indentWithTab, so Tab takes the suggestion when there is one.
+    Prec.highest(keymap.of([
+      { key: 'Tab', run: acceptGhost },
+      { key: 'Escape', run: dismissGhost },
+    ])),
+    EditorView.updateListener.of((update) => {
+      if (update.docChanged) requestGhost(update.view);
+    }),
+  ];
+};
+})();

package/src/renderer/live-editor.js

@@ -588,6 +588,7 @@ function createLiveEditor({ parent, doc, onChange }) {
         Prec.high(syntaxHighlighting(markdownStyle)),
         syntaxHighlighting(defaultHighlightStyle), // colours inside code fences
         livePreview,
+        ghostCompletion(),
         EditorView.lineWrapping,
         EditorView.updateListener.of((update) => {
           if (update.docChanged) onChange(update.state.doc.toString());