@k2b/editor 0.0.0 → 0.1.0

package/src/markdown/code-fence-snippets.ts

@@ -0,0 +1,167 @@
+/**
+ * Autocomplete für ` ```language ` Code-Fences.
+ *
+ * Trigger: line starts with three backticks (or tildes) optionally
+ * followed by a partial language name. Accepting a suggestion expands
+ * to the full fenced block — opening fence with the chosen language,
+ * a body line for the cursor, AND the closing fence — so the user
+ * doesn't have to remember to close the fence themselves.
+ *
+ * Languages mirror exactly what `markdown.ts` registers as
+ * `codeLanguages`, plus two notebooks-specific specials that get
+ * their own rendering pipelines:
+ *
+ *  - `mermaid` — diagram, rendered via `mermaid.ts`
+ *  - `math`   — block KaTeX, rendered via `katex.ts`
+ *
+ * Each suggestion ships an explicit Tabler `completionIcon` so the icon
+ * column reads at a glance (`ti-brand-javascript`, `ti-database` for
+ * SQL, `ti-math-function` for math, etc.) instead of falling through
+ * to the generic `class` icon for every language.
+ *
+ * Scope: only in regular markdown context. We skip when the cursor
+ * is already inside an existing `FencedCode` block — typing ` ``` `
+ * to CLOSE a fence shouldn't surface the language picker.
+ */
+import { type Completion, type CompletionContext, type CompletionResult, snippetCompletion } from "@codemirror/autocomplete";
+import { withIcon } from "./completion-icon";
+import { isInsideFencedCodeBody } from "./editor-scope";
+
+/**
+ * Each fence-language entry. `name` is what we insert into the
+ * source; `aliases` is shown as a hint for users who know the short
+ * form ("js" → JavaScript). `icon` is a Tabler class.
+ *
+ * `bodyPlaceholder` lets us pre-fill the body for languages that
+ * benefit from a starting template (mermaid would render an error
+ * if you opened an empty diagram block — pre-filling a tiny example
+ * gives instant visual feedback). For most languages the body
+ * placeholder is empty so the user starts typing immediately.
+ */
+type FenceLang = {
+  name: string;
+  detail: string;
+  aliases?: string[];
+  icon: string;
+  bodyPlaceholder?: string;
+};
+
+const LANGUAGES: FenceLang[] = [
+  // Notebooks-specific specials — surface FIRST in the list because
+  // they're the most distinctive feature of the editor, not generic
+  // syntax-highlighted code.
+  {
+    name: "mermaid",
+    detail: "Mermaid diagram",
+    icon: "ti-binary-tree",
+    bodyPlaceholder: "graph TD\n  A[Start] --> B[End]",
+  },
+  {
+    name: "math",
+    detail: "Block math (KaTeX)",
+    icon: "ti-math-integral",
+    bodyPlaceholder: "E = mc^2",
+  },
+  // Standard languages — alphabetical so users can scan.
+  { name: "javascript", aliases: ["js"], detail: "JavaScript", icon: "ti-brand-javascript" },
+  { name: "typescript", aliases: ["ts"], detail: "TypeScript", icon: "ti-brand-typescript" },
+  { name: "python", aliases: ["py"], detail: "Python", icon: "ti-brand-python" },
+  { name: "go", aliases: ["golang"], detail: "Go", icon: "ti-brand-golang" },
+  { name: "rust", aliases: ["rs"], detail: "Rust", icon: "ti-brand-rust" },
+  { name: "java", detail: "Java", icon: "ti-coffee" },
+  { name: "cpp", aliases: ["c", "h", "hpp"], detail: "C / C++", icon: "ti-brand-cpp" },
+  { name: "php", detail: "PHP", icon: "ti-brand-php" },
+  { name: "sql", detail: "SQL", icon: "ti-database" },
+  { name: "html", aliases: ["htm"], detail: "HTML", icon: "ti-brand-html5" },
+  { name: "css", detail: "CSS", icon: "ti-brand-css3" },
+  { name: "json", detail: "JSON", icon: "ti-braces" },
+  { name: "yaml", aliases: ["yml"], detail: "YAML", icon: "ti-file-text" },
+  { name: "xml", aliases: ["svg"], detail: "XML / SVG", icon: "ti-code" },
+];
+
+/** Build the snippet template for one language. Does NOT include
+ *  the leading three backticks because the `from` position in the
+ *  CompletionResult is anchored AFTER the backticks the user already
+ *  typed — CM's prefix-filter compares the typed partial against
+ *  `label` ("python", "javascript", …), and on acceptance only the
+ *  text between `from` and the cursor is replaced. So we only emit
+ *  the language tag + body + closing fence; the user's typed
+ *  backticks stay in place. `${0}` parks the final cursor on the
+ *  body line. */
+const escapeSnippetPlaceholder = (value: string): string => value.replace(/[\\${}]/g, "\\$&");
+
+const buildSnippet = (lang: FenceLang): string => {
+  const body = lang.bodyPlaceholder ? `\${0:${escapeSnippetPlaceholder(lang.bodyPlaceholder)}}` : "${0}";
+  return `${lang.name}\n${body}\n\`\`\``;
+};
+
+/** Pre-built completion list. Constant per editor — we don't allocate
+ *  fresh snippet objects on every keystroke.
+ *
+ *  `boost`: numeric weight that CM adds to the option's relevance
+ *  score. Mermaid and math receive a boost above generic languages.
+ *
+ *  We post-augment each Completion with `completionIcon` because
+ *  `snippetCompletion`'s second-arg type is `Completion` (no
+ *  `completionIcon` field on the official interface); the icon renderer
+ *  in `slash-commands/index.ts` reads the field via a structural
+ *  cast. */
+const LANG_BOOSTS: Record<string, number> = {
+  mermaid: 90,
+  math: 80,
+};
+
+const COMPLETIONS: Completion[] = LANGUAGES.map((lang) => {
+  const aliasHint = lang.aliases && lang.aliases.length > 0 ? ` · ${lang.aliases.join(", ")}` : "";
+  const c = snippetCompletion(buildSnippet(lang), {
+    label: lang.name,
+    type: "namespace",
+    detail: `${lang.detail}${aliasHint}`,
+    boost: LANG_BOOSTS[lang.name],
+  });
+  withIcon(c, lang.icon);
+  return c;
+});
+
+/**
+ * Completion source. Wire into `autocompletion({override: […]})`.
+ */
+export const codeFenceCompletionSource = (context: CompletionContext): CompletionResult | null => {
+  // matchBefore is anchored to the cursor: it returns a match only
+  // if the regex matches text ending at the cursor. We want the
+  // whole line text up to cursor to look like ` ```<partial> ` —
+  // anything before triple-backticks (e.g. leading whitespace inside
+  // a list item) would mean this isn't a top-level fence opener and
+  // we shouldn't trigger.
+  const word = context.matchBefore(/^(`{3,}|~{3,})\w*/);
+  if (!word) return null;
+  // Verify the match's `from` is at the line's `from` (paranoia —
+  // the `^` in the regex should already enforce this, but matchBefore
+  // operates on a substring so being explicit is cheap).
+  const line = context.state.doc.lineAt(context.pos);
+  if (word.from !== line.from) return null;
+  // Don't surface when the cursor is INSIDE an existing fence body
+  // (e.g. typing ` ``` ` on the closing line). We DO want the picker
+  // on the opener line — `isInsideFencedCodeBody` returns false there.
+  if (isInsideFencedCodeBody(context)) return null;
+  // Count the fence chars (3+ backticks/tildes) so `from` lands
+  // AFTER them. matchBefore captured the entire opener including
+  // any partial language name; we need to find where the fence
+  // marker ends and the language name begins. The match.text
+  // begins with ≥3 of the same char (backticks OR tildes) — count
+  // those and offset `from` accordingly.
+  const text = word.text;
+  let fenceLen = 0;
+  const fenceChar = text[0]!;
+  while (fenceLen < text.length && text[fenceLen] === fenceChar) fenceLen++;
+  return {
+    from: word.from + fenceLen,
+    to: word.to,
+    options: COMPLETIONS,
+    // `validFor` keeps the popup open while the user continues
+    // typing alphanumeric chars after the backticks — checked
+    // against text from `from` to cursor, which is just the
+    // language-name fragment (e.g. "py" → "python").
+    validFor: /^\w*$/,
+  };
+};

package/src/markdown/code-font.ts

@@ -0,0 +1,54 @@
+/**
+ * Per-node mono font for fenced and inline code in the markdown editor.
+ *
+ * The editor body uses Sans (matches read-mode + the rest of the platform)
+ * but code should stay monospace — tabular alignment, escaped characters,
+ * indentation all rely on equal-width glyphs.
+ *
+ * This extension walks the markdown syntax tree and adds a `cm-md-code`
+ * class to every FencedCode / InlineCode / CodeBlock node, plus
+ * `cm-md-code-block` on blocks. The theme styles them with `var(--font-mono)`
+ * at the Book's code sizes.
+ *
+ * Only registered in rich mode — raw mode renders the entire document as
+ * mono via the theme directly (it's a source view).
+ */
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import { RangeSet, StateField } from "@codemirror/state";
+import type { DecorationSet } from "@codemirror/view";
+import { Decoration, EditorView } from "@codemirror/view";
+import { refreshMarkdownDecorationsEffect, treeOrDocChanged } from "./_lib/cursor-zone-field";
+
+const codeMark = Decoration.mark({ class: "cm-md-code" });
+const blockCodeMark = Decoration.mark({ class: "cm-md-code cm-md-code-block" });
+
+const buildCodeFontDecorations = (state: EditorState): Range<Decoration>[] => {
+  const decorations: Range<Decoration>[] = [];
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      const { name, from, to } = node;
+      if (to <= from) return;
+      if (name === "InlineCode") decorations.push(codeMark.range(from, to));
+      else if (name === "FencedCode" || name === "CodeBlock") decorations.push(blockCodeMark.range(from, to));
+    },
+  });
+  return decorations;
+};
+
+export const codeFontExtension = (): Extension => {
+  return StateField.define<DecorationSet>({
+    create(state) {
+      return RangeSet.of(buildCodeFontDecorations(state), true);
+    },
+    update(decorations, tr) {
+      if (treeOrDocChanged(tr) || tr.effects.some((effect) => effect.is(refreshMarkdownDecorationsEffect))) {
+        return RangeSet.of(buildCodeFontDecorations(tr.state), true);
+      }
+      return decorations;
+    },
+    provide(field) {
+      return EditorView.decorations.from(field);
+    },
+  });
+};

