leepi 0.0.2 → 0.0.3

package/dist/core/field-notifier.js

@@ -0,0 +1,56 @@
+import { ViewPlugin } from "@codemirror/view";
+//#region src/core/field-notifier.ts
+const fieldListeners = /* @__PURE__ */ new WeakMap();
+const fieldSnapshots = /* @__PURE__ */ new WeakMap();
+/**
+* Subscribe to changes of a StateField on a given EditorView.
+* Returns an unsubscribe function.
+*/
+function subscribeToField(view, field, cb) {
+	let viewMap = fieldListeners.get(view);
+	if (!viewMap) {
+		viewMap = /* @__PURE__ */ new Map();
+		fieldListeners.set(view, viewMap);
+	}
+	let listeners = viewMap.get(field);
+	if (!listeners) {
+		listeners = /* @__PURE__ */ new Set();
+		viewMap.set(field, listeners);
+	}
+	listeners.add(cb);
+	return () => {
+		listeners.delete(cb);
+	};
+}
+/** Get the current snapshot of a StateField for useSyncExternalStore */
+function getFieldSnapshot(view, field) {
+	return fieldSnapshots.get(view)?.get(field);
+}
+/**
+* ViewPlugin that watches all StateFields with subscribers and notifies
+* when their values change (by reference).
+*/
+const fieldNotifierPlugin = ViewPlugin.fromClass(class {
+	update(update) {
+		const viewMap = fieldListeners.get(update.view);
+		if (!viewMap) return;
+		let snapMap = fieldSnapshots.get(update.view);
+		if (!snapMap) {
+			snapMap = /* @__PURE__ */ new Map();
+			fieldSnapshots.set(update.view, snapMap);
+		}
+		for (const [field, listeners] of viewMap) {
+			const newVal = update.state.field(field);
+			if (newVal !== snapMap.get(field)) {
+				snapMap.set(field, newVal);
+				for (const cb of listeners) cb();
+			}
+		}
+	}
+});
+/** Extension to include in createEditorState */
+function fieldNotifier() {
+	return fieldNotifierPlugin;
+}
+//#endregion
+export { fieldNotifier, fieldNotifierPlugin, getFieldSnapshot, subscribeToField };

package/dist/core/highlight-style.js

@@ -0,0 +1,60 @@
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+//#region src/core/highlight-style.ts
+/** Shared highlight style for faded markdown syntax tokens (e.g. `#`, `>`, `-`, `` ` ``). */
+const highlightStyle = HighlightStyle.define([
+	{
+		tag: tags.processingInstruction,
+		color: "var(--lp-color-text-faded)",
+		opacity: "0.4",
+		fontFamily: "var(--lp-font-mono)"
+	},
+	{
+		tag: tags.meta,
+		color: "var(--lp-color-text-faded)",
+		opacity: "0.4",
+		fontFamily: "var(--lp-font-mono)"
+	},
+	{
+		tag: tags.labelName,
+		color: "var(--lp-color-text-faded)",
+		opacity: "0.4",
+		fontFamily: "var(--lp-font-mono)"
+	},
+	{
+		tag: tags.contentSeparator,
+		color: "var(--lp-color-text-faded)",
+		opacity: "0.4",
+		fontFamily: "var(--lp-font-mono)"
+	}
+]);
+const editorTheme = EditorView.theme({
+	"&": {
+		height: "100%",
+		flex: "1",
+		fontSize: "var(--lp-font-size, 0.875rem)",
+		fontFamily: "var(--lp-font-body, system-ui, -apple-system, sans-serif)"
+	},
+	".cm-scroller": {
+		overflow: "auto",
+		fontFamily: "inherit",
+		lineHeight: "var(--lp-line-height, 1.6)"
+	},
+	".cm-content": {
+		maxWidth: "var(--lp-content-max-width, 48rem)",
+		margin: "0 auto",
+		padding: "1.5rem var(--lp-content-padding, 2rem)",
+		caretColor: "var(--lp-color-caret, currentColor)"
+	},
+	"&.cm-focused": { outline: "none" },
+	".cm-activeLine": { backgroundColor: "transparent" },
+	".cm-gutters": { display: "none" },
+	".cm-has-deco span[class]": {
+		backgroundColor: "transparent",
+		padding: "0",
+		borderRadius: "0"
+	}
+});
+//#endregion
+export { editorTheme, highlightStyle };

package/dist/core/highlight.d.ts

@@ -0,0 +1,8 @@
+//#region src/core/highlight.d.ts
+/**
+* Highlight code using Lezer parsers (same ones CodeMirror uses).
+* Returns HTML string with `tok-*` classes for styling.
+*/
+declare function highlightCode(code: string, lang: string): Promise<string>;
+//#endregion
+export { highlightCode };

