@openpresentation/opf-editor 0.24.3 → 0.25.1

package/dist/persistence.js

@@ -268,7 +268,7 @@ export function createPersistence(editor, options = {}) {
       }
     } else {
       // The user already worked in this session: bring the copy back as one undoable change instead of replacing their history.
-      editor.applyPatch([{ op: "replace", path: "", value: structuredClone(record.presentation) }], { source: "restore" });
+      editor.replaceDocument(structuredClone(record.presentation), { source: "restore" });
     }
     touched = true;
     baseline = record.dirty === false ? jsonOf(editor.presentation) : null;
@@ -315,7 +315,7 @@ export function createPersistence(editor, options = {}) {
     let record;
     try { record = await adapter.get(earlierKey); } catch { return false; }
     if (!validRecord(record)) return false;
-    try { editor.applyPatch([{ op: "replace", path: "", value: structuredClone(record.presentation) }], { source: "restore" }); }
+    try { editor.replaceDocument(structuredClone(record.presentation), { source: "restore" }); }
     catch { return false; }
     pending = undefined;
     touched = true;

package/dist/presenter.d.ts

@@ -83,16 +83,19 @@ export interface PresentButtonOptions {
   density?: "comfortable" | "touch";
   /** The accessible name (default "Present"). */
   label?: string;
+  /** `"quiet"` (default): a transparent icon button like the toolbar's undo and redo. `"primary"`: the filled accent look of the Export trigger. */
+  variant?: "quiet" | "primary";
 }
 
 export interface PresentButton {
   readonly element: HTMLButtonElement;
   setDisabled(reason?: boolean | string): void;
   setDensity(density: "comfortable" | "touch"): void;
+  setVariant(variant: "quiet" | "primary"): void;
   destroy(): void;
 }
 
-/** The icon-only Present button: a Lucide Presentation icon, `aria-label="Present"`, title "Present (F5)", styled like the Export trigger. */
+/** The icon-only Present button: a Lucide Presentation icon, `aria-label="Present"`, title "Present (F5)". Quiet by default (a transparent icon button like undo and redo); `variant: "primary"` styles it like the Export trigger. */
 export declare function createPresentButton(container: HTMLElement, options?: PresentButtonOptions): PresentButton;
 
 /**

package/dist/presenter.js

@@ -372,9 +372,10 @@ function isInteractiveTarget(target) {
  * Mount the Present button in `container`: an icon-only button (Lucide Presentation) named "Present", titled "Present (F5)".
  *
  * Options: `onPresent(event)`, `disabled` (`true`, or a string that says why and is the title), `density` (`"comfortable"` 32px, or `"touch"` 40px)
- * and `label` (the accessible name, default "Present"). A disabled button stays focusable (`aria-disabled`) and does nothing.
+ * `label` (the accessible name, default "Present") and `variant` (`"quiet"`, the default: a transparent icon button like the toolbar's undo and redo,
+ * or `"primary"`: the filled accent look of the Export trigger). A disabled button stays focusable (`aria-disabled`) and does nothing.
  *
- * Returns `{ element, setDisabled(reason), setDensity(density), destroy() }`.
+ * Returns `{ element, setDisabled(reason), setDensity(density), setVariant(variant), destroy() }`.
  */
 export function createPresentButton(container, options = {}) {
   if (!container?.ownerDocument) throw new TypeError("A DOM container is required.");
@@ -384,7 +385,7 @@ export function createPresentButton(container, options = {}) {
   let destroyed = false;
   const button = el(doc, "button", {
     type: "button", class: "opf-present-button opf-ui", "aria-label": label, title: "Present (F5)", "aria-keyshortcuts": "F5",
-    "data-density": options.density === "touch" ? "touch" : "comfortable",
+    "data-density": options.density === "touch" ? "touch" : "comfortable", "data-variant": options.variant === "primary" ? "primary" : "quiet",
   }, icon(doc, "Presentation", 16));
   const paint = () => {
     if (disabledReason) { button.setAttribute("aria-disabled", "true"); button.title = disabledReason; }
@@ -404,6 +405,7 @@ export function createPresentButton(container, options = {}) {
       paint();
     },
     setDensity(next) { button.dataset.density = next === "touch" ? "touch" : "comfortable"; },
+    setVariant(next) { button.dataset.variant = next === "primary" ? "primary" : "quiet"; },
     destroy() { destroyed = true; button.remove(); },
   };
 }

package/dist/slide-manager.js

@@ -9,6 +9,7 @@ import {
 import { listSwitchOptions } from "./switches.js";
 import { layoutRegionSummary } from "./layout-templates.js";
 import { groupLayoutChoices } from "./layout-templates.js";
+import { buildLayoutDiagram } from "./layout-diagram.js";
 import { switchDimension } from "./switches.js";
 
 let instances = 0;
@@ -521,13 +522,8 @@ export function createSlideManager(container, options) {
       template.replaceChildren(); currentPreview.replaceChildren();
       if (choice?.record?.preview && typeof choice.record.preview === "string") {
         template.append(el("img", { src: choice.record.preview, alt: `${choice.label} template preview` }));
-      } else if (Array.isArray(choice?.record?.areas)) {
-        const diagram = el("div", { class: "opf-layout-diagram" });
-        diagram.style.gridTemplateAreas = choice.record.areas.map((row) => `"${row.join(" ")}"`).join(" ");
-        diagram.style.gridTemplateColumns = `repeat(${choice.record.areas[0]?.length ?? 1}, 1fr)`;
-        const areas = [...new Set(choice.record.areas.flat())].filter((area) => area !== ".");
-        for (const area of areas) { const part = el("span", { text: area }); part.style.gridArea = area; diagram.append(part); }
-        template.append(diagram);
+      } else if (Array.isArray(choice?.record?.regions)) {
+        template.append(buildLayoutDiagram(document, choice.record));
       }
       if (choice && options.renderLayoutPreview) {
         try { currentPreview.innerHTML = options.renderLayoutPreview(deck(), current(), choice) ?? ""; }

package/dist/source-pane.d.ts

@@ -1,4 +1,4 @@
-import type { EditorSession } from "./index.js";
+import type { EditorChange, EditorSession } from "./index.js";
 import type { JsonCatalogContext } from "./json-options.js";
 import type { JsonCodeEditor } from "./json-editor.js";
 
@@ -64,8 +64,26 @@ export interface SourcePaneOptions {
   onError?(error: unknown): void;
 }
 
+export interface ReplaceDocumentOptions {
+  /** The JSON text the document was read from. Used when it parses to the document, so its spelling is kept. */
+  source?: string;
+  /** The file name without extension, as `setName` (the document's own name is not used). */
+  name?: string;
+  /** Extra `meta` for the session change (`source` defaults to `"replace-document"`). */
+  meta?: Record<string, unknown>;
+}
+
 export interface SourcePane {
   element: HTMLElement;
+  /**
+   * Open a different document in the session and the pane (a host's example menu, File > Open): `editor.replaceDocument`, so it is one
+   * undoable change and no catalog record is forked into `catalogs.custom` (a diff typed or pasted into the pane is an edit; this is not).
+   * `document` is a parsed document or JSON text. The pane shows `options.source` (the JSON text the document was read from, kept byte for
+   * byte; `document` itself when it is text) in JSON and the document written in YAML or Markdown. Undo and Redo bring back each
+   * document's text exactly, in the format that is shown. A document the session refuses throws (`invalid-opf-edit` with `issues`) and
+   * changes nothing. Works in a read-only pane.
+   */
+  replaceDocument(document: unknown, options?: ReplaceDocumentOptions): EditorChange;
   /** 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

@@ -2,7 +2,7 @@ import { parse as parseJsonc, printParseErrorCode } from "jsonc-parser";
 import { fromYaml, scanYamlComments, toYaml } from "@openpresentation/opf/yaml";
 import { fromMarkdown, toMarkdown } from "@openpresentation/opf/markdown";
 import { mountJsonCodeEditor } from "./json-editor.js";
-import { createSourceMemory, findDuplicateKey, updateJsonSource } from "./exact-source.js";
+import { MAX_EXACT_SOURCE_LENGTH, createSourceMemory, findDuplicateKey, updateJsonSource } from "./exact-source.js";
 import { lineForPath, lineOfOffset, offsetOfLine } from "./source-lines.js";
 import { errorText, normalizeFinding, rejectionFindings as findingsOfError } from "./source-findings.js";
 
@@ -127,6 +127,17 @@ export function createSourcePane(container, options = {}) {
   // Whether the findings include an error, and what the editor's `aria-invalid` currently says (null: not yet set).
   let invalid = false, shownInvalid = null;
   const lineCache = { key: "", values: new Map() };
+  // The exact text of the documents `replaceDocument` replaced and opened, per format, so Undo and Redo show it again byte for byte
+  // (a YAML comment, the author's JSON spelling). Keyed by format and document; the oldest entries go first.
+  const exactTexts = new Map();
+  const rememberText = (target, value, text) => {
+    if (typeof text !== "string" || text.length > MAX_EXACT_SOURCE_LENGTH) return;
+    const key = `${target}|${JSON.stringify(value)}`;
+    exactTexts.delete(key);
+    exactTexts.set(key, text);
+    while (exactTexts.size > 8) exactTexts.delete(exactTexts.keys().next().value);
+  };
+  const exactText = (target, value) => exactTexts.get(`${target}|${JSON.stringify(value)}`);
 
   // ---- DOM ----------------------------------------------------------------------------------------------------------
   const root = el("div", "opf-source opf-ui", { "data-density": density });
@@ -315,6 +326,12 @@ export function createSourcePane(container, options = {}) {
       const before = control.api.getValue(), comments = scanYamlComments(before).count;
       if (comments > 0 && written.text !== before) transientNotes = [normalizeFinding({ message: `${plural(comments, "comment")} in the YAML ${comments === 1 ? "was" : "were"} dropped when the document changed outside the source.`, severity: "warning" }, "format")];
     }
+    // A document `replaceDocument` opened or replaced comes back with the exact text it had.
+    const exact = exactText(format, deck());
+    if (exact !== undefined && exact !== written.text) {
+      try { if (same(readText(format, exact, catalogs()).deck, deck())) { written = { ...written, text: exact }; if (format === "json") jsonText = exact; } }
+      catch { /* The remembered text no longer reads as this document: use the generated one. */ }
+    }
     noteFindings = written.notes;
     if (format !== "json") syncJsonSafe();
     if (written.text !== control.api.getValue()) show(written.text);
@@ -332,6 +349,60 @@ export function createSourcePane(container, options = {}) {
     fromSession();
   });
 
+  // ---- Replacing the whole document ----------------------------------------------------------------------------------
+  /**
+   * Open `input` (a document, or JSON text) as the whole document with `editor.replaceDocument`: one undoable change, no catalog record
+   * forked. The text shown is `options.source` (or `input` when it is text) in JSON, the document written in YAML or Markdown, and Undo
+   * and Redo bring each document's text back exactly.
+   */
+  function replaceDocument(input, replaceOptions = {}) {
+    if (destroyed) throw new Error("The source pane was destroyed.");
+    flush();
+    const before = deck();
+    const beforeText = dirty ? undefined : control.api.getValue();
+    const authored = typeof input === "string" ? input : replaceOptions.source;
+    transientNotes = [];
+    let change;
+    applying = true;
+    try {
+      // Remember the spelling of the document being replaced, then open the new one.
+      syncJson(before);
+      change = editor.replaceDocument(input, { format, ...replaceOptions.meta });
+    } catch (error) {
+      rejectionFindings = error?.issues?.length ? findingsOfError(error) : [normalizeFinding({ message: errorText(error), kind: "rejected" })];
+      renderFindings();
+      throw error;
+    } finally { applying = false; }
+    clearTimeout(timer);
+    timer = null;
+    for (const key of Object.keys(drafts)) delete drafts[key];
+    syntaxFindings = [];
+    rejectionFindings = [];
+    dirty = false;
+    version++;
+    const opened = deck();
+    let written;
+    let authoredJson = null;
+    if (typeof authored === "string") { try { if (same(JSON.parse(authored), opened) && !findDuplicateKey(authored)) authoredJson = authored; } catch { /* Not the document's JSON: write it. */ } }
+    if (replaceOptions.name !== undefined) { name = sanitizeName(replaceOptions.name) || "deck"; updateBar(); }
+    try { written = format === "json" && authoredJson !== null ? { text: authoredJson, notes: [] } : write(format, opened); }
+    catch (error) {
+      syncJsonSafe();
+      rejectionFindings = [normalizeFinding({ message: `The document cannot be written as ${formatOf(format).label}: ${errorText(error)}. The text below is the last version that could be.`, kind: "rejected" })];
+      renderFindings();
+      return change;
+    }
+    if (authoredJson !== null) jsonText = authoredJson; else syncJsonSafe();
+    rememberText(format, opened, written.text);
+    rememberText(format, before, beforeText);
+    noteFindings = written.notes;
+    if (written.text !== control.api.getValue()) show(written.text); else baseline = written.text;
+    renderedKey = "";
+    renderFindings();
+    syncAttributes();
+    return change;
+  }
+
   // ---- Format -------------------------------------------------------------------------------------------------------
   function setFormatInternal(next, notify) {
     const target = formatOf(next);
@@ -627,6 +698,11 @@ export function createSourcePane(container, options = {}) {
 
   return {
     element: root,
+    /**
+     * Open a different document: `editor.replaceDocument` as one undoable change that forks no catalog record, with the text shown in
+     * the current format. `options.source` is the JSON text the document was read from (kept byte for byte); `options.name` renames the file.
+     */
+    replaceDocument,
     /** Re-read the document from the session (for example after the host changed it without events). */
     refresh() { version++; fromSession(false); },
     /** Replace the host findings; `setFindings(null)` returns to the session's own validation. */