@openpresentation/opf-editor 0.26.0 → 0.26.2

package/dist/json-options.js

@@ -3,22 +3,7 @@ import { listCatalogRecords } from "./catalogs.js";
 import { resolveSchema, schemaAtPath, schemaVariants } from "./schema.js";
 import { findNodeAtOffset, getNodePath, parse as parseJsonc, parseTree } from "jsonc-parser";
 import { LAYOUT_INTENT_GROUPS, layoutRegionSummary } from "./layout-templates.js";
-// The catalog kind a field references (OPF 0.15: every content kind is `id` or `name:id`), read from where the field sits.
-const ROOT_REFERENCES = { narrative: "narratives", audience: "audiences", purpose: "purposes", tone: "tones" };
-const DESIGN_REFERENCES = { theme: "themes", colorScheme: "colorSchemes", fontScheme: "fontSchemes" };
-function catalogAtPath(path) {
-    const parts = path.map(String);
-    // A reference's object form names its record with `id`; an audience array's entries are references too.
-    const field = parts.at(-1) === "id" ? parts.slice(0, -1) : parts;
-    const tail = /^\d+$/.test(field.at(-1) ?? "") && field.at(-2) === "audience" ? field.slice(0, -1) : field;
-    const key = tail.at(-1);
-    if (tail.length === 3 && tail[0] === "slides" && key === "layout") return "layouts";
-    if (tail.length === 1 && ROOT_REFERENCES[key]) return ROOT_REFERENCES[key];
-    if (DESIGN_REFERENCES[key] && ((tail.length === 2 && tail[0] === "design") || (tail.length === 4 && tail[0] === "slides" && tail[2] === "design"))) return DESIGN_REFERENCES[key];
-    // Inside an embedded record: a theme's colour or font scheme.
-    if (tail.length === 5 && tail[0] === "catalogs" && tail[2] === "themes" && (key === "colorScheme" || key === "fontScheme")) return DESIGN_REFERENCES[key];
-    return undefined;
-}
+import { catalogKindAt } from "@openpresentation/opf/schema";
 const sourceDetails = {
     "Loaded catalog": ["Provided by app", "Records from a catalog this app registered; nothing is fetched from a URL. Saving embeds the record in the document."],
     "Document catalog": ["In this document", "Embedded in this document’s catalogs. Takes precedence over the app’s records with the same reference."],
@@ -44,7 +29,8 @@ function describeOptions(choices, records, current, catalog) {
 function fieldOptions(presentation, path, loadedCatalogs, { string, boolean }) {
     const schema = schemaAtPath(presentation, path.map(String));
     const variants = schemaVariants(schema);
-    const catalog = catalogAtPath(path);
+    // A reference's object form names its record with `id`: the field is the reference.
+    const segments = path.map(String), catalog = catalogKindAt(segments.at(-1) === "id" ? segments.slice(0, -1) : segments, presentation);
     const options = new Map();
     const records = new Map();
     // A document group whose source no registered catalog matches: its records beyond the embedded ones are not available here.
@@ -136,13 +122,15 @@ export function fieldOptionEdit(context, value) {
 const PLACEHOLDER = "__opf_completion__";
 const WORD = /[A-Za-z0-9_.-]/;
 // The token being typed: inside a string (a quote opened earlier on this line) or a bare word. JSON strings never span lines.
-function tokenAt(text, position, explicit) {
+export function tokenAt(text, position, explicit) {
     const lineStart = Math.max(text.lastIndexOf("\n", position - 1), text.lastIndexOf("\r", position - 1)) + 1;
-    let open = -1;
+    let open = -1, last = null;
     for (let index = lineStart; index < position; index++) {
-        if (open >= 0) { if (text[index] === "\\") index++; else if (text[index] === '"') open = -1; }
+        if (open >= 0) { if (text[index] === "\\") index++; else if (text[index] === '"') { last = { start: open, end: index }; open = -1; } }
         else if (text[index] === '"') open = index;
     }
+    // Asked for explicitly (Ctrl+Space) right after a closing quote: the string just ended is the token, as in VS Code.
+    if (open < 0 && explicit && last?.end === position - 1) return { quoted: true, closed: true, start: last.start, end: position, from: last.start + 1, to: position - 1 };
     if (open >= 0) {
         let close = -1;
         for (let index = position; index < text.length && text[index] !== "\n" && text[index] !== "\r"; index++) {

package/dist/presenter.js

@@ -19,6 +19,29 @@ const CLICK_GUARD_MS = 450;
 const NEXT_KEYS = new Set(["ArrowRight", " ", "PageDown", "Enter"]);
 const PREVIOUS_KEYS = new Set(["ArrowLeft", "PageUp", "Backspace"]);
 
+// Full screen belongs to the document, not to one presenter: the browser ends whatever is full screen when an exit it was asked for runs, and tells
+// every listener. A presenter that closed early asks for its exit late (when its pending full screen request resolves), possibly after a newer
+// presenter took full screen. So the exits the presenters asked for are counted per document, and any presenter reads a `fullscreenchange` that
+// answers one of them as ours, not as the user leaving full screen.
+const exitRequests = new WeakMap(); // Document -> Set of exits asked for and not yet reported
+const attributedEvents = new WeakMap(); // fullscreenchange Event -> whether it answered an exit a presenter asked for
+function noteExit(doc, win) {
+  let requests = exitRequests.get(doc);
+  if (!requests) exitRequests.set(doc, requests = new Set());
+  const request = {};
+  requests.add(request);
+  // The browser reports an exit with the event; when it does not (the exit was refused, or two exits became one event), stop counting it soon.
+  return { forget: () => requests.delete(request), forgetSoon: () => win.setTimeout(() => requests.delete(request), 500) };
+}
+function answersAnExit(doc, event) {
+  if (attributedEvents.has(event)) return attributedEvents.get(event);
+  const requests = exitRequests.get(doc);
+  const ours = Boolean(requests?.size) && !doc.fullscreenElement;
+  if (ours) requests.delete(requests.values().next().value);
+  attributedEvents.set(event, ours);
+  return ours;
+}
+
 const DEFAULT_LABELS = {
   /** The accessible name of the presenter dialog. */
   dialog: "Presentation",
@@ -69,7 +92,7 @@ export function createPresenter(container, options = {}) {
   // Drawn slides by deck index, for the deck object they were drawn from: a new snapshot (an edit) or a new start() draws again.
   let drawn = new Map(), drawnFor;
 
-  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, leaving = false, returnTo = null;
+  let active = false, destroyed = false, current = -1, opener = null, enteredFullscreen = false, returnTo = null;
   let counterTimer, preloadTimer, renderToken = 0, swipe = null, clickGuardUntil = 0;
 
   // ---- the DOM ----------------------------------------------------------------------------------------------------------------------------
@@ -208,11 +231,12 @@ export function createPresenter(container, options = {}) {
       () => "overlay",
     );
   }
-  // Ask the browser to leave full screen; onFullscreenChange then sees `leaving` and does not read the exit as the user's. Focus goes back to the
-  // element that opened the presentation once the exit is done, because the page behind a full screen element takes no focus until then.
+  // Ask the browser to leave full screen; onFullscreenChange then sees that the event answers an exit asked for (by this presenter or an earlier
+  // one) and does not read it as the user's. Focus goes back to the element that opened the presentation once the exit is done, because the page
+  // behind a full screen element takes no focus until then.
   function leaveFullscreen() {
-    leaving = true;
-    Promise.resolve(doc.exitFullscreen?.()).then(restoreFocus, () => { leaving = false; });
+    const exit = noteExit(doc, win);
+    Promise.resolve(doc.exitFullscreen?.()).then(() => { exit.forgetSoon(); restoreFocus(); }, exit.forget);
   }
   // Only when nobody took focus since: the host may move it in `onExit`.
   function restoreFocus() {
@@ -220,11 +244,11 @@ export function createPresenter(container, options = {}) {
     if (returnTo?.isConnected && typeof returnTo.focus === "function" && (!now || now === doc.body || now === root)) returnTo.focus({ preventScroll: true });
   }
   // The browser takes full screen away with Esc (that key never reaches the page) or the host exits it: the presentation ends with it.
-  function onFullscreenChange() {
+  function onFullscreenChange(event) {
     if (doc.fullscreenElement === root) return;
-    if (leaving) {
-      // The exit that stop() asked for finished. If the host started again meanwhile, full screen is gone and the overlay carries on.
-      leaving = false;
+    if (answersAnExit(doc, event)) {
+      // An exit that a presenter asked for finished: ours from stop(), or an earlier presenter's that ran after this one took full screen. A
+      // presentation still running carries on as the overlay.
       if (active && enteredFullscreen) { enteredFullscreen = false; root.dataset.mode = "overlay"; }
       return;
     }

package/dist/schema.js

@@ -1,122 +1,5 @@
-import { schemas, catalogSchemaNames } from '@openpresentation/opf';
-import { getValueAtPath, splitOpfPath, opfPathToJsonPointer } from './index.js';
+// The schema helpers moved to core (`@openpresentation/opf/schema`), where the CLI, agents and every editor read the schemas one way. This module
+// keeps the editor's exports.
+import { schemas } from '@openpresentation/opf';
+export { activeSchema, createSchemaValue, listSchemaFields, resolveSchema, schemaAtPath, schemaLabel, schemaType, schemaVariants } from '@openpresentation/opf/schema';
 export const opfSchemas = schemas;
-const documents = new Map(Object.values(schemas).map(schema => [schema.$id, schema]));
-const own = (object, key) => Object.prototype.hasOwnProperty.call(object, key);
-// An allOf of shaping members (the SlideDesign definition is Design plus a `not` constraint) reads as one schema: members are
-// merged, properties included; constraint-only members (`not`, `required`) shape nothing a picker can show and are dropped.
-function mergeAllOf(schema, root, seen) {
-  if (!Array.isArray(schema.allOf)) return schema;
-  const {allOf, ...base} = schema;
-  let merged = base;
-  for (const member of allOf) {
-    const resolved = resolveSchema(member, root, new Set(seen));
-    if (!resolved.properties && !resolved.type && !resolved.oneOf && !resolved.anyOf) continue;
-    merged = {...resolved, ...merged, ...(resolved.properties || merged.properties ? {properties: {...resolved.properties, ...merged.properties}} : {})};
-  }
-  return merged;
-}
-export function resolveSchema(schema, root = schemas.presentation, seen = new Set()) {
-  if (!schema || typeof schema !== 'object') return {};
-  if (!schema.$ref) return mergeAllOf(schema, root, seen);
-  const ref = schema.$ref;
-  if (seen.has(ref)) return {};
-  seen.add(ref);
-  const [id, fragment = ''] = ref.split('#');
-  const target = id ? documents.get(id) : root;
-  if (!target) throw new Error(`Unresolved OPF schema: ${ref}`);
-  const resolved = fragment ? getValueAtPath(target, fragment) : target;
-  if (!resolved) throw new Error(`Unresolved OPF schema: ${ref}`);
-  const { $ref, ...rest } = schema;
-  return mergeAllOf({...resolveSchema(resolved, target, seen), ...rest}, target, seen);
-}
-export function schemaVariants(schema, root = schemas.presentation) {
-  const resolved = resolveSchema(schema, root);
-  if (Array.isArray(resolved.type)) return resolved.type.flatMap(type=>schemaVariants({...resolved,type},root));
-  const variants = resolved.oneOf ?? resolved.anyOf;
-  if (!variants) return [resolved];
-  const {$ref, oneOf, anyOf, ...base} = resolved;
-  return variants.flatMap(child => schemaVariants(child, root).map(variant => {
-    // A branch that only names required fields (Watermark: exactly one of src and text) adds to the base's required list and is
-    // labelled by them, so the generic form offers "src" and "text" as two forms of one object.
-    const requiredOnly = !variant.type && !variant.properties && !variant.$ref && Array.isArray(variant.required);
-    return {...base, ...variant, properties: base.properties || variant.properties ? {...base.properties,...variant.properties} : undefined,
-      ...(base.required || variant.required ? {required: [...new Set([...(base.required ?? []), ...(variant.required ?? [])])]} : {}),
-      ...(requiredOnly && !variant.title ? {title: variant.required.join(' + ')} : {})};
-  }));
-}
-export function schemaType(schema, value) {
-  return schema.type ?? (schema.properties || schema.additionalProperties ? 'object' : schema.items ? 'array' : schema.const !== undefined ? typeof schema.const : value === null ? 'null' : Array.isArray(value) ? 'array' : typeof value === 'undefined' ? 'string' : typeof value);
-}
-function score(schema, value) {
-  const type=schemaType(schema,value);
-  if (type === 'integer' ? !Number.isInteger(value) : type === 'array' ? !Array.isArray(value) : type === 'null' ? value !== null : typeof value !== type || (type === 'object' && (value === null || Array.isArray(value)))) return -100;
-  if (own(schema,'const')) return JSON.stringify(schema.const)===JSON.stringify(value)?100:-100;
-  if(schema.enum && !schema.enum.includes(value))return -100;
-  let result=1;
-  for(const [key,child] of Object.entries(schema.properties??{})) {
-    if(!value || !own(value,key))continue;
-    if(own(child,'const'))result+=value[key]===child.const?100:-1000;
-    else result+=1;
-  }
-  for(const key of schema.required??[])if(!value || !own(value,key))result-=2;
-  return result;
-}
-export function activeSchema(schema, value, root=schemas.presentation) {
-  return schemaVariants(schema,root).sort((a,b)=>score(b,value)-score(a,value))[0] ?? {};
-}
-export function schemaAtPath(presentation, path, root = schemas.presentation) {
-  const parts=splitOpfPath(path);let current=root,value=presentation;
-  for(let index=0; index<parts.length;index++) {
-    const key=parts[index], resolved=activeSchema(current,value,root);
-    if(parts[0]==='catalogs' && index===3 && catalogSchemaNames[parts[2]]) current=schemas[catalogSchemaNames[parts[2]]]??{};
-    else current=Array.isArray(value)||resolved.type==='array' ? resolved.items??{} : resolved.properties?.[key] ?? Object.entries(resolved.patternProperties??{}).find(([pattern])=>new RegExp(pattern).test(key))?.[1] ?? (typeof resolved.additionalProperties==='object'?resolved.additionalProperties:{});
-    value=value?.[key];
-  }
-  return resolveSchema(current,root);
-}
-export function schemaLabel(schema, index=0) {
-  const type=schemaType(schema);
-  return schema.title ?? schema.properties?.type?.const ?? (schema.const!==undefined?String(schema.const):`${type}${schema.properties ? ` · ${Object.keys(schema.properties).slice(0,3).join(', ')}` : ''}`) ?? `Option ${index+1}`;
-}
-export function createSchemaValue(schema, root=schemas.presentation, depth=0) {
-  if(depth>20)throw new Error('Choose a shallower initial value for this recursive structure.');
-  const variants=schemaVariants(schema,root), s=variants[0]??{};
-  if(own(s,'const'))return structuredClone(s.const);
-  if(own(s,'default'))return structuredClone(s.default);
-  if(s.enum?.length)return structuredClone(s.enum[0]);
-  const type=schemaType(s);
-  if(type==='object'){
-    const value={};
-    for(const key of new Set([...(s.required??[]),...Object.keys(s.properties??{}).filter(key=>own(s.properties[key],'const'))])) value[key]=createSchemaValue(s.properties?.[key]??{},root,depth+1);
-    if(s.anyOf || s.oneOf){ /* Variants have already been expanded. */ }
-    return value;
-  }
-  if(type==='array')return Array.from({length:Math.min(s.minItems??0,100)},()=>createSchemaValue(s.items??{},root,depth+1));
-  if(type==='boolean')return false;
-  if(type==='null')return null;
-  if(type==='number'||type==='integer')return s.minimum??(s.exclusiveMinimum!==undefined?s.exclusiveMinimum+1:0);
-  if(s.examples?.length && typeof s.examples[0]==='string' && !s.examples[0].includes('...'))return s.examples[0];
-  if(s.format==='uri')return 'https://example.com';
-  if(s.pattern?.includes('a-z'))return 'example';
-  return s.minLength?'Text':'';
-}
-export function listSchemaFields() {
-  const result=[];
-  for(const [name,root] of Object.entries(schemas)) {
-    const walk=(schema,path)=>{
-      if(!schema || typeof schema!=='object')return;
-      for(const [key,child]of Object.entries(schema.properties??{})){
-        result.push({schema:name,path:opfPathToJsonPointer([...path,'properties',key]),name:key,description:child.description??'',reference:child.$ref??null,type:child.type??null,values:child.enum??(own(child,'const')?[child.const]:null)});
-        walk(child,[...path,'properties',key]);
-      }
-      for(const [key,child]of Object.entries(schema.$defs??{}))walk(child,[...path,'$defs',key]);
-      for(const keyword of ['oneOf','anyOf','allOf']) (schema[keyword]??[]).forEach((child,index)=>walk(child,[...path,keyword,String(index)]));
-      if(schema.items)walk(schema.items,[...path,'items']);
-      if(typeof schema.additionalProperties==='object')walk(schema.additionalProperties,[...path,'additionalProperties']);
-      for(const [key,child]of Object.entries(schema.patternProperties??{}))walk(child,[...path,'patternProperties',key]);
-    };
-    walk(root,[]);
-  }
-  return result;
-}

package/dist/source-a11y.js

@@ -0,0 +1,109 @@
+// Screen reader support for the source editor (artifacts/source-editor/SPEC.md, section 13): one polite live region next to the code that says
+// what happened while the author types (how many suggestions, which one is selected, what was inserted, which tab stop a snippet is at), and an
+// accessible name for every suggestion that carries its kind and its place in the list. Plain DOM, no network.
+import { ViewPlugin } from "@codemirror/view";
+import { completionStatus, currentCompletions, pickedCompletion, selectedCompletion } from "@codemirror/autocomplete";
+
+const CLEAR_AFTER = 1500;
+const SELECTION_DELAY = 100;
+const MERGE_WITHIN = 400;
+const KIND_WORDS = { property: "property", enum: "value", boolean: "value", catalog: "catalog id", reference: "reference", snippet: "snippet", keyword: "keyword", text: "text" };
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
+/**
+ * The live region: `say(message)` replaces its text (an identical message in a row is announced again), and the text goes after 1.5 seconds.
+ * `onSay` also receives every message (hosts mirror them into their own region; tests read them).
+ */
+export function createAnnouncer(parent, onSay) {
+  const document = parent.ownerDocument;
+  const region = document.createElement("div");
+  region.className = "opf-source-live";
+  region.setAttribute("role", "status");
+  region.setAttribute("aria-live", "polite");
+  region.setAttribute("aria-atomic", "true");
+  parent.append(region);
+  let timer = null, toggle = false;
+  return {
+    element: region,
+    say(message) {
+      if (!message) return;
+      clearTimeout(timer);
+      toggle = !toggle;
+      region.textContent = toggle ? message : `${message}​`;
+      onSay?.(message);
+      timer = setTimeout(() => { region.textContent = ""; }, CLEAR_AFTER);
+    },
+    destroy() { clearTimeout(timer); region.remove(); },
+  };
+}
+
+/** The first sentence of a documentation text, for the selection announcement. */
+export function firstSentence(text) {
+  if (typeof text !== "string") return "";
+  const flat = text.replace(/\s+/g, " ").trim();
+  return /^.*?[.!?](?=\s|$)/.exec(flat)?.[0] ?? flat;
+}
+
+/** The accessible name of one suggestion: `label, kind[, required][, detail]. n of total`. */
+export function optionName(completion, index, total) {
+  const kind = KIND_WORDS[completion.type] ?? completion.type ?? "";
+  const parts = [completion.label];
+  if (kind) parts.push(kind);
+  if (completion.opfRequired) parts.push("required");
+  if (completion.detail && completion.detail !== kind) parts.push(completion.detail);
+  return `${parts.join(", ")}. ${index + 1} of ${total}`;
+}
+
+/**
+ * The editor extension: announces the list opening (the count), the selection changing (label, kind and the first sentence of its
+ * documentation; after a short pause so arrowing through the list is not read item by item) and a suggestion being inserted; and names
+ * every rendered option for assistive technology. `describe(completion)` gives the documentation text of an item.
+ */
+export function a11yExtension(announcer, describe = () => "") {
+  return ViewPlugin.fromClass(class {
+    constructor(view) {
+      this.view = view;
+      this.open = false;
+      this.selected = null;
+      this.timer = null;
+      this.labelTimer = null;
+    }
+    update(update) {
+      const { state } = update;
+      for (const tr of update.transactions) {
+        const picked = tr.annotation(pickedCompletion);
+        if (picked) announcer.say(`Inserted ${picked.label}`);
+      }
+      const open = completionStatus(state) === "active" && currentCompletions(state).length > 0;
+      const selected = open ? selectedCompletion(state) : null;
+      if (open && !this.open) {
+        announcer.say(plural(currentCompletions(state).length, "suggestion"));
+      } else if (open && selected && selected !== this.selected) {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+          const text = firstSentence(describe(selected));
+          const kind = KIND_WORDS[selected.type] ?? selected.type ?? "";
+          announcer.say(`${selected.label}${kind ? `, ${kind}` : ""}${selected.opfRequired ? ", required" : ""}.${text ? ` ${text}` : ""}`);
+        }, SELECTION_DELAY);
+      }
+      if (!open) clearTimeout(this.timer);
+      this.open = open;
+      this.selected = selected;
+      if (open) {
+        clearTimeout(this.labelTimer);
+        this.labelTimer = setTimeout(() => this.label(), 0);
+      }
+    }
+    label() {
+      const { view } = this, { state } = view;
+      const completions = currentCompletions(state);
+      if (!completions.length) return;
+      for (const node of view.dom.querySelectorAll(".cm-tooltip-autocomplete [role=option]")) {
+        const index = Number(node.id.slice(node.id.lastIndexOf("-") + 1));
+        const completion = completions[index];
+        if (completion) node.setAttribute("aria-label", optionName(completion, index, completions.length));
+      }
+    }
+    destroy() { clearTimeout(this.timer); clearTimeout(this.labelTimer); }
+  });
+}