leepi 0.0.0 → 0.0.3

package/src/core/highlight-style.ts

@@ -0,0 +1,66 @@
+import { type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+
+/** Shared highlight style for faded markdown syntax tokens (e.g. `#`, `>`, `-`, `` ` ``). */
+export const highlightStyle: 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)",
+  },
+]);
+
+export const editorTheme: Extension = 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",
+  },
+});

package/src/core/highlight.ts

@@ -0,0 +1,50 @@
+import { classHighlighter, highlightTree } from "@lezer/highlight";
+import { LanguageDescription } from "@codemirror/language";
+import type { LanguageDescription as LanguageDescType } from "@codemirror/language";
+
+let languageList: readonly LanguageDescType[] | null = 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.
+ */
+export async function highlightCode(code: string, lang: string): Promise<string> {
+  const languages = await getLanguages();
+  const desc = LanguageDescription.matchLanguageName(languages, lang, true);
+  if (!desc) return escapeHtml(code);
+
+  const support = await desc.load();
+  const tree = support.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: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/src/core/plugins/blockquote.ts

@@ -0,0 +1,108 @@
+import type { Extension } from "@codemirror/state";
+import { RangeSetBuilder } from "@codemirror/state";
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  keymap,
+} from "@codemirror/view";
+import type { EditorState } from "@codemirror/state";
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { shortcutRegistry, markRegistry } from "../registry";
+import { toggleBlockquote } from "../commands";
+
+export interface BlockquotePluginOptions {
+  shortcuts?: {
+    blockquote?: string;
+  };
+}
+
+const defaultShortcuts = {
+  blockquote: "Mod-Shift-b",
+};
+
+// --- Blockquote line decorations ---
+
+const blockquoteDecoration = Decoration.line({ class: "cm-blockquote-line" });
+
+function buildBlockquoteDecorations(state: EditorState): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>();
+  const tree = syntaxTree(state);
+  const seen = new Set<number>();
+
+  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: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = buildBlockquoteDecorations(view.state);
+    }
+    update(update: ViewUpdate) {
+      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)",
+  },
+]);
+
+export function blockquotePlugin(options?: BlockquotePluginOptions): Extension {
+  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,
+  ];
+}

package/src/core/plugins/bracket.ts

@@ -0,0 +1,34 @@
+import { type Extension, EditorSelection } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+
+const BRACKETS: Record<string, string> = {
+  "(": ")",
+  "[": "]",
+  "{": "}",
+};
+
+export function bracketPlugin(): Extension {
+  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) {
+      // Auto-insert closing bracket and place cursor between them
+      view.dispatch({
+        changes: { from, to, insert: insert + close },
+        selection: EditorSelection.cursor(from + 1),
+      });
+      return true;
+    }
+
+    // Wrap selected text with brackets
+    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;
+  });
+}

package/src/core/plugins/code-block.ts

@@ -0,0 +1,195 @@
+import { type Extension, RangeSetBuilder } from "@codemirror/state";
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  keymap,
+} from "@codemirror/view";
+import type { EditorState } from "@codemirror/state";
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { shortcutRegistry, markRegistry } from "../registry";
+import { findCodeFenceAtCursor, applyCodeBlock } from "../commands";
+import { openPopover } from "../popover";
+import type { PopoverRequest } from "../types";
+
+export 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;
+}
+
+export type CodeBlockRequest = PopoverRequest<"codeblock", CodeBlockData>;
+
+// --- Code block line number decorations ---
+
+function buildCodeLineNumbers(state: EditorState) {
+  const builder = new RangeSetBuilder<Decoration>();
+  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: Record<string, string> = {
+          "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: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = buildCodeLineNumbers(view.state);
+    }
+    update(update: ViewUpdate) {
+      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)" },
+]);
+
+export interface CodeBlockPluginOptions {
+  shortcuts?: {
+    codeBlock?: string;
+  };
+}
+
+const defaultShortcuts = {
+  codeBlock: "Mod-Shift-e",
+};
+
+export function codeBlockPlugin(options?: CodeBlockPluginOptions): Extension {
+  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: CodeBlockRequest = 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,
+  ];
+}
+
+// Re-export for convenience
+export { applyCodeBlock, findCodeFenceAtCursor };

