@k2b/editor 0.0.0-stage → 0.1.0

package/src/markdown/lists.ts

@@ -0,0 +1,290 @@
+import type { EditorState, Extension, Range, Transaction } from "@codemirror/state";
+import { StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, ViewPlugin, WidgetType } from "@codemirror/view";
+import { treeOrDocChanged } from "./_lib/cursor-zone-field";
+import {
+  type ExcludedSpan,
+  excludedSpans,
+  type ListItem,
+  type ListItemKind,
+  type ListStructure,
+  listExcludedRanges,
+  listItemAtLine,
+  listStructure,
+  type MarkdownRangeOptions,
+  orderedLabel,
+} from "./_lib/list-structure";
+
+class ListGutterWidget extends WidgetType {
+  constructor(
+    private readonly depth: number,
+    private readonly kind: ListItemKind,
+    private readonly label: string,
+    private readonly checked: boolean,
+  ) {
+    super();
+  }
+
+  override eq(other: WidgetType) {
+    return (
+      other instanceof ListGutterWidget &&
+      this.depth === other.depth &&
+      this.kind === other.kind &&
+      this.label === other.label &&
+      this.checked === other.checked
+    );
+  }
+
+  override toDOM() {
+    const gutter = document.createElement("span");
+    gutter.className = "custom-list-gutter";
+    gutter.setAttribute("aria-hidden", "true");
+    for (let level = 0; level < this.depth; level++) {
+      const guide = document.createElement("span");
+      guide.className = "custom-list-guide";
+      guide.style.setProperty("--list-level", String(level));
+      gutter.append(guide);
+    }
+    // As in Book, a numbered checklist item shows its number and then its box.
+    if (this.label) gutter.append(this.marker("ordered", this.label));
+    if (this.kind === "task") {
+      const input = document.createElement("input");
+      input.type = "checkbox";
+      input.className = "custom-list-task-marker";
+      input.tabIndex = -1;
+      input.setAttribute("aria-hidden", "true");
+      input.checked = this.checked;
+      gutter.append(this.marker("task", input));
+    } else if (!this.label) {
+      const dot = document.createElement("span");
+      dot.className = `custom-list-dot custom-list-dot-${this.depth % 3}`;
+      gutter.append(this.marker("bullet", dot));
+    }
+    return gutter;
+  }
+
+  private marker(kind: ListItemKind, content: string | Node) {
+    const marker = document.createElement("span");
+    marker.className = `custom-list-marker custom-list-marker-${kind}`;
+    marker.append(content);
+    return marker;
+  }
+
+  override ignoreEvent(event: Event) {
+    return this.kind === "task" ? false : super.ignoreEvent(event);
+  }
+}
+
+const decorated = (state: EditorState, item: ListItem): boolean =>
+  item.taskTo !== null
+    ? state.sliceDoc(item.taskTo, item.taskTo + 1) === " "
+    : /[ \t]/.test(state.sliceDoc(item.markerTo, item.markerTo + 1));
+
+const selectionParent = (state: EditorState, structure: ListStructure): number => {
+  const index = listItemAtLine(structure, state.doc.lineAt(state.selection.main.head).number);
+  return structure.items[index]?.parent ?? -1;
+};
+
+const activeGuides = (state: EditorState, structure: ListStructure, parent: number): DecorationSet => {
+  const item = structure.items[parent];
+  if (!item) return Decoration.none;
+  const ranges: Range<Decoration>[] = [];
+  const decoration = Decoration.line({ attributes: { style: `--list-active-level: ${item.depth}` } });
+  for (let index = parent + 1; index < item.subtreeEnd; index++) {
+    const child = structure.items[index]!;
+    if (decorated(state, child)) ranges.push(decoration.range(child.from));
+  }
+  return Decoration.set(ranges, true);
+};
+
+type ListState = {
+  excluded: readonly ExcludedSpan[] | undefined;
+  structure: ListStructure;
+  decorations: DecorationSet;
+  atomicRanges: DecorationSet;
+  active: DecorationSet;
+  parent: number;
+};
+
+const build = (state: EditorState, cached?: readonly ExcludedSpan[]): ListState => {
+  let excluded = cached;
+  // Notebook blocks are outside Markdown's grammar. Read their source only when lists exist.
+  const structure = listStructure(state, () => (excluded ??= excludedSpans(state)));
+  const ranges: Range<Decoration>[] = [];
+  const atomic: Range<Decoration>[] = [];
+  for (const item of structure.items) {
+    if (!decorated(state, item)) continue;
+    ranges.push(
+      Decoration.line({
+        attributes: {
+          class: `custom-list custom-list-${item.kind}${item.checked ? " custom-list-task-checked" : ""}`,
+          style: `--list-depth: ${item.depth}${item.ordered && item.kind === "task" ? "; --list-markers: 2" : ""}`,
+        },
+      }).range(item.from),
+    );
+    const label = item.ordinal === null ? "" : orderedLabel(item.ordinal, item.orderedDepth);
+    const gutter = Decoration.replace({ widget: new ListGutterWidget(item.depth, item.kind, label, item.checked) }).range(
+      item.from,
+      item.contentFrom,
+    );
+    ranges.push(gutter);
+    atomic.push(gutter);
+  }
+  const parent = selectionParent(state, structure);
+  return {
+    excluded,
+    structure,
+    decorations: Decoration.set(ranges, true),
+    atomicRanges: Decoration.set(atomic, true),
+    active: activeGuides(state, structure, parent),
+    parent,
+  };
+};
+
+const linePrefix = (line: string) => line.match(/^\s*(?:(?:[-+*]|\d+[.)]|#{1,6})(?:\s+|$))*(?:[=*_~-]+\s*$)?/)?.[0] ?? "";
+
+const exclusionSyntax = (line: string) => /:::|`{3}|~{3}|[@#<>|\r]/.test(line) || /^\s*(?:[-*_]\s*){3,}$/.test(line);
+
+const exclusionsChanged = (tr: Transaction): boolean => {
+  let changed = false;
+  tr.changes.iterChangedRanges((fromA, toA, fromB, toB) => {
+    if (changed) return;
+    const before = tr.startState.doc.lineAt(fromA);
+    const after = tr.newDoc.lineAt(fromB);
+    // Splitting/joining lines changes container boundaries and named-block lookahead.
+    if (tr.startState.doc.lineAt(toA).number !== before.number || tr.newDoc.lineAt(toB).number !== after.number) {
+      changed = true;
+      return;
+    }
+    // literalMarkdownLines also consumes lists, quotes, HTML and indented code.
+    // Their boundaries can change even when an edit is far from a directive.
+    const beforePrefix = linePrefix(before.text);
+    const afterPrefix = linePrefix(after.text);
+    changed =
+      exclusionSyntax(before.text) ||
+      exclusionSyntax(after.text) ||
+      beforePrefix !== afterPrefix ||
+      (before.text.slice(beforePrefix.length).trim().length === 0) !== (after.text.slice(afterPrefix.length).trim().length === 0);
+  });
+  return changed;
+};
+
+export const listStateField = StateField.define<ListState>({
+  create: build,
+  update(value, tr) {
+    if (tr.startState.facet(listExcludedRanges) !== tr.state.facet(listExcludedRanges)) return build(tr.state);
+    if (tr.docChanged) {
+      // Include inserted text at either edge, including EOF of an unclosed directive.
+      const excluded = value.excluded?.map((span) => ({
+        from: tr.changes.mapPos(span.from, -1),
+        to: tr.changes.mapPos(span.to, 1),
+      }));
+      return build(tr.state, exclusionsChanged(tr) ? undefined : excluded);
+    }
+    // Parser progress changes the list tree, but not the source-scanned spans.
+    if (treeOrDocChanged(tr)) return build(tr.state, value.excluded);
+    const parent = selectionParent(tr.state, value.structure);
+    return {
+      ...value,
+      decorations: value.decorations.map(tr.changes),
+      atomicRanges: value.atomicRanges.map(tr.changes),
+      active: parent === value.parent ? value.active.map(tr.changes) : activeGuides(tr.state, value.structure, parent),
+      parent,
+    };
+  },
+  provide(field) {
+    return [
+      EditorView.decorations.from(field, (value) => value.decorations),
+      EditorView.decorations.from(field, (value) => value.active),
+      EditorView.atomicRanges.of((view) => view.state.field(field).atomicRanges),
+    ];
+  },
+});
+
+const taskPress = ViewPlugin.define(() => ({}), {
+  eventHandlers: {
+    mousedown(event, view) {
+      if (!(event.target instanceof Element)) return;
+      const checkbox = event.target.closest(".custom-list-task-marker");
+      if (!checkbox || checkbox.getAttribute("type") !== "checkbox") return;
+      if (view.state.readOnly) return true;
+      const line = view.state.doc.lineAt(view.posAtDOM(checkbox));
+      const structure = view.state.field(listStateField).structure;
+      const item = structure.items[listItemAtLine(structure, line.number)];
+      if (item && item.taskFrom !== null && item.taskTo !== null) {
+        view.dispatch({ changes: { from: item.taskFrom, to: item.taskTo, insert: item.checked ? "[ ]" : "[x]" } });
+      }
+      return true;
+    },
+    // Cancelling mousedown does not stop the box's own toggle on click, so a read-only note keeps the box as it is.
+    click(event, view) {
+      if (!view.state.readOnly || !(event.target instanceof Element)) return;
+      if (!event.target.closest(".custom-list-task-marker")) return;
+      event.preventDefault();
+      return true;
+    },
+  },
+});
+
+const listTheme = EditorView.theme({
+  ".custom-list": {
+    "--list-step": "1.625rem",
+    position: "relative",
+    paddingLeft: "calc(var(--list-step) * (var(--list-depth) + var(--list-markers, 1))) !important",
+    textIndent: "calc(var(--list-step) * (var(--list-depth) + var(--list-markers, 1)) * -1)",
+  },
+  "@media (max-width: 640px)": { ".custom-list": { "--list-step": "1.375rem" } },
+  ".custom-list *": { textIndent: "0" },
+  ".custom-list-gutter": {
+    display: "inline-flex",
+    justifyContent: "flex-end",
+    verticalAlign: "top",
+    height: "1lh",
+    width: "calc(var(--list-step) * (var(--list-depth) + var(--list-markers, 1)))",
+    userSelect: "none",
+  },
+  ".custom-list-guide": {
+    position: "absolute",
+    top: "0",
+    bottom: "0",
+    width: "1px",
+    left: "calc(var(--list-step) * var(--list-level) + var(--list-step) / 2 - 0.5px)",
+    background: "var(--k2b-text, currentColor)",
+    pointerEvents: "none",
+    opacity:
+      "calc(0.14 + 0.24 * clamp(0, 1 - (var(--list-level) - var(--list-active-level, -9)) * (var(--list-level) - var(--list-active-level, -9)), 1))",
+  },
+  ".custom-list-marker": {
+    flex: "none",
+    boxSizing: "border-box",
+    width: "var(--list-step)",
+    height: "1lh",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "var(--k2b-text-muted)",
+  },
+  ".custom-list-marker-ordered": {
+    justifyContent: "flex-end",
+    paddingRight: "0.375rem",
+    fontVariantNumeric: "tabular-nums",
+    color: "var(--k2b-text-secondary)",
+    whiteSpace: "nowrap",
+  },
+  ".custom-list-dot": { boxSizing: "border-box", width: "0.375rem", height: "0.375rem", borderRadius: "50%", background: "currentColor" },
+  ".custom-list-dot-1": { width: "0.4rem", height: "0.4rem", background: "none", border: "1.5px solid currentColor" },
+  ".custom-list-dot-2": { width: "0.35rem", height: "0.35rem", borderRadius: "1px" },
+  ".custom-list-task-marker": { width: "1rem", height: "1rem", margin: "0", accentColor: "var(--k2b-action-solid)" },
+  ".custom-list-task-checked": {
+    color: "var(--k2b-placeholder-color)",
+    textDecoration: "line-through",
+    textDecorationColor: "color-mix(in srgb, currentColor 60%, transparent)",
+  },
+});
+
+export const listsExtension = (options: MarkdownRangeOptions = {}): Extension => [
+  options.excludedRanges ? listExcludedRanges.of(options.excludedRanges) : [],
+  listStateField,
+  taskPress,
+  listTheme,
+];

package/src/markdown/mark.ts

@@ -0,0 +1,103 @@
+/**
+ * Mark / Highlight extension for CodeMirror.
+ *
+ * Detects `==text==` spans and decorates them with a yellow textmarker
+ * background. The lezer markdown parser does NOT recognise this syntax
+ * (it's not in CommonMark / GFM), so we scan the doc with a regex and
+ * apply `Decoration.mark` for each match. For typical note sizes the
+ * full-doc scan is microseconds — well within tick budget.
+ */
+
+import type { EditorState, Extension, Range, Transaction } from "@codemirror/state";
+import { RangeSet, StateField } from "@codemirror/state";
+import type { DecorationSet } from "@codemirror/view";
+import { Decoration, EditorView } from "@codemirror/view";
+import { MARK_REGEX } from "./_lib/inline-syntax";
+
+const markDecoration = Decoration.mark({ class: "cm-mark-highlight" });
+
+type MarkState = {
+  decorations: DecorationSet;
+  ranges: Array<{ from: number; to: number }>;
+};
+
+const findMarks = (state: EditorState): MarkState => {
+  const decorations: Range<Decoration>[] = [];
+  const ranges: Array<{ from: number; to: number }> = [];
+  const text = state.doc.toString();
+  for (const match of text.matchAll(MARK_REGEX)) {
+    if (match.index === undefined) continue;
+    const from = match.index;
+    const to = from + match[0].length;
+    decorations.push(markDecoration.range(from, to));
+    ranges.push({ from, to });
+  }
+  return { decorations: RangeSet.of(decorations, true), ranges };
+};
+
+const intersectsRanges = (ranges: Array<{ from: number; to: number }>, from: number, to: number): boolean =>
+  ranges.some((range) => from <= range.to && to >= range.from);
+
+const changesMightAffectMarks = (tr: Transaction, ranges: Array<{ from: number; to: number }>): boolean => {
+  let might = false;
+  tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
+    if (might) return;
+    if (intersectsRanges(ranges, fromA, toA)) {
+      might = true;
+      return;
+    }
+    if (inserted.toString().includes("=")) {
+      might = true;
+      return;
+    }
+    const from = Math.max(0, fromB - 2);
+    const to = Math.min(tr.state.doc.length, toB + 2);
+    might = tr.state.doc.sliceString(from, to).includes("=");
+  });
+  return might;
+};
+
+const mapRanges = (tr: Transaction, ranges: Array<{ from: number; to: number }>): Array<{ from: number; to: number }> =>
+  ranges
+    .map((range) => ({
+      from: tr.changes.mapPos(range.from, 1),
+      to: tr.changes.mapPos(range.to, -1),
+    }))
+    .filter((range) => range.from < range.to);
+
+export const markExtension = (): Extension => {
+  const stateField = StateField.define<MarkState>({
+    create(state) {
+      return findMarks(state);
+    },
+    update(value, tr) {
+      if (tr.docChanged) {
+        if (changesMightAffectMarks(tr, value.ranges)) return findMarks(tr.state);
+        return { decorations: value.decorations.map(tr.changes), ranges: mapRanges(tr, value.ranges) };
+      }
+      return value;
+    },
+    provide(field) {
+      return EditorView.decorations.from(field, (value) => value.decorations);
+    },
+  });
+
+  // Match the renderer's `<mark>` styling so edit-mode and read-mode look
+  // the same. Neon-yellow textmarker — saturated yellow-300 with dark text
+  // for the punchy real-highlighter feel (the previous yellow-100 read as
+  // muted cream / sand).
+  const theme = EditorView.theme({
+    ".cm-mark-highlight": {
+      backgroundColor: "rgb(253 224 71)", // yellow-300
+      color: "rgb(24 24 27)", // zinc-900
+      borderRadius: "2px",
+      padding: "0 2px",
+    },
+    ".dark .cm-mark-highlight": {
+      backgroundColor: "rgba(250 204 21 / 0.4)", // yellow-400 @ 40%
+      color: "rgb(254 252 232)", // yellow-50
+    },
+  });
+
+  return [stateField, theme];
+};

package/src/markdown/markdown.ts

@@ -0,0 +1,78 @@
+// Code languages load on first use, so hosts that never show a fenced block of a language never download its parser.
+import { markdown as markdownExt, markdownLanguage } from "@codemirror/lang-markdown";
+import { LanguageDescription } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import { sizedImageSyntax } from "./image-syntax";
+
+const codeLanguages = [
+  LanguageDescription.of({
+    name: "JavaScript",
+    alias: ["js", "jsx", "ts", "tsx", "typescript"],
+    load: async () => (await import("@codemirror/lang-javascript")).javascript({ jsx: true, typescript: true }),
+  }),
+  LanguageDescription.of({
+    name: "Python",
+    alias: ["py"],
+    load: async () => (await import("@codemirror/lang-python")).python(),
+  }),
+  LanguageDescription.of({
+    name: "SQL",
+    load: async () => (await import("@codemirror/lang-sql")).sql(),
+  }),
+  LanguageDescription.of({
+    name: "HTML",
+    alias: ["htm"],
+    load: async () => {
+      const { html } = await import("@codemirror/lang-html");
+      return html();
+    },
+  }),
+  LanguageDescription.of({
+    name: "CSS",
+    load: async () => (await import("@codemirror/lang-css")).css(),
+  }),
+  LanguageDescription.of({
+    name: "JSON",
+    load: async () => (await import("@codemirror/lang-json")).json(),
+  }),
+  LanguageDescription.of({
+    name: "Go",
+    alias: ["golang"],
+    load: async () => (await import("@codemirror/lang-go")).go(),
+  }),
+  LanguageDescription.of({
+    name: "Java",
+    load: async () => (await import("@codemirror/lang-java")).java(),
+  }),
+  LanguageDescription.of({
+    name: "XML",
+    alias: ["svg"],
+    load: async () => (await import("@codemirror/lang-xml")).xml(),
+  }),
+  LanguageDescription.of({
+    name: "YAML",
+    alias: ["yml"],
+    load: async () => (await import("@codemirror/lang-yaml")).yaml(),
+  }),
+  LanguageDescription.of({
+    name: "Rust",
+    alias: ["rs"],
+    load: async () => (await import("@codemirror/lang-rust")).rust(),
+  }),
+  LanguageDescription.of({
+    name: "C++",
+    alias: ["cpp", "c", "h", "hpp"],
+    load: async () => (await import("@codemirror/lang-cpp")).cpp(),
+  }),
+  LanguageDescription.of({
+    name: "PHP",
+    load: async () => (await import("@codemirror/lang-php")).php(),
+  }),
+];
+
+export const markdownExtension: () => Extension = () =>
+  markdownExt({
+    base: markdownLanguage,
+    codeLanguages,
+    extensions: [sizedImageSyntax],
+  });