@openpresentation/opf-editor 0.24.0 → 0.24.1

package/dist/slide-navigator.js

@@ -0,0 +1,191 @@
+// Slide navigator (RR-98): previous and next buttons around a mono "01 / 03" counter. It owns no document state, only the slide index the host
+// shows; the slide count follows the editor session (or a presentation the host hands in). Plain DOM, no framework, no network.
+// Icons are the Lucide ChevronLeft and ChevronRight paths (ISC license), inlined.
+const SVG_NS = "http://www.w3.org/2000/svg";
+const CHEVRONS = { previous: "m15 18-6-6 6-6", next: "m9 18 6-6-6-6" };
+
+const DEFAULT_LABELS = {
+  navigation: "Slide navigation",
+  previous: "Previous slide",
+  next: "Next slide",
+  /** The accessible description of the position, for example "Slide 2 of 3". */
+  position: (index, count) => (count === 0 ? "No slides" : `Slide ${index + 1} of ${count}`),
+};
+
+/** The counter text: both numbers are zero-padded to two digits, or to the width of the slide count from 100 slides. */
+export function formatSlideCounter(index, count) {
+  const width = Math.max(2, String(Math.max(0, count)).length);
+  const pad = (value) => String(value).padStart(width, "0");
+  return `${pad(count === 0 ? 0 : index + 1)} / ${pad(count)}`;
+}
+
+function chevron(name) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("class", "opf-nav-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const path = document.createElementNS(SVG_NS, "path");
+  path.setAttribute("d", CHEVRONS[name]);
+  svg.append(path);
+  return svg;
+}
+
+/** True when a page-level key press belongs to something else: typing, an editor, a menu or a dialog. */
+function isInteractiveTarget(target) {
+  if (!target || typeof target.closest !== "function") return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return Boolean(target.closest('[contenteditable=""],[contenteditable="true"],.cm-editor,[role="textbox"],[role="combobox"],[role="listbox"],[role="menu"],[role="slider"],[role="spinbutton"],dialog[open],[role="dialog"]'));
+}
+
+/**
+ * Mount previous and next buttons with a "01 / 03" counter into `container`.
+ *
+ * Options: `editor` (an editor session; the slide count follows it) or `presentation` (an OPF object, or a function returning the current
+ * one), `slideIndex` (0-based, default 0), `onChange(index)` (called when the user moves, and when a shrinking deck clamps the index),
+ * `density` (`"comfortable"` 32px controls, or `"touch"` 40px), `labels` (`navigation`, `previous`, `next`, `position(index, count)`) and
+ * `autoRefresh` (default true: follow the editor's changes on its own).
+ *
+ * Returns `{ element, getSlide(), setSlide(index), refresh(), bindKeys(target?), destroy() }`.
+ */
+export function createSlideNavigator(container, options = {}) {
+  if (!container?.ownerDocument) throw new TypeError("A DOM container is required.");
+  const doc = container.ownerDocument;
+  const labels = { ...DEFAULT_LABELS, ...(options.labels ?? {}) };
+  const density = options.density === "touch" ? "touch" : "comfortable";
+  const { editor } = options;
+  const source = options.presentation;
+  let index = Math.max(0, Math.trunc(Number(options.slideIndex) || 0));
+  let disposed = false;
+  const unbinders = new Set();
+
+  const count = () => {
+    // The snapshot is cached between edits; `editor.presentation` clones the whole deck on every read.
+    const deck = editor ? (editor.snapshot?.().presentation ?? editor.presentation) : typeof source === "function" ? source() : source;
+    return Array.isArray(deck?.slides) ? deck.slides.length : 0;
+  };
+
+  const element = doc.createElement("div");
+  element.className = "opf-nav";
+  element.dataset.density = density;
+  element.setAttribute("role", "group");
+  element.setAttribute("aria-label", labels.navigation);
+  const button = (name) => {
+    const node = doc.createElement("button");
+    node.type = "button";
+    node.className = "opf-nav-button";
+    node.dataset.action = name;
+    node.setAttribute("aria-label", labels[name]);
+    node.title = labels[name];
+    node.append(chevron(name));
+    return node;
+  };
+  const previous = button("previous");
+  const next = button("next");
+  const counter = doc.createElement("span");
+  counter.className = "opf-nav-counter";
+  counter.setAttribute("role", "status");
+  counter.setAttribute("aria-atomic", "true");
+  element.append(previous, counter, next);
+  container.append(element);
+
+  function clamp(value, total) {
+    return total === 0 ? 0 : Math.max(0, Math.min(total - 1, value));
+  }
+  function paint() {
+    const total = count();
+    index = clamp(index, total);
+    counter.textContent = formatSlideCounter(index, total);
+    counter.title = labels.position(index, total);
+    element.dataset.count = String(total);
+    element.dataset.index = String(index);
+    const atStart = index <= 0;
+    const atEnd = index >= total - 1;
+    // A button that becomes disabled while it has focus would drop focus to the page: hand it to the other button.
+    const focused = doc.activeElement;
+    previous.disabled = total === 0 || atStart;
+    next.disabled = total === 0 || atEnd;
+    if (focused === previous && previous.disabled && !next.disabled) next.focus();
+    else if (focused === next && next.disabled && !previous.disabled) previous.focus();
+  }
+  function go(target, notify = true) {
+    const total = count();
+    const clamped = clamp(target, total);
+    if (clamped === index) return false;
+    index = clamped;
+    paint();
+    if (notify) options.onChange?.(index);
+    return true;
+  }
+
+  previous.addEventListener("click", () => go(index - 1));
+  next.addEventListener("click", () => go(index + 1));
+  // The arrow keys act when focus is inside the navigator. preventDefault marks the event as handled so a page-level `bindKeys` does not repeat it.
+  element.addEventListener("keydown", (event) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.isComposing) return;
+    const rtl = doc.defaultView?.getComputedStyle(element).direction === "rtl";
+    const step = { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, ArrowUp: -1, ArrowDown: 1 }[event.key];
+    if (step !== undefined) { event.preventDefault(); go(index + step); }
+    else if (event.key === "Home") { event.preventDefault(); go(0); }
+    else if (event.key === "End") { event.preventDefault(); go(count() - 1); }
+  });
+
+  paint();
+  const unsubscribe = editor && options.autoRefresh !== false && typeof editor.subscribe === "function" ? editor.subscribe(() => refresh()) : undefined;
+
+  function refresh() {
+    if (disposed) return;
+    const before = index;
+    paint();
+    // The deck shrank under the current slide: the host's index is stale too.
+    if (index !== before) options.onChange?.(index);
+  }
+
+  /**
+   * Page-level Left and Right arrows (default target: the document). Ignores typing in inputs, selects and editors, menus, dialogs, modified keys and
+   * events another handler already took. Returns a function that removes the listener; `destroy()` removes every one.
+   */
+  function bindKeys(target = doc) {
+    const handler = (event) => {
+      if (disposed || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.isComposing) return;
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      if (isInteractiveTarget(event.target) || isInteractiveTarget(doc.activeElement)) return;
+      const rtl = doc.defaultView?.getComputedStyle(element).direction === "rtl";
+      const step = event.key === "ArrowLeft" ? (rtl ? 1 : -1) : rtl ? -1 : 1;
+      if (go(index + step)) event.preventDefault();
+    };
+    target.addEventListener("keydown", handler);
+    const unbind = () => { target.removeEventListener("keydown", handler); unbinders.delete(unbind); };
+    unbinders.add(unbind);
+    return unbind;
+  }
+
+  return {
+    element,
+    /** The slide index the navigator shows. */
+    getSlide: () => index,
+    /** Show another slide without calling `onChange` (the host already knows). */
+    setSlide(value) {
+      if (disposed) return;
+      index = clamp(Math.trunc(Number(value) || 0), count());
+      paint();
+    },
+    /** Read the slide count again (it follows the session on its own unless `autoRefresh` is false). */
+    refresh,
+    bindKeys,
+    destroy() {
+      if (disposed) return;
+      disposed = true;
+      unsubscribe?.();
+      for (const unbind of [...unbinders]) unbind();
+      element.remove();
+    },
+  };
+}

