leepi 0.0.0 → 0.0.2

package/package.json

@@ -1 +1,90 @@
-{"name":"leepi","version":"0.0.0","description":"Lipi - A composable React markdown editor","license":"MIT"}
+{
+  "name": "leepi",
+  "version": "0.0.2",
+  "description": "A composable React markdown editor with inline styling",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brijbyte/leepi.git",
+    "directory": "packages/leepi"
+  },
+  "files": [
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/test-helpers.ts"
+  ],
+  "type": "module",
+  "exports": {
+    "./core/active-marks": "./dist/core/active-marks.js",
+    "./core/commands": "./dist/core/commands.js",
+    "./core/editor": "./dist/core/editor.js",
+    "./core/field-notifier": "./dist/core/field-notifier.js",
+    "./core/highlight": "./dist/core/highlight.js",
+    "./core/plugins": "./dist/core/plugins.js",
+    "./core/popover": "./dist/core/popover.js",
+    "./core/registry": "./dist/core/registry.js",
+    "./core/types": "./dist/core/types.js",
+    "./core/utils": "./dist/core/utils.js",
+    "./react/code-block-popover": "./dist/react/code-block-popover.js",
+    "./react/context": "./dist/react/context.js",
+    "./react/editor": "./dist/react/editor.js",
+    "./react/floating-toolbar": "./dist/react/floating-toolbar.js",
+    "./react/link-popover": "./dist/react/link-popover.js",
+    "./react/preview": "./dist/react/preview.js",
+    "./react/toolbar": "./dist/react/toolbar.js",
+    "./package.json": "./package.json",
+    "./styles.css": "./dist/leepi.css",
+    "./styles/*.css": "./src/styles/*.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/lang-markdown": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/language-data": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@lezer/highlight": "^1.0.0",
+    "marked": ">=15.0.0",
+    "marked-highlight": "^2.0.0"
+  },
+  "devDependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.41.0",
+    "@lezer/highlight": "^1.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "marked": ">=18.0.0",
+    "marked-highlight": "^2.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@base-ui/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/core/active-marks.ts