package/src/markdown/completion-icon.ts

@@ -0,0 +1,9 @@
+import type { Completion } from "@codemirror/autocomplete";
+
+export type IconCompletion = Completion & { completionIcon?: string };
+
+/** Attach the icon read by the shared autocomplete option renderer. */
+export const withIcon = <C extends Completion>(completion: C, icon: string): C => {
+  (completion as IconCompletion).completionIcon = icon;
+  return completion;
+};

package/src/markdown/data-block-template.ts

@@ -0,0 +1,11 @@
+export const DATA_BLOCK_DEFAULT_REF = "ref";
+
+export const buildDataBlockTemplate = (ref = DATA_BLOCK_DEFAULT_REF): string => `@${ref}
+:::data
+key: value
+:::`;
+
+export const dataBlockRefSelection = (insertStart: number, ref = DATA_BLOCK_DEFAULT_REF) => ({
+  anchor: insertStart + 1,
+  head: insertStart + 1 + ref.length,
+});

package/src/markdown/data-blocks.ts

@@ -0,0 +1,214 @@
+import { type EditorState, type Extension, Prec, type Range, RangeSet, StateField } from "@codemirror/state";
+import { Decoration, type DecorationSet, EditorView, keymap, WidgetType } from "@codemirror/view";
+import { holdsDecorations, refreshMarkdownDecorationsEffect, selectionIntersectsRange } from "./_lib/cursor-zone-field";
+import { type DataBlock, extractDataBlocks, namedBlockBody, renderDataBlockHtml } from "./lib/named-blocks";
+
+type DataBlockRange = {
+  from: number;
+  to: number;
+  widgetFrom: number;
+  widgetTo: number;
+};
+
+type DataBlocksState = {
+  decorations: DecorationSet;
+  blockWidgetDecorations: DecorationSet;
+  ranges: DataBlockRange[];
+};
+
+class DataBlockWidget extends WidgetType {
+  constructor(
+    private block: DataBlock,
+    private body: string,
+  ) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const el = document.createElement("div");
+    el.className = "cm-data-block-widget";
+    el.setAttribute("contenteditable", "false");
+    el.innerHTML = renderDataBlockHtml(this.block.name, this.body);
+    el.onmousedown = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      view.dispatch({ selection: { anchor: this.block.blockStart }, scrollIntoView: true });
+      view.focus();
+    };
+    el.ondblclick = (event) => {
+      event.stopPropagation();
+    };
+    return el;
+  }
+
+  override eq(other: WidgetType) {
+    return (
+      other instanceof DataBlockWidget &&
+      other.block.name === this.block.name &&
+      other.block.blockStart === this.block.blockStart &&
+      other.body === this.body
+    );
+  }
+
+  override get estimatedHeight() {
+    const rows = Math.max(1, this.body.split("\n").filter((line) => line.trim().length > 0).length);
+    // 12px / 16px cells + 16px padding + divider; the handle and outer padding round up to 44px.
+    return 44 + rows * 33;
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+}
+
+export const dataBlocksExtension = (): Extension => {
+  const stateField = StateField.define<DataBlocksState>({
+    create: scanDataBlocks,
+    update(value, tr) {
+      if (tr.effects.some((effect) => effect.is(refreshMarkdownDecorationsEffect))) return scanDataBlocks(tr.state);
+      if (tr.docChanged) return scanDataBlocks(tr.state);
+      if (holdsDecorations(tr)) return value;
+      if (!tr.selection) return value;
+      const oldKey = cursorDataBlockKey(tr.startState, value.ranges);
+      const newKey = cursorDataBlockKey(tr.state, value.ranges);
+      if (oldKey === newKey) return value;
+      return scanDataBlocks(tr.state);
+    },
+    provide(field) {
+      return [
+        EditorView.decorations.from(field, (value) => value.decorations),
+        EditorView.atomicRanges.of((view) => view.state.field(field).blockWidgetDecorations),
+      ];
+    },
+  });
+
+  const navKeymap = Prec.highest(
+    keymap.of([
+      { key: "ArrowUp", run: (view) => navigateLine(view, stateField, -1, false) },
+      { key: "Shift-ArrowUp", run: (view) => navigateLine(view, stateField, -1, true) },
+      { key: "ArrowDown", run: (view) => navigateLine(view, stateField, 1, false) },
+      { key: "Shift-ArrowDown", run: (view) => navigateLine(view, stateField, 1, true) },
+    ]),
+  );
+
+  return [
+    stateField,
+    navKeymap,
+    EditorView.theme({
+      ".cm-data-block-widget": {
+        display: "block",
+        padding: "0.5rem 0",
+        margin: "0 !important",
+      },
+      ".cm-data-block-widget .md-data-block": {
+        margin: "0 !important",
+      },
+    }),
+  ];
+};
+
+const scanDataBlocks = (state: EditorState): DataBlocksState => {
+  const decorations: Range<Decoration>[] = [];
+  const blockWidgetDecorations: Range<Decoration>[] = [];
+  const ranges: DataBlockRange[] = [];
+  const cursor = state.selection.main;
+  const text = state.doc.toString();
+
+  for (const block of extractDataBlocks(text)) {
+    const prevLine = state.doc.lineAt(Math.max(block.handleStart - 1, 0));
+    const nextLine = state.doc.lineAt(Math.min(block.blockEnd + 1, state.doc.length));
+    const range = {
+      from: prevLine.from,
+      to: nextLine.to,
+      widgetFrom: block.handleStart,
+      widgetTo: block.blockEnd,
+    };
+    ranges.push(range);
+    if (selectionIntersectsRange(cursor, range.from, range.to)) continue;
+    const widgetDecoration = Decoration.replace({
+      widget: new DataBlockWidget(block, namedBlockBody(text, block)),
+      block: true,
+    }).range(block.handleStart, block.blockEnd);
+    decorations.push(widgetDecoration);
+    blockWidgetDecorations.push(widgetDecoration);
+  }
+
+  return {
+    decorations: decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none,
+    blockWidgetDecorations: blockWidgetDecorations.length > 0 ? RangeSet.of(blockWidgetDecorations, true) : Decoration.none,
+    ranges,
+  };
+};
+
+const cursorDataBlockKey = (state: EditorState, ranges: DataBlockRange[]): string | null => {
+  const cursor = state.selection.main;
+  const hits: number[] = [];
+  for (const range of ranges) {
+    if (selectionIntersectsRange(cursor, range.from, range.to)) hits.push(range.widgetFrom);
+  }
+  return hits.length > 0 ? hits.sort((a, b) => a - b).join(",") : null;
+};
+
+const isLineInBlockWidget = (state: DataBlocksState, from: number, to: number): DataBlockRange | null => {
+  for (const range of state.ranges) {
+    if (from > range.widgetTo || to < range.widgetFrom) continue;
+    let isWidget = false;
+    state.blockWidgetDecorations.between(range.widgetFrom, range.widgetTo, (decoFrom, decoTo) => {
+      if (decoFrom === range.widgetFrom && decoTo === range.widgetTo) {
+        isWidget = true;
+        return false;
+      }
+      return undefined;
+    });
+    if (isWidget) return range;
+  }
+  return null;
+};
+
+const navigateLine = (view: EditorView, stateField: StateField<DataBlocksState>, dir: -1 | 1, extend: boolean): boolean => {
+  const dataState = view.state.field(stateField, false);
+  if (!dataState || dataState.ranges.length === 0) return false;
+
+  const sel = view.state.selection.main;
+  const head = sel.head;
+  const caretLine = view.state.doc.lineAt(head);
+  const caretCol = head - caretLine.from;
+
+  let targetLineNumber = caretLine.number + dir;
+  while (targetLineNumber >= 1 && targetLineNumber <= view.state.doc.lines) {
+    const line = view.state.doc.line(targetLineNumber);
+    const inside = isLineInBlockWidget(dataState, line.from, line.to);
+    if (!inside) break;
+    const widgetStartLine = view.state.doc.lineAt(inside.widgetFrom).number;
+    const widgetEndLine = view.state.doc.lineAt(inside.widgetTo).number;
+    targetLineNumber = dir < 0 ? widgetStartLine - 1 : widgetEndLine + 1;
+  }
+
+  if (targetLineNumber < 1) {
+    view.dispatch({
+      selection: extend ? { anchor: sel.anchor, head: 0 } : { anchor: 0 },
+      scrollIntoView: true,
+      userEvent: "select",
+    });
+    return true;
+  }
+
+  if (targetLineNumber > view.state.doc.lines) {
+    const target = view.state.doc.length;
+    view.dispatch({
+      selection: extend ? { anchor: sel.anchor, head: target } : { anchor: target },
+      scrollIntoView: true,
+      userEvent: "select",
+    });
+    return true;
+  }
+
+  const targetLine = view.state.doc.line(targetLineNumber);
+  const target = targetLine.from + Math.min(caretCol, targetLine.length);
+  view.dispatch({
+    selection: extend ? { anchor: sel.anchor, head: target } : { anchor: target },
+    scrollIntoView: true,
+    userEvent: "select",
+  });
+  return true;
+};

