@memorysmithapp/markdown-renderer 0.6.0 → 0.7.0

package/dist/edit/image-size.js

@@ -0,0 +1,61 @@
+/**
+ * The size an image is drawn at, as its notation writes it (#98): the dimensions after the pipe
+ * of a Markdown image's description, `![description|300](address)` (`SPEC.md` §3.14), or of the
+ * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7). The editor reads them and
+ * rewrites them, and no other byte.
+ */
+import { readDimensions, readImageAlt } from '../image-dimensions.js';
+/** The largest width the notation writes: five digits (`SPEC.md` §3.14). */
+export const MAX_IMAGE_WIDTH = 99999;
+const MARKDOWN_IMAGE = /^!\[([^\]]*)\]\(/;
+const EMBED = /^!\[\[([^\]]*)\]\]$/;
+/**
+ * The size an image's source declares, and where it is written. `null` for a source that is not an
+ * image's notation, and for an embed whose pipe holds something other than dimensions, which the
+ * editor does not overwrite.
+ */
+export function readImageSize(source) {
+    // A block's line may be indented, or end in spaces, around its one embed.
+    const lead = source.length - source.trimStart().length;
+    const size = readTrimmed(source.trim());
+    return size && lead ? { ...size, at: { from: size.at.from + lead, to: size.at.to + lead } } : size;
+}
+function readTrimmed(source) {
+    const image = MARKDOWN_IMAGE.exec(source);
+    if (image) {
+        const alt = image[1] ?? '';
+        const start = 2;
+        const read = readImageAlt(alt);
+        if (read.width === null)
+            return { width: null, height: null, at: { from: start + alt.length, to: start + alt.length }, pipe: '|' };
+        return { width: read.width, height: read.height, at: { from: start + alt.lastIndexOf('|'), to: start + alt.length }, pipe: '|' };
+    }
+    const embed = EMBED.exec(source);
+    if (embed) {
+        const inner = embed[1] ?? '';
+        const start = 3;
+        const pipe = /\\?\|/.exec(inner);
+        if (!pipe)
+            return { width: null, height: null, at: { from: start + inner.length, to: start + inner.length }, pipe: '|' };
+        const measured = readDimensions(inner.slice(pipe.index + pipe[0].length));
+        if (!measured)
+            return null;
+        return { width: measured.width, height: measured.height, at: { from: start + pipe.index, to: start + inner.length }, pipe: pipe[0] };
+    }
+    return null;
+}
+/**
+ * The change that draws the image whose source starts at `from` at `width`, its height following,
+ * or at its own size for `null`: the dimensions written, replaced or taken away, and nothing else.
+ * Empty when the source is not an image's notation or already says so.
+ */
+export function resizeImage(source, from, width) {
+    const size = readImageSize(source);
+    if (!size)
+        return [];
+    const wanted = width === null ? null : Math.min(MAX_IMAGE_WIDTH, Math.max(1, Math.round(width)));
+    if (wanted === size.width && (wanted === null || size.height === null))
+        return [];
+    const insert = wanted === null ? '' : `${size.pipe}${wanted}`;
+    return [{ from: from + size.at.from, to: from + size.at.to, insert }];
+}

package/dist/edit/live.d.ts

@@ -24,6 +24,8 @@ export declare const analysisField: StateField<Analysis>;
 export declare const setFocused: import("@codemirror/state").StateEffectType<boolean>;
 /** A grammar a code block names has arrived: its tokens can be coloured now (#84). */
 export declare const grammarArrived: import("@codemirror/state").StateEffectType<string>;
