latex-stickies 1.0.0 → 1.1.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.1.0",
   "description": "Sticky notes for your desktop that render LaTeX and Markdown.",
   "main": "src/main.js",
   "scripts": {
@@ -29,12 +29,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"

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, 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, RangeSetBuilder, Prec,
+  EditorView, keymap, Decoration, WidgetType, ViewPlugin,
+  defaultKeymap, history, historyKeymap, indentWithTab,
+  markdown, markdownLanguage,
+  syntaxTree, HighlightStyle, syntaxHighlighting, defaultHighlightStyle,
+  tags, codeLanguages,
+};

package/src/main.js

@@ -1,4 +1,6 @@
-const { app, BrowserWindow, ipcMain, Menu, screen, shell } = require('electron');
+const {
+  app, BrowserWindow, ipcMain, Menu, clipboard, ClipboardItem, screen, shell,
+} = require('electron');
 const path = require('path');
 
 // Pin the identity before anything derives a path from it.
@@ -16,6 +18,19 @@ const store = require('./store');
 
 const ICON = path.join(__dirname, '..', 'build', 'icon.png');
 
+/**
+ * Test hook for scripts/smoke.js, inert unless the variable is set.
+ *
+ * What it enables is the ability to observe the window lifecycle from outside
+ * the app: how many notes are open, and closing them all on cue. That is the
+ * one thing CI could not reach, and the reason a Windows-only bug -- the app
+ * lingering with no windows and no way back -- shipped unnoticed.
+ */
+const SMOKE_CLOSE_MS = Number(process.env.LATEX_STICKIES_SMOKE_CLOSE_MS) || 0;
+const smokeLog = (message) => {
+  if (SMOKE_CLOSE_MS) console.log(`SMOKE ${message}`);
+};
+
 const COLORS = ['yellow', 'blue', 'green', 'pink', 'purple', 'gray'];
 
 /** noteId -> BrowserWindow */
@@ -94,7 +109,10 @@ function openNote(note) {
   };
   win.on('resize', persistBounds);
   win.on('move', persistBounds);
-  win.on('closed', () => windows.delete(note.id));
+  win.on('closed', () => {
+    windows.delete(note.id);
+    smokeLog(`windows=${windows.size}`);
+  });
 
   // Links inside a note open in the real browser, never inside the sticky.
   win.webContents.setWindowOpenHandler(({ url }) => {
@@ -109,6 +127,7 @@ function openNote(note) {
   });
 
   windows.set(note.id, win);
+  smokeLog(`windows=${windows.size}`);
   return win;
 }
 
@@ -137,22 +156,7 @@ function restoreNotes() {
   notes.forEach(openNote);
 }
 
