@memorysmithapp/markdown-renderer 0.6.0 → 0.7.1

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,9 @@ 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 { caretAt, sourceOffsetOf } from './click-source.js';
 import { LanguageControl } from './LanguageControl.js';
 import { toggleTaskBox } from './commands.js';
 export const editorEnvironment = Facet.define({
@@ -39,8 +40,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 +56,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 +121,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 +215,61 @@ 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);
+            // Where the text clicked is written in the source (#102); else at the end of its first line,
+            // after a callout's title or a diagram's fence.
+            const start = blockStart(view, element, widget.key);
+            const caret = caretAt(event.clientX, event.clientY);
+            const offset = caret ? sourceOffsetOf(element, widget.source, caret.node, caret.offset) : null;
+            reveal(view, offset === null ? view.state.doc.lineAt(start).to : Math.min(start + offset, view.state.doc.length));
         });
         // A link inside a drawn block is followed with a modifier only, as in the text.
         element.addEventListener('click', (event) => {
@@ -198,10 +290,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 +318,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 +425,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 +452,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 +533,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 +582,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 +625,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 +642,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 +715,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 +794,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 +886,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 +1024,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;
@@ -181,6 +187,8 @@ export interface EditorWords {
     readonly retry: string;
     /** Said when the author asked to go back to reading and the last change is not saved. */
     readonly stayInEdit: string;
+    /** Said while a refused save waits for the author's choice before the note is written in again (#101). */
+    readonly chooseToEdit: string;
 }
 /** The words MemorySmith shows in English, used for every word a host does not give. */
 export declare const ENGLISH: NoteStrings;

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',
@@ -176,6 +179,7 @@ export const ENGLISH = {
         saving: 'Saving…',
         retry: 'Try again',
         stayInEdit: 'Not saved: the note stays in edit',
+        chooseToEdit: 'Choose what to do with it to keep writing',
     },
     loading: 'Loading…',
     failed: 'Something went wrong.',

package/dist/theme.d.ts

@@ -23,6 +23,7 @@
 import type { ReactNode } from 'react';
 import type { FileShape } from './file-types.js';
 import type { KeptFile } from './host.js';
+import type { NoteButtons } from './NoteActions.js';
 import type { PropertyEntry } from './properties.js';
 export type Scheme = 'light' | 'dark';
 /**
@@ -119,6 +120,7 @@ export interface ThemeProperties {
     readonly chipBg?: string;
     readonly chipColor?: string;
     readonly chipFont?: string;
+    readonly buttonWordsFrom?: string;
 }
 /** The names of `ThemeProperties`, in the order the documentation lists them. */
 export declare const THEME_PROPERTIES: (keyof ThemeProperties)[];
@@ -251,8 +253,11 @@ export interface ModeSwitchSlotProps {
     readonly label: string;
     /** The default theme's icon of that action: a pencil to edit, an eye to read. */
     readonly icon: ReactNode;
-    /** Whether the host asked for the icon alone or the icon and its word. */
-    readonly display: 'icon' | 'label';
+    /**
+     * How the host asked the buttons around the note to show their word (#96): the icon alone, the
+     * icon and its word, or the word only on a wide note (`responsive`).
+     */
+    readonly display: NoteButtons;
     /** Switches to the other mode. */
     readonly toggle: () => void;
 }

package/dist/theme.js

@@ -42,6 +42,7 @@ export const THEME_PROPERTIES = Object.keys({
     propertiesRule: 1, propertiesLabelFont: 1, propertiesLabelColor: 1, propertiesKeyColor: 1,
     iconPropertyText: 1, iconPropertyList: 1, iconPropertyDate: 1, iconPropertyBoolean: 1,
     chipBg: 1, chipColor: 1, chipFont: 1,
+    buttonWordsFrom: 1,
 });
 /** `textSoft` → `--markdown-text-soft`, `h1Size` → `--markdown-h1-size`. */
 export function customPropertyOf(name) {