@k2b/editor 0.0.0-stage → 0.1.0

package/src/markdown/images.ts

@@ -0,0 +1,192 @@
+import { syntaxTree } from "@codemirror/language";
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import { RangeSet } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import {
+  blockWidgetLineNavigationExtension,
+  type CursorZoneState,
+  cursorZoneStateField,
+  selectionIntersectsRange,
+} from "./_lib/cursor-zone-field";
+import { parseSizedMarkdownImage } from "./lib/markdown-image";
+import { isSafeMarkdownUrl, type MarkdownUrlOptions } from "./urls";
+
+class ImageWidget extends WidgetType {
+  constructor(
+    private url: string,
+    private alt: string,
+    private width: string | null,
+    private height: string | null,
+    private title: string | null,
+    private options: MarkdownUrlOptions,
+  ) {
+    super();
+  }
+
+  override toDOM() {
+    const container = document.createElement("div");
+    container.className = "cm-image-widget cursor-pointer";
+    container.setAttribute("contenteditable", "false");
+    container.setAttribute("tabindex", "0");
+
+    if (this.options.foreignImagesAsLinks && new URL(this.url, window.location.href).origin !== window.location.origin) {
+      container.removeAttribute("tabindex");
+      const link = document.createElement("a");
+      link.href = this.url;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.className = "k2b-text-link";
+      link.textContent = this.alt || this.url;
+      container.append(link);
+      return container;
+    }
+
+    const figure = document.createElement("figure");
+    figure.className = "flex flex-col items-start max-w-full";
+
+    const img = document.createElement("img");
+    // Drop the `max-h-[400px]` cap when an explicit size is requested so
+    // the user's `=WxH` actually wins.
+    img.className =
+      this.width || this.height
+        ? "block rounded border border-gray-200 dark:border-gray-700"
+        : "block max-h-[400px] rounded border border-gray-200 dark:border-gray-700";
+    img.src = this.url;
+    img.alt = this.alt || "";
+    if (this.title !== null) img.title = this.title;
+    img.loading = "lazy";
+    // The suffix reserves the image's place before it loads: width and height give the aspect ratio, a width alone its
+    // width. The image never grows past the column; a height alone keeps the image's proportions inside that height.
+    img.style.maxWidth = "100%";
+    if (this.width) img.setAttribute("width", this.width);
+    if (this.height) img.setAttribute("height", this.height);
+    if (this.height && !this.width) {
+      img.style.height = `${this.height}px`;
+      img.style.objectFit = "contain";
+    } else {
+      img.style.height = "auto";
+    }
+
+    if (this.alt) {
+      const caption = document.createElement("figcaption");
+      caption.className = "text-sm text-gray-500 dark:text-gray-400 mt-2 italic";
+      caption.textContent = this.alt;
+      figure.appendChild(img);
+      figure.appendChild(caption);
+    } else {
+      figure.appendChild(img);
+    }
+
+    container.appendChild(figure);
+
+    // Click → an attachment opens in the lightbox, any other image keeps the
+    // download confirm. Stop propagation so CM doesn't reposition the cursor
+    // (consistent with the file-pill widget).
+    const open = () => {
+      if (this.options.openImage) this.options.openImage(img, this.url, this.alt);
+      else window.open(this.url, "_blank", "noopener,noreferrer");
+    };
+    container.onmousedown = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    container.onclick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      open();
+    };
+    container.onkeydown = (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      e.preventDefault();
+      e.stopPropagation();
+      open();
+    };
+
+    return container;
+  }
+
+  override eq(other: WidgetType) {
+    return (
+      other instanceof ImageWidget &&
+      other.url === this.url &&
+      other.alt === this.alt &&
+      other.width === this.width &&
+      other.height === this.height &&
+      other.title === this.title
+    );
+  }
+
+  override ignoreEvent(event: Event) {
+    return event.type !== "mousedown";
+  }
+}
+
+/** Source-byte ranges of every Image node (incl. the next-line
+ *  source-visible extension). Drives the cursor-zone rebuild gate. */
+const findMarkdownImages = (state: EditorState, options: MarkdownUrlOptions): CursorZoneState => {
+  const decorations: Range<Decoration>[] = [];
+  const atomicDecorations: Range<Decoration>[] = [];
+  const ranges: { from: number; to: number }[] = [];
+  const cursor = state.selection.main;
+
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (node.type.name !== "Image") return;
+
+      const prevLine = state.doc.lineAt(Math.max(node.from - 1, 0));
+      const nextLine = state.doc.lineAt(Math.min(node.to + 1, state.doc.length));
+      ranges.push({ from: prevLine.from, to: nextLine.to });
+      if (selectionIntersectsRange(cursor, prevLine.from, nextLine.to)) return false;
+
+      const text = state.sliceDoc(node.from, node.to);
+      const sized = parseSizedMarkdownImage(text);
+      const urlNode = node.node.getChild("URL");
+      if (!sized && !urlNode) return false;
+      const marks = node.node.getChildren("LinkMark");
+      const titleNode = node.node.getChild("LinkTitle");
+      const alt = sized ? sized.alt : state.sliceDoc(marks[0]!.to, marks[1]!.from);
+      const href = sized ? sized.href : state.sliceDoc(urlNode!.from, urlNode!.to);
+      const title = sized ? sized.title : titleNode ? state.sliceDoc(titleNode.from + 1, titleNode.to - 1) : null;
+      const width = sized?.width == null ? null : String(sized.width);
+      const height = sized?.height == null ? null : String(sized.height);
+      const resolvedUrl = options.resolveUrl?.("image", href) ?? href;
+      // Only script of this document can create a blob: URL, so a host may hand one over for a locally stored image;
+      // the same URL typed into the text stays source.
+      const hostBlob = resolvedUrl !== href && resolvedUrl.startsWith("blob:");
+      if (!hostBlob && !isSafeMarkdownUrl(resolvedUrl)) return false;
+      const imageDecoration = Decoration.replace({
+        widget: new ImageWidget(resolvedUrl, alt, width, height, title, options),
+        block: true,
+      }).range(node.from, node.to);
+      decorations.push(imageDecoration);
+      atomicDecorations.push(imageDecoration);
+    },
+  });
+
+  return {
+    decorations: decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none,
+    atomicDecorations: atomicDecorations.length > 0 ? RangeSet.of(atomicDecorations, true) : Decoration.none,
+    ranges,
+  };
+};
+
+export const imageExtension = (options: MarkdownUrlOptions = {}): Extension => {
+  const stateField = cursorZoneStateField((state) => findMarkdownImages(state, options));
+
+  const theme = EditorView.theme({
+    ".cm-image-widget": {
+      display: "block",
+      margin: "0 !important",
+      lineHeight: "1",
+    },
+    ".cm-image-widget:focus": {
+      outline: "2px solid var(--color-blue-500)",
+      outlineOffset: "2px",
+      borderRadius: "4px",
+    },
+  });
+
+  // No view-level mousedown handler needed — the widget container swallows
+  // its own clicks (preventDefault + stopPropagation in toDOM).
+  return [stateField, blockWidgetLineNavigationExtension(stateField, (value) => value.atomicDecorations), theme];
+};

