@memorysmithapp/markdown-renderer 0.5.0 → 0.7.0

package/README.md

@@ -20,7 +20,7 @@ import 'katex/dist/katex.min.css';
   resolve={(name) => addressOfTheOneNoteNamed(name)} // or null: the link is pending
   keeps={(name) => notebookKeepsAFile(name)}       // only an embed reaches a file
   fileOf={(name) => describe(name)}               // { mimeType, bytes, url, description }: drawn by its type, as MemorySmith does
-  renderLink={({ href, className, children }) => <RouterLink to={href} className={className}>{children}</RouterLink>}
+  renderLink={({ href, className, children }) => <a href={href} className={className} onClick={follow(href)}>{children}</a>} // follow: your router's navigate, captured where it is
   loadNote={(name) => fetchTheBodyOf(name)}        // for an embedded note; the package never fetches
   writable
   onToggleTask={(ordinal) => save(toggleTaskAt(latest(), ordinal))} // a promise locks the item under "Updating…" until it settles
@@ -29,7 +29,7 @@ import 'katex/dist/katex.min.css';
 />;
 ```
 
-Every prop is optional, and every default is the safe one: with no `resolve` every link is pending, with no `keeps` no embed reaches a file. A file `fileOf` describes is drawn by its media type, never its name: an image, an audio or a video player, and anything else a card with its type, size, description, *Open* where a browser shows it and *Download*; give `renderAttachment` instead to draw files yourself. The stylesheet styles nothing outside `.markdown`. The faces of the default theme are Inter and Space Grotesk, which the page loads.
+Every prop is optional, and every default is the safe one: with no `resolve` every link is pending, with no `keeps` no embed reaches a file. A file `fileOf` describes is drawn by its media type, never its name: an image, an audio or a video player, and anything else a card with its type, size, description, *Open* where a browser shows it and *Download*; give `renderAttachment` instead to draw files yourself. In edit mode, `renderLink`, `renderAttachment` and a theme's slots may be drawn in a root of their own, outside your React tree, so what they return must not read your context: a router's `<Link>` throws there, and the block shows its Markdown under a notice instead. The stylesheet styles nothing outside `.markdown`. The faces of the default theme are Inter and Space Grotesk, which the page loads.
 
 ## Themes
 
@@ -86,7 +86,7 @@ A note the host makes `editable` carries a button at its top right that switches
   suggest={(typed) => namesOfNotesLike(typed)}    // what [[ offers
   attach={(file, { name, description }, progress) => keepInNotebook(file, name, description, progress)} // the name it is kept under
   files={() => filesOfTheNotebook()}              // what the attach dialog lists: { name, mimeType, bytes, url, description }
-  modeButton="icon"                               // or "label", the icon and its word
+  buttons="responsive"                            // the corner's buttons and the dialog's Copy: their word on a wide note; "label" always; "icon", the default, never
 />
 ```
 

package/dist/NoteActions.d.ts

@@ -3,7 +3,26 @@
  * shows the note's Markdown in a dialog (#63), and one that copies it. Apart from the editor, so a
  * note that is only read offers them without loading it.
  */
