@memorysmithapp/markdown-renderer 0.6.0 → 0.7.0

package/README.md

@@ -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="label"                              // the icon and its word; "icon", the default, the icon alone
+  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 {
     /**
@@ -26,8 +27,19 @@ export interface NoteBodyProps extends NoteHost {
      */
     readonly onChange?: (markdown: string) => unknown;
     /**
-     * Whether the switch shows its icon alone or its icon and its word. Defaults to `icon`, like Show
-     * Markdown and Copy Markdown beside it, its word then its name and its title (#92).
+     * 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';
     /**
@@ -45,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 = 'icon', 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

@@ -171,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]));
@@ -504,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);
@@ -513,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

@@ -13,6 +13,22 @@ 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;
@@ -22,10 +38,28 @@ export declare const DEFAULT_METRICS: BlockMetrics;
  * 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';
+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. */

package/dist/edit/heights.js

@@ -8,6 +8,7 @@
  * 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.
  */
+import { readImageSize } from './image-size.js';
 /** What an estimate assumes before the editor has been measured, as in a test with no layout. */
 export const DEFAULT_METRICS = { width: 700, lineHeight: 24, charWidth: 8 };
 /**
@@ -17,23 +18,74 @@ export const DEFAULT_METRICS = { width: 700, lineHeight: 24, charWidth: 8 };
  */
 export function measureMetrics(parent) {
     const probe = document.createElement('div');
-    probe.style.cssText = 'position: absolute; visibility: hidden; white-space: pre; pointer-events: none';
-    probe.textContent = 'abcdefghijklmnopqrstuvwxyz';
+    probe.style.cssText = PROBE;
+    probe.textContent = SAMPLE;
     parent.appendChild(probe);
     const box = probe.getBoundingClientRect();
     const width = parent.clientWidth;
     probe.remove();
-    return withinReason({ width, lineHeight: box.height, charWidth: box.width / 26 });
+    return withinReason({ width, lineHeight: box.height, charWidth: box.width / SAMPLE.length, ...measureLines(parent) });
+}
+const PROBE = 'position: absolute; visibility: hidden; white-space: pre; pointer-events: none';
+const SAMPLE = 'abcdefghijklmnopqrstuvwxyz';
+/**
+ * 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 function measureLines(parent) {
+    const classes = [1, 2, 3, 4, 5, 6].map((level) => `cm-ms-heading cm-ms-h${level}`).concat('cm-ms-code-line');
+    const probes = classes.map((className) => {
+        const probe = document.createElement('div');
+        probe.className = `cm-line ${className}`;
+        probe.style.cssText = PROBE;
+        probe.textContent = SAMPLE;
+        parent.appendChild(probe);
+        return probe;
+    });
+    const read = probes.map((probe) => {
+        const box = probe.getBoundingClientRect();
+        const style = getComputedStyle(probe);
+        const number = (value) => Number.parseFloat(value) || 0;
+        const padding = number(style.paddingTop);
+        const inset = number(style.paddingLeft) + number(style.paddingRight) + number(style.borderLeftWidth) + number(style.borderRightWidth);
+        return { lineHeight: box.height - padding - number(style.paddingBottom), charWidth: (box.width - inset) / SAMPLE.length, padding, inset };
+    });
+    for (const probe of probes)
+        probe.remove();
+    return { headings: read.slice(0, 6), code: read[6] };
 }
 /** Metrics as measured, any that could not be read replaced by the default. */
 export function withinReason(metrics) {
     const usable = (value, fallback) => (Number.isFinite(value) && value > 1 ? value : fallback);
+    const laidOut = (line) => line.lineHeight > 1 && line.charWidth > 0.5;
+    const headings = metrics.headings?.length === 6 && metrics.headings.every(laidOut) ? metrics.headings : undefined;
+    const code = metrics.code && laidOut(metrics.code) ? metrics.code : undefined;
     return {
         width: usable(metrics.width, DEFAULT_METRICS.width),
         lineHeight: usable(metrics.lineHeight, DEFAULT_METRICS.lineHeight),
         charWidth: usable(metrics.charWidth, DEFAULT_METRICS.charWidth),
+        ...(headings ? { headings } : {}),
+        ...(code ? { code } : {}),
     };
 }
+/** A line of `length` visible characters drawn as `line`, wrapped at the column's width. */
+function lineOf(line, length, width) {
+    const perLine = Math.max(4, Math.floor((width - line.inset) / line.charWidth));
+    return Math.round(line.padding + line.lineHeight * Math.max(1, Math.ceil(length / perLine)));
+}
+/**
+ * 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 function lineHeightOf(kind, length, metrics) {
+    if (kind === 'text')
+        return lineOf({ lineHeight: metrics.lineHeight, charWidth: metrics.charWidth, padding: 0, inset: 0 }, length, metrics.width);
+    const line = kind === 'code' ? metrics.code : metrics.headings?.[kind.heading - 1];
+    return line ? lineOf(line, length, metrics.width) : null;
+}
 /** The lines a text takes in a column `width` wide, each of its lines at least one. */
 function wrapped(lines, width, metrics) {
     const perLine = Math.max(8, Math.floor(width / metrics.charWidth));
@@ -44,6 +96,8 @@ function wrapped(lines, width, metrics) {
  * the text column of its 560px breakpoint.
  */
 const STACKED_PROPERTIES = 528;
+/** What an image declares no height for is drawn at before it loads, near enough (#91). */
+const UNDECLARED_IMAGE_HEIGHT = 200;
 /** The height a block of this kind and these lines is drawn at, near enough to lay out the page. */
 export function estimateHeight(kind, source, metrics) {
     const { lineHeight } = metrics;
@@ -79,6 +133,13 @@ export function estimateHeight(kind, source, metrics) {
             return Math.round(lineHeight + wrapped(lines, metrics.width, metrics) * lineHeight);
         case 'add-properties':
             return Math.round(1.5 * lineHeight);
+        case 'image': {
+            // The height it declares, or its width at a photograph's proportions, or a guess (#91).
+            const size = readImageSize(source.trim());
+            if (size?.height != null)
+                return size.height;
+            return size?.width != null ? Math.round(size.width * 0.75) : UNDECLARED_IMAGE_HEIGHT;
+        }
     }
 }
 /** The heights blocks were drawn at, by width and content; the oldest are let go past the limit. */

package/dist/edit/image-size.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The size an image is drawn at, as its notation writes it (#98): the dimensions after the pipe
+ * of a Markdown image's description, `![description|300](address)` (`SPEC.md` §3.14), or of the
+ * embed of a file the notebook keeps, `![[photo.jpg|300]]` (§5.7). The editor reads them and
+ * rewrites them, and no other byte.
+ */
+import type { TextChange } from './table.js';
+export interface ImageSize {
+    /** The width it declares, or `null` when it is drawn at its own size. */
+    readonly width: number | null;
+    readonly height: number | null;
+    /**
+     * Where in the source the dimensions are written, their pipe included; an empty span where they
+     * would be written when there are none.
+     */
+    readonly at: {
+        readonly from: number;
+        readonly to: number;
+    };
+    /** What separates them from the rest: `|`, or `\|` in an embed whose pipe is escaped. */
+    readonly pipe: string;
+}
+/** The largest width the notation writes: five digits (`SPEC.md` §3.14). */
+export declare const MAX_IMAGE_WIDTH = 99999;
+/**
+ * The size an image's source declares, and where it is written. `null` for a source that is not an
+ * image's notation, and for an embed whose pipe holds something other than dimensions, which the
+ * editor does not overwrite.
+ */
+export declare function readImageSize(source: string): ImageSize | null;
+/**
+ * The change that draws the image whose source starts at `from` at `width`, its height following,
+ * or at its own size for `null`: the dimensions written, replaced or taken away, and nothing else.
+ * Empty when the source is not an image's notation or already says so.
+ */
+export declare function resizeImage(source: string, from: number, width: number | null): TextChange[];