package/src/core/plugins/heading.ts

@@ -0,0 +1,95 @@
+import type { Extension } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { markRegistry, shortcutRegistry } from "../registry";
+import { toggleHeading } from "../commands";
+
+export interface HeadingPluginOptions {
+  shortcuts?: {
+    heading1?: string;
+    heading2?: string;
+    heading3?: string;
+  };
+}
+
+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)",
+  },
+]);
+
+export function headingPlugin(options?: HeadingPluginOptions): Extension {
+  const keys = { ...defaultShortcuts, ...options?.shortcuts };
+
+  const extensions: Extension[] = [
+    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;
+}

package/src/core/plugins/index.ts

@@ -0,0 +1,16 @@
+export { inlinePlugin } from "./inline";
+export { headingPlugin } from "./heading";
+export { listPlugin } from "./list";
+export { blockquotePlugin } from "./blockquote";
+export { linkPlugin } from "./link";
+export { codeBlockPlugin } from "./code-block";
+export { tablePlugin } from "./table";
+export { bracketPlugin } from "./bracket";
+
+export type { InlinePluginOptions } from "./inline";
+export type { HeadingPluginOptions } from "./heading";
+export type { ListPluginOptions } from "./list";
+export type { BlockquotePluginOptions } from "./blockquote";
+export type { LinkPluginOptions, LinkData, LinkRequest } from "./link";
+export type { CodeBlockPluginOptions, CodeBlockData, CodeBlockRequest } from "./code-block";
+export type { TablePluginOptions } from "./table";

package/src/core/plugins/inline.ts

@@ -0,0 +1,62 @@
+import type { Extension } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { shortcutRegistry, markRegistry } from "../registry";
+import { toggleMarker } from "../commands";
+
+export interface InlinePluginOptions {
+  shortcuts?: {
+    bold?: string;
+    italic?: string;
+    strikethrough?: string;
+    code?: string;
+  };
+}
+
+const defaultShortcuts = {
+  bold: "Mod-b",
+  italic: "Mod-i",
+  strikethrough: "Mod-Shift-x",
+  code: "Mod-e",
+};
+
+const inlineHighlight = HighlightStyle.define([
+  { tag: tags.strong, fontWeight: "var(--lp-font-weight-bold, 700)" },
+  { tag: tags.emphasis, fontStyle: "italic" },
+  { tag: tags.strikethrough, textDecoration: "line-through" },
+  {
+    tag: tags.monospace,
+    fontFamily: "var(--lp-font-mono)",
+    fontSize: "0.875em",
+    backgroundColor: "var(--lp-color-surface)",
+    borderRadius: "var(--lp-radius, 6px)",
+    padding: "0.1em 0.3em",
+  },
+]);
+
+export function inlinePlugin(options?: InlinePluginOptions): Extension {
+  const keys = { ...defaultShortcuts, ...options?.shortcuts };
+
+  return [
+    syntaxHighlighting(inlineHighlight),
+    shortcutRegistry.of([
+      { key: keys.bold, action: "bold", plugin: "inline" },
+      { key: keys.italic, action: "italic", plugin: "inline" },
+      { key: keys.strikethrough, action: "strikethrough", plugin: "inline" },
+      { key: keys.code, action: "code", plugin: "inline" },
+    ]),
+    markRegistry.of([
+      { mark: "bold", detect: (nodeName) => nodeName === "StrongEmphasis" },
+      { mark: "italic", detect: (nodeName) => nodeName === "Emphasis" },
+      { mark: "strikethrough", detect: (nodeName) => nodeName === "Strikethrough" },
+      { mark: "code", detect: (nodeName) => nodeName === "InlineCode" },
+    ]),
+    keymap.of([
+      { key: keys.bold, run: toggleMarker("**") },
+      { key: keys.italic, run: toggleMarker("_") },
+      { key: keys.strikethrough, run: toggleMarker("~~") },
+      { key: keys.code, run: toggleMarker("`") },
+    ]),
+  ];
+}