-/** Show Markdown and Copy Markdown; `text` answers the bytes when a button is used. */
-export declare function NoteActions({ text }: {
+import { type ReactNode } from 'react';
+/**
+ * How the buttons a note draws around its text show their word (#96): `icon`, the icon alone;
+ * `label`, the icon and the word; `responsive`, the word beside the icon on a note at least
+ * `--markdown-button-words-from` wide and hidden on a narrower one. Wherever the word may be
+ * hidden it is the button's name.
+ */
+export type NoteButtons = 'icon' | 'label' | 'responsive';
+/** A button's icon and, unless it is drawn alone, its word, which the stylesheet may hide. */
+export declare function ButtonFace({ icon, word, display, wordClass }: {
+    icon: ReactNode;
+    word: string;
+    display: NoteButtons;
+    wordClass?: string;
+}): import("react").JSX.Element;
+/**
+ * Show Markdown and Copy Markdown; `text` answers the bytes when a button is used, and `display`
+ * how they and the dialog's Copy show their word.
+ */
+export declare function NoteActions({ text, display }: {
     text: () => string;
+    display?: NoteButtons;
 }): import("react").JSX.Element;

package/dist/NoteActions.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * What stands beside the switch between reading and editing, in both modes (#76): a button that
  * shows the note's Markdown in a dialog (#63), and one that copies it. Apart from the editor, so a
@@ -7,6 +7,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from 'react';
 import { useHost } from './host.js';
 import { ICON_CHECK, ICON_CLOSE, ICON_COPY, ICON_MARKDOWN } from './mode-icons.js';
+/** A button's icon and, unless it is drawn alone, its word, which the stylesheet may hide. */
+export function ButtonFace({ icon, word, display, wordClass }) {
+    return (_jsxs(_Fragment, { children: [icon, display !== 'icon' && _jsx("span", { className: wordClass ? `note-button-word ${wordClass}` : 'note-button-word', children: word })] }));
+}
 /** Puts the text on the clipboard; answers whether it got there. */
 function copyText(text) {
     const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;
@@ -19,7 +23,7 @@ function copyText(text) {
  * closed by Escape, its button or a click outside it, the focus then back on the button that
  * opened it.
  */
-function SourceDialog({ text, onClose, onClosed }) {
+function SourceDialog({ text, display, onClose, onClosed }) {
     const host = useHost();
     const words = host.strings.editor;
     const dialog = useRef(null);
@@ -42,17 +46,20 @@ function SourceDialog({ text, onClose, onClosed }) {
             closed.current();
         };
     }, []);
-    return (_jsx("dialog", { ref: dialog, className: "edit-source", "aria-modal": "true", "aria-labelledby": "edit-source-title", onCancel: (event) => {
+    return (_jsx("dialog", { ref: dialog, className: `edit-source${display === 'responsive' ? ' has-responsive-buttons' : ''}`, "aria-modal": "true", "aria-labelledby": "edit-source-title", onCancel: (event) => {
             event.preventDefault();
             onClose();
         }, 
         // The dialog has no padding of its own, so a click on it and not on its content is outside.
-        onClick: (event) => event.target === dialog.current && onClose(), children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: "edit-source-title", className: "edit-source-title", children: words.sourceTitle }), _jsx("span", { className: "edit-source-copied", role: "status", children: copied === 'copied' ? words.copied : copied === 'failed' ? words.copyFailed : '' }), _jsx("button", { type: "button", className: "edit-control edit-control-labelled", onClick: () => void copyText(text).then((done) => setCopied(done ? 'copied' : 'failed')), children: words.copy }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICON_CLOSE })] }), _jsx("pre", { className: "edit-source-text", tabIndex: 0, children: text })] }) }));
+        onClick: (event) => event.target === dialog.current && onClose(), children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: "edit-source-title", className: "edit-source-title", children: words.sourceTitle }), _jsx("span", { className: "edit-source-copied", role: "status", children: copied === 'copied' ? words.copied : copied === 'failed' ? words.copyFailed : '' }), _jsx("button", { type: "button", className: `edit-control edit-source-copy${display === 'label' ? ' edit-control-labelled' : ''}`, "data-buttons": display, title: words.copy, "aria-label": display === 'label' ? undefined : words.copy, onClick: () => void copyText(text).then((done) => setCopied(done ? 'copied' : 'failed')), children: _jsx(ButtonFace, { icon: copied === 'copied' ? ICON_CHECK : ICON_COPY, word: words.copy, display: display }) }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICON_CLOSE })] }), _jsx("pre", { className: "edit-source-text", tabIndex: 0, children: text })] }) }));
 }
 /** How long Copy Markdown shows its check, in milliseconds. */
 const COPIED_MS = 1600;
