@memorysmithapp/markdown-renderer 0.5.0 → 0.7.0

package/dist/edit/live.js

@@ -9,14 +9,16 @@
 import { EditorSelection, Facet, Prec, StateEffect, StateField } from '@codemirror/state';
 import { Decoration, EditorView, keymap, ViewPlugin, WidgetType } from '@codemirror/view';
 import katex from 'katex';
-import { 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';
 import { HostProvider, resolveHost } from '../host.js';
+import { readImageAlt } from '../image-dimensions.js';
 import { highlightLanguage } from '../highlight.js';
 import { analyze } from './analyze.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({
@@ -35,6 +37,53 @@ export const analysisField = StateField.define({
 export const setFocused = StateEffect.define();
 /** A grammar a code block names has arrived: its tokens can be coloured now (#84). */
 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). */
+export const metricsField = StateField.define({
+    create: () => DEFAULT_METRICS,
+    update: (metrics, transaction) => {
+        for (const effect of transaction.effects)
+            if (effect.is(setBlockMetrics))
+                return effect.value;
+        return metrics;
+    },
+});
+/** Reads the editor's metrics again whenever its geometry changes, and keeps them when they moved. */
+const metricsWatcher = ViewPlugin.define((view) => {
+    let destroyed = false;
+    const check = () => view.requestMeasure({
+        read: () => withinReason({
+            width: view.contentDOM.clientWidth,
+            lineHeight: view.defaultLineHeight,
+            charWidth: view.defaultCharacterWidth,
+            ...measureLines(view.dom),
+        }),
+        write: (next) => {
+            const now = view.state.field(metricsField);
+            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) }));
+        },
+    });
+    check();
+    return {
+        update: (update) => {
+            if (update.geometryChanged)
+                check();
+        },
+        destroy: () => {
+            destroyed = true;
+        },
+    };
+});
 /** Whether the editor has the focus: a construct is shown as source only to an author who is in it. */
 const focusField = StateField.define({
     create: () => false,
@@ -46,19 +95,95 @@ const focusField = StateField.define({
     },
 });
 // ── Widgets ──────────────────────────────────────────────────────────────────
+/**
+ * What a drawn block shows when drawing it threw — a host's `renderLink` that needs the host's own
+ * context, which a block's root, outside the host's tree, does not carry (#90): its lines as written,
+ * under a notice, so a failure never hides a part of the note. A click on it shows its source.
+ */
+class BlockBoundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error, info) {
+        // React reports a caught error only in development; the host is told in every build.
+        console.error('A block of the note could not be drawn:', error, info.componentStack);
+    }
+    render() {
+        if (!this.state.failed)
+            return this.props.children;
+        const notice = this.props.host.strings.editor.blockFailed;
+        if (!this.props.source)
+            return createElement('span', { className: 'cm-ms-block-failed', title: notice });
+        return createElement('div', { className: 'cm-ms-block-failed', role: 'note' }, createElement('p', { className: 'cm-ms-block-failed-notice' }, notice), createElement('pre', null, this.props.source));
+    }
+}
 /** The React roots the widgets mounted, unmounted when CodeMirror lets the widget go. */
 const roots = new WeakMap();
