leepi 0.0.0 → 0.0.3

package/src/core/plugins/link.ts

@@ -0,0 +1,124 @@
+import { type Extension, EditorSelection } from "@codemirror/state";
+import { keymap, EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+import { shortcutRegistry, markRegistry } from "../registry";
+import { findLinkAtCursor, insertLink } from "../commands";
+import { isInsideCodeBlock } from "../utils";
+import { openPopover } from "../popover";
+import type { PopoverRequest } from "../types";
+
+export interface LinkData {
+  /** Selected text or existing link label */
+  text: string;
+  /** Pre-filled URL when editing an existing link */
+  url: string;
+  /** Document range to replace when the link is inserted/removed */
+  from: number;
+  to: number;
+}
+
+export type LinkRequest = PopoverRequest<"link", LinkData>;
+
+export interface LinkPluginOptions {
+  shortcuts?: {
+    insertLink?: string;
+    removeLink?: string;
+  };
+  urlRegex?: RegExp;
+}
+
+const defaultShortcuts = {
+  insertLink: "Mod-k",
+  removeLink: "Mod-Shift-k",
+};
+
+const URL_RE = /^(?:https?:\/\/|mailto:|tel:)\S+$/;
+
+const linkHighlight = HighlightStyle.define([
+  { tag: tags.link, color: "var(--lp-color-accent)" },
+  { tag: tags.url, color: "var(--lp-color-accent)" },
+]);
+
+export function linkPlugin(options?: LinkPluginOptions): Extension {
+  const keys = { ...defaultShortcuts, ...options?.shortcuts };
+  const urlRegex = options?.urlRegex ?? URL_RE;
+
+  return [
+    syntaxHighlighting(linkHighlight),
+    EditorView.domEventHandlers({
+      paste(event, view) {
+        const range = view.state.selection.main;
+        if (range.empty) return false;
+        if (isInsideCodeBlock(view)) return false;
+
+        const text = event.clipboardData?.getData("text/plain")?.trim();
+        if (!text || !urlRegex.test(text)) return false;
+
+        event.preventDefault();
+        const label = view.state.sliceDoc(range.from, range.to);
+        insertLink(view, range.from, range.to, label, text);
+        return true;
+      },
+    }),
+    shortcutRegistry.of([
+      { key: keys.insertLink, action: "insertLink", plugin: "link" },
+      { key: keys.removeLink, action: "removeLink", plugin: "link" },
+    ]),
+    markRegistry.of([{ mark: "link", detect: (nodeName) => nodeName === "Link" }]),
+    keymap.of([
+      {
+        key: keys.removeLink,
+        run(view) {
+          if (isInsideCodeBlock(view)) return false;
+          const { state } = view;
+          const range = state.selection.main;
+          const existing = findLinkAtCursor(state, range.from);
+          if (!existing) return false;
+
+          view.dispatch({
+            changes: { from: existing.from, to: existing.to, insert: existing.label },
+            selection: EditorSelection.cursor(existing.from + existing.label.length),
+          });
+          return true;
+        },
+      },
+      {
+        key: keys.insertLink,
+        run(view) {
+          if (isInsideCodeBlock(view)) return false;
+          const { state } = view;
+          const range = state.selection.main;
+          const existing = findLinkAtCursor(state, range.from);
+          const coords = view.coordsAtPos(range.from);
+          if (!coords) return false;
+
+          const req: LinkRequest = {
+            type: "link",
+            x: coords.left,
+            y: coords.bottom,
+            data: existing
+              ? {
+                  text: existing.label,
+                  url: existing.url,
+                  from: existing.from,
+                  to: existing.to,
+                }
+              : {
+                  text: state.sliceDoc(range.from, range.to),
+                  url: "",
+                  from: range.from,
+                  to: range.to,
+                },
+          };
+
+          view.dispatch({ effects: openPopover.of(req) });
+          return true;
+        },
+      },
+    ]),
+  ];
+}
+
+// Re-export for convenience
+export { insertLink, findLinkAtCursor };

package/src/core/plugins/list.ts

@@ -0,0 +1,68 @@
+import { type Extension, type EditorState } from "@codemirror/state";
+import { keymap } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { shortcutRegistry, markRegistry } from "../registry";
+import { toggleListKind, toggleTaskCheck } from "../commands";
+
+export interface ListPluginOptions {
+  shortcuts?: {
+    unorderedList?: string;
+    orderedList?: string;
+    taskList?: string;
+    toggleTask?: string;
+  };
+}
+
+const defaultShortcuts = {
+  orderedList: "Mod-Shift-7",
+  unorderedList: "Mod-Shift-8",
+  taskList: "Mod-Shift-9",
+  toggleTask: "Mod-Enter",
+};
+
+/** Walk up from pos to find a ListItem node containing a Task child */
+function hasTaskAtLine(state: EditorState, pos: number): boolean {
+  let node = syntaxTree(state).resolveInner(pos, 1);
+  while (node) {
+    if (node.name === "ListItem") return !!node.getChild("Task");
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  return false;
+}
+
+export function listPlugin(options?: ListPluginOptions): Extension {
+  const keys = { ...defaultShortcuts, ...options?.shortcuts };
+
+  return [
+    shortcutRegistry.of([
+      { key: keys.unorderedList, action: "unorderedList", plugin: "list" },
+      { key: keys.orderedList, action: "orderedList", plugin: "list" },
+      { key: keys.taskList, action: "taskList", plugin: "list" },
+      { key: keys.toggleTask, action: "toggleTask", plugin: "list" },
+    ]),
+    markRegistry.of([
+      {
+        mark: "ul",
+        detect: (nodeName, state, pos) => {
+          if (nodeName !== "BulletList") return false;
+          return !hasTaskAtLine(state, pos);
+        },
+      },
+      { mark: "ol", detect: (nodeName) => nodeName === "OrderedList" },
+      {
+        mark: "task",
+        detect: (nodeName, state, pos) => {
+          if (nodeName !== "__line__") return false;
+          return hasTaskAtLine(state, pos);
+        },
+      },
+    ]),
+    keymap.of([
+      { key: keys.unorderedList, run: toggleListKind("ul") },
+      { key: keys.orderedList, run: toggleListKind("ol") },
+      { key: keys.taskList, run: toggleListKind("task") },
+      { key: keys.toggleTask, run: toggleTaskCheck },
+    ]),
+  ];
+}

package/src/core/plugins/table.ts

@@ -0,0 +1,217 @@
+import type { Extension } from "@codemirror/state";
+import { EditorSelection, RangeSetBuilder } from "@codemirror/state";
+import type { EditorState } from "@codemirror/state";
+import {
+  Decoration,
+  type DecorationSet,
+  EditorView,
+  ViewPlugin,
+  type ViewUpdate,
+  keymap,
+} from "@codemirror/view";
+import { ensureSyntaxTree, syntaxTree } from "@codemirror/language";
+import { shortcutRegistry } from "../registry";
+
+export interface TablePluginOptions {
+  shortcuts?: {
+    formatTable?: string;
+  };
+}
+
+const defaultShortcuts = {
+  formatTable: "Mod-Alt-f",
+};
+
+/**
+ * Find the Table node containing the cursor position.
+ * Returns the node's from/to range or null if not in a table.
+ */
+function findTableAtCursor(view: EditorView): { from: number; to: number } | null {
+  const { state } = view;
+  const pos = state.selection.main.from;
+  // Ensure the tree is fully parsed up to the cursor position
+  const tree = ensureSyntaxTree(state, pos) ?? syntaxTree(state);
+
+  // Try both biases — at line start (on a `|`), bias -1 may land outside the Table
+  for (const bias of [-1, 1] as const) {
+    let node = tree.resolveInner(pos, bias);
+    while (node) {
+      if (node.name === "Table") return { from: node.from, to: node.to };
+      if (!node.parent) break;
+      node = node.parent;
+    }
+  }
+  return null;
+}
+
+/**
+ * Parse a markdown table string into a 2D array of cell strings.
+ * Returns { rows, delimiterIndex } where delimiterIndex is the index
+ * of the separator row (e.g. |---|---|).
+ */
+function parseTable(text: string): {
+  rows: string[][];
+  delimiterIndex: number;
+} | null {
+  const lines = text.split("\n").filter((l) => l.trim().length > 0);
+  if (lines.length < 2) return null;
+
+  const rows: string[][] = [];
+  let delimiterIndex = -1;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+    // Strip leading/trailing pipes and split
+    const stripped = line.replace(/^\|/, "").replace(/\|$/, "");
+    const cells = stripped.split("|").map((c) => c.trim());
+
+    // Detect delimiter row: all cells match ---+ or :---: patterns
+    if (delimiterIndex === -1 && cells.every((c) => /^:?-{1,}:?$/.test(c))) {
+      delimiterIndex = i;
+    }
+
+    rows.push(cells);
+  }
+
+  if (delimiterIndex === -1) return null;
+  return { rows, delimiterIndex };
+}
+
+/**
+ * Format a parsed table into an aligned markdown string.
+ */
+function formatTable(rows: string[][], delimiterIndex: number): string {
+  // Calculate column count from header row
+  const colCount = rows[0].length;
+
+  // Parse alignment from delimiter row
+  const alignments: ("left" | "center" | "right" | "none")[] = [];
+  const delimRow = rows[delimiterIndex];
+  for (let col = 0; col < colCount; col++) {
+    const cell = col < delimRow.length ? delimRow[col] : "---";
+    const left = cell.startsWith(":");
+    const right = cell.endsWith(":");
+    if (left && right) alignments.push("center");
+    else if (right) alignments.push("right");
+    else if (left) alignments.push("left");
+    else alignments.push("none");
+  }
+
+  // Calculate max width per column (excluding delimiter row)
+  const colWidths: number[] = Array.from({ length: colCount }, () => 3); // minimum 3 for "---"
+  for (let i = 0; i < rows.length; i++) {
+    if (i === delimiterIndex) continue;
+    for (let col = 0; col < colCount; col++) {
+      const cell = col < rows[i].length ? rows[i][col] : "";
+      colWidths[col] = Math.max(colWidths[col], cell.length);
+    }
+  }
+
+  // Build formatted lines
+  const lines: string[] = [];
+  for (let i = 0; i < rows.length; i++) {
+    if (i === delimiterIndex) {
+      // Build delimiter row
+      const cells = colWidths.map((w, col) => {
+        const align = alignments[col];
+        const dashes = "-".repeat(w);
+        if (align === "center") return `:${dashes}:`;
+        if (align === "right") return `${dashes}:`;
+        if (align === "left") return `:${dashes}`;
+        return dashes;
+      });
+      lines.push(`| ${cells.join(" | ")} |`);
+    } else {
+      const cells = colWidths.map((w, col) => {
+        const cell = col < rows[i].length ? rows[i][col] : "";
+        return cell.padEnd(w);
+      });
+      lines.push(`| ${cells.join(" | ")} |`);
+    }
+  }
+
+  return lines.join("\n");
+}
+
+export function formatTableCommand(view: EditorView): boolean {
+  const tableRange = findTableAtCursor(view);
+  if (!tableRange) return false;
+
+  const tableText = view.state.sliceDoc(tableRange.from, tableRange.to);
+  const parsed = parseTable(tableText);
+  if (!parsed) return false;
+
+  const formatted = formatTable(parsed.rows, parsed.delimiterIndex);
+  if (formatted === tableText) return true;
+
+  // Calculate cursor offset relative to table start to preserve position
+  const cursorOffset = view.state.selection.main.from - tableRange.from;
+  const newCursorPos = Math.min(tableRange.from + cursorOffset, tableRange.from + formatted.length);
+
+  view.dispatch({
+    changes: { from: tableRange.from, to: tableRange.to, insert: formatted },
+    selection: EditorSelection.cursor(newCursorPos),
+  });
+  return true;
+}
+
+// --- Table line decorations (monospace font) ---
+
+const tableLineDecoration = Decoration.line({ class: "cm-table-line" });
+
+function buildTableDecorations(state: EditorState): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>();
+  const tree = syntaxTree(state);
+
+  tree.iterate({
+    enter(node) {
+      if (node.name === "Table") {
+        const from = state.doc.lineAt(node.from).number;
+        const to = state.doc.lineAt(node.to).number;
+        for (let i = from; i <= to; i++) {
+          const line = state.doc.line(i);
+          builder.add(line.from, line.from, tableLineDecoration);
+        }
+      }
+    },
+  });
+
+  return builder.finish();
+}
+
+const tableLineDecorations = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = buildTableDecorations(view.state);
+    }
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.viewportChanged ||
+        syntaxTree(update.state) !== syntaxTree(update.startState)
+      ) {
+        this.decorations = buildTableDecorations(update.state);
+      }
+    }
+  },
+  { decorations: (v) => v.decorations },
+);
+
+const tableTheme = EditorView.theme({
+  ".cm-table-line": {
+    fontFamily: "var(--lp-font-mono, ui-monospace, monospace)",
+    fontSize: "0.875em",
+  },
+});
+
+export function tablePlugin(options?: TablePluginOptions): Extension {
+  const keys = { ...defaultShortcuts, ...options?.shortcuts };
+
+  return [
+    shortcutRegistry.of([{ key: keys.formatTable, action: "formatTable", plugin: "table" }]),
+    keymap.of([{ key: keys.formatTable, run: formatTableCommand, preventDefault: true }]),
+    tableLineDecorations,
+    tableTheme,
+  ];
+}