-const WELCOME = [
-  '# Welcome to LaTeX Stickies',
-  '',
-  'Type math inline like $e^{i\\pi} + 1 = 0$, or on its own line:',
-  '',
-  '$$\\int_{-\\infty}^{\\infty} e^{-x^2}\\,dx = \\sqrt{\\pi}$$',
-  '',
-  'Markdown works too:',
-  '',
-  '- **bold**, *italic*, `code`, ~~strikethrough~~',
-  '- [ ] task lists',
-  '- > blockquotes, tables, and fenced code blocks',
-  '',
-  'Click the note to edit, click outside to render.',
-  'Cmd+N new note · Cmd+E toggle edit · Cmd+T always on top',
-].join('\n');
+const { WELCOME } = require('./welcome');
 
 function buildMenu() {
   const template = [
@@ -196,6 +200,13 @@ function buildMenu() {
           accelerator: 'CmdOrCtrl+E',
           click: () => BrowserWindow.getFocusedWindow()?.webContents.send('toggle-edit'),
         },
+        {
+          label: 'Copy Note as Image',
+          accelerator: 'CmdOrCtrl+Shift+C',
+          click: () => BrowserWindow.getFocusedWindow()
+            ?.webContents.send('copy-note-image'),
+        },
+        { type: 'separator' },
         {
           label: 'Always on Top',
           accelerator: 'CmdOrCtrl+T',
@@ -247,12 +258,27 @@ if (!app.requestSingleInstanceLock()) {
   app.exit(0);
 }
 
-app.on('second-instance', () => {
+/**
+ * Brings the notes back to the front -- from a Dock click on macOS, or from a
+ * second launch anywhere.
+ *
+ * Reopening from disk when nothing is on screen is the important half. Without
+ * it, launching again while a note-less instance was alive iterated an empty
+ * set of windows and did nothing at all, so the app looked hung: the launcher
+ * reported it was running, and no window ever appeared.
+ */
+function surfaceNotes() {
+  if (windows.size === 0) {
+    restoreNotes();
+    return;
+  }
   windows.forEach((win) => {
     if (win.isMinimized()) win.restore();
     win.show();
   });
-});
+}
+
+app.on('second-instance', surfaceNotes);
 
 app.whenReady().then(() => {
   // Run from npm there is no .app bundle to carry the icon, so macOS would show
@@ -268,14 +294,24 @@ app.whenReady().then(() => {
   buildMenu();
   restoreNotes();
 
-  app.on('activate', () => {
-    if (windows.size === 0) restoreNotes();
-    else windows.forEach((w) => w.show());
-  });
+  if (SMOKE_CLOSE_MS) {
+    setTimeout(() => {
+      smokeLog('closing every note');
+      [...windows.values()].forEach((win) => win.close());
+    }, SMOKE_CLOSE_MS);
+  }
+
+  app.on('activate', surfaceNotes);
 });
 
-// Stickies live on even with no window open, matching the macOS app.
-app.on('window-all-closed', () => {});
+// macOS apps outlive their windows -- that is how Stickies behaves, and the
+// Dock icon is the way back. Windows and Linux have no such affordance: the
+// process lingered invisibly with no way to reach it, and the next launch
+// handed off to it and appeared to do nothing. Quit there instead. The notes
+// are already on disk and come back on the next launch.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') app.quit();
+});
 app.on('before-quit', () => store.saveNow());
 
 ipcMain.handle('note:get', (_e, id) => store.get(id));
@@ -305,4 +341,139 @@ ipcMain.handle('note:setAlwaysOnTop', (e, value) => {
 
 ipcMain.handle('note:close', (e) => BrowserWindow.fromWebContents(e.sender)?.close());
 
+/**
+ * Right-click menu for a rendered equation.
+ *
+ * "Copy as Image" screenshots just the equation's rectangle out of the live
+ * window. KaTeX draws with HTML and fonts rather than emitting a picture, so
+ * capturing what is already on screen is both the simplest route to a
+ * pasteable image and the one guaranteed to match what the note shows.
+ *
+ * Resolves once the menu closes, so the renderer knows when to drop the
+ * temporary capture styling.
+ */
+ipcMain.handle('note:mathMenu', (e, { rect, tex } = {}) => {
+  const win = BrowserWindow.fromWebContents(e.sender);
+  if (!win) return null;
+
+  return new Promise((resolve) => {
+    const menu = Menu.buildFromTemplate([
+      {
+        label: 'Copy as Image',
+        enabled: !!rect,
+        click: async () => {
+          try {
+            // capturePage stalls on macOS when the window is not frontmost.
+            // Right-clicking a note focuses it, but make that explicit.
+            if (!win.isFocused()) win.focus();
+            // capturePage wants whole pixels inside the page. It captures at
+            // the display's scale factor, so this comes back at 2x on Retina.
+            const image = await win.webContents.capturePage({
+              x: Math.max(0, Math.floor(rect.x)),
+              y: Math.max(0, Math.floor(rect.y)),
+              width: Math.max(1, Math.ceil(rect.width)),
+              height: Math.max(1, Math.ceil(rect.height)),
+            });
+            await copyImage(image);
+          } catch (err) {
+            console.error('could not copy the equation as an image', err);
+          }
+        },
+      },
+      {
+        label: 'Copy LaTeX',
+        enabled: !!tex,
+        click: () => {
+          Promise.resolve(clipboard.writeText(tex)).catch((err) =>
+            console.error('could not copy the LaTeX source', err));
+        },
+      },
+      { type: 'separator' },
+      {
+        label: 'Copy Note as Image',
+        // The renderer has to hide the toolbar and measure the content first.
+        click: () => win.webContents.send('copy-note-image'),
+      },
+    ]);
+    menu.popup({ window: win, callback: () => resolve(null) });
+  });
+});
+
 ipcMain.handle('note:openExternal', (_e, url) => openExternal(url));
+
+ipcMain.handle('note:copyText', (_e, text) => clipboard.writeText(String(text)));
+
+/**
+ * Puts a PNG on the clipboard.
+ *
+ * Electron 44 replaced the clipboard with the async, web-shaped API: there is
+ * no writeImage, and write() takes ClipboardItems. The older call fails
+ * silently rather than throwing, so everything image-related goes through here.
+ */
+async function copyImage(image) {
+  if (!image || image.isEmpty()) throw new Error('captured an empty image');
+  await clipboard.write([new ClipboardItem({ 'image/png': image.toPNG() })]);
+}
+
+/**
+ * Screenshots a whole note.
+ *
+ * A note can hold more than its window shows, and a picture that stops at the
+ * scroll line is not the note. So the window is grown to fit its content for
+ * the capture and put straight back -- capped to the display, since a very long
+ * note would otherwise ask for a window taller than the screen.
+ */
+/**
+ * Screenshots a whole note, however long it is.
+ *
+ * The note's own window cannot do this: macOS clamps a window to the display,
+ * and the editor only renders the lines it believes are on screen, so a note
+ * taller than the screen came out cut off. Instead the note is opened again in
+ * an offscreen window -- which has no such limit -- sized to its full content,
+ * and that is what gets photographed.
+ *
+ * The offscreen page is the same note.html loading the same note id, so the
+ * picture cannot drift from what the real window shows.
+ */
+ipcMain.handle('note:copyNote', async (e, { width } = {}) => {
+  const source = BrowserWindow.fromWebContents(e.sender);
+  const entry = [...windows.entries()].find(([, w]) => w === source);
+  if (!source || !entry) return null;
+  const noteId = entry[0];
+
+  const shot = new BrowserWindow({
+    width: width || source.getBounds().width,
+    height: 800, // resized once the page reports how tall it really is
+    show: false,
+    frame: false,
+    webPreferences: {
+      offscreen: true,
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      additionalArguments: [`--note-id=${noteId}`, '--snapshot'],
+    },
+  });
+
+  try {
+    const height = await new Promise((resolve, reject) => {
+      const timer = setTimeout(
+        () => reject(new Error('the note never reported its height')), 8000);
+      ipcMain.once('note:snapshotReady', (_event, reported) => {
+        clearTimeout(timer);
+        resolve(Math.ceil(reported) || 800);
+      });
+      shot.loadFile(path.join(__dirname, 'renderer', 'note.html')).catch(reject);
+    });
+
+    shot.setBounds({ ...shot.getBounds(), height });
+    // Let the editor fill in the lines the taller viewport now covers.
+    await new Promise((resolve) => setTimeout(resolve, 450));
+    await copyImage(await shot.webContents.capturePage());
+  } catch (err) {
+    console.error('could not copy the note as an image', err);
+  } finally {
+    if (!shot.isDestroyed()) shot.destroy();
+  }
+  return null;
+});

package/src/preload.js

@@ -1,10 +1,16 @@
-const { contextBridge, ipcRenderer, clipboard } = require('electron');
+const { contextBridge, ipcRenderer } = require('electron');
 
+const snapshot = process.argv.includes('--snapshot');
 const arg = process.argv.find((a) => a.startsWith('--note-id='));
 const noteId = arg ? arg.slice('--note-id='.length) : null;
 
 contextBridge.exposeInMainWorld('sticky', {
   noteId,
+  // True in the offscreen window used to photograph a note. That window is
+  // not display-limited, so a note longer than the screen can be captured
+  // whole -- which the visible window can never do.
+  isSnapshot: snapshot,
+  snapshotReady: (height) => ipcRenderer.send('note:snapshotReady', height),
   get: () => ipcRenderer.invoke('note:get', noteId),
   update: (patch) => ipcRenderer.invoke('note:update', { id: noteId, ...patch }),
   create: () => ipcRenderer.invoke('note:new'),
@@ -12,15 +18,22 @@ contextBridge.exposeInMainWorld('sticky', {
   setAlwaysOnTop: (v) => ipcRenderer.invoke('note:setAlwaysOnTop', v),
   close: () => ipcRenderer.invoke('note:close'),
   openExternal: (url) => ipcRenderer.invoke('note:openExternal', url),
-  // Electron's clipboard rather than navigator.clipboard, which is
-  // unreliable for a page served over file://.
-  copy: (text) => clipboard.writeText(String(text)),
+  // Routed through the main process rather than written here. The clipboard
+  // API differs between processes and changed shape in Electron 44; this way
+  // every copy in the app goes through one implementation that is known to
+  // work, instead of a second one nobody tested.
+  copy: (text) => ipcRenderer.invoke('note:copyText', String(text)),
   // Synchronous on purpose. This is called while the window is being torn
   // down, where an async invoke() would race the renderer's destruction and
   // lose the edit. sendSync blocks until main has the text.
   flush: (body) => ipcRenderer.sendSync('note:flush', { id: noteId, body }),
+  mathMenu: (payload) => ipcRenderer.invoke('note:mathMenu', payload),
+  copyNote: (payload) => ipcRenderer.invoke('note:copyNote', payload),
   on: (channel, fn) => {
-    const allowed = ['toggle-edit', 'request-delete', 'font-size', 'always-on-top-changed'];
+    const allowed = [
+      'toggle-edit', 'request-delete', 'font-size', 'always-on-top-changed',
+      'copy-note-image',
+    ];
     if (!allowed.includes(channel)) return;
     ipcRenderer.on(channel, (_e, payload) => fn(payload));
   },

package/src/renderer/editor.js

@@ -164,9 +164,78 @@ function onBackspace(value, start, end) {
   return null;
 }
 
+/* ---------- formatting shortcuts ---------- */
+
+const WRAPPERS = {
+  b: '**',
+  i: '*',
+  e: '`',
+};
+
+/**
+ * Cmd/Ctrl+B, +I, +E wrap the selection, and unwrap it again when it is
+ * already wrapped -- pressing bold twice should leave the text as it started,
+ * not bury it in four asterisks.
+ */
+function onWrap(value, start, end, key) {
+  const mark = WRAPPERS[key];
+  if (!mark) return null;
+  const n = mark.length;
+
+  const selected = value.slice(start, end);
+
+  // Already wrapped, either inside the selection or just outside it.
+  if (selected.startsWith(mark) && selected.endsWith(mark) && selected.length > n * 2) {
+    const inner = selected.slice(n, -n);
+    return {
+      from: start, to: end, insert: inner,
+      selStart: start, selEnd: start + inner.length,
+    };
+  }
+  if (value.slice(start - n, start) === mark && value.slice(end, end + n) === mark) {
+    return {
+      from: start - n, to: end + n, insert: selected,
+      selStart: start - n, selEnd: start - n + selected.length,
+    };
+  }
+
+  if (start === end) {
+    // No selection: leave the caret between a fresh pair, ready to type.
+    return { from: start, to: end, insert: mark + mark, selStart: start + n };
+  }
+
+  return {
+    from: start, to: end,
+    insert: mark + selected + mark,
+    selStart: start + n, selEnd: end + n,
+  };
+}
+
+/**
+ * Cmd/Ctrl+K makes a link, and leaves the caret wherever there is still
+ * something to type: in the URL when the label came from the selection, in the
+ * brackets when the link is empty and needs a label first.
+ */
+function onLink(value, start, end) {
+  const selected = value.slice(start, end);
+  const insert = `[${selected}]()`;
+  const caret = selected
+    ? start + selected.length + 3 // inside ( )
+    : start + 1;                  // inside [ ]
+  return { from: start, to: end, insert, selStart: caret };
+}
+
 /* ---------- dispatch ---------- */
 
 function computeEdit(e, value, start, end) {
+  // Cmd on macOS, Ctrl elsewhere -- but never Alt, which carries its own
+  // characters, and never both modifiers at once.
+  const mod = (e.metaKey || e.ctrlKey) && !e.altKey;
+  if (mod) {
+    const key = (e.key || '').toLowerCase();
+    if (key === 'k') return onLink(value, start, end);
+    return onWrap(value, start, end, key);
+  }
   if (e.metaKey || e.ctrlKey || e.altKey) return null;
 
   if (e.key === 'Enter') return onEnter(value, start, end);