latex-stickies 1.0.0 → 1.2.0

package/README.md

@@ -21,7 +21,8 @@ give it a minute; later launches are instant.
 
 ## Writing in a note
 
-Click a note to edit it, click away to render. `Esc` also leaves edit mode.
+Everything renders as you type. Click into a line to see the markdown behind
+it; move away and it renders again.
 
 **Math** — `$…$` inline, `$$…$$` on its own line. Delimiters have to hug their
 content, so ordinary prose like `costs $5 and $6` stays text rather than turning
@@ -63,6 +64,9 @@ Use `Ctrl` in place of `Cmd` on Windows and Linux.
 | `Cmd+E` | Toggle edit / preview |
 | `Cmd+T` | Keep on top |
 | `Cmd+±` | Text size |
+| `Cmd+B` / `Cmd+I` / `Cmd+E` | Bold / italic / code |
+| `Cmd+K` | Link |
+| `Cmd+Shift+C` | Copy note as image |
 | `Esc` | Leave edit mode |
 
 ## Where notes live

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "latex-stickies",
-  "version": "1.0.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",
@@ -29,12 +31,27 @@
     }
   },
   "devDependencies": {
-    "dompurify": "^3.1.6",
+    "@codemirror/commands": "^6.11.0",
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.2",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-yaml": "^6.1.3",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.2",
+    "@codemirror/view": "^6.43.10",
+    "@lezer/highlight": "^1.2.3",
     "electron-builder": "^26.15.3",
+    "esbuild": "^0.28.2",
     "jsdom": "^30.0.1",
-    "katex": "^0.16.11",
-    "marked": "^18.0.11",
-    "prismjs": "^1.30.0"
+    "katex": "^0.16.11"
   },
   "dependencies": {
     "electron": "^44.1.1"
@@ -59,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

@@ -0,0 +1,69 @@
+/**
+ * Bundle entry for the live-preview editor.
+ *
+ * CodeMirror 6 ships as ES modules, which cannot be loaded over file:// under
+ * the page's `script-src 'self'` policy. esbuild rolls the pieces we use into
+ * one classic script that hangs off window.CM, matching how katex, purify and
+ * prism are vendored. Run `npm run vendor` after changing this.
+ *
+ * The language packages are imported statically rather than through
+ * @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 {
+  EditorView, keymap, Decoration, WidgetType, ViewPlugin,
+} from '@codemirror/view';
+import {
+  defaultKeymap, history, historyKeymap, indentWithTab,
+} from '@codemirror/commands';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import {
+  syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
+  LanguageDescription,
+} from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+import { python } from '@codemirror/lang-python';
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { yaml } from '@codemirror/lang-yaml';
+import { html } from '@codemirror/lang-html';
+import { css } from '@codemirror/lang-css';
+import { cpp } from '@codemirror/lang-cpp';
+import { rust } from '@codemirror/lang-rust';
+import { go } from '@codemirror/lang-go';
+import { java } from '@codemirror/lang-java';
+import { sql } from '@codemirror/lang-sql';
+
+/** What a fence's language name may be written as, mapped to a grammar. */
+const codeLanguages = [
+  LanguageDescription.of({ name: 'python', alias: ['py'], load: async () => python() }),
+  LanguageDescription.of({
+    name: 'javascript',
+    alias: ['js', 'jsx', 'ts', 'typescript', 'tsx'],
+    load: async () => javascript(),
+  }),
+  LanguageDescription.of({ name: 'json', load: async () => json() }),
+  LanguageDescription.of({ name: 'yaml', alias: ['yml'], load: async () => yaml() }),
+  LanguageDescription.of({ name: 'html', alias: ['xml'], load: async () => html() }),
+  LanguageDescription.of({ name: 'css', load: async () => css() }),
+  LanguageDescription.of({
+    name: 'cpp',
+    alias: ['c', 'c++', 'h'],
+    load: async () => cpp(),
+  }),
+  LanguageDescription.of({ name: 'rust', alias: ['rs'], load: async () => rust() }),
+  LanguageDescription.of({ name: 'go', load: async () => go() }),
+  LanguageDescription.of({ name: 'java', load: async () => java() }),
+  LanguageDescription.of({ name: 'sql', load: async () => sql() }),
+];
+
+window.CM = {
+  EditorState, StateField, StateEffect, RangeSetBuilder, Prec,
+  EditorView, keymap, Decoration, WidgetType, ViewPlugin,
+  defaultKeymap, history, historyKeymap, indentWithTab,
+  markdown, markdownLanguage,
+  syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
+  tags, codeLanguages,
+};