package/src/markdown/index.ts

@@ -0,0 +1,54 @@
+export * from "./_lib/cursor-zone-field";
+export * from "./_lib/inline-syntax";
+export * from "./_lib/link-opener";
+export * from "./_lib/list-item-line";
+export * from "./_lib/list-structure";
+export * from "./_lib/math-syntax";
+export * from "./_lib/table-cell";
+export * from "./basic";
+export * from "./block-previews";
+export * from "./code-fence-snippets";
+export * from "./code-font";
+export * from "./completion-icon";
+export * from "./data-block-template";
+export * from "./data-blocks";
+export * from "./editor-scope";
+export * from "./fade-scroll-margins";
+export * from "./image-syntax";
+export * from "./images";
+export * from "./info-block-snippets";
+export * from "./info-blocks";
+export * from "./katex";
+export * from "./lib/heading-anchors";
+export * from "./lib/ligatures";
+export * from "./lib/markdown-context";
+export * from "./lib/markdown-fences";
+export * from "./lib/markdown-image";
+export * from "./lib/named-blocks";
+export * from "./lib/query-blocks";
+export * from "./ligatures";
+export * from "./links";
+export * from "./list-commands";
+export * from "./lists";
+export * from "./mark";
+export * from "./markdown";
+export * from "./markup";
+export * from "./mermaid";
+export * from "./mermaid-export";
+export * from "./mermaid-preview";
+export * from "./mermaid-render";
+export * from "./mermaid-viewport";
+export * from "./messages";
+export * from "./named-blocks";
+export * from "./note-scroller";
+export * from "./pretty-table";
+export * from "./search-theme";
+export * from "./shared-tables";
+export * from "./sub-sup";
+export * from "./surface-press";
+export * from "./tab-indent";
+export * from "./table-columns";
+export * from "./table-formulas";
+export * from "./tables";
+export * from "./theme";
+export * from "./urls";

