@openpresentation/opf-editor 0.26.7 → 0.26.9

package/README.md

@@ -707,7 +707,7 @@ const persistence = createPersistence(editor, {
   storage: "indexeddb",               // default; or "localstorage", "memory", false, or your own { get, set, delete } adapter
   onRestorePrompt: ui.prompt,         // or return "restore" | "discard" | "later" (or a promise) yourself
   onStatus: ui.status,                // "Saved on this device at 2:03 PM", or why autosave is off
-  beforeFlush: () => canvas.commit(), // commit a draft before every write and before the page unloads
+  beforeFlush: () => canvas.commit(), // commit a draft before an explicit flush and before the page unloads (the debounced write leaves a draft alone)
 });
 await persistence.ready;              // { available, offered }: storage opened and read (it does not wait for the user's decision)
 await persistence.markSaved();        // after the host saved the document somewhere of its own: not unsaved, and the stored copy says so

package/dist/persistence.d.ts

@@ -63,7 +63,7 @@ export interface PersistenceOptions {
   onRestorePrompt?: (offer: RestoreOffer, actions: { restore(): Promise<boolean>; discard(): Promise<boolean> }) => RestoreChoice | Promise<RestoreChoice>;
   /** Called on every status change, for an indicator. */
   onStatus?: (status: AutosaveStatus) => void;
-  /** Called synchronously before each explicit, debounced or lifecycle flush, even before any session edit. Commit the active draft; returning false or throwing refuses the write and reports a draft error. */
+  /** Called synchronously before each explicit or lifecycle flush (`flush()`, `markSaved()`, `beforeunload`, `pagehide`), even before any session edit. The debounced autosave does not call it: it writes the committed document and leaves an edit in progress alone. Commit the active draft; returning false or throwing refuses the write and reports a draft error. */
   beforeFlush?: () => boolean | void;
   /** Warn before the page closes while the document is `dirty` (default true). */
   warnOnUnload?: boolean;

package/dist/persistence.js

@@ -223,29 +223,38 @@ export function createPersistence(editor, options = {}) {
     if (!firstDirtyAt) firstDirtyAt = at;
     clearTimeout(timer);
     const wait = Math.max(0, Math.min(debounceMs, firstDirtyAt + maxWaitMs - at));
-    timer = setTimeout(() => { void flush(); }, wait);
+    timer = setTimeout(() => { void flushNow(false); }, wait);
   }
   /** Write the document now (cancelling the debounce) and resolve when it is stored. Resolves false when nothing could be written. */
   function flush() {
+    return flushNow(true);
+  }
+  // The debounce timer writes what is committed and leaves an edit in progress alone: committing it would close the inline editor
+  // under the user's hands, a moment after an earlier change (the timer starts at that change) and long before they stop typing.
+  // The draft is not lost: the page is still open, and every flush that precedes leaving (unload, page hide, `flush()`, `markSaved()`)
+  // commits it first.
+  function flushNow(commitDraft) {
     clearTimeout(timer);
     firstDirtyAt = 0;
     if (destroyed) return Promise.resolve(false);
-    // Commit synchronously, including a draft in an otherwise untouched session. The lifecycle
-    // warning below must see that edit before it decides whether leaving would lose work.
-    // A commit emits a change; clear its debounce again and avoid recursive host flush hooks.
-    if (preparingFlush) return chain;
-    preparingFlush = true;
-    try {
-      if (options.beforeFlush?.() === false) throw new Error("Commit or cancel the active draft first.");
-      flushRefused = false;
-    } catch (error) {
-      flushRefused = true;
-      setStatus({ state: "error", error: "draft", message: `Autosave could not commit the active draft (${String(error?.message ?? error)}). Keep this page open to recover your work.` });
-      return Promise.resolve(false);
-    } finally {
-      preparingFlush = false;
-      clearTimeout(timer);
-      firstDirtyAt = 0;
+    if (commitDraft) {
+      // Commit synchronously, including a draft in an otherwise untouched session. The lifecycle
+      // warning below must see that edit before it decides whether leaving would lose work.
+      // A commit emits a change; clear its debounce again and avoid recursive host flush hooks.
+      if (preparingFlush) return chain;
+      preparingFlush = true;
+      try {
+        if (options.beforeFlush?.() === false) throw new Error("Commit or cancel the active draft first.");
+        flushRefused = false;
+      } catch (error) {
+        flushRefused = true;
+        setStatus({ state: "error", error: "draft", message: `Autosave could not commit the active draft (${String(error?.message ?? error)}). Keep this page open to recover your work.` });
+        return Promise.resolve(false);
+      } finally {
+        preparingFlush = false;
+        clearTimeout(timer);
+        firstDirtyAt = 0;
+      }
     }
     if (!touched) return chain.then(() => true);
     chain = chain.then(writeRecord, writeRecord);

package/dist/source-wrap.js

@@ -1,4 +1,4 @@
-import { RangeSetBuilder, countColumn } from "@codemirror/state";
+import { RangeSetBuilder, StateEffect, 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).
@@ -6,9 +6,14 @@ import { Decoration, ViewPlugin } from "@codemirror/view";
 // 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 hang is capped at 40% of the line's width, so a deeply nested line still leaves room for text on a phone. The cap is worked out here, in
+// columns, from the measured width, and not in the stylesheet: a percentage in `padding-left` makes the style and layout of every line depend on
+// its containing block, and replacing the text of a long document then took about 15 times as long (0.26.7).
 
-/** 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. */
+/** The most columns a line can hang. The stylesheet defines `opf-hang-0` through `opf-hang-${MAX_HANG}`. */
 export const MAX_HANG = 32;
+/** The share of the line's width a hang can take. */
+export const HANG_SHARE = 0.4;
 const LIST_MARKER = /^([-*+]|\d{1,9}[.)])[ \t]+/;
 const OFFSET = 2;
 
@@ -22,9 +27,18 @@ export function hangColumns(text, tabSize = 4) {
   return Math.min(columns, MAX_HANG);
 }
 
+/**
+ * The most columns a line can hang in a line `width` pixels wide whose columns are `columnWidth` pixels wide: 40% of the width, in whole
+ * columns, never above MAX_HANG. `MAX_HANG` when either size is unknown (zero, negative or not a number), for example while the editor is hidden.
+ */
+export function hangCap(width, columnWidth) {
+  if (!(width > 0) || !(columnWidth > 0)) return MAX_HANG;
+  return Math.max(0, Math.min(MAX_HANG, Math.floor((width * HANG_SHARE) / columnWidth)));
+}
+
 const decorations = Array.from({ length: MAX_HANG + 1 }, (_, columns) => Decoration.line({ class: `opf-hang-${columns}` }));
 
-function build(view) {
+function build(view, cap) {
   const builder = new RangeSetBuilder();
   const { doc, tabSize } = view.state;
   let last = -1;
@@ -32,7 +46,7 @@ function build(view) {
     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)]);
+        builder.add(line.from, line.from, decorations[Math.min(hangColumns(line.text, tabSize), cap)]);
         last = line.from;
       }
       position = line.to + 1;
@@ -41,14 +55,42 @@ function build(view) {
   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). */
+const setCap = StateEffect.define();
+
+/** The width of the text area of a line, in pixels: the content box of the editor's content element, which is what a percentage would have resolved against. */
+function lineWidth(view) {
+  const content = view.contentDOM, style = getComputedStyle(content);
+  return content.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+}
+
+/**
+ * The extension: line decorations for the visible lines (a line is decorated again when the document, the viewport, the tab size or the cap
+ * changes). The cap is measured in CodeMirror's measure cycle whenever the geometry changes, and the lines are decorated again only when it differs.
+ */
 export const hangingIndent = ViewPlugin.fromClass(
   class {
     constructor(view) {
-      this.decorations = build(view);
+      this.cap = MAX_HANG;
+      this.decorations = build(view, this.cap);
+      this.measure = {
+        key: this,
+        read: (target) => hangCap(lineWidth(target), target.defaultCharacterWidth),
+        write: (cap, target) => {
+          if (cap === this.cap) return;
+          // The measure cycle is an update in progress: the new cap is dispatched right after it, before the browser paints.
+          queueMicrotask(() => { if (!this.destroyed) target.dispatch({ effects: setCap.of(cap) }); });
+        },
+      };
+      view.requestMeasure(this.measure);
     }
     update(update) {
-      if (update.docChanged || update.viewportChanged || update.startState.tabSize !== update.state.tabSize) this.decorations = build(update.view);
+      let capped = false;
+      for (const transaction of update.transactions) for (const effect of transaction.effects) if (effect.is(setCap)) { this.cap = effect.value; capped = true; }
+      if (update.geometryChanged || update.viewportChanged) update.view.requestMeasure(this.measure);
+      if (capped || update.docChanged || update.viewportChanged || update.startState.tabSize !== update.state.tabSize) this.decorations = build(update.view, this.cap);
+    }
+    destroy() {
+      this.destroyed = true;
     }
   },
   { decorations: (plugin) => plugin.decorations },

package/dist/styles.css

@@ -3555,8 +3555,10 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 
 /* A wrapped line continues under its own indentation (src/source-wrap.js, VS Code's wrappingIndent "indent"): `opf-hang-<n>` says how many
    columns, the first line keeps its place (a negative text-indent of the same width) and every continuation line starts n columns in.
-   The hang is capped at 40% of the line so a deeply nested line still leaves room for text at 320px. Text inside an inline widget does not
-   inherit the negative indent. `--opf-line-start` is the line's own left padding (the source pane sets it to 2px). */
+   The hang is capped at 40% of the line so a deeply nested line still leaves room for text at 320px; the cap is applied to n in source-wrap.js,
+   from the measured width, because a percentage here makes style and layout of every line very slow (replacing the text of an 848-line
+   document took 8.5 s instead of 0.56 s). Text inside an inline widget does not inherit the negative indent. `--opf-line-start` is the line's own
+   left padding (the source pane sets it to 2px). */
 .cm-line.opf-hang-0 { --opf-hang: 0; }
 .cm-line.opf-hang-1 { --opf-hang: 1; }
 .cm-line.opf-hang-2 { --opf-hang: 2; }
@@ -3591,8 +3593,8 @@ input.opf-lx-input[data-field="max"] { font-family: var(--opf-ui-mono); font-siz
 .cm-line.opf-hang-31 { --opf-hang: 31; }
 .cm-line.opf-hang-32 { --opf-hang: 32; }
 :is(.opf-ui, .opf-json, .opf-code) .cm-line {
-  padding-left: calc(var(--opf-line-start, 6px) + min(calc(var(--opf-hang, 0) * 1ch), 40%));
-  text-indent: calc(-1 * min(calc(var(--opf-hang, 0) * 1ch), 40%));
+  padding-left: calc(var(--opf-line-start, 6px) + var(--opf-hang, 0) * 1ch);
+  text-indent: calc(-1 * var(--opf-hang, 0) * 1ch);
 }
 
 :is(.opf-ui, .opf-json, .opf-code) .cm-line > * {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openpresentation/opf-editor",
-  "version": "0.26.7",
+  "version": "0.26.9",
   "description": "Embeddable local OPF editor primitives built on the deterministic renderer.",
   "license": "MIT",
   "type": "module",
@@ -287,10 +287,10 @@
     "@lezer/highlight": "1.2.5",
     "jsonc-parser": "3.3.1",
     "yaml": "^2.9.1",
-    "@openpresentation/opf": "^0.26.7"
+    "@openpresentation/opf": "^0.26.9"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.7"
+    "@openpresentation/opf-render": "^0.26.9"
   },
   "peerDependenciesMeta": {
     "@openpresentation/opf-render": {
@@ -349,9 +349,9 @@
     "pdf-lib": "1.17.1",
     "pdfjs-dist": "6.4.299",
     "playwright": "1.64.0",
-    "@openpresentation/gallery": "0.26.7",
-    "@openpresentation/opf-pptx": "0.26.7",
-    "@openpresentation/opf-render": "0.26.7"
+    "@openpresentation/opf-pptx": "0.26.9",
+    "@openpresentation/gallery": "0.26.9",
+    "@openpresentation/opf-render": "0.26.9"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -402,5 +402,5 @@
     "test:export-menu-browser": "node test/export-menu-browser.mjs",
     "test:agent-handoff-browser": "node test/agent-handoff-browser.mjs"
   },
-  "gitHead": "9c8a2c82ee5d42462cfe1404e3a3172ab759645f"
+  "gitHead": "7563d8dea2ba24a36b032614a50f665876d145e5"
 }