package/src/markdown/editor-scope.ts

@@ -0,0 +1,92 @@
+/**
+ * Shared scope helpers for completion sources.
+ *
+ * All sources that need to know "is the cursor inside a fenced code
+ * block?" go through here. Without this helper, each source would
+ * walk the syntax tree independently — multiplied across the 3-4
+ * completion sources that share this question, that's a lot of
+ * redundant work per keystroke.
+ *
+ * Cache strategy: keyed on the immutable `EditorState` object and
+ * the cursor position. CM6 gives us a fresh `EditorState` per
+ * transaction, so the WeakMap entry naturally lives only as long
+ * as the state is reachable — no manual eviction needed. Multiple
+ * sources running in the same transaction (= same state) hit the
+ * cache; the first one pays for the syntax-tree walk, the rest are
+ * O(1).
+ */
+import type { CompletionContext } from "@codemirror/autocomplete";
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
+
+type CacheEntry = {
+  /** Cursor position the cached answer is valid at. Different
+   *  positions within the same state can resolve to different
+   *  nodes (e.g. one on the opening fence line, one in the body),
+   *  so we key by both. */
+  pos: number;
+  /** True iff cursor is inside any FencedCode node. */
+  insideFence: boolean;
+  /** True iff cursor is inside the BODY (or closing line) of a
+   *  FencedCode — i.e. anywhere in the fence range EXCEPT the
+   *  opening line. Used by the code-fence-snippets picker, which
+   *  should fire ON the opening line (that IS the trigger position)
+   *  but stay silent inside the body or on the closing line. */
+  insideFenceBody: boolean;
+};
+
+const cache = new WeakMap<EditorState, CacheEntry>();
+
+const computeEntry = (context: CompletionContext): CacheEntry => {
+  const tree = syntaxTree(context.state);
+  let node = tree.resolveInner(context.pos, -1);
+  let fenceNode: typeof node | null = null;
+  while (node) {
+    if (node.name === "FencedCode" || node.name === "CodeBlock") {
+      fenceNode = node;
+      break;
+    }
+    if (!node.parent) break;
+    node = node.parent;
+  }
+  if (!fenceNode) return { pos: context.pos, insideFence: false, insideFenceBody: false };
+  // "Body" check: skip when the cursor line is the FENCE OPENING
+  // line. Compute by lineAt — fenceNode.from is the position of the
+  // opening backticks/tildes, so the line at that position is the
+  // opener.
+  const cursorLine = context.state.doc.lineAt(context.pos);
+  const openerLine = context.state.doc.lineAt(fenceNode.from);
+  return {
+    pos: context.pos,
+    insideFence: true,
+    insideFenceBody: cursorLine.from !== openerLine.from,
+  };
+};
+
+const getEntry = (context: CompletionContext): CacheEntry => {
+  const cached = cache.get(context.state);
+  if (cached && cached.pos === context.pos) return cached;
+  const entry = computeEntry(context);
+  cache.set(context.state, entry);
+  return entry;
+};
+
+/**
+ * True when the cursor is inside any FencedCode / CodeBlock node.
+ *
+ * Used by notice-card + tag sources — they're literal-text inside a
+ * code fence and shouldn't surface suggestions there.
+ */
+export const isInsideFencedCode = (context: CompletionContext): boolean => getEntry(context).insideFence;
+
+/**
+ * True when the cursor is inside the BODY (not the opener line) of
+ * a FencedCode. Used by the code-fence-snippets picker: typing
+ * ` ``` ` on the OPENER should surface the language list, but typing
+ * ` ``` ` on the CLOSING line shouldn't (the user is closing an
+ * existing fence, not starting a new one).
+ *
+ * Returns false when the cursor is not inside any fence (i.e. plain
+ * markdown context).
+ */
+export const isInsideFencedCodeBody = (context: CompletionContext): boolean => getEntry(context).insideFenceBody;