package/src/markdown/info-block-snippets.ts

@@ -0,0 +1,159 @@
+/**
+ * Autocomplete für `:::TYPE` Info-Block-Direktiven.
+ *
+ * Trigger: line starts with three colons optionally followed by a
+ * partial type name (`:::`, `:::n`, `:::warn` …). Accepting a
+ * suggestion expands to the full block including the closing
+ * `:::` marker, with the cursor parked on the body line ready for
+ * content entry.
+ *
+ * Types match exactly what `info-blocks.ts` recognises in its
+ * `blockConfig` registry (note / info / success / warning / danger),
+ * with the SAME icon glyphs so the autocomplete option-list previews
+ * what the rendered block will look like.
+ *
+ * Scope: only in regular markdown context. We skip inside existing
+ * FencedCode blocks — typing `:::` in a code fence body is just
+ * literal text, not a directive.
+ */
+import {
+  type Completion,
+  type CompletionContext,
+  type CompletionResult,
+  pickedCompletion,
+  snippetCompletion,
+} from "@codemirror/autocomplete";
+import type { EditorView } from "@codemirror/view";
+import { i18n } from "@k2b/stdlib";
+import { withIcon } from "./completion-icon";
+import { buildDataBlockTemplate, dataBlockRefSelection } from "./data-block-template";
+import { isInsideFencedCode } from "./editor-scope";
+
+type BlockEntry = {
+  /** The directive name as it appears after the `:::`. */
+  name: string;
+  /** Short label shown in the option detail. */
+  detail: string;
+  /** Tabler icon class — mirrors `info-blocks.ts` blockConfig so the
+   *  picker preview matches the rendered widget. */
+  icon: string;
+  /** Data blocks need to insert an `@ref` handle before the directive. */
+  kind?: "callout" | "data";
+};
+
+/** Source of truth: keep in sync with the `blockConfig` map in
+ *  `info-blocks.ts`. We don't import it here to avoid a circular
+ *  module dependency (info-blocks imports from `@codemirror/state`
+ *  + `@codemirror/view`, nothing else heavy, so it'd technically be
+ *  fine — but keeping the registry duplicated and tiny is easier to
+ *  read than threading types through). */
+const BLOCKS: BlockEntry[] = [
+  { name: "note", detail: "Note callout", icon: "ti-chevron-right" },
+  { name: "info", detail: "Info callout", icon: "ti-info-circle" },
+  { name: "success", detail: "Success callout", icon: "ti-check" },
+  { name: "warning", detail: "Warning callout", icon: "ti-alert-circle" },
+  { name: "danger", detail: "Danger callout", icon: "ti-alert-hexagon" },
+  { name: "data", detail: "Referenceable data block", icon: "ti-database", kind: "data" },
+  { name: "chart", detail: "Chart from a table or list", icon: "ti-chart-bar" },
+  { name: "query", detail: "Filtered note list or table", icon: "ti-filter" },
+  { name: "toc", detail: "Table of contents", icon: "ti-list-details" },
+];
+
+const blockHelp = i18n.define({
+  baseLocale: "en",
+  messages: {
+    en: {
+      note: "Note callout",
+      info: "Info callout",
+      success: "Success callout",
+      warning: "Warning callout",
+      danger: "Danger callout",
+      data: "Referenceable data block",
+      chart: "Chart from a table or list",
+      query: "Filtered note list or table",
+      toc: "Table of contents",
+    },
+    de: {
+      note: "Hinweisblock",
+      info: "Informationsblock",
+      success: "Erfolgsblock",
+      warning: "Warnungsblock",
+      danger: "Gefahrenhinweis",
+      data: "Referenzierbarer Datenblock",
+      chart: "Diagramm aus einer Tabelle oder Liste",
+      query: "Gefilterte Notizliste oder Tabelle",
+      toc: "Inhaltsverzeichnis",
+    },
+  },
+});
+
+/** Snippet template. Does NOT include the leading `:::` because
+ *  the `from` position in the CompletionResult below is anchored
+ *  AFTER the `:::` the user already typed — CM's prefix-filter
+ *  matches the typed name fragment against `label` (e.g. "note"),
+ *  and on acceptance only the text between `from` and the cursor
+ *  is replaced. So we only need to emit the type name + body + the
+ *  closing fence here; the user's typed `:::` stays in place.
+ *  `${0}` parks the final cursor on the empty body line. */
+export const buildInfoBlockSnippet = (name: string): string =>
+  name === "chart"
+    ? "chart\ntype: bar\ntitle: Values\ncolumns: [Label, Value]\nrows:\n  - [Jan, 12]\n  - [Feb, 18]\nx: Label\ny: Value\n${0}\n:::"
+    : `${name}\n${name === "query" ? "source: notes\n" : ""}\${0}\n:::`;
+
+const COMPLETIONS: Completion[] = BLOCKS.map((b) => {
+  if (b.kind === "data") {
+    const c: Completion = {
+      label: b.name,
+      type: "keyword",
+      detail: b.detail,
+      apply: (view: EditorView, _completion: Completion, from: number, to: number) => {
+        const directiveStart = from - 3;
+        const insert = buildDataBlockTemplate();
+        view.dispatch({
+          changes: { from: directiveStart, to, insert },
+          selection: dataBlockRefSelection(directiveStart),
+          annotations: pickedCompletion.of(_completion),
+          userEvent: "input.complete",
+        });
+        view.focus();
+      },
+    };
+    withIcon(c, b.icon);
+    return c;
+  }
+
+  const c = snippetCompletion(buildInfoBlockSnippet(b.name), {
+    label: b.name,
+    type: "keyword",
+    detail: b.detail,
+  });
+  withIcon(c, b.icon);
+  return c;
+});
+
+/**
+ * Completion source. Wire into `autocompletion({override: […]})`.
+ */
+export const infoBlockCompletionSource = (context: CompletionContext): CompletionResult | null => {
+  const word = context.matchBefore(/^:::\w*/);
+  if (!word) return null;
+  const line = context.state.doc.lineAt(context.pos);
+  if (word.from !== line.from) return null;
+  if (isInsideFencedCode(context)) return null;
+  // CRITICAL: anchor `from` AFTER the typed `:::` so CM's prefix
+  // filter compares the user's partial type name (e.g. "su") to the
+  // option labels ("success"). If we anchored at the line start the
+  // typed text would include `:::` which doesn't prefix-match any
+  // option label, and CM would silently drop the entire option list
+  // → empty popup → looks broken.
+  const t = blockHelp.resolve(typeof document === "undefined" ? ["en"] : [document.documentElement.lang || "en"]).t;
+  return {
+    from: word.from + 3,
+    to: word.to,
+    options: COMPLETIONS.map((completion) => ({
+      ...completion,
+      detail: t[completion.label as keyof typeof t],
+    })),
+    validFor: /^\w*$/,
+  };
+};

