feat: barebones MVP — editor, live LSP, and preview
Backend (typst-leaf-backend) - REST API for multi-project file management under PROJECTS_ROOT (list/create projects, get file tree, read/write files; zod-validated sandbox prevents path traversal). - LSP thin proxy: spawns a single tinymist lsp process, pipes one active WebSocket straight to its stdio via vscode-ws-jsonrpc. New connections trigger a takeover (old session disposed, fresh tinymist spawned). - Live preview pipeline: the frontend sends tinymist.startDefaultPreview over the LSP wire, reads the returned data-plane port, and relays it to the backend. The backend proxies /preview (WS, with retry and an Origin header for typst-preview) and /preview-app (HTTP, injecting a script that rewrites the webview's WS path to /preview and forces light mode). - Graceful SIGTERM/SIGINT shutdown. - Auto-seeds a hello project on first boot. - Removed execa dependency (no longer needed). Frontend (typst-leaf-frontend) - Monaco editor with typst syntax highlighting (Monarch tokenizer) and live LSP diagnostics (markers), completion, hover, definitions, and formatting — all driven by a raw JSON-RPC WebSocket client (no monaco-languageclient or vscode-api dependency). - Project picker and file tree sidebar. - Live preview pane: iframes the typst-preview webview through the backend's /preview-app proxy, so the pipedepeline works remotely. - Monaco bundled locally (no CDN) with a Vite worker setup. - Vite dev proxy so relative /api, /lsp, /preview, and /preVIEW-app URLs reach the backend on port 4000. - Light-mode UI (editor 'vs' theme, white chrome). - Prevent esbuild from tree-shaking monaco.editor services (optimizeDeps.esbuildOptions.treeShaking: false). Infrastructure - Added vscode-ws-jsonrpc to backend dependencies. - Removed monaco-languageclient and vscode-ws-jsonrpc from frontend dependencies (replaced by the raw JSON-RPC client). - Added monaco-editor as a direct frontend dependency. - Updated README (correct frontend port 1420, tinymist install command, environment variables, architecture). - Added projects/ to .gitignore. - Renamed Tauri productName and page title to typst-leaf.
This commit is contained in:
@@ -0,0 +1,76 @@
|
||||
import { loader, type Monaco } from "@monaco-editor/react";
|
||||
import * as monaco from "monaco-editor";
|
||||
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
|
||||
|
||||
let initialized = false;
|
||||
let monacoPromise: Promise<Monaco> | null = null;
|
||||
|
||||
// A Monarch tokenizer for Typst covering the common surface (headings,
|
||||
// script keywords, math, comments, emphasis, strings, raw blocks). This is
|
||||
// syntax-only; the LSP additionally provides diagnostics and (optionally)
|
||||
// semantic tokens.
|
||||
const typstLanguageDefinition: monaco.languages.IMonarchLanguage = {
|
||||
defaultToken: "",
|
||||
tokenPostfix: ".typst",
|
||||
brackets: [
|
||||
{ open: "(", close: ")", token: "delimiter.parenthesis" },
|
||||
{ open: "[", close: "]", token: "delimiter.square" },
|
||||
{ open: "{", close: "}", token: "delimiter.curly" },
|
||||
],
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/^=+\s.*$/, "keyword.heading"],
|
||||
[/\*[^*]+\*/, "string.emphasis"],
|
||||
[/_[^_]+_/, "string.emphasis"],
|
||||
[/\/\/.*$/, "comment"],
|
||||
[/\/\*/, "comment", "@comment"],
|
||||
[/#\w+/, "keyword"], // #set, #let, #show, #if, ...
|
||||
[/\$/, { token: "string", next: "@math" }],
|
||||
[/"/, "string", "@string"],
|
||||
[/[{}()\[\]]/, "@brackets"],
|
||||
],
|
||||
comment: [
|
||||
[/\*\//, "comment", "@pop"],
|
||||
[/[^*]+/, "comment"],
|
||||
[/\*/, "comment"],
|
||||
],
|
||||
math: [
|
||||
[/\$/, { token: "string", next: "@pop" }],
|
||||
[/\\[a-zA-Z]+/, "keyword"],
|
||||
[/[a-zA-Z]+/, "variable"],
|
||||
[/[^\$]/, "string"],
|
||||
],
|
||||
string: [
|
||||
[/[^"]/, "string"],
|
||||
[/"/, "string", "@pop"],
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
function initEnvironment(): void {
|
||||
if (initialized) return;
|
||||
// Vite bundles the editor worker via `?worker`. Monaco only needs the base
|
||||
// editor worker for plaintext/typst (no language-specific workers required).
|
||||
self.MonacoEnvironment = {
|
||||
getWorker: () => new editorWorker(),
|
||||
};
|
||||
loader.config({ monaco });
|
||||
initialized = true;
|
||||
}
|
||||
|
||||
export function loadMonaco(): Promise<Monaco> {
|
||||
if (!monacoPromise) {
|
||||
initEnvironment();
|
||||
// loader.init() resolves to the same `monaco` instance we configured above.
|
||||
monacoPromise = loader.init().then((m) => {
|
||||
m.languages.register({ id: "typst" });
|
||||
m.languages.setMonarchTokensProvider("typst", typstLanguageDefinition);
|
||||
return m;
|
||||
});
|
||||
}
|
||||
return monacoPromise;
|
||||
}
|
||||
|
||||
export function getMonaco(): Monaco {
|
||||
return monaco as unknown as Monaco;
|
||||
}
|
||||
Reference in New Issue
Block a user