@openpresentation/opf-editor 0.28.0 → 0.29.0

package/dist/source-completions.js

@@ -6,7 +6,7 @@ import { isolateHistory } from "@codemirror/commands";
 import { EditorSelection } from "@codemirror/state";
 import { describeField } from "@openpresentation/opf/schema";
 import { listCatalogRecords, mergeCatalogs } from "./catalogs.js";
-import { LAYOUT_INTENT_GROUPS, layoutRegionSummary } from "./layout-templates.js";
+import { CUSTOM_LAYOUTS_GROUP, layoutGroupName, layoutGroupOrder, layoutRegionSummary } from "./layout-templates.js";
 import { Document, parse as parseYamlDocument, parseDocument } from "yaml";
 import { pathAt, scanMarkdown } from "@openpresentation/opf/source";
 import { findNodeAtLocation, getNodeValue } from "jsonc-parser";
@@ -188,12 +188,14 @@ function literalOption(label, literal, extra) {
 function catalogOptions(kind, context, catalogs) {
   let records = [];
   try { records = listCatalogRecords(context.document, kind, { catalogs }); } catch { records = []; }
+  // Deck records first, then the catalog's groups in its own order (and its records in its order within a group), then custom layouts.
+  const position = new Map(records.map((record, index) => [record, index]));
+  const groups = kind === "layouts" ? layoutGroupOrder(records) : [];
   const order = (record) => {
     if (record.origin === "document") return -1;
     if (kind !== "layouts") return 0;
-    const id = record.id.replace(/^default:/, "");
-    const group = LAYOUT_INTENT_GROUPS.findIndex((entry) => entry.ids.includes(id));
-    return group < 0 ? LAYOUT_INTENT_GROUPS.length * 100 : group * 100 + LAYOUT_INTENT_GROUPS[group].ids.indexOf(id);
+    const group = layoutGroupName(record);
+    return (group === CUSTOM_LAYOUTS_GROUP ? groups.length : groups.indexOf(group)) * 100000 + position.get(record);
   };
   records.sort((a, b) => order(a) - order(b) || a.label.localeCompare(b.label, "en", { numeric: true }) || a.id.localeCompare(b.id, "en"));
   const intent = kind === "layouts";

package/dist/source-pane.d.ts

@@ -179,13 +179,17 @@ export interface SourcePaneOptions {
   smartListEnter?: boolean;
   /**
    * Run the pane's text checks (reading YAML or Markdown, the syntax pass of JSON and the document validation) in a Web Worker, so typing in a deck
-   * of a thousand slides never blocks the main thread. A function returns the Worker (`() => new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`
-   * with a bundler that supports that form); a Worker is used as given; `true` starts `source-worker.js` beside the package's own module, which works
-   * when a bundler follows `new URL(..., import.meta.url)`. Only the typing delay uses the worker: every explicit action (`getText`, switching the format,
-   * `replaceDocument`, Format, Undo) is applied on the main thread at once. When the worker cannot start, fails or stops answering, the pane checks on the
-   * main thread from then on and `onError` is called once; no edit is lost. Default `false` (everything on the main thread).
+   * of a thousand slides never blocks the main thread. `true` starts the package's own worker with `new Worker(new URL("./source-worker.js",
+   * import.meta.url), { type: "module" })`, which webpack, Turbopack and Vite (build) bundle; a function returns the Worker
+   * (`() => new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })`); a Worker is used as given; a URL
+   * (or a string) is the address of a worker script the host built itself (esbuild: build `@openpresentation/opf-editor/source-worker` as an entry
+   * point) and is started as a module worker. The worker file imports core, so it only runs bundled. See docs/embedding.md, "The source worker",
+   * for each bundler. Only the typing delay uses the worker: every explicit action (`getText`, switching the format, `replaceDocument`, Format, Undo)
+   * is applied on the main thread at once. When the worker cannot start, fails, stops answering, or loads but does not say it is ready within 5 s (a
+   * script the bundler emptied), the pane checks on the main thread from then on and `onError` is called once with a message that names the
+   * worker; no edit is lost. Default `false` (everything on the main thread).
    */
-  worker?: boolean | Worker | (() => Worker);
+  worker?: boolean | string | URL | Worker | (() => Worker);
   /** A preview for the card F12 and Alt+F12 open on a catalog record only the app provides (see `JsonCodeEditorOptions.resolvePreview`). */
   resolvePreview?: (kind: string, id: string) => HTMLElement | string | undefined | Promise<HTMLElement | string | undefined>;
   onError?(error: unknown): void;
@@ -218,6 +222,14 @@ export interface SourcePane {
    * (`invalid-opf-edit` with `issues`) and changes nothing. Works in a read-only pane.
    */
   replaceDocument(document: unknown, options?: ReplaceDocumentOptions): EditorChange;
+  /**
+   * Load raw source text as the pane's whole text, as if pasted over everything: a file as it was read, a draft that does not parse. Nothing is
+   * converted; the bytes stay as given (line endings included; a leading byte order mark is dropped). `options.format` switches the pane to the
+   * text's format first (without writing the document in it), `options.name` renames the file. Text that reads as a document the session
+   * accepts is applied at once as one undoable edit; anything else stays as a draft with its problems and the session keeps its last valid
+   * document. Returns true when the session now holds the text's document. Throws in a read-only pane.
+   */
+  setSourceText(text: string, options?: { format?: SourceFormat; name?: string }): boolean;
   /** Re-read the document from the session. */
   refresh(): void;
   /** Replace the host findings; `null` returns to the session's own validation. */

package/dist/source-pane.js

@@ -708,6 +708,44 @@ export function createSourcePane(container, options = {}) {
     options.onFormatChange?.(format, previous);
   }
 
+  /**
+   * Put `text` in the pane as its whole source, in `next` (default the pane's format), as if the person had pasted it over everything: no
+   * conversion, the bytes as given (line endings included; a byte order mark is dropped). Text that reads as a document the session accepts is
+   * applied at once (one undoable edit; Undo in the code brings the old text back); anything else stays in the pane as a draft with its problems,
+   * and the session keeps its last valid document. Returns true when the session now holds the text's document.
+   */
+  function setSourceText(text, { format: next, name: nextName } = {}) {
+    if (destroyed) throw new Error("The source pane was destroyed.");
+    if (typeof text !== "string") throw new TypeError("setSourceText needs the source text as a string.");
+    if (next !== undefined && !FORMATS.some((entry) => entry.id === next)) throw new TypeError(`setSourceText: format must be "json", "yaml" or "md", not ${JSON.stringify(next)}.`);
+    if (readOnly) throw new Error("The source pane is read-only.");
+    flush();
+    closeConfirm(false);
+    const previous = format;
+    for (const key of Object.keys(drafts)) delete drafts[key];
+    transientNotes = [];
+    rejectionFindings = [];
+    syntaxFindings = [];
+    if (next !== undefined && next !== format) {
+      format = next;
+      noteFindings = [];
+      control.setLanguage(formatOf(next).language);
+      refreshDecorations();
+    }
+    if (nextName !== undefined) name = sanitizeName(nextName) || "deck";
+    updateBar();
+    control.api.replace(0, control.api.getValue().length, text.replace(/^\uFEFF/, ""));
+    control.api.setSelection(0);
+    // Read and apply it now, also when it is the text already shown (in another format, say).
+    baseline = null;
+    flush();
+    renderedKey = "";
+    renderFindings();
+    syncAttributes();
+    if (format !== previous) options.onFormatChange?.(format, previous);
+    return !dirty;
+  }
+
   // ---- Menu ---------------------------------------------------------------------------------------------------------
   const menuOpen = () => !menu.hidden;
   function openMenu(focus = "checked") {
@@ -795,6 +833,8 @@ export function createSourcePane(container, options = {}) {
     nameButton.textContent = name;
     nameButton.setAttribute("aria-label", `Rename ${name}`);
     formatLabel.textContent = `.opf.${current.extension}`;
+    // The visible extension is part of the button's name (WCAG 2.5.3, label in name).
+    formatButton.setAttribute("aria-label", `Source format .opf.${current.extension}`);
     root.dataset.format = current.id;
     canonicalAction.hidden = current.id === "json";
     for (const item of menuItems) item.setAttribute("aria-checked", String(item.dataset.format === current.id));
@@ -1291,6 +1331,11 @@ export function createSourcePane(container, options = {}) {
       renderedKey = "";
       renderFindings();
     },
+    /**
+     * Load raw source text (a file, a paste, a draft that does not parse) as the pane's whole text, in `options.format`, without converting it.
+     * Returns true when it read as a document the session accepted, false when it stays a draft with its problems. See `setSourceText` above.
+     */
+    setSourceText,
     /** Switch the source format ("json", "yaml" or "md"). Returns false when the document cannot be written in it. */
     setFormat: (next) => setFormatInternal(next, false),
     getFormat: () => format,

package/dist/source-worker.js

@@ -1,7 +1,9 @@
-// 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 worker entry of the source pane's text checks (`createSourcePane(el, { worker })`). `worker: true` starts it with
+// `new Worker(new URL("./source-worker.js", import.meta.url), { type: "module" })`, which webpack, Turbopack, Vite (build) and Parcel bundle; a host can
+// also write `new Worker(new URL("@openpresentation/opf-editor/source-worker", import.meta.url), { type: "module" })` itself, or build this file as an
+// extra entry point (esbuild) and pass its URL. The file imports core, so it runs only bundled. See docs/embedding.md, "The source worker". It does the
+// same work as the pane's own inline path (`./source-check.js`), off the main thread. It says `{ ready: true }` once it runs, so the pane can tell a
+// worker that loaded but never started (an emptied script) from a slow check. 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";
 
@@ -23,6 +25,8 @@ function drain() {
   });
 }
 
+self.postMessage({ ready: true });
+
 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.

package/dist/studio-canvas.d.ts

@@ -0,0 +1,34 @@
+/** CE-20 (internal): the Studio's canvas: the kit viewport and overlay over the workspace's canvas, driven by the slide adapter. */
+import type { KitDom } from "./studio-kit/dom.js";
+import type { CanvasEditor } from "./canvas.js";
+import type { SlideAdapter } from "./slide-adapter.js";
+import type { SceneNode } from "./slide-scene.js";
+
+export declare function dottedPath(pointer: string): string;
+export declare function isTextNode(node: SceneNode | null | undefined): boolean;
+export interface StudioCanvas {
+  paint(): void;
+  paintHover(): void;
+  readonly zoom: number;
+  readonly panMode: boolean;
+  setZoom(zoom: number, options?: { anchor?: { clientX: number; clientY: number } }): number;
+  step(direction: number): number;
+  fit(mode?: "slide" | "width"): number;
+  readonly tool: "select" | "hand" | "text";
+  setTool(tool: "select" | "hand" | "text"): void;
+  focusPrimary(): void;
+  boxOf(key: string): Element | undefined;
+  describe(node: SceneNode): string;
+  beginInsertDrag(kind: string, event: PointerEvent, options?: { onEnd?(): void }): boolean;
+  readonly dragging: boolean;
+  cancelDrag(): void;
+  setEnabled(on: boolean): void;
+  destroy(): void;
+}
+export declare function createStudioCanvas(options: {
+  dom: KitDom;
+  elements: { root: HTMLElement; viewport: HTMLElement; stage: HTMLElement; frame: HTMLElement; overlay: HTMLElement };
+  canvas: CanvasEditor;
+  adapter: SlideAdapter;
+  studio: any;
+}): StudioCanvas;