+/** The metrics of the editor's text column, which a drawn block estimates its height by (#91). */
+export declare const metricsField: StateField<BlockMetrics>;
 export declare const decorationsField: StateField<DecorationSet>;
 /**
  * The live page: the analysis, the decorations over it, and what the focus and a modifier-click do.

package/dist/edit/live.js

@@ -9,7 +9,7 @@
 import { EditorSelection, Facet, Prec, StateEffect, StateField } from '@codemirror/state';
 import { Decoration, EditorView, keymap, ViewPlugin, WidgetType } from '@codemirror/view';
 import katex from 'katex';
-import { Component, createElement } from 'react';
+import { Component, createElement, Fragment, useLayoutEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { followable } from '../address.js';
 import { highlightTree, languageToLoad, loadGrammar } from '../highlight.js';
@@ -17,8 +17,8 @@ import { HostProvider, resolveHost } from '../host.js';
 import { readImageAlt } from '../image-dimensions.js';
 import { highlightLanguage } from '../highlight.js';
 import { analyze } from './analyze.js';
-import { DEFAULT_METRICS, estimateHeight, measuredHeight, rememberHeight, withinReason } from './heights.js';
-import { AddProperties, CalloutBlock, PropertiesBlock, reveal, Snippet, TableBlock } from './blocks.js';
+import { DEFAULT_METRICS, estimateHeight, lineHeightOf, measureLines, measuredHeight, rememberHeight, withinReason } from './heights.js';
+import { AddProperties, CalloutBlock, ImageBlock, PropertiesBlock, reveal, Snippet, TableBlock } from './blocks.js';
 import { LanguageControl } from './LanguageControl.js';
 import { toggleTaskBox } from './commands.js';
 export const editorEnvironment = Facet.define({
@@ -39,8 +39,10 @@ export const setFocused = StateEffect.define();
 export const grammarArrived = StateEffect.define();
 /** The editor's metrics changed: the blocks made from now on estimate their height by them (#91). */
 const setBlockMetrics = StateEffect.define();
+/** A block's height was learned before it was drawn: the blocks are made again with it (#94). */
+const heightsLearned = StateEffect.define();
 /** The metrics of the editor's text column, which a drawn block estimates its height by (#91). */