-/** Show Markdown and Copy Markdown; `text` answers the bytes when a button is used. */
-export function NoteActions({ text }) {
+/**
+ * Show Markdown and Copy Markdown; `text` answers the bytes when a button is used, and `display`
+ * how they and the dialog's Copy show their word.
+ */
+export function NoteActions({ text, display = 'icon' }) {
     const words = useHost().strings.editor;
     const show = useRef(null);
     const [source, setSource] = useState(null);
@@ -64,5 +71,5 @@ export function NoteActions({ text }) {
         return () => clearTimeout(timer);
     }, [copied]);
     const copyLabel = copied === 'copied' ? words.copied : copied === 'failed' ? words.copyFailed : words.copyMarkdown;
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: show, type: "button", className: "note-action", title: words.showMarkdown, "aria-label": words.showMarkdown, "aria-haspopup": "dialog", onClick: () => setSource(text()), children: ICON_MARKDOWN }), _jsx("button", { type: "button", className: "note-action", "data-copied": copied ?? undefined, title: copyLabel, "aria-label": words.copyMarkdown, onClick: () => void copyText(text()).then((done) => setCopied(done ? 'copied' : 'failed')), children: copied === 'copied' ? ICON_CHECK : ICON_COPY }), _jsx("span", { className: "visually-hidden", role: "status", children: copied === 'copied' ? words.copied : copied === 'failed' ? words.copyFailed : '' }), source !== null && _jsx(SourceDialog, { text: source, onClose: () => setSource(null), onClosed: () => show.current?.focus() })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("button", { ref: show, type: "button", className: `note-action note-action-${display}`, "data-buttons": display, title: words.showMarkdown, "aria-label": display === 'label' ? undefined : words.showMarkdown, "aria-haspopup": "dialog", onClick: () => setSource(text()), children: _jsx(ButtonFace, { icon: ICON_MARKDOWN, word: words.showMarkdown, display: display }) }), _jsx("button", { type: "button", className: `note-action note-action-${display}`, "data-buttons": display, "data-copied": copied ?? undefined, title: copyLabel, "aria-label": words.copyMarkdown, onClick: () => void copyText(text()).then((done) => setCopied(done ? 'copied' : 'failed')), children: _jsx(ButtonFace, { icon: copied === 'copied' ? ICON_CHECK : ICON_COPY, word: words.copyMarkdown, display: display }) }), _jsx("span", { className: "visually-hidden", role: "status", children: copied === 'copied' ? words.copied : copied === 'failed' ? words.copyFailed : '' }), source !== null && _jsx(SourceDialog, { text: source, display: display, onClose: () => setSource(null), onClosed: () => show.current?.focus() })] }));
 }

package/dist/NoteBody.d.ts

@@ -1,3 +1,4 @@
+import { type NoteButtons } from './NoteActions.js';
 import { type NoteHost } from './host.js';
 export interface NoteBodyProps extends NoteHost {
     /**
@@ -25,7 +26,21 @@ export interface NoteBodyProps extends NoteHost {
      * a dialog with the host's words and its actions (#86).
      */
     readonly onChange?: (markdown: string) => unknown;
-    /** Whether the switch shows its icon alone or its icon and its word. Defaults to `label`. */
+    /**
+     * How every button the note draws around its text shows its word — Show Markdown, Copy Markdown,
+     * the switch, and Copy in the dialog of Show Markdown (#96): `icon`, the icon alone; `label`, the
+     * icon and the word; `responsive`, the word beside the icon on a note at least
+     * `--markdown-button-words-from` wide (560px by default) and hidden on a narrower one. Wherever
+     * the word is not drawn, or may be hidden, it is the button's name and its title. Defaults to
+     * `icon`, or to `modeButton` when only that is given.
+     */
+    readonly buttons?: NoteButtons;
+    /**
+     * The switch alone as its icon or its icon and its word (#92).
+     *
+     * @deprecated Use `buttons`, which governs the switch and the buttons beside it; this is read
+     * only when `buttons` is left out.
+     */
     readonly modeButton?: 'icon' | 'label';
     /**
      * Whether the note offers Show Markdown and Copy Markdown at its top right, editable or not:
@@ -42,4 +57,4 @@ export type NoteMode = 'view' | 'edit';
  * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
  * every piece of notebook data through the props of `NoteHost`.
  */
-export declare function NoteBody({ editable, mode, defaultMode, onModeChange, onChange, modeButton, actions, ...rest }: NoteBodyProps): import("react").JSX.Element;
+export declare function NoteBody({ editable, mode, defaultMode, onModeChange, onChange, buttons, modeButton, actions, ...rest }: NoteBodyProps): import("react").JSX.Element;

package/dist/NoteBody.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy, Suspense, useMemo, useRef, useState } from 'react';
 import { ICON_EDIT, ICON_VIEW } from './mode-icons.js';
-import { NoteActions } from './NoteActions.js';
+import { ButtonFace, NoteActions } from './NoteActions.js';
 import { drawSlot } from './slots.js';
 import { HOST_KEYS, HostProvider, resolveHost, useHost } from './host.js';
 import { planFootnotes } from './footnotes.js';