package/src/markdown/fade-scroll-margins.browser-harness.ts

@@ -0,0 +1,78 @@
+import { defaultKeymap } from "@codemirror/commands";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { ScrollArea } from "@k2b/ui";
+import { createComponent, render } from "solid-js/web";
+import { fadeScrollMarginsExtension, fadeScrollPadding } from "./fade-scroll-margins";
+import { noteScroller } from "./note-scroller";
+
+// The note editor's arrangement: CodeMirror grows inside a fading ScrollArea.
+// The test overrides the fade size to a fake overlay height.
+const params = new URLSearchParams(location.search);
+const fade = params.get("fade") ?? "48px";
+const margins = params.get("margins") !== "off";
+
+let port: HTMLDivElement | undefined;
+const host = document.createElement("div");
+const root = document.getElementById("root")!;
+render(
+  () =>
+    createComponent(ScrollArea, {
+      ref: (element: HTMLDivElement) => {
+        port = element;
+      },
+      style: { height: "320px", "--scroll-fade-size": fade, "scroll-padding-block": fadeScrollPadding },
+      children: host,
+    }),
+  root,
+);
+
+const doc = Array.from({ length: 60 }, (_, index) => `Line ${index + 1} of the demo note`).join("\n");
+const view = new EditorView({
+  parent: host,
+  state: EditorState.create({
+    doc,
+    extensions: [margins ? fadeScrollMarginsExtension(() => port) : [], keymap.of(defaultKeymap), noteScroller],
+  }),
+});
+
+/** Where the cursor line sits relative to the fades that are drawn right now. */
+const cursor = () => {
+  const head = view.state.selection.main.head;
+  const coords = view.coordsAtPos(head)!;
+  const rect = port!.getBoundingClientRect();
+  const edges = port!.getAttribute("data-scroll-fade") ?? "";
+  const style = getComputedStyle(port!);
+  return {
+    clearBelow: rect.bottom - coords.bottom,
+    clearAbove: coords.top - rect.top,
+    bottomFade: edges === "bottom" || edges === "both" ? Number.parseFloat(style.getPropertyValue("--scroll-fade-bottom")) : 0,
+    topFade: edges === "top" || edges === "both" ? Number.parseFloat(style.getPropertyValue("--scroll-fade-top")) : 0,
+    scrollTop: port!.scrollTop,
+    maxScrollTop: port!.scrollHeight - port!.clientHeight,
+  };
+};
+
+/** Puts the cursor at the end of the last line that is fully visible above the bottom fade. */
+const placeAtVisibleBottom = () => {
+  const rect = port!.getBoundingClientRect();
+  const pos = view.posAtCoords({ x: rect.left + 40, y: rect.bottom - Number.parseFloat(fade) - 24 })!;
+  const line = view.state.doc.lineAt(pos);
+  view.dispatch({ selection: { anchor: line.to } });
+  view.focus();
+};
+
+const placeAtEnd = () => {
+  view.dispatch({ selection: { anchor: view.state.doc.length }, scrollIntoView: true });
+  view.focus();
+};
+
+const paste = (text: string) => {
+  const data = new DataTransfer();
+  data.setData("text/plain", text);
+  view.contentDOM.dispatchEvent(new ClipboardEvent("paste", { clipboardData: data, bubbles: true, cancelable: true }));
+};
+
+const settle = () => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+
+Object.assign(window, { harness: { cursor, placeAtVisibleBottom, placeAtEnd, paste, settle } });