package/dist/core/highlight.js

@@ -0,0 +1,34 @@
+import { LanguageDescription } from "@codemirror/language";
+import { classHighlighter, highlightTree } from "@lezer/highlight";
+//#region src/core/highlight.ts
+let languageList = null;
+async function getLanguages() {
+	if (languageList) return languageList;
+	const { languages } = await import("@codemirror/language-data");
+	languageList = languages;
+	return languages;
+}
+/**
+* Highlight code using Lezer parsers (same ones CodeMirror uses).
+* Returns HTML string with `tok-*` classes for styling.
+*/
+async function highlightCode(code, lang) {
+	const languages = await getLanguages();
+	const desc = LanguageDescription.matchLanguageName(languages, lang, true);
+	if (!desc) return escapeHtml(code);
+	const tree = (await desc.load()).language.parser.parse(code);
+	let pos = 0;
+	let result = "";
+	highlightTree(tree, classHighlighter, (from, to, classes) => {
+		if (from > pos) result += escapeHtml(code.slice(pos, from));
+		result += `<span class="${classes}">${escapeHtml(code.slice(from, to))}</span>`;
+		pos = to;
+	});
+	if (pos < code.length) result += escapeHtml(code.slice(pos));
+	return result;
+}
+function escapeHtml(text) {
+	return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+//#endregion
+export { highlightCode };

package/dist/core/plugins/blockquote.d.ts

@@ -0,0 +1,11 @@
+import { Extension } from "@codemirror/state";
+
+//#region src/core/plugins/blockquote.d.ts
+interface BlockquotePluginOptions {
+  shortcuts?: {
+    blockquote?: string;
+  };
+}
+declare function blockquotePlugin(options?: BlockquotePluginOptions): Extension;
+//#endregion
+export { BlockquotePluginOptions, blockquotePlugin };

package/dist/core/plugins/blockquote.js

@@ -0,0 +1,78 @@
+import { markRegistry, shortcutRegistry } from "../registry.js";
+import { toggleBlockquote } from "../commands.js";
+import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { tags } from "@lezer/highlight";
+//#region src/core/plugins/blockquote.ts
+const defaultShortcuts = { blockquote: "Mod-Shift-b" };
+const blockquoteDecoration = Decoration.line({ class: "cm-blockquote-line" });
+function buildBlockquoteDecorations(state) {
+	const builder = new RangeSetBuilder();
+	const tree = syntaxTree(state);
+	const seen = /* @__PURE__ */ new Set();
+	tree.iterate({ enter(node) {
+		if (node.name === "Blockquote") {
+			const from = state.doc.lineAt(node.from).number;
+			const to = state.doc.lineAt(node.to).number;
+			for (let i = from; i <= to; i++) if (!seen.has(i)) {
+				seen.add(i);
+				const line = state.doc.line(i);
+				builder.add(line.from, line.from, blockquoteDecoration);
+			}
+		}
+	} });
+	return builder.finish();
+}
+const blockquoteLineDecorations = ViewPlugin.fromClass(class {
+	decorations;
+	constructor(view) {
+		this.decorations = buildBlockquoteDecorations(view.state);
+	}
+	update(update) {
+		if (update.docChanged || update.viewportChanged || syntaxTree(update.state) !== syntaxTree(update.startState)) this.decorations = buildBlockquoteDecorations(update.state);
+	}
+}, { decorations: (v) => v.decorations });
+const blockquoteTheme = EditorView.theme({
+	".cm-blockquote-line": { position: "relative" },
+	".cm-blockquote-line::before": {
+		content: "\"\"",
+		position: "absolute",
+		right: "calc(100% + 0.5ch)",
+		top: "0",
+		bottom: "0",
+		width: "3px",
+		backgroundColor: "var(--lp-color-border, rgba(0, 0, 0, 0.12))",
+		pointerEvents: "none"
+	}
+});
+const blockquoteHighlight = HighlightStyle.define([{
+	tag: tags.quote,
+	color: "var(--lp-color-text-secondary)"
+}]);
+function blockquotePlugin(options) {
+	const keys = {
+		...defaultShortcuts,
+		...options?.shortcuts
+	};
+	return [
+		syntaxHighlighting(blockquoteHighlight),
+		shortcutRegistry.of([{
+			key: keys.blockquote,
+			action: "blockquote",
+			plugin: "blockquote"
+		}]),
+		markRegistry.of([{
+			mark: "blockquote",
+			detect: (nodeName) => nodeName === "Blockquote"
+		}]),
+		keymap.of([{
+			key: keys.blockquote,
+			run: toggleBlockquote
+		}]),
+		blockquoteLineDecorations,
+		blockquoteTheme
+	];
+}
+//#endregion
+export { blockquotePlugin };

package/dist/core/plugins/bracket.d.ts

@@ -0,0 +1,6 @@
+import { Extension } from "@codemirror/state";
+
+//#region src/core/plugins/bracket.d.ts
+declare function bracketPlugin(): Extension;
+//#endregion
+export { bracketPlugin };

package/dist/core/plugins/bracket.js

@@ -0,0 +1,38 @@
+import { EditorView } from "@codemirror/view";
+import { EditorSelection } from "@codemirror/state";
+//#region src/core/plugins/bracket.ts
+const BRACKETS = {
+	"(": ")",
+	"[": "]",
+	"{": "}"
+};
+function bracketPlugin() {
+	return EditorView.inputHandler.of((view, from, to, insert) => {
+		const close = BRACKETS[insert];
+		if (!close) return false;
+		const range = view.state.selection.main;
+		if (range.empty) {
+			view.dispatch({
+				changes: {
+					from,
+					to,
+					insert: insert + close
+				},
+				selection: EditorSelection.cursor(from + 1)
+			});
+			return true;
+		}
+		const selected = view.state.sliceDoc(range.from, range.to);
+		view.dispatch({
+			changes: {
+				from: range.from,
+				to: range.to,
+				insert: insert + selected + close
+			},
+			selection: EditorSelection.range(range.from + 1, range.from + 1 + selected.length)
+		});
+		return true;
+	});
+}
+//#endregion
+export { bracketPlugin };

package/dist/core/plugins/code-block.d.ts

@@ -0,0 +1,27 @@
+import { PopoverRequest } from "../types.js";
+import { applyCodeBlock, findCodeFenceAtCursor } from "../commands.js";
+import { Extension } from "@codemirror/state";
+
+//#region src/core/plugins/code-block.d.ts
+interface CodeBlockData {
+  /** Pre-filled language */
+  lang: string;
+  /** Pre-filled filename */
+  filename: string;
+  /** Range of the opening fence line to replace */
+  fenceFrom: number;
+  fenceTo: number;
+  /** Whether this is editing an existing block or inserting a new one */
+  isNew: boolean;
+  /** For new blocks: the cursor position where the block should be inserted */
+  insertPos?: number;
+}
+type CodeBlockRequest = PopoverRequest<"codeblock", CodeBlockData>;
+interface CodeBlockPluginOptions {
+  shortcuts?: {
+    codeBlock?: string;
+  };
+}
+declare function codeBlockPlugin(options?: CodeBlockPluginOptions): Extension;
+//#endregion
+export { CodeBlockData, CodeBlockPluginOptions, CodeBlockRequest, codeBlockPlugin };

package/dist/core/plugins/code-block.js

@@ -0,0 +1,207 @@
+import { markRegistry, shortcutRegistry } from "../registry.js";
+import { findCodeFenceAtCursor } from "../commands.js";
+import { openPopover } from "../popover.js";
+import { Decoration, EditorView, ViewPlugin, keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder } from "@codemirror/state";
+import { tags } from "@lezer/highlight";
+//#region src/core/plugins/code-block.ts
+function buildCodeLineNumbers(state) {
+	const builder = new RangeSetBuilder();
+	const tree = syntaxTree(state);
+	const doc = state.doc;
+	tree.iterate({ enter(node) {
+		if (node.name !== "FencedCode") return;
+		const startLine = doc.lineAt(node.from);
+		const endLine = doc.lineAt(node.to);
+		const totalLines = endLine.number - startLine.number - 1;
+		const digits = String(totalLines).length;
+		let num = 1;
+		for (let l = startLine.number + 1; l < endLine.number; l++) {
+			const line = doc.line(l);
+			const attributes = { "data-line-num": String(num++) };
+			if (digits > 3) attributes.style = `--line-digits:${digits}`;
+			builder.add(line.from, line.from, Decoration.line({
+				class: "cm-has-deco",
+				attributes
+			}));
+		}
+	} });
+	return builder.finish();
+}
+const codeBlockLineNumbers = ViewPlugin.fromClass(class {
+	decorations;
+	constructor(view) {
+		this.decorations = buildCodeLineNumbers(view.state);
+	}
+	update(update) {
+		if (update.docChanged || update.viewportChanged || syntaxTree(update.state) !== syntaxTree(update.startState)) this.decorations = buildCodeLineNumbers(update.state);
+	}
+}, { decorations: (v) => v.decorations });
+const codeBlockTheme = EditorView.theme({
+	".cm-has-deco": {
+		position: "relative",
+		fontSize: "0.875em",
+		fontFamily: "var(--lp-font-mono, ui-monospace, monospace)"
+	},
+	".cm-has-deco::before": {
+		content: "attr(data-line-num)",
+		position: "absolute",
+		right: "calc(100% + 0.5ch)",
+		width: "calc(var(--line-digits, 3) * 1ch)",
+		textAlign: "right",
+		color: "var(--lp-color-text-faded)",
+		opacity: "0.5",
+		borderRadius: "3px",
+		padding: "0 0.3ch",
+		userSelect: "none",
+		font: "inherit",
+		pointerEvents: "none"
+	}
+});
+const codeHighlight = HighlightStyle.define([
+	{
+		tag: tags.keyword,
+		color: "var(--lp-syntax-keyword)"
+	},
+	{
+		tag: tags.operator,
+		color: "var(--lp-syntax-operator)"
+	},
+	{
+		tag: tags.variableName,
+		color: "var(--lp-syntax-variable)"
+	},
+	{
+		tag: tags.function(tags.variableName),
+		color: "var(--lp-syntax-function)"
+	},
+	{
+		tag: tags.definition(tags.variableName),
+		color: "var(--lp-syntax-type)"
+	},
+	{
+		tag: tags.typeName,
+		color: "var(--lp-syntax-type)"
+	},
+	{
+		tag: tags.className,
+		color: "var(--lp-syntax-type)"
+	},
+	{
+		tag: tags.string,
+		color: "var(--lp-syntax-string)"
+	},
+	{
+		tag: tags.number,
+		color: "var(--lp-syntax-number)"
+	},
+	{
+		tag: tags.bool,
+		color: "var(--lp-syntax-number)"
+	},
+	{
+		tag: tags.null,
+		color: "var(--lp-syntax-number)"
+	},
+	{
+		tag: tags.comment,
+		color: "var(--lp-syntax-comment)",
+		fontStyle: "italic"
+	},
+	{
+		tag: tags.propertyName,
+		color: "var(--lp-syntax-property)"
+	},
+	{
+		tag: tags.function(tags.propertyName),
+		color: "var(--lp-syntax-function)"
+	},
+	{
+		tag: tags.definition(tags.propertyName),
+		color: "var(--lp-syntax-function)"
+	},
+	{
+		tag: tags.tagName,
+		color: "var(--lp-syntax-tag)"
+	},
+	{
+		tag: tags.attributeName,
+		color: "var(--lp-syntax-attribute)"
+	},
+	{
+		tag: tags.attributeValue,
+		color: "var(--lp-syntax-string)"
+	},
+	{
+		tag: tags.regexp,
+		color: "var(--lp-syntax-string)"
+	},
+	{
+		tag: tags.escape,
+		color: "var(--lp-syntax-escape)"
+	},
+	{
+		tag: tags.punctuation,
+		color: "var(--lp-syntax-punctuation)"
+	}
+]);
+const defaultShortcuts = { codeBlock: "Mod-Shift-e" };
+function codeBlockPlugin(options) {
+	const keys = {
+		...defaultShortcuts,
+		...options?.shortcuts
+	};
+	return [
+		syntaxHighlighting(codeHighlight),
+		shortcutRegistry.of([{
+			key: keys.codeBlock,
+			action: "codeblock",
+			plugin: "code-block"
+		}]),
+		markRegistry.of([{
+			mark: "codeblock",
+			detect: (nodeName) => nodeName === "FencedCode"
+		}]),
+		keymap.of([{
+			key: keys.codeBlock,
+			run(view) {
+				const { state } = view;
+				const range = state.selection.main;
+				const coords = view.coordsAtPos(range.from);
+				if (!coords) return false;
+				const existing = findCodeFenceAtCursor(view);
+				const req = existing ? {
+					type: "codeblock",
+					x: coords.left,
+					y: coords.bottom,
+					data: {
+						lang: existing.lang,
+						filename: existing.filename,
+						fenceFrom: existing.fenceLine.from,
+						fenceTo: existing.fenceLine.to,
+						isNew: false
+					}
+				} : {
+					type: "codeblock",
+					x: coords.left,
+					y: coords.bottom,
+					data: {
+						lang: "",
+						filename: "",
+						fenceFrom: 0,
+						fenceTo: 0,
+						isNew: true,
+						insertPos: range.from
+					}
+				};
+				view.dispatch({ effects: openPopover.of(req) });
+				return true;
+			}
+		}]),
+		codeBlockLineNumbers,
+		codeBlockTheme
+	];
+}
+//#endregion
+export { codeBlockPlugin };

package/dist/core/plugins/heading.d.ts

@@ -0,0 +1,13 @@
+import { Extension } from "@codemirror/state";
+
+//#region src/core/plugins/heading.d.ts
+interface HeadingPluginOptions {
+  shortcuts?: {
+    heading1?: string;
+    heading2?: string;
+    heading3?: string;
+  };
+}
+declare function headingPlugin(options?: HeadingPluginOptions): Extension;
+//#endregion
+export { HeadingPluginOptions, headingPlugin };

package/dist/core/plugins/heading.js

@@ -0,0 +1,111 @@
+import { markRegistry, shortcutRegistry } from "../registry.js";
+import { toggleHeading } from "../commands.js";
+import { keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+//#region src/core/plugins/heading.ts
+const defaultShortcuts = {
+	heading1: "Mod-Alt-1",
+	heading2: "Mod-Alt-2",
+	heading3: "Mod-Alt-3"
+};
+const headingHighlight = HighlightStyle.define([
+	{
+		tag: tags.heading1,
+		fontSize: "2em",
+		fontWeight: "var(--lp-font-weight-bold, 700)",
+		fontFamily: "var(--lp-font-display)"
+	},
+	{
+		tag: tags.heading2,
+		fontSize: "1.6em",
+		fontWeight: "var(--lp-font-weight-bold, 700)",
+		fontFamily: "var(--lp-font-display)"
+	},
+	{
+		tag: tags.heading3,
+		fontSize: "1.3em",
+		fontWeight: "var(--lp-font-weight-semibold, 600)",
+		fontFamily: "var(--lp-font-display)"
+	},
+	{
+		tag: tags.heading4,
+		fontSize: "1.1em",
+		fontWeight: "var(--lp-font-weight-semibold, 600)",
+		fontFamily: "var(--lp-font-display)"
+	},
+	{
+		tag: tags.heading5,
+		fontSize: "1.05em",
+		fontWeight: "var(--lp-font-weight-semibold, 600)",
+		fontFamily: "var(--lp-font-display)"
+	},
+	{
+		tag: tags.heading6,
+		fontSize: "1em",
+		fontWeight: "var(--lp-font-weight-semibold, 600)",
+		fontFamily: "var(--lp-font-display)"
+	}
+]);
+function headingPlugin(options) {
+	const keys = {
+		...defaultShortcuts,
+		...options?.shortcuts
+	};
+	const extensions = [syntaxHighlighting(headingHighlight), markRegistry.of([
+		{
+			mark: "heading1",
+			detect: (nodeName) => nodeName === "ATXHeading1"
+		},
+		{
+			mark: "heading2",
+			detect: (nodeName) => nodeName === "ATXHeading2"
+		},
+		{
+			mark: "heading3",
+			detect: (nodeName) => nodeName === "ATXHeading3"
+		}
+	])];
+	const keybindings = [];
+	const shortcuts = [];
+	if (keys.heading1) {
+		keybindings.push({
+			key: keys.heading1,
+			run: toggleHeading(1)
+		});
+		shortcuts.push({
+			key: keys.heading1,
+			action: "heading1",
+			plugin: "heading"
+		});
+	}
+	if (keys.heading2) {
+		keybindings.push({
+			key: keys.heading2,
+			run: toggleHeading(2)
+		});
+		shortcuts.push({
+			key: keys.heading2,
+			action: "heading2",
+			plugin: "heading"
+		});
+	}
+	if (keys.heading3) {
+		keybindings.push({
+			key: keys.heading3,
+			run: toggleHeading(3)
+		});
+		shortcuts.push({
+			key: keys.heading3,
+			action: "heading3",
+			plugin: "heading"
+		});
+	}
+	if (keybindings.length > 0) {
+		extensions.push(keymap.of(keybindings));
+		extensions.push(shortcutRegistry.of(shortcuts));
+	}
+	return extensions;
+}
+//#endregion
+export { headingPlugin };

package/dist/core/plugins/inline.d.ts

@@ -0,0 +1,14 @@
+import { Extension } from "@codemirror/state";
+
+//#region src/core/plugins/inline.d.ts
+interface InlinePluginOptions {
+  shortcuts?: {
+    bold?: string;
+    italic?: string;
+    strikethrough?: string;
+    code?: string;
+  };
+}
+declare function inlinePlugin(options?: InlinePluginOptions): Extension;
+//#endregion
+export { InlinePluginOptions, inlinePlugin };