package/src/core/popover.ts

@@ -0,0 +1,17 @@
+import { StateEffect, type StateEffectType, StateField } from "@codemirror/state";
+import type { PopoverRequest } from "./types";
+
+export const openPopover: StateEffectType<PopoverRequest> = StateEffect.define<PopoverRequest>();
+export const closePopover: StateEffectType<void> = StateEffect.define<void>();
+
+export const popoverField: StateField<PopoverRequest | null> =
+  StateField.define<PopoverRequest | null>({
+    create: () => null,
+    update(value, tr) {
+      for (const e of tr.effects) {
+        if (e.is(openPopover)) return e.value;
+        if (e.is(closePopover)) return null;
+      }
+      return value;
+    },
+  });

package/src/core/registry.ts

@@ -0,0 +1,18 @@
+import { Facet } from "@codemirror/state";
+import type { ShortcutEntry, MarkDetector } from "./types";
+
+/** Plugins register their keybindings here so the React layer can display them. */
+export const shortcutRegistry: Facet<ShortcutEntry[], ShortcutEntry[]> = Facet.define<
+  ShortcutEntry[],
+  ShortcutEntry[]
+>({
+  combine: (values) => values.flat(),
+});
+
+/** Plugins register node-to-mark detectors here for active mark detection. */
+export const markRegistry: Facet<MarkDetector[], MarkDetector[]> = Facet.define<
+  MarkDetector[],
+  MarkDetector[]
+>({
+  combine: (values) => values.flat(),
+});