@@ -26,7 +26,7 @@ function ModeSwitch({ mode, display, toggle }) {
     const icon = mode === 'view' ? ICON_EDIT : ICON_VIEW;
     if (slot)
         return _jsx(_Fragment, { children: drawSlot(slot, { mode, label, icon, display, toggle }) });
-    return (_jsxs("button", { type: "button", className: `mode-switch mode-switch-${display}`, "data-mode": mode, title: label, "aria-label": display === 'icon' ? label : undefined, onClick: toggle, children: [icon, display === 'label' && _jsx("span", { className: "mode-switch-label", children: label })] }));
+    return (_jsx("button", { type: "button", className: `mode-switch mode-switch-${display}`, "data-mode": mode, "data-buttons": display, title: label, "aria-label": display === 'label' ? undefined : label, onClick: toggle, children: _jsx(ButtonFace, { icon: icon, word: label, display: display, wordClass: "mode-switch-label" }) }));
 }
 /**
  * The body of a note, drawn as MemorySmith's reading page draws it.
@@ -34,13 +34,14 @@ function ModeSwitch({ mode, display, toggle }) {
  * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
  * every piece of notebook data through the props of `NoteHost`.
  */
-export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeChange, onChange, modeButton = 'label', actions = true, ...rest }) {
+export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeChange, onChange, buttons, modeButton = 'icon', actions = true, ...rest }) {
     const [own, setOwn] = useState(defaultMode);
     // The author asked to go back to reading, and the editor is finishing: a save, the toolbar folding.
     const [leaving, setLeaving] = useState(false);
     // The last text handed to the host in edit mode, which Show and Copy Markdown give there (#76).
     const handed = useRef(null);
     const current = editable ? (mode ?? own) : 'view';
+    const display = buttons ?? modeButton;
     if (!editable && !actions)
         return _jsx(NoteView, { ...rest });
     const go = (next) => {
@@ -69,12 +70,12 @@ export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeC
     return (_jsx(HostOnly, { host: rest, children: (resolved) => {
             // Show and Copy Markdown for whoever reads the note, in both modes (#76, #87), and the
             // switch only where the note is editable.
-            const corner = (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: "note-corner", children: [actions && _jsx(NoteActions, { text: () => (current === 'edit' ? (handed.current ?? rest.markdown) : rest.markdown) }), editable && _jsx(ModeSwitch, { mode: current, display: modeButton, toggle: toggle })] }) }));
+            const corner = (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: "note-corner", children: [actions && _jsx(NoteActions, { display: display, text: () => (current === 'edit' ? (handed.current ?? rest.markdown) : rest.markdown) }), editable && _jsx(ModeSwitch, { mode: current, display: display, toggle: toggle })] }) }));
             if (current === 'view')
-                return _jsx(NoteView, { ...rest, corner: corner, switched: editable });
+                return _jsx(NoteView, { ...rest, corner: corner, switched: editable, buttons: display });
             return (
             // While the editor loads, the note stays on the page as it was.
-            _jsx(Suspense, { fallback: _jsx(NoteView, { ...rest, corner: corner, switched: true }), children: _jsx(NoteEditor, { ...host, onChange: hand, corner: corner, autoFocus: true, leaving: leaving, onLeave: onLeave }) }));
+            _jsx(Suspense, { fallback: _jsx(NoteView, { ...rest, corner: corner, switched: true, buttons: display }), children: _jsx(NoteEditor, { ...host, onChange: hand, corner: corner, buttons: display, autoFocus: true, leaving: leaving, onLeave: onLeave }) }));
         } }));
 }
 /** The host resolved once, for what is drawn around the note. */
@@ -83,7 +84,7 @@ function HostOnly({ host, children }) {
     return _jsx(_Fragment, { children: children(resolved) });
 }
 /** The note drawn for reading: the page MemorySmith's reading page draws. */
