@openpresentation/opf-editor 0.26.7 → 0.26.8

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.8",
   "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.8"
   },
   "peerDependencies": {
-    "@openpresentation/opf-render": "^0.26.7"
+    "@openpresentation/opf-render": "^0.26.8"
   },
   "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/gallery": "0.26.8",
+    "@openpresentation/opf-pptx": "0.26.8",
+    "@openpresentation/opf-render": "0.26.8"
   },
   "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": "bb6faa40bebc1654f607bf6a434c43b5e95d0b1e"
 }