package/dist/source-lines.js

@@ -0,0 +1,206 @@
+import { parseTree } from "jsonc-parser";
+
+// Line lookup for a JSON Pointer in the three source formats of the source pane (RR-98). All functions return a
+// one-based line number, or null when the path cannot be placed. JSON is exact; YAML and Markdown are best effort:
+// they follow the shape `toYaml` and `toMarkdown` write (block style, one heading per slide) and fall back to the
+// deepest place they could find.
+
+/** Split a JSON Pointer ("/slides/0/title") or a dotted OPF path ("slides.0.title") into segments. */
+export function pathSegments(path) {
+  if (Array.isArray(path)) return path.map(String);
+  if (path === undefined || path === null || path === "" || path === "/") return [];
+  const text = String(path);
+  const parts = text.startsWith("/") ? text.slice(1).split("/") : text.split(".");
+  return parts.map((part) => part.replaceAll("~1", "/").replaceAll("~0", "~"));
+}
+
+/** The one-based line that holds a zero-based character offset. */
+export function lineOfOffset(text, offset) {
+  let line = 1;
+  const end = Math.min(offset, text.length);
+  for (let i = 0; i < end; i++) {
+    const code = text.charCodeAt(i);
+    if (code === 10 || (code === 13 && text.charCodeAt(i + 1) !== 10)) line++;
+  }
+  return line;
+}
+
+/** The zero-based character offset where a one-based line starts (a CRLF pair counts as one line break). */
+export function offsetOfLine(text, line) {
+  let current = 1;
+  if (line <= 1) return 0;
+  for (let i = 0; i < text.length; i++) {
+    const code = text.charCodeAt(i);
+    if (code === 13 && text.charCodeAt(i + 1) === 10) continue;
+    if (code === 10 || code === 13) {
+      current++;
+      if (current === line) return i + 1;
+    }
+  }
+  return text.length;
+}
+
+const splitLines = (text) => text.split(/\r\n|\r|\n/);
+
+function jsonLine(text, segments) {
+  const root = parseTree(text);
+  if (!root) return null;
+  let node = root, target = root;
+  for (const segment of segments) {
+    let next;
+    if (node.type === "array") {
+      const index = /^\d+$/.test(segment) ? Number(segment) : -1;
+      next = node.children?.[index];
+    } else if (node.type === "object") {
+      next = node.children?.find((property) => property.children?.[0]?.value === segment);
+    }
+    if (!next) break;
+    target = next.type === "property" ? next.children[0] : next;
+    node = next.type === "property" ? next.children[1] ?? next : next;
+  }
+  return lineOfOffset(text, target.offset);
+}
+
+// One YAML line as its structural entries: block sequence markers and a leading mapping key, each with its column.
+const KEY = /^("(?:[^"\\]|\\.)*"|'(?:[^']|'')*'|[^\s#'"[\]{},&*!|>%@`-][^:#]*?|-[^\s:][^:#]*?)\s*:(?=\s|$)/;
+function unquote(key) {
+  if (key.startsWith('"')) { try { return JSON.parse(key); } catch { return key.slice(1, -1); } }
+  if (key.startsWith("'")) return key.slice(1, -1).replaceAll("''", "'");
+  return key;
+}
+function yamlEntries(lines) {
+  const parsed = [];
+  let skipBelow = -1;
+  lines.forEach((line) => {
+    const indent = line.length - line.trimStart().length;
+    const body = line.trim();
+    if (!body || body.startsWith("#") || body === "---" || body === "...") { parsed.push([]); return; }
+    if (skipBelow >= 0) {
+      if (indent > skipBelow) { parsed.push([]); return; }
+      skipBelow = -1;
+    }
+    const entries = [];
+    let position = indent;
+    while (line[position] === "-" && (position + 1 === line.length || line[position + 1] === " ")) {
+      entries.push({ kind: "seq", col: position });
+      position++;
+      while (line[position] === " ") position++;
+    }
+    const rest = line.slice(position);
+    const match = KEY.exec(rest);
+    if (match) {
+      entries.push({ kind: "key", col: position, key: unquote(match[1]) });
+      if (/^[|>][-+0-9]*\s*(#.*)?$/.test(rest.slice(match[0].length).trim())) skipBelow = position;
+    }
+    parsed.push(entries);
+  });
+  return parsed;
+}
+
+function yamlLine(text, segments) {
+  const lines = splitLines(text);
+  const entries = yamlEntries(lines);
+  let from = 0, to = lines.length, minCol = -1, found = null, sameColSeq = false;
+  for (const segment of segments) {
+    const isIndex = /^\d+$/.test(segment);
+    let childCol = Infinity;
+    for (let i = from; i < to; i++) for (const entry of entries[i]) if (entry.col > minCol) childCol = Math.min(childCol, entry.col);
+    if (sameColSeq) childCol = minCol + 1;
+    let hit = null, seen = 0;
+    scan: for (let i = from; i < to; i++) {
+      for (const entry of entries[i]) {
+        if (entry.col !== childCol) continue;
+        if (isIndex && entry.kind === "seq") { if (seen++ === Number(segment)) { hit = { line: i, entry }; break scan; } }
+        else if (!isIndex && entry.kind === "key" && entry.key === segment) { hit = { line: i, entry }; break scan; }
+      }
+    }
+    if (!hit) return found === null ? null : found + 1;
+    found = hit.line;
+    const { entry } = hit;
+    // A mapping key with no inline value whose sequence sits at the key's own column ("items:" then "- a").
+    const next = entries.findIndex((list, i) => i > hit.line && list.length > 0);
+    sameColSeq = entry.kind === "key" && next !== -1 && entries[next][0].kind === "seq" && entries[next][0].col === entry.col
+      && !lines[hit.line].slice(lines[hit.line].indexOf(":", entry.col) + 1).trim();
+    let end = to;
+    for (let i = hit.line + 1; i < to; i++) {
+      const first = entries[i][0];
+      if (!first) continue;
+      if (first.col < entry.col || (first.col === entry.col && !(sameColSeq && first.kind === "seq"))) { end = i; break; }
+    }
+    from = hit.line;
+    to = end;
+    minCol = sameColSeq ? entry.col - 1 : entry.col;
+  }
+  return found === null ? 1 : found + 1;
+}
+
+function markdownLine(text, segments) {
+  const lines = splitLines(text);
+  let bodyStart = 0, frontEnd = -1;
+  if (lines[0]?.trim() === "---") {
+    frontEnd = lines.findIndex((line, index) => index > 0 && line.trim() === "---");
+    if (frontEnd > 0) bodyStart = frontEnd + 1; else frontEnd = -1;
+  }
+  const slides = [];
+  let start = bodyStart, fence = false;
+  const close = (end) => {
+    let first = start;
+    while (first < end && !lines[first].trim()) first++;
+    slides.push({ start: first < end ? first : start, end });
+  };
+  for (let i = bodyStart; i < lines.length; i++) {
+    const line = lines[i];
+    if (/^(```|~~~)/.test(line)) fence = !fence;
+    if (!fence && line.trim() === "---") { close(i); start = i + 1; }
+  }
+  close(lines.length);
+  if (!segments.length) return 1;
+  if (segments[0] !== "slides") {
+    if (frontEnd < 0) return 1;
+    const inside = yamlLine(lines.slice(1, frontEnd).join("\n"), segments);
+    return inside === null ? 2 : inside + 1;
+  }
+  if (segments.length === 1) return slides[0].start + 1;
+  const slide = slides[/^\d+$/.test(segments[1]) ? Number(segments[1]) : -1];
+  if (!slide) return null;
+  if (segments.length === 2) return slide.start + 1;
+  const within = (pattern) => {
+    let inFence = false;
+    for (let i = slide.start; i < slide.end; i++) {
+      if (/^(```|~~~)/.test(lines[i])) { if (!inFence && pattern.test(lines[i])) return i + 1; inFence = !inFence; continue; }
+      if (!inFence && pattern.test(lines[i])) return i + 1;
+    }
+    return null;
+  };
+  const key = segments[2];
+  const nthItem = (n) => {
+    let count = 0, inFence = false;
+    for (let i = slide.start; i < slide.end; i++) {
+      if (/^(```|~~~)/.test(lines[i])) { inFence = !inFence; continue; }
+      if (!inFence && /^([-*+]|\d+\.)\s/.test(lines[i]) && count++ === n) return i + 1;
+    }
+    return within(/^\s*([-*+]|\d+\.)\s/);
+  };
+  const native = key === "title" ? within(/^# /)
+    : key === "subtitle" ? within(/^## /)
+    : key === "notes" ? within(/^Notes?:/)
+    : key === "items" ? (/^\d+$/.test(segments[3] ?? "") ? nthItem(Number(segments[3])) : within(/^\s*([-*+]|\d+\.)\s/))
+    : key === "text" ? within(/^(?!#|>|\s*([-*+]|\d+\.)\s|<!--|```|~~~|Notes?:)\S/)
+    : null;
+  if (native !== null) return native;
+  const embedded = within(key === "blocks" ? /^(```|~~~)opf-block/ : /^(```|~~~)opf-slide/);
+  return embedded ?? slide.start + 1;
+}
+
+/** The one-based line of a path in a source text of the given format ("json", "yaml" or "md"), or null. */
+export function lineForPath(format, text, path) {
+  const segments = pathSegments(path);
+  if (!segments.length) return 1;
+  try {
+    return format === "json" ? jsonLine(text, segments)
+      : format === "yaml" ? yamlLine(text, segments)
+      : markdownLine(text, segments);
+  } catch {
+    return null;
+  }
+}

package/dist/source-pane.d.ts

@@ -0,0 +1,88 @@
+import type { EditorSession } from "./index.js";
+import type { JsonCatalogContext } from "./json-options.js";
+import type { JsonCodeEditor } from "./json-editor.js";
+
+/** The source formats of the pane: `json` is canonical; `yaml` and `md` are core's `@openpresentation/opf/yaml` and `/markdown`. */
+export type SourceFormat = "json" | "yaml" | "md";
+export type SourcePaneDensity = "comfortable" | "touch";
+export type SourceFindingSeverity = "error" | "warning" | "info";
+
+/** One finding under the code. Core validator `Finding` objects fit: they carry `path`, `message` and `severity`. */
+export interface SourceFinding {
+  /** A JSON Pointer into the document (`/slides/0/title`); "" is the document or a position-only finding. */
+  path: string;
+  message: string;
+  severity: SourceFindingSeverity;
+  /** A one-based line in the pane's current text. Used when the pane cannot place `path` itself and for syntax errors. */
+  line?: number;
+  /** `schema` (the default count label), `syntax`, `format` (a note about what the format cannot hold) or `rejected` (the session refused the edit). */
+  kind?: string;
+  ruleId?: string;
+}
+
+/** What a host receives when the pane copies or downloads. */
+export interface SourceFile {
+  /** The name without the extension, spaces and slashes already replaced by `-`. */
+  name: string;
+  /** `<name>.opf.<json|yaml|md>` */
+  filename: string;
+  text: string;
+  format: SourceFormat;
+  mime: string;
+}
+
+export interface SourcePaneOptions {
+  /** The editor session. Every edit in any format reaches it as a patch (`applyPatch`), so it is validated and undoable. */
+  editor: EditorSession;
+  /** File name without extension (default `deck`). Spaces and slashes become `-`. */
+  name?: string;
+  onRename?(name: string): void;
+  /** The starting format (default `json`). */
+  format?: SourceFormat;
+  onFormatChange?(format: SourceFormat, previous: SourceFormat): void;
+  /** The JSON text as the author wrote it. Used when it parses to the session's document, so its spelling is kept. */
+  source?: string;
+  /** Findings to list. Without `findings` and `getFindings` the pane lists the session's own validation. */
+  findings?: readonly (SourceFinding | Record<string, unknown>)[];
+  /** Called whenever the list is rebuilt, so a host can pass core validator output without pushing it. */
+  getFindings?(context: { editor: EditorSession; format: SourceFormat; text: string }): readonly (SourceFinding | Record<string, unknown>)[];
+  /** A row was clicked (after the cursor moved). `line` is the line it moved to. */
+  onFindingSelect?(finding: SourceFinding, line: number): void;
+  /** Replace the default (`navigator.clipboard.writeText`). */
+  onCopy?(file: SourceFile): void | Promise<void>;
+  /** Replace the default (a Blob link named `<name>.opf.<ext>`). */
+  onDownload?(file: SourceFile): void | Promise<void>;
+  density?: SourcePaneDensity;
+  readOnly?: boolean;
+  /** Milliseconds a typed edit waits before it is applied to the session (default 250; 0 applies each change). */
+  applyDelay?: number;
+  /** Accessible name of the code editor (default `OPF source`). */
+  label?: string;
+  catalogs?: JsonCatalogContext;
+  onError?(error: unknown): void;
+}
+
+export interface SourcePane {
+  element: HTMLElement;
+  /** Re-read the document from the session. */
+  refresh(): void;
+  /** Replace the host findings; `null` returns to the session's own validation. */
+  setFindings(findings: readonly (SourceFinding | Record<string, unknown>)[] | null): void;
+  /** Switch format. Returns false, and says why in the findings, when the document cannot be written in it. Does not call `onFormatChange`. */
+  setFormat(format: SourceFormat): boolean;
+  getFormat(): SourceFormat;
+  /** Move the cursor to the line of a JSON Pointer (or dotted OPF path) in the current format; best effort for YAML and Markdown. Returns the line. */
+  focusPath(path: string): number;
+  /** The text as shown, with any pending edit applied first. */
+  getText(): string;
+  getName(): string;
+  setName(name: string): void;
+  setDensity(density: SourcePaneDensity): void;
+  setReadOnly(readOnly: boolean): void;
+  /** The underlying code editor (`mountJsonCodeEditor`). */
+  readonly editor: JsonCodeEditor;
+  destroy(): void;
+}
+
+/** Mount the source pane in `container`: file name, format menu, Format, Copy and Download, the code, and the findings list. */
+export declare function createSourcePane(container: HTMLElement, options: SourcePaneOptions): SourcePane;