package/src/core/types.ts

@@ -0,0 +1,25 @@
+import type { EditorState } from "@codemirror/state";
+
+export interface ShortcutDef {
+  key: string;
+  action: string;
+}
+
+export interface PopoverRequest<Type extends string = string, Data = unknown> {
+  type: Type;
+  /** Screen coordinates for anchoring the popover */
+  x: number;
+  y: number;
+  data: Data;
+}
+
+export interface ShortcutEntry {
+  key: string;
+  action: string;
+  plugin: string;
+}
+
+export interface MarkDetector {
+  mark: string;
+  detect: (nodeName: string, state: EditorState, pos: number) => boolean;
+}

package/src/core/utils.ts

@@ -0,0 +1,38 @@
+import type { EditorView } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+
+/**
+ * Returns true when the primary cursor sits inside a fenced code block.
+ * Used to disable inline/block formatting commands that would produce
+ * broken markdown if applied inside code.
+ */
+export function isInsideCodeBlock(view: EditorView): boolean {
+  const pos = view.state.selection.main.from;
+  let node = syntaxTree(view.state).resolveInner(pos, -1);
+  while (node) {
+    if (node.name === "FencedCode") return true;
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  return false;
+}
+
+const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+
+/** Parse a CodeMirror key string into individual key tokens for display */
+export function formatShortcutKeys(key: string): string[] {
+  return key.split("-").map((part) => {
+    switch (part) {
+      case "Mod":
+        return isMac ? "\u2318" : "Ctrl";
+      case "Shift":
+        return isMac ? "\u21E7" : "Shift";
+      case "Alt":
+        return isMac ? "\u2325" : "Alt";
+      case "Enter":
+        return "\u23CE";
+      default:
+        return part;
+    }
+  });
+}