@openpresentation/opf-editor 0.26.5 → 0.26.7

package/dist/source-shortcuts.js

@@ -0,0 +1,106 @@
+// The keyboard shortcuts dialog (artifacts/source-editor/SPEC.md, section 8.6): every binding the editor installed, grouped and searchable, with the keys
+// of the platform. The list is `getShortcuts()`, produced from the same table that installs the keymap (source-keymap.js), so it cannot drift from the keys.
+// Cmd/Ctrl+K Cmd/Ctrl+S, F1 or the "?" button of the source pane open it; Escape closes it and returns focus to the editor. A host that wants its own
+// dialog passes `onShowShortcuts(shortcuts)` and returns true. Plain DOM, loaded lazily.
+const FOCUSABLE = 'button, input, [tabindex]:not([tabindex="-1"])';
+let counter = 0;
+const open = new WeakMap();
+
+const element = (doc, tag, className, attributes = {}) => {
+  const node = doc.createElement(tag);
+  if (className) node.className = className;
+  for (const [key, value] of Object.entries(attributes)) node.setAttribute(key, value);
+  return node;
+};
+
+/** The words a search looks in: title, group, id and the keys with `+`, `-` and spaces folded to spaces. */
+const haystack = (row) => `${row.title} ${row.group} ${row.id} ${row.when ?? ""} ${row.keys.join(" ")}`.toLowerCase().replace(/[+-]/g, " ");
+export const matches = (row, query) => {
+  const words = query.toLowerCase().replace(/[+-]/g, " ").split(/\s+/).filter(Boolean);
+  const text = haystack(row);
+  return words.every((word) => text.includes(word));
+};
+
+/** Open the dialog for `view` (or close it when it is open). Returns true: the key was taken. */
+export function showShortcuts(view, context) {
+  const shortcuts = context.getShortcuts();
+  if (context.options.onShowShortcuts?.(shortcuts) === true) return true;
+  const existing = open.get(view);
+  if (existing) { existing.close(); return true; }
+  const doc = view.dom.ownerDocument;
+  const host = view.dom.closest(".opf-ui") ?? doc.body;
+  const opener = doc.activeElement;
+  const id = `opf-shortcuts-${++counter}`;
+  const root = element(doc, "div", `opf-shortcuts${host === doc.body ? " opf-ui" : ""}`);
+  const dialog = element(doc, "div", "opf-shortcuts-dialog", { role: "dialog", "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-help`, tabindex: "-1" });
+  const head = element(doc, "div", "opf-shortcuts-head");
+  const title = Object.assign(element(doc, "h2", "opf-shortcuts-title", { id: `${id}-title` }), { textContent: "Keyboard shortcuts" });
+  const closeButton = Object.assign(element(doc, "button", "opf-shortcuts-close", { type: "button", "aria-label": "Close the keyboard shortcuts" }), { textContent: "×" });
+  head.append(title, closeButton);
+  const help = Object.assign(element(doc, "p", "opf-shortcuts-help", { id: `${id}-help` }), { textContent: `Keys for ${context.platform === "mac" ? "macOS" : context.platform === "win" ? "Windows" : "Linux"}. Type to search by name or key; Escape closes.` });
+  const search = element(doc, "input", "opf-shortcuts-search", { type: "search", "aria-label": "Search the keyboard shortcuts", placeholder: "Search shortcuts", autocomplete: "off", spellcheck: "false" });
+  const status = element(doc, "div", "opf-shortcuts-status", { role: "status", "aria-live": "polite" });
+  const list = element(doc, "div", "opf-shortcuts-list", { tabindex: "0", role: "region", "aria-label": "Shortcuts" });
+  dialog.append(head, help, search, status, list);
+  root.append(dialog);
+  host.append(root);
+
+  const plural = (count) => `${count} ${count === 1 ? "shortcut" : "shortcuts"}`;
+  function render() {
+    const rows = shortcuts.filter((row) => matches(row, search.value));
+    list.replaceChildren();
+    let group = null, section = null;
+    for (const row of rows) {
+      if (row.group !== group) {
+        group = row.group;
+        section = element(doc, "section", "opf-shortcuts-group", { "aria-label": group });
+        section.append(Object.assign(element(doc, "h3", "opf-shortcuts-group-title"), { textContent: group }));
+        list.append(section);
+      }
+      const item = element(doc, "div", "opf-shortcuts-row", { "data-id": row.id });
+      const name = element(doc, "span", "opf-shortcuts-name");
+      name.append(document.createTextNode(row.title));
+      if (row.when) name.append(Object.assign(element(doc, "span", "opf-shortcuts-when"), { textContent: ` (${row.when})` }));
+      const keys = element(doc, "span", "opf-shortcuts-keys");
+      row.keys.forEach((keyText, index) => {
+        if (index) keys.append(Object.assign(element(doc, "span", "opf-shortcuts-or"), { textContent: "or" }));
+        for (const stroke of keyText.split(" ")) keys.append(Object.assign(element(doc, "kbd", "opf-shortcuts-key"), { textContent: stroke }));
+      });
+      item.append(name, keys);
+      section.append(item);
+    }
+    if (!rows.length) list.append(Object.assign(element(doc, "p", "opf-shortcuts-none"), { textContent: "No shortcut matches." }));
+    status.textContent = search.value ? `${plural(rows.length)} match` : plural(rows.length);
+  }
+
+  function focusables() { return [...dialog.querySelectorAll(FOCUSABLE)].filter((node) => node.getClientRects().length); }
+  function onKeydown(event) {
+    if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(); return; }
+    if (event.key !== "Tab") return;
+    const nodes = focusables();
+    if (!nodes.length) { event.preventDefault(); dialog.focus(); return; }
+    const first = nodes[0], last = nodes.at(-1), active = doc.activeElement;
+    if (event.shiftKey && (active === first || active === dialog)) { event.preventDefault(); last.focus(); }
+    else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus(); }
+    else if (!dialog.contains(active)) { event.preventDefault(); first.focus(); }
+  }
+  function onFocusin(event) { if (!dialog.contains(event.target)) (focusables()[0] ?? dialog).focus(); }
+  function close() {
+    if (!open.has(view)) return;
+    open.delete(view);
+    doc.removeEventListener("focusin", onFocusin, true);
+    root.remove();
+    if (view.dom.isConnected) view.focus(); else if (opener?.isConnected) opener.focus();
+    context.say("Keyboard shortcuts closed");
+  }
+  open.set(view, { close });
+  root.addEventListener("keydown", onKeydown);
+  root.addEventListener("pointerdown", (event) => { if (event.target === root) close(); });
+  closeButton.addEventListener("click", close);
+  search.addEventListener("input", render);
+  doc.addEventListener("focusin", onFocusin, true);
+  render();
+  search.focus();
+  context.say(`Keyboard shortcuts, ${plural(shortcuts.length)}. Type to search, Escape to close.`);
+  return true;
+}