@@ -0,0 +1,89 @@
+import { type Extension } from "@codemirror/state";
+import { type EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view";
+import { syntaxTree } from "@codemirror/language";
+import { markRegistry } from "./registry";
+
+/**
+ * Active marks as a dynamic record. Keys are mark names registered via `markRegistry`.
+ */
+export type ActiveMarks = Record<string, boolean>;
+
+export const emptyMarks: ActiveMarks = {};
+
+export function detectMarks(view: EditorView): ActiveMarks {
+  const { state } = view;
+  const pos = state.selection.main.from;
+  const tree = syntaxTree(state);
+  const detectors = state.facet(markRegistry);
+
+  const marks: ActiveMarks = {};
+
+  // Tree walk: call all detectors with each node name
+  let node = tree.resolveInner(pos, -1);
+  while (node) {
+    for (const det of detectors) {
+      if (!marks[det.mark] && det.detect(node.name, state, pos)) {
+        marks[det.mark] = true;
+      }
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+
+  // Line pass: call detectors with "__line__" sentinel for line-level checks
+  for (const det of detectors) {
+    if (!marks[det.mark] && det.detect("__line__", state, pos)) {
+      marks[det.mark] = true;
+    }
+  }
+
+  return marks;
+}
+
+// Notification system: views notify React subscribers when marks change
+const viewListeners = new WeakMap<EditorView, Set<() => void>>();
+const viewSnapshots = new WeakMap<EditorView, ActiveMarks>();
+
+export function subscribeToMarks(view: EditorView, callback: () => void): () => void {
+  let listeners = viewListeners.get(view);
+  if (!listeners) {
+    listeners = new Set();
+    viewListeners.set(view, listeners);
+  }
+  listeners.add(callback);
+  return () => {
+    listeners!.delete(callback);
+  };
+}
+
+export function getMarksSnapshot(view: EditorView): ActiveMarks {
+  return viewSnapshots.get(view) ?? emptyMarks;
+}
+
+function marksEqual(a: ActiveMarks, b: ActiveMarks): boolean {
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const key of aKeys) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+
+export const activeMarksPlugin: Extension = ViewPlugin.fromClass(
+  class {
+    update(update: ViewUpdate): void {
+      if (update.selectionSet || update.docChanged) {
+        const marks = detectMarks(update.view);
+        const prev = viewSnapshots.get(update.view) ?? emptyMarks;
+        if (!marksEqual(prev, marks)) {
+          viewSnapshots.set(update.view, marks);
+          const listeners = viewListeners.get(update.view);
+          if (listeners) {
+            for (const cb of listeners) cb();
+          }
+        }
+      }
+    }
+  },
+);

package/src/core/commands.ts

@@ -0,0 +1,461 @@
+import type { EditorView } from "@codemirror/view";
+import { type EditorState, EditorSelection } from "@codemirror/state";
+import { syntaxTree } from "@codemirror/language";
+import { isInsideCodeBlock } from "./utils";
+import type { CodeBlockData } from "./plugins/code-block";
+
+/**
+ * Toggle an inline markdown marker (e.g. `**`, `_`, `` ` ``, `~~`) around
+ * each selection range. If the selected text is already wrapped with the
+ * marker, the marker is removed; otherwise it is added.
+ *
+ * When nothing is selected the marker pair is inserted at the cursor and the
+ * cursor is placed between them.
+ */
+export function toggleMarker(marker: string) {
+  return (view: EditorView): boolean => {
+    if (isInsideCodeBlock(view)) return false;
+    const { state } = view;
+    const len = marker.length;
+
+    const changes = state.changeByRange((range) => {
+      const doc = state.doc;
+
+      if (range.empty) {
+        const line = doc.lineAt(range.from);
+        const lineText = line.text;
+        const cursorOffset = range.from - line.from;
+
+        const positions: number[] = [];
+        let searchFrom = 0;
+        while (searchFrom <= lineText.length - len) {
+          const idx = lineText.indexOf(marker, searchFrom);
+          if (idx === -1) break;
+          positions.push(idx);
+          searchFrom = idx + len;
+        }
+
+        for (let i = 0; i + 1 < positions.length; i += 2) {
+          const openEnd = positions[i] + len;
+          const closeStart = positions[i + 1];
+          if (cursorOffset >= openEnd && cursorOffset <= closeStart) {
+            const absOpen = line.from + positions[i];
+            const absClose = line.from + closeStart;
+            const innerText = doc.sliceString(absOpen + len, absClose);
+            const cursorInInner = range.from - (absOpen + len);
+            return {
+              changes: {
+                from: absOpen,
+                to: absClose + len,
+                insert: innerText,
+              },
+              range: EditorSelection.cursor(absOpen + cursorInInner),
+            };
+          }
+        }
+
+        return {
+          changes: { from: range.from, insert: marker + marker },
+          range: EditorSelection.cursor(range.from + len),
+        };
+      }
+
+      const selected = doc.sliceString(range.from, range.to);
+
+      if (selected.startsWith(marker) && selected.endsWith(marker) && selected.length >= len * 2) {
+        const inner = selected.slice(len, -len);
+        return {
+          changes: { from: range.from, to: range.to, insert: inner },
+          range: EditorSelection.range(range.from, range.from + inner.length),
+        };
+      }
+
+      const beforeSel = doc.sliceString(Math.max(0, range.from - len), range.from);
+      const afterSel = doc.sliceString(range.to, Math.min(doc.length, range.to + len));
+
+      if (beforeSel === marker && afterSel === marker) {
+        return {
+          changes: [
+            { from: range.from - len, to: range.from },
+            { from: range.to, to: range.to + len },
+          ],
+          range: EditorSelection.range(range.from - len, range.to - len),
+        };
+      }
+
+      return {
+        changes: [
+          { from: range.from, insert: marker },
+          { from: range.to, insert: marker },
+        ],
+        range: EditorSelection.range(range.from, range.to + len * 2),
+      };
+    });
+
+    view.dispatch(changes);
+    return true;
+  };
+}
+
+// --- Blockquote toggle ---
+
+const BQ_RE = /^(\s*)>\s?/;
+
+export function toggleBlockquote(view: EditorView): boolean {
+  if (isInsideCodeBlock(view)) return false;
+  const { state } = view;
+  const changes = state.changeByRange((range) => {
+    const fromLine = state.doc.lineAt(range.from);
+    const toLine = state.doc.lineAt(range.to);
+    const edits: { from: number; to: number; insert: string }[] = [];
+
+    let allQuoted = true;
+    for (let num = fromLine.number; num <= toLine.number; num++) {
+      const line = state.doc.line(num);
+      if (!BQ_RE.test(line.text)) {
+        allQuoted = false;
+        break;
+      }
+    }
+
+    for (let num = fromLine.number; num <= toLine.number; num++) {
+      const line = state.doc.line(num);
+      if (allQuoted) {
+        const match = line.text.match(BQ_RE)!;
+        edits.push({
+          from: line.from,
+          to: line.from + match[0].length,
+          insert: match[1],
+        });
+      } else if (!BQ_RE.test(line.text)) {
+        const indent = line.text.match(/^(\s*)/)![1];
+        edits.push({
+          from: line.from + indent.length,
+          to: line.from + indent.length,
+          insert: "> ",
+        });
+      }
+    }
+
+    if (edits.length === 0) return { changes: [], range };
+
+    const firstDelta = edits[0].insert.length - (edits[0].to - edits[0].from);
+    const totalDelta = edits.reduce((sum, e) => sum + e.insert.length - (e.to - e.from), 0);
+    const newFrom = Math.max(0, range.from + firstDelta);
+    return {
+      changes: edits,
+      range: range.empty
+        ? EditorSelection.cursor(newFrom)
+        : EditorSelection.range(newFrom, Math.max(newFrom, range.to + totalDelta)),
+    };
+  });
+
+  view.dispatch(changes);
+  return true;
+}
+
+// --- Block prefix helper ---
+
+/**
+ * Find the offset where content begins after any blockquote markers on a line.
+ * Uses the syntax tree to detect `QuoteMark` nodes, handling nested blockquotes.
+ */
+function getBlockContentOffset(state: EditorState, lineFrom: number, lineTo: number): number {
+  const tree = syntaxTree(state);
+  let lastQuoteEnd = lineFrom;
+  let foundQuote = false;
+
+  tree.iterate({
+    from: lineFrom,
+    to: lineTo,
+    enter(node) {
+      if (node.name === "QuoteMark" && node.from >= lineFrom && node.to <= lineTo) {
+        foundQuote = true;
+        lastQuoteEnd = node.to;
+      }
+    },
+  });
+
+  if (!foundQuote) return 0;
+
+  // Skip whitespace after the last QuoteMark
+  const doc = state.doc;
+  let offset = lastQuoteEnd;
+  while (offset < lineTo && doc.sliceString(offset, offset + 1) === " ") {
+    offset++;
+  }
+
+  return offset - lineFrom;
+}
+
+// --- Heading toggle ---
+
+export function toggleHeading(level: number) {
+  return (view: EditorView): boolean => {
+    if (isInsideCodeBlock(view)) return false;
+    const { state } = view;
+    const line = state.doc.lineAt(state.selection.main.from);
+    const contentOffset = getBlockContentOffset(state, line.from, line.to);
+    const content = line.text.slice(contentOffset);
+    const headingMatch = content.match(/^(#{1,6})\s/);
+    const prefix = "#".repeat(level) + " ";
+    const contentFrom = line.from + contentOffset;
+
+    const cursorPos = state.selection.main.from;
+
+    if (headingMatch && headingMatch[1].length === level) {
+      // Removing heading — place cursor at same relative content position
+      const delta = -headingMatch[0].length;
+      view.dispatch({
+        changes: { from: contentFrom, to: contentFrom + headingMatch[0].length, insert: "" },
+        selection: EditorSelection.cursor(Math.max(contentFrom, cursorPos + delta)),
+      });
+    } else if (headingMatch) {
+      // Switching heading level — adjust cursor for prefix length change
+      const delta = prefix.length - headingMatch[0].length;
+      view.dispatch({
+        changes: { from: contentFrom, to: contentFrom + headingMatch[0].length, insert: prefix },
+        selection: EditorSelection.cursor(Math.max(contentFrom + prefix.length, cursorPos + delta)),
+      });
+    } else {
+      // Adding heading — place cursor after the new prefix
+      view.dispatch({
+        changes: { from: contentFrom, to: contentFrom, insert: prefix },
+        selection: EditorSelection.cursor(
+          Math.max(contentFrom + prefix.length, cursorPos + prefix.length),
+        ),
+      });
+    }
+    return true;
+  };
+}
+
+// --- List toggle ---
+
+const TASK_RE = /^(\s*)[-*+]\s\[([ xX])\]\s/;
+
+type ListKind = "ul" | "ol" | "task" | "none";
+
+function detectListKind(
+  state: EditorState,
+  pos: number,
+  contentText: string,
+): { kind: ListKind; indent: string } {
+  const tree = syntaxTree(state);
+  let node = tree.resolveInner(pos, 1);
+  const indent = contentText.match(/^(\s*)/)![1];
+
+  while (node) {
+    if (node.name === "ListItem" && node.getChild("Task")) {
+      return { kind: "task", indent };
+    }
+    if (node.name === "BulletList" || node.name === "OrderedList") {
+      return { kind: node.name === "BulletList" ? "ul" : "ol", indent };
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  return { kind: "none", indent: "" };
+}
+
+function stripListPrefix(lineText: string): string {
+  return lineText.replace(/^(\s*)(?:[-*+]\s\[([ xX])\]\s|[-*+]\s|\d+\.\s)/, "$1");
+}
+
+export function toggleListKind(target: ListKind) {
+  return (view: EditorView): boolean => {
+    if (isInsideCodeBlock(view)) return false;
+    const { state } = view;
+    const changes = state.changeByRange((range) => {
+      const fromLine = state.doc.lineAt(range.from);
+      const toLine = state.doc.lineAt(range.to);
+      const edits: { from: number; to: number; insert: string }[] = [];
+      let olIdx = 1;
+
+      for (let num = fromLine.number; num <= toLine.number; num++) {
+        const line = state.doc.line(num);
+        const bqOffset = getBlockContentOffset(state, line.from, line.to);
+        const content = line.text.slice(bqOffset);
+        const { kind, indent } = detectListKind(state, line.from + bqOffset, content);
+        const stripped = stripListPrefix(content);
+
+        let newPrefix: string;
+        if (kind === target) {
+          newPrefix = indent;
+        } else {
+          switch (target) {
+            case "ul":
+              newPrefix = `${indent}- `;
+              break;
+            case "ol":
+              newPrefix = `${indent}${olIdx++}. `;
+              break;
+            case "task":
+              newPrefix = `${indent}- [ ] `;
+              break;
+            default:
+              newPrefix = indent;
+          }
+        }
+
+        const newContent = newPrefix + stripped.slice(indent.length);
+        const newLine = line.text.slice(0, bqOffset) + newContent;
+        if (newLine !== line.text) {
+          edits.push({ from: line.from, to: line.to, insert: newLine });
+        }
+      }
+
+      if (edits.length === 0) return { changes: [], range };
+
+      const firstDelta = edits[0].insert.length - (edits[0].to - edits[0].from);
+      const totalDelta = edits.reduce((sum, e) => sum + e.insert.length - (e.to - e.from), 0);
+      const newFrom = Math.max(0, range.from + firstDelta);
+      return {
+        changes: edits,
+        range: range.empty
+          ? EditorSelection.cursor(newFrom)
+          : EditorSelection.range(newFrom, Math.max(newFrom, range.to + totalDelta)),
+      };
+    });
+
+    view.dispatch(changes);
+    return true;
+  };
+}
+
+export function toggleTaskCheck(view: EditorView): boolean {
+  if (isInsideCodeBlock(view)) return false;
+  const { state } = view;
+  const changes = state.changeByRange((range) => {
+    const fromLine = state.doc.lineAt(range.from);
+    const toLine = state.doc.lineAt(range.to);
+    const edits: { from: number; to: number; insert: string }[] = [];
+
+    for (let num = fromLine.number; num <= toLine.number; num++) {
+      const line = state.doc.line(num);
+      const match = line.text.match(TASK_RE);
+      if (!match) continue;
+      const isChecked = match[2] !== " ";
+      const bracketStart = line.from + line.text.indexOf("[");
+      edits.push({
+        from: bracketStart,
+        to: bracketStart + 3,
+        insert: isChecked ? "[ ]" : "[x]",
+      });
+    }
+
+    if (edits.length === 0) return { changes: [], range };
+    return { changes: edits, range };
+  });
+
+  view.dispatch(changes);
+  return true;
+}
+
+// --- Link helpers ---
+
+export function findLinkAtCursor(
+  state: EditorState,
+  pos: number,
+): { from: number; to: number; label: string; url: string } | null {
+  const tree = syntaxTree(state);
+  let node = tree.resolveInner(pos, -1);
+  while (node) {
+    if (node.name === "Link") {
+      const from = node.from;
+      const to = node.to;
+      const full = state.sliceDoc(from, to);
+      const labelStart = full.indexOf("[");
+      const labelEnd = full.indexOf("]");
+      const urlStart = full.indexOf("(", labelEnd);
+      const urlEnd = full.lastIndexOf(")");
+      if (labelStart === -1 || labelEnd === -1 || urlStart === -1 || urlEnd === -1) return null;
+      const label = full.slice(labelStart + 1, labelEnd);
+      const url = full.slice(urlStart + 1, urlEnd);
+      return { from, to, label, url };
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  return null;
+}
+
+/** Insert a markdown link into the editor, replacing `from..to`. */
+export function insertLink(
+  view: EditorView,
+  from: number,
+  to: number,
+  label: string,
+  url: string,
+): void {
+  const insert = `[${label}](${url})`;
+  view.dispatch({
+    changes: { from, to, insert },
+    selection: EditorSelection.cursor(from + insert.length),
+  });
+  view.focus();
+}
+
+// --- Code fence helpers ---
+
+function parseFenceInfo(info: string): { lang: string; filename: string } {
+  const parts = info.trim().split(/\s+/);
+  let lang = "";
+  let filename = "";
+  for (const part of parts) {
+    if (part.startsWith("filename=")) {
+      filename = part.slice("filename=".length);
+    } else if (!lang) {
+      lang = part;
+    }
+  }
+  return { lang, filename };
+}
+
+export function findCodeFenceAtCursor(view: EditorView): {
+  fenceLine: { from: number; to: number };
+  lang: string;
+  filename: string;
+} | null {
+  const { state } = view;
+  const pos = state.selection.main.from;
+  const tree = syntaxTree(state);
+
+  let node = tree.resolveInner(pos, -1);
+  while (node) {
+    if (node.name === "FencedCode") {
+      const fenceLine = state.doc.lineAt(node.from);
+      const infoNode = node.getChild("CodeInfo");
+      const info = infoNode ? state.sliceDoc(infoNode.from, infoNode.to) : "";
+      const { lang, filename } = parseFenceInfo(info);
+      return { fenceLine: { from: fenceLine.from, to: fenceLine.to }, lang, filename };
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  return null;
+}
+
+/** Apply code block settings. For existing blocks, replaces the fence line. For new blocks, inserts a fenced block. */
+export function applyCodeBlock(
+  view: EditorView,
+  data: CodeBlockData,
+  lang: string,
+  filename: string,
+): void {
+  const info = [lang, filename ? `filename=${filename}` : ""].filter(Boolean).join(" ");
+  if (data.isNew) {
+    const insert = `\`\`\`${info}\n\n\`\`\``;
+    const pos = data.insertPos!;
+    view.dispatch({
+      changes: { from: pos, to: pos, insert },
+      selection: EditorSelection.cursor(pos + 3 + info.length + 1),
+    });
+  } else {
+    const fenceLine = `\`\`\`${info}`;
+    view.dispatch({
+      changes: { from: data.fenceFrom, to: data.fenceTo, insert: fenceLine },
+    });
+  }
+  view.focus();
+}