-function NoteView({ markdown, writable = false, onToggleTask, corner, switched = false, ...host }) {
+function NoteView({ markdown, writable = false, onToggleTask, corner, switched = false, buttons = 'icon', ...host }) {
     const resolved = useMemo(() => resolveHost(host), 
     // Every member of the contract, so a host that passes the same functions keeps the same host.
     HOST_KEYS.map((key) => host[key]));
@@ -147,7 +148,7 @@ function NoteView({ markdown, writable = false, onToggleTask, corner, switched =
     // The runs and whether an embed cut them are the whole input.
     [runs.join('\u0000'), runs.length < segments.length]);
     let run = 0;
-    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name}${corner ? ' has-note-corner' : ''}${switched ? ' has-mode-switch' : ''}`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [corner, _jsx(Properties, { properties: properties }), segments.map((segment, index) => {
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name}${corner ? ' has-note-corner' : ''}${switched ? ' has-mode-switch' : ''}${corner && buttons === 'responsive' ? ' has-responsive-buttons' : ''}`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [corner, _jsx(Properties, { properties: properties }), segments.map((segment, index) => {
                     if (!('rendered' in segment)) {
                         return _jsx(Transclusion, { target: segment.target, anchor: segment.anchor }, index);
                     }

package/dist/edit/NoteEditor.d.ts

@@ -9,6 +9,7 @@
  */
 import { type ReactNode } from 'react';
 import { type NoteHost } from '../host.js';
+import { type NoteButtons } from '../NoteActions.js';
 export interface NoteEditorProps extends Omit<NoteHost, 'writable' | 'onToggleTask'> {
     /** The note as the host keeps it, frontmatter included. A new value that differs from the editor's is taken in. */
     readonly markdown: string;
@@ -22,6 +23,11 @@ export interface NoteEditorProps extends Omit<NoteHost, 'writable' | 'onToggleTa
     readonly editable?: boolean;
     /** What sits at the top right of the note, such as the switch back to reading. */
     readonly corner?: ReactNode;
+    /**
+     * How the buttons at the top right show their word, as `NoteBody`'s `buttons` (#96): the bar is
+     * what a `responsive` button measures. Defaults to `icon`.
+     */
+    readonly buttons?: NoteButtons;
     /** Whether the editor takes the focus when it opens. */
     readonly autoFocus?: boolean;
     /**
@@ -41,4 +47,4 @@ export declare function lineBreakOf(text: string): '\n' | '\r\n' | null;
  * Edits a note on the page that draws it. Exported at `@memorysmithapp/markdown-renderer/edit`
  * for a host that edits without the switch of `NoteBody`; `NoteBody` loads it on demand.
  */
-export declare function NoteEditor({ markdown: given, onChange, editable, corner, autoFocus, leaving, onLeave, ...host }: NoteEditorProps): import("react").JSX.Element;
+export declare function NoteEditor({ markdown: given, onChange, editable, corner, buttons, autoFocus, leaving, onLeave, ...host }: NoteEditorProps): import("react").JSX.Element;

package/dist/edit/NoteEditor.js

@@ -19,6 +19,7 @@ import { rootStyle } from '../theme.js';
 import { ICONS } from './blocks.js';
 import { BLOCKS, command, headingLevel, insertBlock, insertFootnote, insertLink, insertWikilink, setHeading, toggleComment, toggleList, toggleMark, toggleQuote, } from './commands.js';
 import { analysisField, editorEnvironment, livePage } from './live.js';
+import { measureMetrics } from './heights.js';
 import { NoteActions } from '../NoteActions.js';
 import { AttachDialog, webImage } from './AttachDialog.js';
 import { ContextMenu } from './ContextMenu.js';
@@ -170,7 +171,7 @@ function SaveStatus({ saves, blocked, host, onDecided }) {
  * Edits a note on the page that draws it. Exported at `@memorysmithapp/markdown-renderer/edit`
  * for a host that edits without the switch of `NoteBody`; `NoteBody` loads it on demand.
  */
-export function NoteEditor({ markdown: given, onChange, editable = true, corner, autoFocus = false, leaving = false, onLeave, ...host }) {
+export function NoteEditor({ markdown: given, onChange, editable = true, corner, buttons = 'icon', autoFocus = false, leaving = false, onLeave, ...host }) {
     const resolved = useMemo(() => resolveHost(host), 
     // Every member of the contract, so a host that passes the same functions keeps the same host.
     HOST_KEYS.map((key) => host[key]));
@@ -358,7 +359,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                     markdown(),
                     EditorView.lineWrapping,
                     EditorView.contentAttributes.of({ 'aria-multiline': 'true', spellcheck: 'true' }),
-                    livePage(),
+                    livePage(measureMetrics(parent.current)),
                     autocompletion({ override: [wikilinkCompletion(() => latest.current.host)], icons: false }),
                     shortcuts(() => created),
                     keymap.of([...markdownKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
@@ -503,7 +504,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
             clearTimeout(timer);
         };
     }, [leaving, saves.state]);
-    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name} markdown-editing`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [_jsx("div", { ref: bar, className: "edit-bar", "data-leaving": folding ? '' : undefined, children: _jsx(Toolbar, { view: view, host: resolved, opened: opened.current, onAttach: () => {
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name} markdown-editing`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [_jsx("div", { ref: bar, className: `edit-bar${buttons === 'responsive' ? ' has-responsive-buttons' : ''}`, "data-leaving": folding ? '' : undefined, children: _jsx(Toolbar, { view: view, host: resolved, opened: opened.current, onAttach: () => {
                             // Opening the paperclip is the author acting on a refusal: the dialog says it once more.
                             if (attaching.state === 'failed') {
                                 setRefusal(attaching.message);
@@ -512,7 +513,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                             else
                                 setRefusal(null);
                             setAttachOpen(true);
-                        }, attaching: attaching, attachButton: attachButton, end: _jsxs("div", { className: "edit-corner", "aria-busy": leaving && saves.state === 'saving' ? true : undefined, "data-blocked": blocked ? '' : undefined, children: [_jsx(SaveStatus, { saves: saves, blocked: blocked, host: resolved, onDecided: () => view?.focus() }), corner ?? _jsx(NoteActions, { text: () => (view ? output(view.state) : given) })] }, blocked ? `blocked-${refusals}` : 'corner') }) }), menu && view && (_jsx(ContextMenu, { x: menu.x, y: menu.y, label: resolved.strings.editor.menu, groups: menuGroups(view), onClose: (back) => {
+                        }, attaching: attaching, attachButton: attachButton, end: _jsxs("div", { className: "edit-corner", "aria-busy": leaving && saves.state === 'saving' ? true : undefined, "data-blocked": blocked ? '' : undefined, children: [_jsx(SaveStatus, { saves: saves, blocked: blocked, host: resolved, onDecided: () => view?.focus() }), corner ?? _jsx(NoteActions, { display: buttons, text: () => (view ? output(view.state) : given) })] }, blocked ? `blocked-${refusals}` : 'corner') }) }), menu && view && (_jsx(ContextMenu, { x: menu.x, y: menu.y, label: resolved.strings.editor.menu, groups: menuGroups(view), onClose: (back) => {
                         setMenu(null);
                         if (back)
                             view.focus();

package/dist/edit/blocks.d.ts

@@ -29,6 +29,18 @@ export declare function CalloutBlock({ view, text, marker }: {
         fold: '+' | '-' | null;
     };
 }): import("react").JSX.Element;
+/**
+ * An image drawn in edit mode with the size it is drawn at set in place (#98): a width in pixels,
+ * its height following, a handle at its corner that drags it, and a button back to its own size.
+ * Each writes the dimensions of its notation — `![description|300](…)` or `![[photo.jpg|300]]` —
+ * and no other byte. The controls appear once an image is drawn inside it, so an embed of a file
+ * that is not an image, or a host's own drawing without one, offers none.
+ */
+export declare function ImageBlock({ view, source, children }: {
+    view: EditorView;
+    source: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
 /**
  * A table whose cells are edited where they stand. A cell commits its text when it loses the focus,
  * or on Enter (to the cell below) and Tab (to the next one); each commit rewrites that cell's

package/dist/edit/blocks.js

@@ -17,6 +17,8 @@ import { isTrue, readProperties } from '../properties.js';
 import { Transclusion } from '../Transclusion.js';
 import { splitEmbeds } from '../transclusion.js';
 import { wikilinkAddress } from '../wikilink-address.js';
+import { ICON_OWN_SIZE } from '../mode-icons.js';
+import { MAX_IMAGE_WIDTH, readImageSize, resizeImage } from './image-size.js';
 import { addEntry, readFrontmatter, removeEntry, renameKey, setList, setScalar, } from './frontmatter.js';
 import { addColumn, addRow, alignColumn, columnCount, readTable, removeColumn, removeRow, setCell, } from './table.js';
 /** Whether a block's edit is being applied: the block is drawn anew, and the field it held lets the focus go. */
@@ -71,6 +73,110 @@ export function CalloutBlock({ view, text, marker }) {
     const rewrite = (type, fold) => write(view, [{ from: marker.from, to: marker.to, insert: `[!${type}]${fold ?? ''}` }]);
     return (_jsxs("div", { className: "edit-block edit-callout", children: [_jsxs("div", { className: "edit-block-controls", "data-ms-control": "", children: [_jsx("select", { "aria-label": words.calloutType, title: words.calloutType, value: marker.type, onChange: (event) => rewrite(event.target.value, marker.fold), children: types.map((type) => (_jsx("option", { value: type, children: strings.callouts[type] ?? type }, type))) }), _jsxs("select", { "aria-label": words.fold, title: words.fold, value: marker.fold ?? '', onChange: (event) => rewrite(marker.type, (event.target.value || null)), children: [_jsx("option", { value: "", children: words.foldNone }), _jsx("option", { value: "+", children: words.foldOpen }), _jsx("option", { value: "-", children: words.foldClosed })] })] }), _jsx(Snippet, { text: text })] }));
 }
+// ── Images ───────────────────────────────────────────────────────────────────
+/** The narrowest an image is dragged to, so its handle stays within reach. */
+const MIN_DRAGGED_WIDTH = 24;
+/**
+ * An image drawn in edit mode with the size it is drawn at set in place (#98): a width in pixels,
+ * its height following, a handle at its corner that drags it, and a button back to its own size.
+ * Each writes the dimensions of its notation — `![description|300](…)` or `![[photo.jpg|300]]` —
+ * and no other byte. The controls appear once an image is drawn inside it, so an embed of a file
+ * that is not an image, or a host's own drawing without one, offers none.
+ */
+export function ImageBlock({ view, source, children }) {
+    const words = useHost().strings.editor;
+    const frame = useRef(null);
+    const size = readImageSize(source);
+    const [image, setImage] = useState(null);
+    const [natural, setNatural] = useState(null);
+    const [typed, setTyped] = useState(null);
+    const [dragged, setDragged] = useState(null);
+    const drag = useRef(null);
+    // An embed's image arrives when the host answers; the controls wait for it.
+    useEffect(() => {
+        const element = frame.current;
+        if (!element)
+            return;
+        const look = () => setImage(element.querySelector('img'));
+        look();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        const observer = new MutationObserver(look);
+        observer.observe(element, { childList: true, subtree: true });
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (!image)
+            return;
+        const read = () => setNatural(image.naturalWidth || null);
+        read();
+        image.addEventListener('load', read);
+        return () => image.removeEventListener('load', read);
+    }, [image]);
+    const resize = (width) => {
+        const widget = frame.current?.closest('.cm-ms-inline-block, .cm-ms-block');
+        if (!widget)
+            return;
+        const from = view.posAtDOM(widget);
+        // The widget stands where its source was: anything else means the note moved under it.
+        if (view.state.sliceDoc(from, from + source.length) !== source)
+            return;
+        write(view, resizeImage(source, from, width));
+    };
+    const commitTyped = () => {
+        if (typed === null)
+            return;
+        const width = Number(typed.trim());
+        setTyped(null);
+        if (typed.trim() === '')
+            resize(null);
+        else if (Number.isFinite(width) && width >= 1)
+            resize(width);
+    };
+    const onKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commitTyped();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            setTyped(null);
+        }
+    };
+    const shown = dragged ?? size?.width ?? null;
+    const offered = size !== null && image !== null;
+    return (_jsxs("span", { ref: frame, className: "edit-image", "data-resizing": dragged === null ? undefined : '', children: [children, offered && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "edit-block-controls edit-image-controls", "data-ms-control": "", children: [_jsx("input", { className: "edit-field edit-image-width", type: "number", inputMode: "numeric", min: 1, max: MAX_IMAGE_WIDTH, "aria-label": words.imageWidth, title: words.imageWidth, placeholder: natural === null ? '' : String(natural), value: typed ?? (shown === null ? '' : String(shown)), onChange: (event) => setTyped(event.target.value), onKeyDown: onKeyDown, onBlur: commitTyped }), _jsx("span", { className: "edit-image-unit", "aria-hidden": "true", children: "px" }), _jsx(Control, { label: words.imageOwnSize, onClick: () => resize(null), pressed: size.width === null, children: ICON_OWN_SIZE })] }), _jsx("span", { className: "edit-image-handle", "data-ms-control": "", title: words.imageResize, "aria-hidden": "true", onPointerDown: (event) => {
+                            event.preventDefault();
+                            event.currentTarget.setPointerCapture?.(event.pointerId);
+                            drag.current = { x: event.clientX, width: image.getBoundingClientRect().width, pointer: event.pointerId };
+                            setDragged(Math.round(drag.current.width));
+                        }, onPointerMove: (event) => {
+                            const start = drag.current;
+                            if (!start || start.pointer !== event.pointerId)
+                                return;
+                            const width = Math.max(MIN_DRAGGED_WIDTH, Math.round(start.width + event.clientX - start.x));
+                            image.style.width = `${width}px`;
+                            image.style.height = 'auto';
+                            // What the page lets it be: never wider than the column.
+                            setDragged(Math.round(image.getBoundingClientRect().width));
+                        }, onPointerUp: (event) => {
+                            const start = drag.current;
+                            if (!start || start.pointer !== event.pointerId)
+                                return;
+                            drag.current = null;
+                            const width = Math.round(image.getBoundingClientRect().width);
+                            setDragged(null);
+                            image.style.width = '';
+                            image.style.height = '';
+                            if (Math.abs(width - start.width) >= 1)
+                                resize(width);
+                        }, onPointerCancel: () => {
+                            drag.current = null;
+                            setDragged(null);
+                            image.style.width = '';
+                            image.style.height = '';
+                        } })] }))] }));
+}
 // ── Tables ───────────────────────────────────────────────────────────────────
 /** Where the focus goes back to when a table is drawn again after an edit of one of its cells. */
 let pendingFocus = null;

package/dist/edit/heights.d.ts

@@ -0,0 +1,68 @@
+/**
+ * How tall a drawn block will be before it is drawn (#91).
+ *
+ * CodeMirror lays out the blocks it has not drawn yet by the height their widget estimates, and
+ * reads that estimate once, when the block's decoration is made; a block drawn taller than its
+ * estimate grows the document under the scrollbar as the author scrolls to it. Each block
+ * estimates its height from what it draws — its lines wrapped at the editor's width, its rows, its
+ * properties — and a block drawn once at a width is remembered at its measured height, so the same
+ * block made again, moved by an edit above it or in the next edit of the note, starts right.
+ */
+/** What an estimate reads of the editor: its text column, its line height and its characters. */
+export interface BlockMetrics {
+    readonly width: number;
+    readonly lineHeight: number;
+    readonly charWidth: number;
+    /**
+     * Each level of heading as the theme draws it in edit mode, `h1` first, and a line of a code
+     * block: its line height, its characters, the space above it and the width its sides take (#94).
+     * Absent where nothing is laid out.
+     */
+    readonly headings?: readonly LineMetrics[];
+    readonly code?: LineMetrics;
+}
+/** A kind of line as the theme draws it, which differs from the text's: a heading, a line of code. */
+export interface LineMetrics {
+    readonly lineHeight: number;
+    readonly charWidth: number;
+    /** The space above it, on a heading. */
+    readonly padding: number;
+    /** The width its sides take from the column: a code block's padding and border. */
+    readonly inset: number;
+}
+/** What an estimate assumes before the editor has been measured, as in a test with no layout. */
+export declare const DEFAULT_METRICS: BlockMetrics;
+/**
+ * The metrics of a text column laid out in `parent`, read before the editor exists there, so the
+ * first estimates are made at the width the note is drawn at. Falls back to `DEFAULT_METRICS` where
+ * nothing is laid out.
+ */
+export declare function measureMetrics(parent: HTMLElement): BlockMetrics;
+/**
+ * Each level of heading and a line of code laid out in `parent` as the editor draws them, by the
+ * classes of their line, so whatever the theme gives them — a face, a size, the space above, the
+ * sides of a code block — is what is measured (#94).
+ */
+export declare function measureLines(parent: HTMLElement): {
+    headings: LineMetrics[];
+    code: LineMetrics;
+};
+/** Metrics as measured, any that could not be read replaced by the default. */
+export declare function withinReason(metrics: BlockMetrics): BlockMetrics;
+/**
+ * The height of a line of the text the editor shows, `length` characters visible, as the page draws
+ * it where CodeMirror would guess it from the text's metrics alone (#94): a heading at its `level`,
+ * a line of code, or a line of text, which on a narrow column wraps sooner than CodeMirror counts.
+ * `null` where that kind of line was not measured.
+ */
+export declare function lineHeightOf(kind: 'text' | 'code' | {
+    readonly heading: number;
+}, length: number, metrics: BlockMetrics): number | null;
+/** What a block is, for its estimate. */
+export type BlockKind = 'frontmatter' | 'callout' | 'table' | 'embed' | 'diagram' | 'preview' | 'add-properties' | 'image';
+/** The height a block of this kind and these lines is drawn at, near enough to lay out the page. */
+export declare function estimateHeight(kind: BlockKind, source: string, metrics: BlockMetrics): number;
+/** The height a block of this content was drawn at at this width, if it was. */
+export declare function measuredHeight(identity: string, metrics: BlockMetrics): number | undefined;
+/** Remembers the height a block was drawn at. */
+export declare function rememberHeight(identity: string, metrics: BlockMetrics, height: number): void;