leepi 0.0.0 → 0.0.3

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();
+}

package/src/core/editor.ts

@@ -0,0 +1,139 @@
+import { EditorState, EditorSelection, Compartment, type Extension } from "@codemirror/state";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { syntaxHighlighting } from "@codemirror/language";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { styleTags, tags } from "@lezer/highlight";
+import { highlightStyle, editorTheme } from "./highlight-style";
+import { activeMarksPlugin } from "./active-marks";
+import { fieldNotifier } from "./field-notifier";
+import { popoverField } from "./popover";
+import {
+  inlinePlugin,
+  headingPlugin,
+  listPlugin,
+  blockquotePlugin,
+  linkPlugin,
+  codeBlockPlugin,
+  tablePlugin,
+  bracketPlugin,
+} from "./plugins";
+
+export interface CreateEditorStateOptions {
+  doc?: string;
+  onUpdate?: (doc: string) => void;
+  /** Additional extensions (e.g. custom plugins) */
+  plugins?: Extension[];
+  placeholder?: string;
+  readOnly?: boolean;
+  /** When false, default plugins are NOT included. Defaults to true. */
+  includeDefaultPlugins?: boolean;
+}
+
+/** Compartment for swapping the markdown extension after lazy-loading language support */
+export const markdownCompartment: Compartment = new Compartment();
+
+/** Compartment for toggling editable state */
+export const editableCompartment: Compartment = new Compartment();
+
+const markdownStyleTags = {
+  props: [
+    styleTags({
+      ListMark: tags.processingInstruction,
+      QuoteMark: tags.processingInstruction,
+      TaskMarker: tags.processingInstruction,
+      CodeText: tags.content,
+    }),
+  ],
+};
+
+/** Select the word under the cursor. Does nothing if there is already a selection. */
+function selectWord(view: EditorView): boolean {
+  const main = view.state.selection.main;
+  if (!main.empty) return false;
+  const word = view.state.wordAt(main.head);
+  if (!word) return false;
+  view.dispatch({ selection: EditorSelection.single(word.from, word.to) });
+  return true;
+}
+
+/** Default set of all plugins */
+export function defaultPlugins(): Extension {
+  return [
+    inlinePlugin(),
+    headingPlugin(),
+    listPlugin(),
+    blockquotePlugin(),
+    linkPlugin(),
+    codeBlockPlugin(),
+    tablePlugin(),
+    bracketPlugin(),
+  ];
+}
+
+export function createEditorState(options: CreateEditorStateOptions): EditorState {
+  const {
+    doc = "",
+    onUpdate,
+    plugins = [],
+    placeholder = "",
+    readOnly = false,
+    includeDefaultPlugins = true,
+  } = options;
+
+  const extensions: Extension[] = [
+    editableCompartment.of(EditorView.editable.of(!readOnly)),
+    // Default plugins
+    ...(includeDefaultPlugins ? [defaultPlugins()] : []),
+    // User plugins
+    ...plugins,
+    // Core keybindings
+    keymap.of([
+      { key: "Mod-d", run: selectWord, preventDefault: true },
+      ...defaultKeymap,
+      ...historyKeymap,
+    ]),
+    history(),
+    popoverField,
+    activeMarksPlugin,
+    fieldNotifier(),
+    markdownCompartment.of(
+      markdown({ base: markdownLanguage, extensions: markdownStyleTags, addKeymap: true }),
+    ),
+    syntaxHighlighting(highlightStyle),
+    editorTheme,
+    EditorView.lineWrapping,
+  ];
+
+  if (placeholder) {
+    extensions.push(cmPlaceholder(placeholder));
+  }
+
+  if (onUpdate) {
+    extensions.push(
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          onUpdate(update.state.doc.toString());
+        }
+      }),
+    );
+  }
+
+  return EditorState.create({ doc, extensions });
+}
+
+/** Lazy-load code language support and reconfigure the markdown extension */
+export function loadLanguageSupport(view: EditorView): void {
+  import("@codemirror/language-data").then(({ languages }) => {
+    view.dispatch({
+      effects: markdownCompartment.reconfigure(
+        markdown({
+          base: markdownLanguage,
+          codeLanguages: languages,
+          extensions: markdownStyleTags,
+          addKeymap: true,
+        }),
+      ),
+    });
+  });
+}

package/src/core/field-notifier.ts

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