package/src/markdown/fade-scroll-margins.ts

@@ -0,0 +1,25 @@
+import { EditorView } from "@codemirror/view";
+import { measureScrollFade } from "@k2b/ui";
+
+/**
+ * The note editor grows inside a `ScrollArea`, whose fades cover its top and
+ * bottom edge while more content remains there. Declared as `scroll-padding`,
+ * the browser resolves the fade to pixels on the actual element.
+ */
+export const fadeScrollPadding = "var(--scroll-fade-top, 0px) var(--scroll-fade-bottom, 0px)";
+
+/**
+ * CodeMirror scrolls the cursor into view itself and ignores CSS
+ * `scroll-padding`, so typing, Enter, paste, and arrow keys would leave the
+ * cursor line under the fade. This passes the scroll container's padding on as
+ * CodeMirror scroll margins; pointer scrolling is unaffected.
+ */
+export const fadeScrollMarginsExtension = (container: () => HTMLElement | undefined) =>
+  EditorView.scrollMargins.of(() => {
+    const element = container();
+    if (!element) return null;
+    // The scroll area updates its fades once per frame; CodeMirror measures in the same frame as the edit.
+    measureScrollFade(element);
+    const style = getComputedStyle(element);
+    return { top: Number.parseFloat(style.scrollPaddingTop) || 0, bottom: Number.parseFloat(style.scrollPaddingBottom) || 0 };
+  });

