Add custom TextMate code language support

README.md

@@ -186,6 +186,7 @@ The editor stack is CodeMirror 6 with a Markdown-oriented workflow:
 - configurable line numbers
 - configurable line-height and typography controls
 - syntax highlighting for fenced code blocks
+- desktop-installed TextMate grammars for custom fenced-code languages
 - wiki links, callouts, tables, footnotes, and local embeds
 - Vim block cursor and keyboard navigation
 

apps/desktop/electron.vite.config.ts

@@ -1,5 +1,8 @@
+import { readFileSync } from 'node:fs'
+import { createRequire } from 'node:module'
 import { resolve } from 'node:path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import type { Plugin } from 'vite'
 import react from '@vitejs/plugin-react'
 
 const INTERNAL_WORKSPACE_PACKAGES = [
@@ -16,6 +19,27 @@ const MAIN_EXTERNALIZE_EXCLUSIONS = [
   ...PACKAGED_CLI_RUNTIME_PACKAGES
 ]
 
+function onigurumaDataUrl(): Plugin {
+  const virtualId = '\0zennotes:oniguruma-wasm-data-url'
+  const wasmPath = createRequire(resolve(__dirname, 'package.json')).resolve(
+    'vscode-oniguruma/release/onig.wasm'
+  )
+  return {
+    name: 'zennotes-oniguruma-data-url',
+    enforce: 'pre',
+    resolveId(id) {
+      if (id === 'vscode-oniguruma/release/onig.wasm?url') return virtualId
+      return null
+    },
+    load(id) {
+      if (id !== virtualId) return null
+      const bytes = readFileSync(wasmPath)
+      const url = `data:application/wasm;base64,${bytes.toString('base64')}`
+      return `export default ${JSON.stringify(url)}`
+    }
+  }
+}
+
 function rendererManualChunk(id: string): string | undefined {
   const normalizedId = id.split('\\').join('/')
   if (normalizedId.endsWith('/packages/app-core/src/lib/wikilinks.ts')) {
@@ -62,6 +86,10 @@ function rendererManualChunk(id: string): string | undefined {
     return 'vendor-highlight'
   }
 
+  if (id.includes('/vscode-textmate/') || id.includes('/vscode-oniguruma/')) {
+    return 'vendor-textmate'
+  }
+
   if (id.includes('/mermaid/') || id.includes('/cytoscape/') || id.includes('/dagre/')) {
     return 'vendor-mermaid'
   }
@@ -99,6 +127,7 @@ function isDeferredRendererPreload(dep: string): boolean {
     dep.includes('wardley-') ||
     dep.includes('vendor-markdown') ||
     dep.includes('vendor-highlight') ||
+    dep.includes('vendor-textmate') ||
     dep.includes('vendor-d3') ||
     dep.includes('vendor-mermaid') ||
     dep.includes('vendor-jsxgraph') ||
@@ -173,6 +202,6 @@ export default defineConfig({
         '@bridge-contract': resolve(__dirname, '../../packages/bridge-contract/src')
       }
     },
-    plugins: [react()]
+    plugins: [onigurumaDataUrl(), react()]
   }
 })

apps/desktop/src/main/custom-code-languages.test.ts

@@ -0,0 +1,130 @@
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { existsSync } from "node:fs";
+import { mkdtemp, readFile, rm, writeFile } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import {
+  customCodeLanguageRevealTarget,
+  deleteCustomCodeLanguage,
+  ensureCustomCodeLanguagesDir,
+  getCustomCodeLanguagesDir,
+  installCustomCodeLanguage,
+  listCustomCodeLanguages,
+  updateCustomCodeLanguage,
+} from "./custom-code-languages";
+
+const GLEAM_GRAMMAR = JSON.stringify({
+  name: "Gleam",
+  scopeName: "source.gleam",
+  patterns: [{ match: "\\b(?:fn|let)\\b", name: "keyword.control.gleam" }],
+});
+
+let tempConfig: string;
+const originalConfigDir = process.env.ZENNOTES_CONFIG_DIR;
+
+beforeEach(async () => {
+  tempConfig = await mkdtemp(join(tmpdir(), "zen-languages-"));
+  process.env.ZENNOTES_CONFIG_DIR = tempConfig;
+});
+
+afterEach(async () => {
+  if (originalConfigDir === undefined) delete process.env.ZENNOTES_CONFIG_DIR;
+  else process.env.ZENNOTES_CONFIG_DIR = originalConfigDir;
+  await rm(tempConfig, { recursive: true, force: true });
+});
+
+describe("custom code languages (main)", () => {
+  it("installs, lists, updates, reveals, and removes a language pack", async () => {
+    const dir = await ensureCustomCodeLanguagesDir();
+    expect(existsSync(join(dir, "README.md"))).toBe(true);
+
+    await installCustomCodeLanguage({
+      fileName: "gleam.tmLanguage.json",
+      grammar: GLEAM_GRAMMAR,
+      id: "gleam",
+      name: "Gleam",
+      aliases: ["gleam", "gleam-lang"],
+    });
+
+    const folder = join(getCustomCodeLanguagesDir(), "gleam");
+    expect(
+      JSON.parse(await readFile(join(folder, "manifest.json"), "utf8")),
+    ).toMatchObject({
+      id: "gleam",
+      enabled: true,
+      aliases: ["gleam", "gleam-lang"],
+    });
+    expect((await listCustomCodeLanguages())[0]).toMatchObject({
+      id: "gleam",
+      scopeName: "source.gleam",
+      grammar: GLEAM_GRAMMAR,
+    });
+    expect(await customCodeLanguageRevealTarget("gleam")).toBe(
+      join(folder, "grammar.tmLanguage.json"),
+    );
+
+    await updateCustomCodeLanguage({
+      id: "gleam",
+      enabled: false,
+      aliases: ["gleam", "gl"],
+    });
+    expect((await listCustomCodeLanguages())[0]).toMatchObject({
+      enabled: false,
+      aliases: ["gleam", "gl"],
+    });
+
+    await deleteCustomCodeLanguage("../gleam");
+    expect(existsSync(folder)).toBe(true);
+    await deleteCustomCodeLanguage("gleam");
+    expect(existsSync(folder)).toBe(false);
+  });
+
+  it("prevents built-in aliases and collisions between custom languages", async () => {
+    await expect(
+      installCustomCodeLanguage({
+        fileName: "fake.tmLanguage.json",
+        grammar: GLEAM_GRAMMAR,
+        id: "javascript",
+        name: "Fake JavaScript",
+        aliases: [],
+      }),
+    ).rejects.toThrow("reserved");
+
+    await installCustomCodeLanguage({
+      fileName: "gleam.tmLanguage.json",
+      grammar: GLEAM_GRAMMAR,
+      id: "gleam",
+      name: "Gleam",
+      aliases: ["gl"],
+    });
+    await expect(
+      installCustomCodeLanguage({
+        fileName: "other.tmLanguage.json",
+        grammar: GLEAM_GRAMMAR.replaceAll("gleam", "other"),
+        id: "other",
+        name: "Other",
+        aliases: ["gl"],
+      }),
+    ).rejects.toThrow("already used");
+  });
+
+  it("surfaces hand-edited broken packs without loading their grammar", async () => {
+    const dir = await ensureCustomCodeLanguagesDir();
+    const installed = await installCustomCodeLanguage({
+      fileName: "gleam.tmLanguage.json",
+      grammar: GLEAM_GRAMMAR,
+      id: "gleam",
+      name: "Gleam",
+      aliases: [],
+    });
+    expect(installed.error).toBeUndefined();
+    await writeFile(join(dir, "gleam", "grammar.tmLanguage.json"), "{broken");
+
+    expect((await listCustomCodeLanguages())[0]).toMatchObject({
+      id: "gleam",
+      enabled: false,
+      grammar: "",
+      error: "This file is not valid JSON.",
+    });
+  });
+});