package/src/markdown/info-blocks.ts

@@ -0,0 +1,156 @@
+import type { EditorState, Extension, Range } from "@codemirror/state";
+import { RangeSet } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+import { type MarkdownInfoBlockType, NOTICE_CARD_CLASSES, renderMarkdownInfoBlock, scanMarkdownInfoBlock } from "@k2b/ui";
+import {
+  blockWidgetLineNavigationExtension,
+  type CursorZoneState,
+  cursorZoneStateField,
+  selectionIntersectsRange,
+} from "./_lib/cursor-zone-field";
+import { literalMarkdownLines, NOTEBOOK_DIRECTIVE_START } from "./lib/markdown-context";
+import { applyLigatures } from "./ligatures";
+
+type InfoBlockData = {
+  type: MarkdownInfoBlockType;
+  title?: string;
+  content: string;
+};
+
+const escapeHtml = (value: string): string => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+const renderContent = (content: string): string => {
+  const codeSpans: string[] = [];
+  return escapeHtml(content)
+    .replace(/`([^`]+)`/g, (_match, body: string) => {
+      const index = codeSpans.push(`<code class="bg-black/10 dark:bg-white/10 px-1 py-0.5 rounded text-sm">${body}</code>`) - 1;
+      return `\u0000CODE${index}\u0000`;
+    })
+    .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+    .replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, "<em>$1</em>")
+    .replace(/\n/g, "<br>")
+    .replace(/\u0000CODE(\d+)\u0000/g, (_match, index: string) => codeSpans[Number(index)] ?? "");
+};
+
+class InfoBlockWidget extends WidgetType {
+  constructor(
+    private blockData: InfoBlockData,
+    private fromPos: number,
+    private locale: string,
+  ) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const container = document.createElement("div");
+    container.className = "cm-notice-card-widget cursor-pointer";
+    container.setAttribute("contenteditable", "false");
+    container.setAttribute("tabindex", "0");
+    container.onmousedown = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      view.dispatch({ selection: { anchor: this.fromPos }, scrollIntoView: true });
+      view.focus();
+    };
+    container.ondblclick = (event) => {
+      event.stopPropagation();
+    };
+
+    // The shared callout with its type icon and tone colour, as in Book; the editor preview renders inline formatting only.
+    container.innerHTML = renderMarkdownInfoBlock({
+      type: this.blockData.type,
+      title: this.blockData.title,
+      bodyHtml: renderContent(this.blockData.content),
+      locale: this.locale,
+    });
+    const body = container.querySelector<HTMLElement>(`.${NOTICE_CARD_CLASSES.body}`);
+    if (body) applyLigatures(body);
+    return container;
+  }
+
+  override eq(other: WidgetType) {
+    return (
+      other instanceof InfoBlockWidget &&
+      other.fromPos === this.fromPos &&
+      other.locale === this.locale &&
+      other.blockData.type === this.blockData.type &&
+      other.blockData.title === this.blockData.title &&
+      other.blockData.content === this.blockData.content
+    );
+  }
+
+  override ignoreEvent() {
+    return true;
+  }
+
+  override get estimatedHeight() {
+    // At 16px / 26px, count each title and unwrapped body line, plus 32px padding, 2px border and a 4px title gap.
+    // The icon sits beside the text and adds no height. A wrapped line measures taller; CodeMirror corrects the height once the notice renders.
+    const lines = this.blockData.content.split("\n").length + (this.blockData.title ? 1 : 0);
+    return lines * 26 + 34 + (this.blockData.title ? 4 : 0);
+  }
+}
+
+/** Finds notices with the same block scanner as the book view, so every
+ *  directive ends at its own `:::` and code or list content stays source. */
+const findInfoBlocks = (state: EditorState, locale: string): CursorZoneState => {
+  const decorations: Range<Decoration>[] = [];
+  const ranges: { from: number; to: number }[] = [];
+  const cursor = state.selection.main;
+  const text = state.doc.toString();
+  if (!text.includes(":::")) return { decorations: Decoration.none, atomicDecorations: Decoration.none, ranges };
+  const literal = literalMarkdownLines(text);
+
+  for (let number = 1; number <= state.doc.lines; number++) {
+    const opener = state.doc.line(number);
+    if (!NOTEBOOK_DIRECTIVE_START.test(opener.text) || literal.has(number - 1)) continue;
+    const notice = scanMarkdownInfoBlock(text.slice(opener.from));
+    if (!notice?.closed) continue;
+    const blockLines = text
+      .slice(opener.from, opener.from + notice.length)
+      .replace(/\n$/, "")
+      .split("\n");
+    const blockStart = opener.from;
+    const blockEnd = state.doc.line(number + blockLines.length - 1).to;
+    const sourceVisibleStart = state.doc.lineAt(Math.max(blockStart - 1, 0)).from;
+    const sourceVisibleEnd = state.doc.lineAt(Math.min(blockEnd + 1, state.doc.length)).to;
+    ranges.push({ from: sourceVisibleStart, to: sourceVisibleEnd });
+
+    // Cursor is inside the block → don't render the widget so the user
+    // can edit the raw `:::xxx` markers.
+    if (selectionIntersectsRange(cursor, sourceVisibleStart, sourceVisibleEnd)) continue;
+
+    const blockData = { type: notice.type, title: notice.title, content: notice.body.trim() };
+    decorations.push(
+      Decoration.replace({
+        widget: new InfoBlockWidget(blockData, blockStart, locale),
+        block: true,
+      }).range(blockStart, blockEnd),
+    );
+  }
+
+  const set = decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none;
+  return { decorations: set, atomicDecorations: set, ranges };
+};
+
+/** `locale` names an untitled notice's type for screen readers; sighted readers see its type icon and tone tint. */
+export const infoBlocksExtension = (locale: string): Extension => {
+  // Container context anywhere above a notice decides whether it renders, so
+  // every document change rescans, like the query and table-of-contents blocks.
+  const stateField = cursorZoneStateField((state) => findInfoBlocks(state, locale));
+
+  const theme = EditorView.theme({
+    ".cm-notice-card-widget": {
+      display: "block",
+      margin: "0 !important",
+      lineHeight: "1",
+    },
+    // Notices read at the note's text size, as in the Book.
+    ".cm-notice-card-widget .k2b-notice-card": {
+      fontSize: "inherit",
+      lineHeight: "1.625",
+    },
+  });
+
+  return [stateField, blockWidgetLineNavigationExtension(stateField, (value) => value.atomicDecorations), theme];
+};