-const metricsField = StateField.define({
+export const metricsField = StateField.define({
     create: () => DEFAULT_METRICS,
     update: (metrics, transaction) => {
         for (const effect of transaction.effects)
@@ -53,10 +55,19 @@ const metricsField = StateField.define({
 const metricsWatcher = ViewPlugin.define((view) => {
     let destroyed = false;
     const check = () => view.requestMeasure({
-        read: () => withinReason({ width: view.contentDOM.clientWidth, lineHeight: view.defaultLineHeight, charWidth: view.defaultCharacterWidth }),
+        read: () => withinReason({
+            width: view.contentDOM.clientWidth,
+            lineHeight: view.defaultLineHeight,
+            charWidth: view.defaultCharacterWidth,
+            ...measureLines(view.dom),
+        }),
         write: (next) => {
             const now = view.state.field(metricsField);
-            const moved = Math.abs(next.width - now.width) >= 1 || Math.abs(next.lineHeight - now.lineHeight) >= 0.5 || Math.abs(next.charWidth - now.charWidth) >= 0.05;
+            const lines = (metrics) => [...(metrics.headings ?? []), ...(metrics.code ? [metrics.code] : [])].map((each) => `${each.lineHeight.toFixed(1)}/${each.charWidth.toFixed(2)}/${each.padding.toFixed(1)}/${each.inset.toFixed(1)}`).join();
+            const moved = Math.abs(next.width - now.width) >= 1 ||
+                Math.abs(next.lineHeight - now.lineHeight) >= 0.5 ||
+                Math.abs(next.charWidth - now.charWidth) >= 0.05 ||
+                lines(next) !== lines(now);
             // Not inside the measure, where CodeMirror takes no transaction.
             if (moved)
                 queueMicrotask(() => destroyed || view.dispatch({ effects: setBlockMetrics.of(next) }));
@@ -109,22 +120,70 @@ class BlockBoundary extends Component {
 }
 /** The React roots the widgets mounted, unmounted when CodeMirror lets the widget go. */
 const roots = new WeakMap();
-function mount(view, element, node, source, measured) {
-    const { host } = view.state.facet(editorEnvironment);
+/** The widget an element draws now: one made again for the same block takes its element over (#99). */
+const drawing = new WeakMap();
+/** How long a block made again holds the height it was drawn at, at most, while it draws (#99). */
+const HOLD_MS = 2000;
+/** Tells its block it was drawn, once React has put it in the page. */
+function Drawn({ onDrawn, children }) {
+    useLayoutEffect(onDrawn);
+    return createElement(Fragment, null, children);
+}
+/**
+ * Draws `node` in `element` with React, under the editor's host. `held` is the height the block
+ * was drawn at before, which the element keeps until what it draws is as tall — the root draws on
+ * React's schedule, and an element left empty meanwhile would let the page collapse under the
+ * author (#99).
+ */
+function mount(view, element, node, source, identity, measured, held) {
     const root = createRoot(element);
-    // Drawn on React's own schedule: CodeMirror builds its widgets inside its update, which may run
-    // inside a React commit, where React cannot be asked to render synchronously.
-    root.render(createElement(HostProvider, { value: host }, createElement(BlockBoundary, { host, source }, node)));
+    let holding = held !== undefined && held > 0;
+    if (holding)
+        element.style.minHeight = `${held}px`;
+    const release = () => {
+        holding = false;
+        element.style.minHeight = '';
+    };
+    const timer = holding ? setTimeout(release, HOLD_MS) : undefined;
+    // Released once what it draws fills the height it holds: the content's own box, margins aside.
+    const check = () => {
+        if (!holding || typeof document.createRange !== 'function')
+            return;
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        if (range.getBoundingClientRect().height >= held * 0.9) {
+            clearTimeout(timer);
+            release();
+        }
+    };
+    const render = (next, text, drawn) => {
+        const { host } = view.state.facet(editorEnvironment);
+        // Drawn on React's own schedule: CodeMirror builds its widgets inside its update, which may run
+        // inside a React commit, where React cannot be asked to render synchronously. Keyed by what it
+        // draws: the same block is drawn again in place, another one replaces it at once on commit,
+        // what was drawn before staying until then (#99).
+        root.render(createElement(HostProvider, { value: host }, createElement(BlockBoundary, { key: drawn, host, source: text }, createElement(Drawn, { onDrawn: check }, next))));
+    };
+    render(node, source, identity);
     // A block whose content arrives later — an embed, a diagram — changes its height after it is
     // measured; the editor is told so, or the lines below it would be placed by the old height.
     const observer = typeof ResizeObserver === 'undefined'
         ? null
         : new ResizeObserver(() => {
-            measured(element.getBoundingClientRect().height);
+            check();
+            if (!holding)
+                measured(element.getBoundingClientRect().height);
             view.requestMeasure();
         });
     observer?.observe(element);
-    roots.set(element, { unmount: () => root.unmount(), observer });
+    roots.set(element, {
+        unmount: () => {
+            clearTimeout(timer);
+            root.unmount();
+        },
+        observer,
+        render,
+    });
 }
 function unmount(element) {
     const mounted = roots.get(element);
@@ -155,29 +214,57 @@ class BlockWidget extends WidgetType {
         this.options = options;
         this.inline = options.inline ?? false;
         this.source = options.source ?? '';
+        this.estimate = this.estimateNow();
     }
     /** What it is remembered by once measured: what it draws, wherever in the note it stands. */
     get identity() {
         return `${this.options.kind ?? 'block'}\u0000${this.source}`;
     }
+    /**
+     * The height it is laid out at until drawn, read when it is made: a block whose height was learned
+     * since — measured, or measured ahead of being drawn (#94) — is made again with it, so CodeMirror
+     * reads the new one, and keeps its drawing through `updateDOM`.
+     */
+    estimate;
     eq(other) {
-        return other.key === this.key && other.host === this.host;
+        return other.key === this.key && other.host === this.host && other.estimate === this.estimate;
+    }
+    /**
+     * A block of the same kind made again — because it moved, the host was given again, its
+     * estimate was learned or its source changed — keeps its element: it is drawn again in it, with
+     * this widget's positions and the host as it is now (#94, #99). The same source keeps its React
+     * tree; another source replaces it on commit, so the element is never left empty.
+     */
+    updateDOM(dom, view, from) {
+        const mounted = roots.get(dom);
+        if (!mounted || from.inline !== this.inline || from.options.kind !== this.options.kind || from.revealsOnClick !== this.revealsOnClick)
+            return false;
+        drawing.set(dom, this);
+        if (from.key !== this.key || from.host !== this.host)
+            mounted.render(this.draw(view), this.source, this.identity);
+        return true;
     }
     toDOM(view) {
         const element = document.createElement(this.inline ? 'span' : 'div');
         element.className = this.inline ? 'cm-ms-inline-block' : 'cm-ms-block';
-        mount(view, element, this.draw(view), this.source, (height) => rememberHeight(this.identity, view.state.field(metricsField), height));
+        drawing.set(element, this);
+        const metrics = view.state.field(metricsField);
+        const held = this.inline ? undefined : measuredHeight(this.identity, metrics);
+        // Remembered for what the element draws now, which a widget made again may have changed.
+        const measured = (height) => rememberHeight((drawing.get(element) ?? this).identity, view.state.field(metricsField), height);
+        mount(view, element, this.draw(view), this.source, this.identity, measured, held);
         element.addEventListener('mousedown', (event) => {
             const target = event.target;
             if (target.closest('[data-ms-control]'))
                 return;
             if (event.metaKey || event.ctrlKey)
                 return;
-            if (!this.revealsOnClick)
+            const widget = drawing.get(element) ?? this;
+            if (!widget.revealsOnClick)
                 return;
             event.preventDefault();
             // At the end of its first line: after a fence's language, a callout's title, a formula's `$$`.
-            reveal(view, view.state.doc.lineAt(blockStart(view, element, this.key)).to);
+            reveal(view, view.state.doc.lineAt(blockStart(view, element, widget.key)).to);
         });
         // A link inside a drawn block is followed with a modifier only, as in the text.
         element.addEventListener('click', (event) => {
@@ -198,10 +285,14 @@ class BlockWidget extends WidgetType {
      * block is made: the height it was drawn at before at this width, or its estimate (#91).
      */
     get estimatedHeight() {
-        if (this.inline)
-            return -1;
+        return this.estimate;
+    }
+    estimateNow() {
         const metrics = this.options.metrics ?? DEFAULT_METRICS;
         const kind = this.options.kind;
+        // Within a line only an image estimates, as tall as the line it stands in (#91).
+        if (this.inline && !kind)
+            return -1;
         return measuredHeight(this.identity, metrics) ?? (kind ? estimateHeight(kind, this.source, metrics) : 2 * metrics.lineHeight);
     }
 }
@@ -222,6 +313,29 @@ function blockStart(view, element, key) {
     });
     return found === -1 ? near : found;
 }
+/**
+ * Nothing drawn, at the start of a line CodeMirror would estimate too short — a heading, larger than
+ * the text and spaced from it — telling it how tall the line is until it is drawn (#94). CodeMirror
+ * lays a line out at the tallest of its widgets' estimates and its own, so this only ever raises it.
+ */
+class LineEstimate extends WidgetType {
+    height;
+    constructor(height) {
+        super();
+        this.height = height;
+    }
+    eq(other) {
+        return other.height === this.height;
+    }
+    toDOM() {
+        const element = document.createElement('span');
+        element.className = 'cm-ms-line-estimate';
+        return element;
+    }
+    get estimatedHeight() {
+        return this.height;
+    }
+}
 class BulletWidget extends WidgetType {
     eq() {
         return true;
@@ -306,52 +420,15 @@ class MathWidget extends WidgetType {
         return false;
     }
 }
-/** What an image declares no height for is drawn at before it loads, near enough (#91). */
-const UNDECLARED_IMAGE_HEIGHT = 200;
-class ImageWidget extends WidgetType {
-    source;
-    match;
-    alt;
-    constructor(source) {
-        super();
-        this.source = source;
-        this.match = /^!\[([^\]]*)\]\(\s*<?([^)\s>]+)>?(?:\s+"[^"]*")?\s*\)$/.exec(source);
-        this.alt = readImageAlt(this.match?.[1] ?? '');
-    }
-    eq(other) {
-        return other.source === this.source;
-    }
-    toDOM() {
-        const match = this.match;
-        const address = match ? followable(match[2] ?? '') : '';
-        if (!match || !address) {
-            const text = document.createElement('span');
-            text.className = 'cm-ms-raw';
-            text.textContent = this.source;
-            return text;
-        }
-        const image = document.createElement('img');
-        image.className = 'cm-ms-image';
-        image.src = address;
-        // Its description and the dimensions it declares, as the page draws it (`SPEC.md` §3.14).
-        image.alt = this.alt.description;
-        if (this.alt.width !== null)
-            image.width = this.alt.width;
-        if (this.alt.height !== null)
-            image.height = this.alt.height;
-        return image;
-    }
-    /** The line it stands in is as tall as the image: the height it declares, or a guess (#91). */
-    get estimatedHeight() {
-        if (!this.match)
-            return -1;
-        if (this.alt.height !== null)
-            return this.alt.height;
-        return this.alt.width !== null ? Math.round(this.alt.width * 0.75) : UNDECLARED_IMAGE_HEIGHT;
-    }
-    ignoreEvent() {
-        return false;
-    }
+/** A Markdown image's description and address, when its address is one the page follows. */
+function readImage(source) {
+    const match = /^!\[([^\]]*)\]\(\s*<?([^)\s>]+)>?(?:\s+"[^"]*")?\s*\)$/.exec(source);
+    const address = match ? followable(match[2] ?? '') : '';
+    return match && address ? { alt: readImageAlt(match[1] ?? ''), address } : null;
+}
+/** An image drawn with its description and the dimensions it declares, as the page draws it (`SPEC.md` §3.14). */
+function drawImage({ alt, address }) {
+    return createElement('img', { className: 'cm-ms-image', src: address, alt: alt.description, width: alt.width ?? undefined, height: alt.height ?? undefined });
 }
 // ── Decorations ──────────────────────────────────────────────────────────────
 const hide = Decoration.replace({});
@@ -370,6 +447,8 @@ function build(state) {
     const ranges = state.selection.ranges;
     const out = [];
     const covered = [];
+    /** The level of each heading, by its line's number, which its estimate is made for (#94). */
+    const headingLevels = new Map();
     /** Whether the author's cursor or selection is on this range, ends included. */
     const touches = (from, to) => focused && ranges.some((range) => range.from <= to && range.to >= from);
     /** The whole lines a construct takes, its last line break left out. */
@@ -449,6 +528,9 @@ function build(state) {
             case 'embed':
                 if (open)
                     out.push(mark('cm-ms-wikilink').range(from, to));
+                // A kept image is sized from the image itself (#98); a note's embed draws no image of its own.
+                else if (host.keeps(construct.target))
+                    block(from, to, 'embed', `embed:${source}`, (view) => createElement(ImageBlock, { view, source }, createElement(Snippet, { text: source })));
                 else
                     block(from, to, 'embed', `embed:${source}`, () => createElement(Snippet, { text: source }));
                 break;
@@ -495,6 +577,7 @@ function build(state) {
             case 'heading': {
                 out.push(line(`cm-ms-heading cm-ms-h${construct.level}`).range(doc.lineAt(from).from));
                 const { marker } = construct;
+                headingLevels.set(doc.lineAt(from).number, construct.level);
                 if (touches(doc.lineAt(from).from, doc.lineAt(from).to))
                     out.push(syntax.range(marker.from, marker.to));
                 else
@@ -537,7 +620,10 @@ function build(state) {
                 const pending = host.reaches(construct.target) === 0 && !host.keeps(construct.target);
                 if (construct.embed && host.keeps(construct.target) && !touches(from, to)) {
                     const source = text.slice(from, to);
-                    out.push(Decoration.replace({ widget: new BlockWidget(`attachment:${source}`, host, () => createElement(Snippet, { text: source }), true, { inline: true, source }) }).range(from, to));
+                    out.push(Decoration.replace({
+                        // A kept image is sized from the image itself, as a Markdown one is (#98).
+                        widget: new BlockWidget(`attachment:${source}`, host, (view) => createElement(ImageBlock, { view, source }, createElement(Snippet, { text: source })), true, { inline: true, source }),
+                    }).range(from, to));
                     break;
                 }
                 out.push(mark(`cm-ms-wikilink${pending ? ' cm-ms-pending' : ''}`, { 'data-target': construct.target, title: construct.target }).range(construct.label.from, construct.label.to));
@@ -551,10 +637,21 @@ function build(state) {
                 }
                 break;
             }
-            case 'image':
-                if (!touches(from, to))
-                    out.push(Decoration.replace({ widget: new ImageWidget(text.slice(from, to)) }).range(from, to));
+            case 'image': {
+                if (touches(from, to))
+                    break;
+                const source = text.slice(from, to);
+                const image = readImage(source);
+                // An image the page cannot follow shows its notation, as written.
+                if (!image)
+                    out.push(mark('cm-ms-raw').range(from, to));
+                else {
+                    // Its size is set from the image itself (#98).
+                    const draw = (view) => createElement(ImageBlock, { view, source }, drawImage(image));
+                    out.push(Decoration.replace({ widget: new BlockWidget(`image:${source}`, host, draw, true, { inline: true, source, kind: 'image', metrics }) }).range(from, to));
+                }
                 break;
+            }
             case 'inlineMath':
                 if (touches(from, to))
                     out.push(mark('cm-ms-math-source').range(from, to));
@@ -613,8 +710,47 @@ function build(state) {
                 break;
         }
     }
+    out.push(...lineEstimates(state, out, covered, headingLevels, metrics));
     return Decoration.set(out, true);
 }
+/**
+ * A `LineEstimate` for each line CodeMirror would lay out shorter than the page draws it (#94): a
+ * heading, a line of code, a line of text that wraps. Its length is what the reader sees of it, the
+ * notation the decorations hide taken away; a line a drawn block covers estimates nothing.
+ */
+function lineEstimates(state, decorations, covered, headingLevels, metrics) {
+    const doc = state.doc;
+    const hidden = new Map();
+    for (const range of decorations) {
+        if (range.value !== hide || range.to <= range.from)
+            continue;
+        const number = doc.lineAt(range.from).number;
+        hidden.set(number, (hidden.get(number) ?? 0) + range.to - range.from);
+    }
+    const code = new Set();
+    for (const construct of state.field(analysisField).constructs) {
+        if (construct.kind !== 'code')
+            continue;
+        for (let at = doc.lineAt(construct.from).number; at <= doc.lineAt(Math.max(construct.from, construct.to - 1)).number; at++)
+            code.add(at);
+    }
+    const out = [];
+    for (let number = 1; number <= doc.lines; number++) {
+        const line = doc.line(number);
+        if (line.length === 0)
+            continue;
+        if (covered.some((each) => line.from >= each.from && line.to <= each.to))
+            continue;
+        const level = headingLevels.get(number);
+        const length = line.length - (hidden.get(number) ?? 0);
+        const height = lineHeightOf(level !== undefined ? { heading: level } : code.has(number) ? 'code' : 'text', length, metrics);
+        // Said of every line, even one text line tall: a line with no decoration is laid out in a gap,
+        // which CodeMirror estimates by the length of all its lines together, too tall on a wide column.
+        if (height !== null)
+            out.push(Decoration.widget({ widget: new LineEstimate(height), side: -1 }).range(line.from));
+    }
+    return out;
+}
 /** A code block's lines, as source: its frame, its fences dimmed, its tokens coloured. */
 function codeLines(construct, out, doc, text) {
     const first = doc.lineAt(construct.from).number;
@@ -653,7 +789,7 @@ export const decorationsField = StateField.define({
     create: build,
     update: (decorations, transaction) => transaction.docChanged ||
         transaction.selection ||
-        transaction.effects.some((effect) => effect.is(setFocused) || effect.is(grammarArrived)) ||
+        transaction.effects.some((effect) => effect.is(setFocused) || effect.is(grammarArrived) || effect.is(setBlockMetrics) || effect.is(heightsLearned)) ||
         transaction.startState.facet(editorEnvironment) !== transaction.state.facet(editorEnvironment)
         ? build(transaction.state)
         : decorations,
@@ -745,6 +881,97 @@ const follow = EditorView.domEventHandlers({
         return true;
     },
 });
+/** How long an embed measured ahead of being drawn may take to load before it is let go (#94). */
+const PREMEASURE_TIMEOUT = 8000;
+/**
+ * Draws, out of sight and at the editor's width, every embed of a note whose height is not known
+ * yet, and remembers the height it is drawn at, so the page is laid out with it before the author
+ * scrolls to it (#94). What an embed draws is a note the host loads, which no estimate can know; it
+ * is asked for as the editor opens, and once measured the blocks are made again with the height.
+ */
+const embedPremeasure = ViewPlugin.define((view) => {
+    const asked = new Set();
+    const pending = new Set();
+    const premeasure = (source, identity, metrics) => {
+        const { host } = view.state.facet(editorEnvironment);
+        const container = document.createElement('div');
+        container.className = 'cm-ms-block cm-ms-premeasure';
+        container.setAttribute('aria-hidden', 'true');
+        container.style.cssText = `position: absolute; top: 0; left: 0; width: ${metrics.width}px; visibility: hidden; pointer-events: none; contain: layout style`;
+        // Outside the text, it is given the text's own face and line, which a drawn block inherits.
+        const text = getComputedStyle(view.contentDOM);
+        container.style.fontFamily = text.fontFamily;
+        container.style.fontSize = text.fontSize;
+        container.style.lineHeight = text.lineHeight;
+        (view.dom.parentElement ?? view.dom).appendChild(container);
+        const root = createRoot(container);
+        root.render(createElement(HostProvider, { value: host }, createElement(BlockBoundary, { host, source }, createElement(Snippet, { text: source }))));
+        let finished = false;
+        const finish = (height) => {
+            if (finished)
+                return;
+            finished = true;
+            pending.delete(stop);
+            clearTimeout(timer);
+            observer?.disconnect();
+            queueMicrotask(() => {
+                root.unmount();
+                container.remove();
+            });
+            // Remembered at the width it was drawn at; at another one it says nothing.
+            const now = view.state.field(metricsField);
+            if (height === null || Math.round(now.width) !== Math.round(metrics.width))
+                return;
+            rememberHeight(identity, now, height);
+            view.dispatch({ effects: heightsLearned.of(null) });
+        };
+        const stop = () => finish(null);
+        pending.add(stop);
+        // Drawn once the note arrived: no skeleton left, and a frame later, laid out.
+        const check = () => {
+            if (finished || !container.firstElementChild || container.querySelector('.embed-skeleton'))
+                return;
+            requestAnimationFrame(() => {
+                if (!finished && !container.querySelector('.embed-skeleton'))
+                    finish(container.getBoundingClientRect().height);
+            });
+        };
+        const observer = typeof MutationObserver === 'undefined' ? null : new MutationObserver(check);
+        observer?.observe(container, { childList: true, subtree: true });
+        const timer = setTimeout(stop, PREMEASURE_TIMEOUT);
+    };
+    const run = () => {
+        const { host } = view.state.facet(editorEnvironment);
+        if (!host.loadNote || typeof requestAnimationFrame === 'undefined')
+            return;
+        const metrics = view.state.field(metricsField);
+        const doc = view.state.doc;
+        for (const construct of view.state.field(analysisField).constructs) {
+            if (construct.kind !== 'embed' || host.keeps(construct.target) || host.reaches(construct.target) !== 1)
+                continue;
+            const end = construct.to > construct.from && doc.sliceString(construct.to - 1, construct.to) === '\n' ? construct.to - 1 : construct.to;
+            const source = doc.sliceString(doc.lineAt(construct.from).from, doc.lineAt(end).to);
+            const identity = `embed\u0000${source}`;
+            const key = `${Math.round(metrics.width)}\u0000${identity}`;
+            if (asked.has(key) || measuredHeight(identity, metrics) !== undefined)
+                continue;
+            asked.add(key);
+            premeasure(source, identity, metrics);
+        }
+    };
+    // Not inside the update that made the plugin, where CodeMirror takes no transaction.
+    queueMicrotask(run);
+    return {
+        update: (update) => {
+            if (update.docChanged || update.startState.field(metricsField) !== update.state.field(metricsField))
+                queueMicrotask(run);
+        },
+        destroy: () => {
+            for (const stop of [...pending])
+                stop();
+        },
+    };
+});
 /**
  * Fetches the grammar of every code block that names one not registered yet, and has the page
  * drawn again once it arrives, its tokens coloured (#84).
@@ -792,6 +1019,7 @@ export function livePage(metrics) {
         EditorView.focusChangeEffect.of((_state, focusing) => setFocused.of(focusing)),
         focusKeeper,
         grammarLoader,
+        embedPremeasure,
         blockKeys,
         follow,
     ];

package/dist/host.d.ts

@@ -38,7 +38,9 @@ export interface NoteHost {
     /**
      * The note a target names, for an embed to draw in place: its body as the host keeps it, its name
      * and its address. Asked only for a target exactly one note reaches; `null` draws the embed as
-     * pending. Without it, every embed of a note is pending. The package never fetches.
+     * pending. Without it, every embed of a note is pending. The package never fetches. In edit mode
+     * each embedded note is also asked for as the editor opens, to lay the page out at its height
+     * before it is reached (#94): a host that loads from the network may cache what it answered.
      */
     readonly loadNote?: (name: string) => Promise<EmbeddedNote | null>;
     /**

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { NoteBody, type NoteBodyProps, type NoteMode } from './NoteBody.js';
+export type { NoteButtons } from './NoteActions.js';
 export type { SaveAction, SaveNotice, SaveOutcome, SaveRefusal } from './edit/saves.js';
 export { isAttachRefusal } from './host.js';
 export type { AttachAttributes, AttachmentRequest, AttachProgress, AttachRefusal, EmbeddedNote, KeptFile, KeptFileEntry, LinkChoiceNote, LinkChoices, LinkRequest, NoteHost } from './host.js';

package/dist/mode-icons.d.ts

@@ -4,3 +4,4 @@ export declare const ICON_MARKDOWN: import("react").JSX.Element;
 export declare const ICON_COPY: import("react").JSX.Element;
 export declare const ICON_CHECK: import("react").JSX.Element;
 export declare const ICON_CLOSE: import("react").JSX.Element;
+export declare const ICON_OWN_SIZE: import("react").JSX.Element;

package/dist/mode-icons.js

@@ -9,3 +9,5 @@ export const ICON_MARKDOWN = svg('M10 12.5 8 15l2 2.5', 'm14 12.5 2 2.5-2 2.5',
 export const ICON_COPY = svg('M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z', 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2');
 export const ICON_CHECK = svg('M20 6 9 17l-5-5');
 export const ICON_CLOSE = svg('M18 6 6 18', 'm6 6 12 12');
+// The button that draws an image at its own size (#98): Lucide's scaling (ISC).
+export const ICON_OWN_SIZE = svg('M21 3 9 15', 'M12 3H3v18h18v-9', 'M16 3h5v5', 'M14 15H9v-5');

package/dist/strings.d.ts

@@ -158,6 +158,12 @@ export interface EditorWords {
     readonly addItem: string;
     readonly removeItem: string;
     readonly calloutType: string;
+    /** The field of an image's width in edit mode, in pixels (#98). */
+    readonly imageWidth: string;
+    /** The button that draws an image at its own size again (#98). */
+    readonly imageOwnSize: string;
+    /** The handle at an image's corner that drags its size (#98). */
+    readonly imageResize: string;
     readonly fold: string;
     readonly foldNone: string;
     readonly foldOpen: string;

package/dist/strings.js

@@ -156,6 +156,9 @@ export const ENGLISH = {
         addItem: 'Add',
         removeItem: 'Remove',
         calloutType: 'Type',
+        imageWidth: 'Width, in pixels',
+        imageOwnSize: 'Its own size',
+        imageResize: 'Drag to resize',
         fold: 'Folding',
         foldNone: 'Not foldable',
         foldOpen: 'Folds, open',