package/dist/source-symbols.js

@@ -0,0 +1,156 @@
+// The outline of an OPF document (artifacts/source-editor/SPEC.md, section 8.4): the symbols the picker (Cmd/Ctrl+Shift+O) and the outline panel list, for
+// JSON, YAML and Markdown, read from text that may be broken. A symbol is `{ id, kind, label, detail, depth, from, to, line }` with source offsets:
+// the slides in order ("3. Highlights"), the top-level sections (design, organization, speaker), the assets, datasets, variables and references the
+// document declares, and the catalog records it embeds. Plain functions, no DOM.
+import { parseTree } from "jsonc-parser";
+import { isMap, parseDocument } from "yaml";
+import { scanMarkdown } from "@openpresentation/opf/source";
+
+const SECTIONS = ["design", "organization", "speaker"];
+const DECLARED = [["assets", "asset"], ["datasets", "dataset"], ["variables", "variable"]];
+const CATALOG_KINDS = { layouts: "layout", themes: "theme", colorSchemes: "color scheme", fontSchemes: "font scheme", narratives: "narrative", audiences: "audience", purposes: "purpose", tones: "tone" };
+
+// ---- one tree for the three readers ------------------------------------------------------------------------------------------------------
+// `{ type: "object" | "array" | "scalar", value?, from, to, entries?: [{ key, from, to, node }], items?: [node] }`, offsets in the text.
+function fromJson(text) {
+  const root = parseTree(text, [], { allowTrailingComma: true, disallowComments: false });
+  const convert = (node) => {
+    if (!node) return null;
+    const base = { from: node.offset, to: node.offset + node.length };
+    if (node.type === "object") return { ...base, type: "object", entries: (node.children ?? []).filter((property) => property.children?.[0]).map((property) => ({ key: String(property.children[0].value), from: property.offset, to: property.offset + property.length, node: convert(property.children[1]) })) };
+    if (node.type === "array") return { ...base, type: "array", items: (node.children ?? []).map(convert) };
+    return { ...base, type: "scalar", value: node.value };
+  };
+  return convert(root);
+}
+
+function fromYamlNode(node, shift = 0) {
+  if (!node) return null;
+  const range = node.range ?? [0, 0, 0];
+  const base = { from: range[0] + shift, to: range[1] + shift };
+  if (isMap(node)) {
+    return { ...base, type: "object", entries: node.items.filter((pair) => pair.key).map((pair) => ({ key: String(pair.key.value ?? pair.key), from: (pair.key.range?.[0] ?? range[0]) + shift, to: (pair.value?.range?.[1] ?? pair.key.range?.[1] ?? range[1]) + shift, node: fromYamlNode(pair.value, shift) })) };
+  }
+  if (node.items) return { ...base, type: "array", items: node.items.map((item) => fromYamlNode(item, shift)) };
+  return { ...base, type: "scalar", value: node.value };
+}
+function fromYaml(text, shift = 0) {
+  try { return fromYamlNode(parseDocument(text, { strict: false, uniqueKeys: false }).contents, shift); } catch { return null; }
+}
+
+const lineStarts = (text) => { const starts = [0]; for (let i = 0; i < text.length; i++) if (text[i] === "\n") starts.push(i + 1); return starts; };
+const lineOf = (starts, offset) => { let low = 0, high = starts.length - 1; while (low < high) { const mid = (low + high + 1) >> 1; if (starts[mid] <= offset) low = mid; else high = mid - 1; } return low + 1; };
+
+// ---- helpers -----------------------------------------------------------------------------------------------------------------------------
+const entry = (node, key) => (node?.type === "object" ? node.entries.find((candidate) => candidate.key === key) : undefined);
+const scalar = (node) => (node?.type === "scalar" && typeof node.value === "string" ? node.value : undefined);
+/** A title as text: a string, or the text of a list of runs. */
+function titleOf(node) {
+  if (!node) return "";
+  if (node.type === "scalar") return typeof node.value === "string" ? node.value : "";
+  if (node.type === "array") return node.items.map((item) => (item?.type === "scalar" ? String(item.value ?? "") : titleOf(entry(item, "text")?.node))).join("");
+  return "";
+}
+const clip = (text, max = 80) => { const flat = text.replace(/\s+/g, " ").trim(); return flat.length > max ? `${flat.slice(0, max - 1)}…` : flat; };
+
+function symbolsOfTree(root, starts, { slides = true } = {}) {
+  const out = [];
+  const add = (kind, label, detail, depth, from, to) => out.push({ id: `${kind}:${out.length}`, kind, label, detail, depth, from, to, line: lineOf(starts, from) });
+  if (root?.type !== "object") return out;
+  if (slides) {
+    const list = entry(root, "slides")?.node;
+    if (list?.type === "array") {
+      list.items.forEach((item, index) => {
+        if (!item) return;
+        const title = clip(titleOf(entry(item, "title")?.node));
+        const layout = scalar(entry(item, "layout")?.node), type = scalar(entry(item, "type")?.node);
+        add("slide", `${index + 1}. ${title || "Untitled slide"}`, [layout && `layout ${layout}`, !layout && type].filter(Boolean).join(" "), 0, item.from, item.to);
+      });
+    }
+  }
+  for (const key of SECTIONS) {
+    const found = entry(root, key);
+    if (found?.node?.type === "object") add("section", key, "", 0, found.from, found.to);
+  }
+  for (const [key, kind] of DECLARED) {
+    const found = entry(root, key);
+    if (found?.node?.type !== "object" || !found.node.entries.length) continue;
+    add("section", key, `${found.node.entries.length}`, 0, found.from, found.to);
+    for (const child of found.node.entries) add(kind, child.key, kind === "dataset" ? scalar(entry(child.node, "title")?.node) ?? "" : "", 1, child.from, child.to);
+  }
+  const references = entry(root, "references")?.node;
+  if (references?.type === "array" && references.items.length) {
+    add("section", "references", `${references.items.length}`, 0, entry(root, "references").from, entry(root, "references").to);
+    for (const item of references.items) { const id = scalar(entry(item, "id")?.node); if (id && item) add("reference", id, clip(scalar(entry(item, "text")?.node) ?? "", 50), 1, item.from, item.to); }
+  }
+  const catalogs = entry(root, "catalogs");
+  if (catalogs?.node?.type === "object") {
+    for (const group of catalogs.node.entries) {
+      if (group.node?.type !== "object") continue;
+      for (const [kindKey, kindLabel] of Object.entries(CATALOG_KINDS)) {
+        const records = entry(group.node, kindKey)?.node;
+        if (records?.type === "object") for (const record of records.entries) add("record", `${kindLabel} ${record.key}`, group.key === "custom" ? "this document" : group.key, 0, record.from, record.to);
+        else if (records?.type === "array") for (const record of records.items) { const id = scalar(entry(record, "id")?.node); if (id && record) add("record", `${kindLabel} ${id}`, group.key === "custom" ? "this document" : group.key, 0, record.from, record.to); }
+      }
+    }
+  }
+  // Slides first, as the document reads: sort the rest by position inside their kind order is not needed; the list keeps slides, then the sections in
+  // the order of the text so the picker's order is the document's order.
+  return out.sort((a, b) => a.from - b.from).map((symbol, index) => ({ ...symbol, id: `${symbol.kind}:${index}` }));
+}
+
+// ---- Markdown ----------------------------------------------------------------------------------------------------------------------------
+function markdownSymbols(text, starts) {
+  const scan = scanMarkdown(text);
+  const out = [];
+  if (scan.frontMatter?.closed) {
+    const tree = fromYaml(text.slice(scan.frontMatter.yamlFrom, scan.frontMatter.yamlTo), scan.frontMatter.yamlFrom);
+    out.push(...symbolsOfTree(tree, starts, { slides: false }));
+  }
+  const skipped = [...scan.fences, ...scan.comments].map((range) => [range.from, range.to]);
+  for (const slide of scan.slides) {
+    let title = "", layout;
+    const slideComment = scan.comments.find((comment) => comment.kind === "slide" && comment.slide === slide.index);
+    if (slideComment) layout = /\blayout=("?)([A-Za-z0-9_:-]+)\1/.exec(text.slice(slideComment.innerFrom, slideComment.innerTo))?.[2];
+    const body = text.slice(slide.from, slide.to);
+    let offset = 0;
+    for (const line of body.split("\n")) {
+      const at = slide.from + offset;
+      offset += line.length + 1;
+      if (skipped.some(([from, to]) => at >= from && at < to)) continue;
+      const heading = /^#\s+(.*?)\s*#*\s*$/.exec(line);
+      if (heading) { title = heading[1].replace(/[*_`[\]]/g, ""); break; }
+    }
+    out.push({ id: "", kind: "slide", label: `${slide.index + 1}. ${clip(title) || "Untitled slide"}`, detail: layout ? `layout ${layout}` : "", depth: 0, from: slide.from, to: slide.to, line: slide.line });
+  }
+  return out.sort((a, b) => a.from - b.from).map((symbol, index) => ({ ...symbol, id: `${symbol.kind}:${index}` }));
+}
+
+/** The symbols of `text` in `format` ("json", "yaml" or "md"), in document order. Never throws. */
+export function documentSymbols(format, text) {
+  try {
+    const starts = lineStarts(text);
+    const symbols = format === "md" ? markdownSymbols(text, starts) : symbolsOfTree(format === "yaml" ? fromYaml(text) : fromJson(text), starts);
+    // A YAML block ends with its line break: the range of a symbol stops at its last visible character.
+    return symbols.map((symbol) => { let to = Math.min(symbol.to, text.length); while (to > symbol.from + 1 && /\s/.test(text[to - 1])) to--; return { ...symbol, to }; });
+  } catch { return []; }
+}
+
+/** The innermost symbol that contains `offset` (the slide the caret is in), or null. */
+export function symbolAt(symbols, offset) {
+  let found = null;
+  for (const symbol of symbols) if (symbol.from <= offset && offset <= symbol.to && (!found || symbol.to - symbol.from <= found.to - found.from)) found = symbol;
+  return found;
+}
+
+/** The symbols that match what was typed: every word is in the label, detail or kind; failing that, the letters in order (a fuzzy match). */
+export function filterSymbols(symbols, query) {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return symbols;
+  const text = (symbol) => `${symbol.label} ${symbol.detail} ${symbol.kind}`.toLowerCase();
+  const exact = symbols.filter((symbol) => words.every((word) => text(symbol).includes(word)));
+  if (exact.length) return exact;
+  const letters = words.join("");
+  return symbols.filter((symbol) => { let at = 0; for (const character of text(symbol)) if (character === letters[at]) at++; return at === letters.length; });
+}
+

package/dist/source-worker.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The worker script of the source pane's text checks. It exports nothing: bundle it as a module worker script and pass the worker to
+ * `createSourcePane(container, { worker })`, for example
+ * `worker: () => new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`
+ * with a bundler that supports that form, or build `dist/source-worker.js` as its own entry point and serve it next to the page.
+ */
+export {};

package/dist/source-worker.js

@@ -0,0 +1,30 @@
+// The worker entry of the source pane's text checks (`createSourcePane(el, { worker })`). A host bundles this file as its own worker script
+// (`@openpresentation/opf-editor/source-worker`), for example `new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`
+// with a bundler that understands that form, or builds it as an extra entry point and serves it next to the page. It does the same work as the pane's
+// own inline path (`./source-check.js`), off the main thread. Requests run in order, but when several checks of one kind are waiting only the newest runs
+// (the older ones are answered with `skipped`): the pane drops stale replies anyway.
+import { createCheckService } from "./source-check.js";
+
+const service = createCheckService();
+let queue = [];
+let scheduled = false;
+
+function drain() {
+  scheduled = false;
+  const work = queue;
+  queue = [];
+  // The last check and the last syntax request win; catalogs messages always run, in order, and before the checks that follow them.
+  const newest = new Map();
+  work.forEach((message, index) => { if (message.type === "check" || message.type === "syntax") newest.set(message.type, index); });
+  work.forEach((message, index) => {
+    if ((message.type === "check" || message.type === "syntax") && newest.get(message.type) !== index) { self.postMessage({ id: message.id, ok: true, skipped: true }); return; }
+    const reply = service.handle(message);
+    try { self.postMessage(reply); } catch (error) { self.postMessage({ id: message.id, ok: false, error: `The result could not be sent: ${error?.message ?? error}` }); }
+  });
+}
+
+self.onmessage = (event) => {
+  queue.push(event.data);
+  // Messages that arrive while a check runs queue behind it; draining on the next task lets everything already waiting be seen together.
+  if (!scheduled) { scheduled = true; setTimeout(drain, 0); }
+};

package/dist/source-wrap.js

@@ -0,0 +1,55 @@
+import { RangeSetBuilder, countColumn } from "@codemirror/state";
+import { Decoration, ViewPlugin } from "@codemirror/view";
+
+// A wrapped line continues under its own indentation, as VS Code's `wrappingIndent: "indent"` does (JSON, YAML and Markdown).
+// Each line carries a class `opf-hang-<n>`; the stylesheet (panels.css) turns n columns into a left padding and the same negative
+// text-indent, so the first line starts where it always did and every continuation line starts n columns in. n is the line's leading
+// whitespace (a tab counts as the editor's tab size) plus the width of a list marker ("- ", "1. ") when the line starts one, so wrapped
+// list items line up under their text, or plus two columns (one indent step) for any other line, so a continuation never looks like a new line.
+
+/** The most columns a line can hang. The stylesheet defines `opf-hang-0` through `opf-hang-${MAX_HANG}`, and caps the indent at 40% of the line. */
+export const MAX_HANG = 32;
+const LIST_MARKER = /^([-*+]|\d{1,9}[.)])[ \t]+/;
+const OFFSET = 2;
+
+/** How many columns the continuation lines of `text` are indented. */
+export function hangColumns(text, tabSize = 4) {
+  let at = 0;
+  while (at < text.length && (text[at] === " " || text[at] === "\t")) at++;
+  const indent = countColumn(text.slice(0, at), tabSize);
+  const marker = LIST_MARKER.exec(text.slice(at));
+  const columns = marker ? indent + countColumn(marker[0], tabSize) : indent + OFFSET;
+  return Math.min(columns, MAX_HANG);
+}
+
+const decorations = Array.from({ length: MAX_HANG + 1 }, (_, columns) => Decoration.line({ class: `opf-hang-${columns}` }));
+
+function build(view) {
+  const builder = new RangeSetBuilder();
+  const { doc, tabSize } = view.state;
+  let last = -1;
+  for (const { from, to } of view.visibleRanges) {
+    for (let position = from; position <= to;) {
+      const line = doc.lineAt(position);
+      if (line.from > last) {
+        builder.add(line.from, line.from, decorations[hangColumns(line.text, tabSize)]);
+        last = line.from;
+      }
+      position = line.to + 1;
+    }
+  }
+  return builder.finish();
+}
+
+/** The extension: line decorations for the visible lines (a line is decorated again when the document, the viewport or the tab size changes). */
+export const hangingIndent = ViewPlugin.fromClass(
+  class {
+    constructor(view) {
+      this.decorations = build(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged || update.startState.tabSize !== update.state.tabSize) this.decorations = build(update.view);
+    }
+  },
+  { decorations: (plugin) => plugin.decorations },
+);