package/src/markdown/image-syntax.ts

@@ -0,0 +1,26 @@
+import type { MarkdownConfig } from "@lezer/markdown";
+import { parseSizedMarkdownImage } from "./lib/markdown-image";
+
+export const sizedImageSyntax: MarkdownConfig = {
+  parseInline: [
+    {
+      name: "SizedImage",
+      before: "Image",
+      parse(cx, next, pos) {
+        if (next !== 33 || cx.char(pos + 1) !== 91) return -1;
+        const image = parseSizedMarkdownImage(cx.slice(pos, cx.end));
+        if (!image) return -1;
+        const { length, hrefFrom, hrefTo, titleFrom, titleTo } = image;
+        const children = [
+          cx.elt("LinkMark", pos, pos + 2),
+          cx.elt("LinkMark", pos + hrefFrom - 2, pos + hrefFrom - 1),
+          cx.elt("LinkMark", pos + hrefFrom - 1, pos + hrefFrom),
+          cx.elt("URL", pos + hrefFrom, pos + hrefTo),
+        ];
+        if (titleFrom !== null && titleTo !== null) children.push(cx.elt("LinkTitle", pos + titleFrom, pos + titleTo));
+        children.push(cx.elt("LinkMark", pos + length - 1, pos + length));
+        return cx.addElement(cx.elt("Image", pos, pos + length, children));
+      },
+    },
+  ],
+};