-function mount(view, element, node) {
-    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 }, 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(() => view.requestMeasure());
+    const observer = typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(() => {
+            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);
@@ -75,35 +200,71 @@ class BlockWidget extends WidgetType {
     host;
     draw;
     revealsOnClick;
+    options;
     inline;
+    source;
     constructor(key, host, draw, 
     /** Whether a click on it shows its source; a block with controls of its own handles its clicks. */
-    revealsOnClick, inline = false) {
+    revealsOnClick, options = {}) {
         super();
         this.key = key;
         this.host = host;
         this.draw = draw;
         this.revealsOnClick = revealsOnClick;
-        this.inline = inline;
+        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));
+        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) => {
@@ -119,8 +280,20 @@ class BlockWidget extends WidgetType {
     ignoreEvent() {
         return true;
     }
+    /**
+     * The height CodeMirror lays the block out at until it is drawn, which it reads once, when the
+     * block is made: the height it was drawn at before at this width, or its estimate (#91).
+     */
     get estimatedHeight() {
-        return this.inline ? -1 : 48;
+        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);
     }
 }
 /**
@@ -140,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;
@@ -180,6 +376,10 @@ class TaskWidget extends WidgetType {
         return false;
     }
 }
+/** What a rule and a formula's row are drawn at by the default theme, before they are measured (#91). */
+const RULE_HEIGHT = 33;
+const MATH_ROW = 32;
+const MATH_MARGINS = 32;
 class RuleWidget extends WidgetType {
     eq() {
         return true;
@@ -190,6 +390,9 @@ class RuleWidget extends WidgetType {
         wrap.appendChild(document.createElement('hr'));
         return wrap;
     }
+    get estimatedHeight() {
+        return RULE_HEIGHT;
+    }
 }
 class MathWidget extends WidgetType {
     tex;
@@ -209,38 +412,24 @@ class MathWidget extends WidgetType {
         katex.render(this.tex, element, { throwOnError: false, displayMode: this.display, strict: 'ignore' });
         return element;
     }
-    ignoreEvent() {
-        return false;
-    }
-}
-class ImageWidget extends WidgetType {
-    source;
-    constructor(source) {
-        super();
-        this.source = source;
-    }
-    eq(other) {
-        return other.source === this.source;
-    }
-    toDOM() {
-        const match = /^!\[([^\]]*)\]\(\s*<?([^)\s>]+)>?(?:\s+"[^"]*")?\s*\)$/.exec(this.source);
-        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;
-        image.alt = (match[1] ?? '').split('|')[0] ?? '';
-        return image;
+    /** A formula's rows, each a line of KaTeX's display, within its margins (#91). */
+    get estimatedHeight() {
+        return this.display ? MATH_MARGINS + MATH_ROW * this.tex.split('\\\\').length : -1;
     }
     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({});
 const syntax = Decoration.mark({ class: 'cm-ms-syntax' });
@@ -251,12 +440,15 @@ const BLOCK_KINDS = new Set(['frontmatter', 'callout', 'table', 'mathBlock', 'em
 function build(state) {
     const { constructs, bodyFrom } = state.field(analysisField);
     const { host } = state.facet(editorEnvironment);
+    const metrics = state.field(metricsField);
     const focused = state.field(focusField);
     const doc = state.doc;
     const text = textOf(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. */
@@ -274,17 +466,18 @@ function build(state) {
         for (let at = doc.lineAt(lines.from).number; at <= doc.lineAt(lines.to).number; at++)
             out.push(line(className).range(doc.line(at).from));
     };
-    const block = (from, to, key, draw, revealsOnClick = true) => {
+    const block = (from, to, kind, key, draw, revealsOnClick = true) => {
         const lines = linesOf(from, to);
-        out.push(Decoration.replace({ widget: new BlockWidget(key, host, draw, revealsOnClick), block: true }).range(lines.from, lines.to));
+        const source = text.slice(lines.from, lines.to);
+        out.push(Decoration.replace({ widget: new BlockWidget(key, host, draw, revealsOnClick, { source, kind, metrics }), block: true }).range(lines.from, lines.to));
         covered.push(lines);
     };
-    const after = (to, key, draw) => {
+    const after = (to, key, draw, source) => {
         const lines = linesOf(to, to);
-        out.push(Decoration.widget({ widget: new BlockWidget(key, host, draw, false), block: true, side: 1 }).range(lines.to));
+        out.push(Decoration.widget({ widget: new BlockWidget(key, host, draw, false, { source, kind: 'preview', metrics }), block: true, side: 1 }).range(lines.to));
     };
     if (bodyFrom === 0) {
-        out.push(Decoration.widget({ widget: new BlockWidget('add-properties', host, (view) => createElement(AddProperties, { view }), false), block: true, side: -1 }).range(0));
+        out.push(Decoration.widget({ widget: new BlockWidget('add-properties', host, (view) => createElement(AddProperties, { view }), false, { kind: 'add-properties', metrics }), block: true, side: -1 }).range(0));
     }
     // Blocks first: what a drawn block covers is not decorated again.
     for (const construct of constructs) {
@@ -299,7 +492,7 @@ function build(state) {
                 if (open)
                     eachLine(from, to, 'cm-ms-yaml');
                 else
-                    block(from, to, `front:${source}`, (view) => createElement(PropertiesBlock, { view, to }), false);
+                    block(from, to, 'frontmatter', `front:${source}`, (view) => createElement(PropertiesBlock, { view, to }), false);
                 break;
             case 'callout':
                 if (!alone(from, to))
@@ -308,7 +501,7 @@ function build(state) {
                     eachLine(from, to, `cm-ms-callout-source`);
                 else {
                     const marker = { ...construct.marker, type: construct.type, fold: construct.fold };
-                    block(from, to, `callout:${from}:${source}`, (view) => createElement(CalloutBlock, { view, text: source, marker }));
+                    block(from, to, 'callout', `callout:${from}:${source}`, (view) => createElement(CalloutBlock, { view, text: source, marker }));
                 }
                 break;
             case 'table':
@@ -317,14 +510,15 @@ function build(state) {
                 if (open)
                     eachLine(from, to, 'cm-ms-table-source');
                 else
-                    block(from, to, `table:${from}:${source}`, (view) => createElement(TableBlock, { view, from, to }), false);
+                    block(from, to, 'table', `table:${from}:${source}`, (view) => createElement(TableBlock, { view, from, to }), false);
                 break;
             case 'mathBlock':
                 if (!alone(from, to))
                     break;
                 if (open) {
                     eachLine(from, to, 'cm-ms-code-line');
-                    after(to, `math-preview:${construct.tex}`, () => createElement(Snippet, { text: `$$\n${construct.tex}\n$$` }));
+                    const preview = `$$\n${construct.tex}\n$$`;
+                    after(to, `math-preview:${construct.tex}`, () => createElement(Snippet, { text: preview }), preview);
                 }
                 else {
                     out.push(Decoration.replace({ widget: new MathWidget(construct.tex, true), block: true }).range(lines.from, lines.to));
@@ -334,8 +528,11 @@ 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:${source}`, () => createElement(Snippet, { text: source }));
+                    block(from, to, 'embed', `embed:${source}`, () => createElement(Snippet, { text: source }));
                 break;
             case 'rule':
                 if (!alone(from, to))
@@ -350,7 +547,7 @@ function build(state) {
             case 'code': {
                 const diagram = construct.language === 'mermaid' && construct.open !== null;
                 if (diagram && !open && alone(from, to)) {
-                    block(from, to, `diagram:${source}`, () => createElement(Snippet, { text: source }));
+                    block(from, to, 'diagram', `diagram:${source}`, () => createElement(Snippet, { text: source }));
                     break;
                 }
                 codeLines(construct, out, doc, text);
@@ -359,12 +556,14 @@ function build(state) {
                     const fence = construct.open.from;
                     const language = construct.language;
                     out.push(Decoration.widget({
-                        widget: new BlockWidget(`language:${fence}:${language ?? ''}`, host, (view) => createElement(LanguageControl, { view, from: fence, language }), false, true),
+                        widget: new BlockWidget(`language:${fence}:${language ?? ''}`, host, (view) => createElement(LanguageControl, { view, from: fence, language }), false, { inline: true }),
                         side: 1,
                     }).range(construct.open.to));
                 }
-                if (diagram)
-                    after(to, `diagram-preview:${construct.code}`, () => createElement(Snippet, { text: '```mermaid\n' + construct.code + '\n```' }));
+                if (diagram) {
+                    const preview = '```mermaid\n' + construct.code + '\n```';
+                    after(to, `diagram-preview:${construct.code}`, () => createElement(Snippet, { text: preview }), preview);
+                }
                 covered.push(lines);
                 break;
             }
@@ -378,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
@@ -420,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, true) }).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));
@@ -434,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));
@@ -496,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;
@@ -536,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,
@@ -628,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).
@@ -660,15 +1004,22 @@ const grammarLoader = ViewPlugin.fromClass(class {
         }
     }
 });
-/** The live page: the analysis, the decorations over it, and what the focus and a modifier-click do. */
-export function livePage() {
+/**
+ * The live page: the analysis, the decorations over it, and what the focus and a modifier-click do.
+ * `metrics` are the editor's text column measured before the editor is made, which the first drawn
+ * blocks estimate their height by; without them they assume `DEFAULT_METRICS` until it is measured.
+ */
+export function livePage(metrics) {
     return [
         analysisField,
+        metricsField.init(() => metrics ?? DEFAULT_METRICS),
+        metricsWatcher,
         focusField,
         decorationsField,
         EditorView.focusChangeEffect.of((_state, focusing) => setFocused.of(focusing)),
         focusKeeper,
         grammarLoader,
+        embedPremeasure,
         blockKeys,
         follow,
     ];