@k2b/editor 0.0.0 → 0.1.0

package/src/markdown/lib/query-blocks.ts

@@ -0,0 +1,145 @@
+import { literalMarkdownLines } from "./markdown-context";
+
+export type Directive = {
+  type: "query" | "toc" | "chart" | "map";
+  body: string[];
+  line: number;
+  closed: boolean;
+  from: number;
+  to: number;
+};
+
+export const directives = (md: string): Directive[] => {
+  if (!/:::(?:query|toc|chart|map)\b/.test(md)) return [];
+  const lines = md.split("\n");
+  const literalLines = literalMarkdownLines(md);
+  const offsets: number[] = [];
+  let offset = 0;
+  for (const text of lines) {
+    offsets.push(offset);
+    offset += text.length + 1;
+  }
+  const found: Directive[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    if (literalLines.has(i)) continue;
+    const text = lines[i]!;
+    const opener = text.match(/^ {0,3}:::(query|toc|chart|map)[ \t]*\r?$/);
+    if (!opener?.[1]) continue;
+    const line = i + 1;
+    const body: string[] = [];
+    let closed = false;
+    for (i = i + 1; i < lines.length; i++) {
+      if (/^ {0,3}:::[ \t]*\r?$/.test(lines[i]!)) {
+        closed = true;
+        break;
+      }
+      // Keep raw offsets above; normalize only the body consumed by the DSL.
+      body.push(lines[i]!.replace(/\r$/, ""));
+    }
+    found.push({
+      type: opener[1] as Directive["type"],
+      body,
+      line,
+      closed,
+      from: offsets[line - 1]!,
+      to: closed ? offsets[i]! + lines[i]!.length : md.length,
+    });
+  }
+  return found;
+};
+
+/** Source geometry only; query validation and result rendering stay server-owned. */
+export const extractNotebookDirectiveRanges = (md: string): Array<Pick<Directive, "type" | "line" | "from" | "to" | "closed">> =>
+  directives(md).map(({ type, line, from, to, closed }) => ({ type, line, from, to, closed }));
+
+export const DIRECTIVE_MAX_STRING_LENGTH = 2_000;
+export type DirectiveScalar = string | number | boolean;
+export type DirectiveValue = DirectiveScalar | DirectiveScalar[];
+
+export type NotebookBlockDiagnosticCode =
+  | "duplicate-key"
+  | "invalid-field"
+  | "invalid-type"
+  | "missing-key"
+  | "missing-value"
+  | "too-many-items"
+  | "unexpected-line"
+  | "unknown-key"
+  | "unclosed-block"
+  | "unknown-block"
+  | "invalid-source"
+  | "duplicate-block"
+  | "unknown-column"
+  | "not-a-number"
+  | "chart-x-type"
+  | "chart-one-series"
+  | "chart-unsupported";
+
+export type NotebookBlockDiagnostic = {
+  code: NotebookBlockDiagnosticCode;
+  line: number;
+  path: string;
+  params?: { name?: string; row?: number; limit?: number };
+};
+
+export const parseScalar = (raw: string): DirectiveScalar | null => {
+  const value = raw.trim();
+  if (!value) return null;
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (/^-?(?:0|[1-9]\d*)(?:\.\d+)?$/.test(value)) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  if (value.startsWith('"')) {
+    try {
+      const parsed: unknown = JSON.parse(value);
+      return typeof parsed === "string" && parsed.length <= DIRECTIVE_MAX_STRING_LENGTH ? parsed : null;
+    } catch {
+      return null;
+    }
+  }
+  if (value.startsWith("'")) {
+    if (!/^'(?:[^']|'')*'$/.test(value)) return null;
+    const parsed = value.slice(1, -1).replace(/''/g, "'");
+    return parsed.length <= DIRECTIVE_MAX_STRING_LENGTH ? parsed : null;
+  }
+  if (/^[\[\]{}&*!|>@`]/.test(value)) return null;
+  return value.length <= DIRECTIVE_MAX_STRING_LENGTH ? value : null;
+};
+
+export const splitInlineList = (raw: string): string[] | null => {
+  const value = raw.trim();
+  if (!value.startsWith("[") || !value.endsWith("]")) return null;
+  const inner = value.slice(1, -1).trim();
+  if (!inner) return [];
+  const items: string[] = [];
+  let quote: "'" | '"' | null = null;
+  let start = 0;
+  for (let i = 0; i < inner.length; i++) {
+    const char = inner[i]!;
+    if (quote === '"' && char === "\\") {
+      i++;
+    } else if (quote && char === quote) {
+      if (quote === "'" && inner[i + 1] === "'") i++;
+      else quote = null;
+    } else if (!quote && (char === "'" || char === '"') && !inner.slice(start, i).trim()) {
+      quote = char;
+    } else if (char === "," && !quote) {
+      items.push(inner.slice(start, i));
+      start = i + 1;
+    }
+  }
+  if (quote) return null;
+  items.push(inner.slice(start));
+  return items;
+};
+
+export const parseValue = (raw: string): DirectiveValue | null => {
+  const list = splitInlineList(raw);
+  if (list) {
+    const values = list.map(parseScalar);
+    return values.every((value): value is DirectiveScalar => value !== null) ? values : null;
+  }
+  return parseScalar(raw);
+};

package/src/markdown/ligatures.ts

@@ -0,0 +1,223 @@
+/**
+ * Display ligatures for the rich editor: `->` shows as `→`, `!=` as `≠` and
+ * so on (see `lib/ligatures.ts`). The document text never changes. A
+ * sequence shows its typed characters again while the selection touches it,
+ * the same way hidden Markdown marks reappear.
+ *
+ * Only visible ranges are scanned. The Markdown syntax tree decides what is
+ * prose; code, HTML, URLs, links, marks and table rules are skipped. Notebook
+ * syntax that the tree does not model (math, data, query and TOC blocks, YAML
+ * front matter) is resolved once per document version, and only when a
+ * visible candidate needs it.
+ */
+import { syntaxTree } from "@codemirror/language";
+import { type Text as DocText, type EditorSelection, type Extension, Prec, type Range } from "@codemirror/state";
+import { Decoration, type DecorationSet, type EditorView, ViewPlugin, type ViewUpdate, WidgetType } from "@codemirror/view";
+import { holdsDecorations, pointerSelectionHeld, refreshMarkdownDecorationsEffect } from "./_lib/cursor-zone-field";
+import type { MarkdownRangeOptions } from "./_lib/list-structure";
+import { blockMathPattern, inlineMathPattern } from "./_lib/math-syntax";
+import { findLigatures, frontMatterLength, type LigatureMatch } from "./lib/ligatures";
+
+type Span = { from: number; to: number };
+
+/** Syntax-tree nodes whose text is never prose. Children are not visited. */
+const EXCLUDED_NODES = new Set([
+  "FencedCode",
+  "CodeBlock",
+  "InlineCode",
+  "HTMLBlock",
+  "HTMLTag",
+  "Comment",
+  "CommentBlock",
+  "ProcessingInstruction",
+  "ProcessingInstructionBlock",
+  "URL",
+  "Autolink",
+  "Link",
+  "Image",
+  "LinkReference",
+  "Escape",
+  "HorizontalRule",
+  "TableDelimiter",
+  "HeaderMark",
+  "QuoteMark",
+  "ListMark",
+  "EmphasisMark",
+  "StrikethroughMark",
+  "TaskMarker",
+]);
+
+const overlaps = (spans: readonly Span[], from: number, to: number): boolean => spans.some((span) => from < span.to && to > span.from);
+
+/** Math, data, query and TOC blocks and front matter: whole-document syntax, cached per document version. */
+const notebookSyntax = (doc: DocText, options: MarkdownRangeOptions, cache: WeakMap<DocText, Span[]>): Span[] => {
+  const cached = cache.get(doc);
+  if (cached) return cached;
+  const markdown = doc.toString();
+  const spans: Span[] = [];
+  const frontMatter = frontMatterLength(markdown);
+  if (frontMatter) spans.push({ from: 0, to: frontMatter });
+  if (markdown.includes("$") || markdown.includes("\\")) {
+    for (const pattern of [blockMathPattern(), inlineMathPattern()]) {
+      for (const match of markdown.matchAll(pattern)) spans.push({ from: match.index, to: match.index + match[0].length });
+    }
+  }
+  spans.push(...(options.excludedRanges?.(markdown) ?? []));
+  cache.set(doc, spans);
+  return spans;
+};
+
+/** Ligature candidates in the visible prose. */
+const findVisibleLigatures = (view: EditorView, options: MarkdownRangeOptions, cache: WeakMap<DocText, Span[]>): LigatureMatch[] => {
+  const { state } = view;
+  const matches: LigatureMatch[] = [];
+  for (const visible of view.visibleRanges) {
+    const excluded: Span[] = [];
+    syntaxTree(state).iterate({
+      from: visible.from,
+      to: visible.to,
+      enter: (node) => {
+        if (!EXCLUDED_NODES.has(node.name)) return;
+        excluded.push({ from: node.from, to: node.to });
+        return false;
+      },
+    });
+    for (let position = visible.from; position <= visible.to; ) {
+      const line = state.doc.lineAt(position);
+      const from = Math.max(line.from, visible.from) - line.from;
+      const to = Math.min(line.to, visible.to) - line.from;
+      for (const match of findLigatures(line.text, from, to)) {
+        const found = { ...match, from: match.from + line.from, to: match.to + line.from };
+        if (!overlaps(excluded, found.from, found.to)) matches.push(found);
+      }
+      position = line.to + 1;
+    }
+  }
+  if (matches.length === 0) return matches;
+  const notebook = notebookSyntax(state.doc, options, cache);
+  return matches.filter((match) => !overlaps(notebook, match.from, match.to));
+};
+
+/** Same rule as hidden Markdown marks: a selection that touches the sequence reveals it. */
+const touched = (selection: EditorSelection, match: LigatureMatch): boolean =>
+  selection.ranges.some((range) => range.from <= match.to && range.to >= match.from);
+
+const touchedKey = (selection: EditorSelection, matches: readonly LigatureMatch[]): string =>
+  matches.flatMap((match, index) => (touched(selection, match) ? [index] : [])).join(",");
+
+class LigatureWidget extends WidgetType {
+  constructor(private readonly symbol: string) {
+    super();
+  }
+
+  override eq(other: WidgetType) {
+    return other instanceof LigatureWidget && other.symbol === this.symbol;
+  }
+
+  override toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-ligature";
+    span.textContent = this.symbol;
+    return span;
+  }
+
+  /** Let the editor place the cursor on click, which then reveals the typed characters. */
+  override ignoreEvent() {
+    return false;
+  }
+}
+
+const widgets = new Map<string, Decoration>();
+const ligatureDecoration = (symbol: string): Decoration => {
+  let decoration = widgets.get(symbol);
+  if (!decoration) {
+    decoration = Decoration.replace({ widget: new LigatureWidget(symbol) });
+    widgets.set(symbol, decoration);
+  }
+  return decoration;
+};
+
+const decorate = (selection: EditorSelection, matches: readonly LigatureMatch[]): DecorationSet => {
+  const ranges: Range<Decoration>[] = [];
+  for (const match of matches) {
+    if (!touched(selection, match)) ranges.push(ligatureDecoration(match.symbol).range(match.from, match.to));
+  }
+  return Decoration.set(ranges, true);
+};
+
+/** Highest precedence: only marks of lower precedence, such as syntax highlighting, wrap a replaced widget, so the symbol keeps heading and emphasis styling. */
+export const ligaturesExtension = (options: MarkdownRangeOptions = {}): Extension => {
+  const cache = new WeakMap<DocText, Span[]>();
+  return Prec.highest(
+    ViewPlugin.fromClass(
+      class {
+        matches: LigatureMatch[];
+        selection: EditorSelection;
+        key: string;
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.matches = findVisibleLigatures(view, options, cache);
+          this.selection = view.state.selection;
+          this.key = touchedKey(this.selection, this.matches);
+          this.decorations = decorate(this.selection, this.matches);
+        }
+
+        update(update: ViewUpdate) {
+          const refresh = update.transactions.some((tr) => tr.effects.some((effect) => effect.is(refreshMarkdownDecorationsEffect)));
+          // While the button is down only pointer selections wait for the release; scrolling and edits keep the press-time selection.
+          const held =
+            update.state.field(pointerSelectionHeld, false) === true &&
+            !refresh &&
+            update.transactions.every((tr) => !tr.selection || holdsDecorations(tr));
+          if (held) {
+            if (update.docChanged) this.selection = this.selection.map(update.changes);
+          } else {
+            this.selection = update.state.selection;
+          }
+          const rescan =
+            update.docChanged || update.viewportChanged || syntaxTree(update.startState) !== syntaxTree(update.state) || refresh;
+          if (rescan) this.matches = findVisibleLigatures(update.view, options, cache);
+          else if (!update.selectionSet || update.transactions.every(holdsDecorations)) return;
+          const key = touchedKey(this.selection, this.matches);
+          if (!rescan && key === this.key) return;
+          this.key = key;
+          this.decorations = decorate(this.selection, this.matches);
+        }
+      },
+      { decorations: (plugin) => plugin.decorations },
+    ),
+  );
+};
+
+const LIGATURE_SKIP = "code, pre, a, time, .katex, .md-formula-ok, .md-formula-error";
+
+/**
+ * Applies the same display ligatures to prose inside a rendered widget (notice
+ * cards, table previews), so they match the editor text and the Book.
+ */
+export const applyLigatures = (root: HTMLElement): void => {
+  const textNodes = (node: Node): ChildNode[] =>
+    Array.from(node.childNodes).flatMap((child) =>
+      child.nodeType !== child.TEXT_NODE ? textNodes(child) : child.parentElement?.closest(LIGATURE_SKIP) ? [] : [child],
+    );
+  for (const node of textNodes(root)) {
+    const text = node.textContent ?? "";
+    const matches = findLigatures(text);
+    if (matches.length === 0) continue;
+    const parts: Array<string | HTMLElement> = [];
+    let last = 0;
+    for (const match of matches) {
+      const span = root.ownerDocument.createElement("span");
+      span.className = "cm-ligature";
+      span.title = match.source;
+      span.textContent = match.symbol;
+      parts.push(text.slice(last, match.from), span);
+      last = match.to;
+    }
+    // One wrapper keeps the text a single item in flex containers such as table cells.
+    const wrapper = root.ownerDocument.createElement("span");
+    wrapper.append(...parts, text.slice(last));
+    node.replaceWith(wrapper);
+  }
+};

package/src/markdown/links.ts

@@ -0,0 +1,158 @@
+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 {
+  type MarkdownReference,
+  markdownLinkReference,
+  markdownReferenceIcon,
+  markdownReferenceType,
+  markdownReferenceTypeLabel,
+} from "@k2b/ui";
+import { type CursorZoneState, cursorZoneStateField, selectionIntersectsRange } from "./_lib/cursor-zone-field";
+import { makeOpener } from "./_lib/link-opener";
+import { parseNoteLink } from "./lib/heading-anchors";
+import { extractAttachmentId, isSafeMarkdownUrl, type MarkdownUrlOptions } from "./urls";
+
+type LinkData = {
+  label: string;
+  url: string;
+  /** Resolved final href: a note's path for `note://`, the attachment's content URL for `attach://`, otherwise the URL. */
+  resolvedUrl: string;
+  /** What the link names inside Cloud, classified as Book does; `null` for a web or mail link. */
+  reference: MarkdownReference | null;
+  /** Set if the link is an `attach://<shortId>` reference to a non-image blob. */
+  attachmentId: string | null;
+  options: MarkdownUrlOptions;
+};
+
+class LinkWidget extends WidgetType {
+  constructor(private linkData: LinkData) {
+    super();
+  }
+
+  override toDOM(view: EditorView) {
+    const { attachmentId, label, reference, url } = this.linkData;
+    if (reference) {
+      // A reference renders as the shared calm pill of rendered Markdown: icon
+      // and text, no brackets, and a name that starts with its type. The whole
+      // pill acts while the editor keeps its cursor: an attachment opens its
+      // preview (or asks to download), anything else navigates as Book does.
+      // The pill is drawn by `.k2b-reference`, so hover only darkens its fill.
+      const type = markdownReferenceType(reference, label);
+      const el = document.createElement("span");
+      el.className = "k2b-reference";
+      el.dataset.reference = type;
+      el.title = attachmentId ? label : url;
+      el.setAttribute("aria-label", `${markdownReferenceTypeLabel(type)}: ${label}`);
+
+      const icon = document.createElement("i");
+      icon.className = `k2b-reference__icon ti ${markdownReferenceIcon(type, label)}`;
+      icon.setAttribute("aria-hidden", "true");
+
+      el.append(icon, label);
+      // `note://<shortId>` is internal and not navigable; `resolvedUrl` carries
+      // the full path. The shared helper uses client-side editor navigation
+      // when mounted and falls back to document navigation otherwise.
+      makeOpener(el, view, () => {
+        if (this.linkData.options.openLink) this.linkData.options.openLink(this.linkData.resolvedUrl, url, label);
+        else window.location.assign(this.linkData.resolvedUrl);
+      });
+      return el;
+    }
+
+    // Web and mail links read like rendered ones: prose text with a thin
+    // accent underline. CodeMirror handles caret placement and selection on
+    // web link text; the ↗ opens it. Mail link text opens the link.
+    const container = document.createElement("span");
+    container.className = "cm-link-widget";
+    const open = () => window.open(this.linkData.resolvedUrl, "_blank", "noopener,noreferrer");
+
+    const labelSpan = document.createElement("span");
+    labelSpan.className = "cm-link-label k2b-text-link";
+    labelSpan.textContent = label;
+    container.appendChild(labelSpan);
+
+    if (/^(?:mailto|tel):/i.test(url)) {
+      labelSpan.title = url;
+      makeOpener(labelSpan, view, open);
+      return container;
+    }
+    const iconSpan = document.createElement("i");
+    iconSpan.className = "cm-link-icon k2b-text-link__external ti ti-arrow-up-right";
+    iconSpan.title = url;
+    iconSpan.setAttribute("aria-label", label);
+    makeOpener(iconSpan, view, open);
+    container.appendChild(iconSpan);
+    return container;
+  }
+
+  override eq(other: WidgetType) {
+    // Everything else derives from the label and the URL.
+    return other instanceof LinkWidget && other.linkData.label === this.linkData.label && other.linkData.url === this.linkData.url;
+  }
+
+  override ignoreEvent(event: Event) {
+    // Pills, mail labels and the ↗ open on click and keep the editor's
+    // cursor; a press on them still starts a drag selection. A web link's
+    // text passes its events to CodeMirror, which then positions the cursor
+    // for editing.
+    return event.type !== "mousedown" && event.target instanceof Element && event.target.closest(".cm-link-open") !== null;
+  }
+}
+
+const parseLinkSyntax = (text: string, options: MarkdownUrlOptions): LinkData | null => {
+  const match = text.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+  if (!match || !match[1] || !match[2]) return null;
+  const url = match[2];
+  const attachmentId = extractAttachmentId(url);
+  // Internal `note://<shortId>` links, also to a heading, render as pills rather than external links.
+  const note = parseNoteLink(url);
+  const resolvedUrl = options.resolveUrl?.("link", url) ?? url;
+  if (!isSafeMarkdownUrl(resolvedUrl)) return null;
+  // The editor has no attachment metadata, so a file's type comes from its link text.
+  const reference: MarkdownReference | null = attachmentId
+    ? { kind: "file" }
+    : note
+      ? { kind: note.anchor ? "heading" : "note" }
+      : markdownLinkReference(resolvedUrl);
+  return { label: match[1], url, resolvedUrl, reference, attachmentId, options };
+};
+
+const findLinks = (state: EditorState, options: MarkdownUrlOptions): CursorZoneState => {
+  const decorations: Range<Decoration>[] = [];
+  const ranges: { from: number; to: number }[] = [];
+  const cursor = state.selection.main;
+
+  syntaxTree(state).iterate({
+    enter: ({ type, from, to }) => {
+      if (type.name !== "Link") return;
+      ranges.push({ from, to });
+      if (selectionIntersectsRange(cursor, from, to)) return;
+
+      const text = state.doc.sliceString(from, to);
+      const linkData = parseLinkSyntax(text, options);
+
+      if (linkData) {
+        decorations.push(Decoration.replace({ widget: new LinkWidget(linkData) }).range(from, to));
+      }
+    },
+  });
+
+  return {
+    decorations: decorations.length > 0 ? RangeSet.of(decorations, true) : Decoration.none,
+    ranges,
+  };
+};
+
+export const linksExtension = (options: MarkdownUrlOptions = {}): Extension => {
+  const stateField = cursorZoneStateField((state) => findLinks(state, options));
+
+  const theme = EditorView.theme({
+    ".cm-link-open": {
+      cursor: "pointer",
+    },
+  });
+
+  return [stateField, theme];
+};