@memorysmithapp/markdown-renderer 0.6.0 → 0.7.1

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

@@ -115,6 +115,8 @@ function insertBlockCommand(name) {
 const NOT_ATTACHING = { state: 'idle', message: null, fraction: null, queued: 0 };
 /** How long the attach button says a file was not attached, when the host did not say why, in milliseconds. */
 const ATTACH_FAILED_MS = 3000;
+/** The keys that write besides a character's own: a note held for the author's choice asks again on them (#101). */
+const WRITING_KEYS = new Set(['Enter', 'Backspace', 'Delete', 'Tab']);
 /** A host's fraction, kept between 0 and 1, or none when it gave no number. */
 function fractionOf(report) {
     const fraction = report?.fraction;
@@ -144,25 +146,21 @@ function Toolbar({ view, host, end, opened, onAttach, attaching, attachButton, }
  * each state, in a slot of one size, so the toolbar never moves as the author types; its word is
  * its title. A failed save's icon is the button that tries again (#66). When the host said why —
  * an alert on a save that succeeded, or the reason for one it refused — the icon is the button that
- * opens what it said, with the host's title as its tooltip, and the author's choices (#86). Whoever
- * hears the page is told the whole of it, why the note stays in edit included.
+ * opens what it said, with the host's title as its tooltip, and the author's choices (#86); a notice
+ * with choices opens by itself as it arrives, and a refusal with choices holds the note until the
+ * author chooses (#101). Whoever hears the page is told the whole of it, why the note stays in edit
+ * included.
  */
-function SaveStatus({ saves, blocked, host, onDecided }) {
+function SaveStatus({ saves, blocked, deciding, open, setOpen, host, onDecided, }) {
     const { state, notice } = saves;
     const words = host.strings.editor;
-    const [open, setOpen] = useState(false);
     const button = useRef(null);
-    // A notice the save no longer carries has nothing left to show.
-    useEffect(() => {
-        if (!notice)
-            setOpen(false);
-    }, [notice]);
     const base = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
-    const shown = notice ? notice.title : base;
-    const said = state === 'failed' && blocked ? (notice ? `${words.stayInEdit}. ${notice.title}` : words.stayInEdit) : shown;
+    const shown = notice ? (deciding ? `${notice.title}. ${words.chooseToEdit}` : notice.title) : base;
+    const said = state === 'failed' && blocked ? (notice ? `${words.stayInEdit}. ${shown}` : words.stayInEdit) : shown;
     const icon = state === 'saving' ? ICONS.saving : state === 'saved' ? ICONS.saved : state === 'alert' ? ICONS.alert : state === 'failed' ? ICONS.notSaved : null;
     const retryLabel = `${said}. ${words.retry}`;
-    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' || notice ? undefined : said || undefined, children: [notice ? (_jsx("button", { ref: button, type: "button", className: "edit-save-icon edit-save-notice", title: notice.title, "aria-label": notice.title, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: icon })) : state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: saves.retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said }), open && notice && (_jsx(SaveNoticeDialog, { notice: notice, onClose: () => setOpen(false), onClosed: (chosen) => (chosen ? onDecided() : button.current?.focus()), onAction: (action) => {
+    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' || notice ? undefined : said || undefined, children: [notice ? (_jsx("button", { ref: button, type: "button", className: "edit-save-icon edit-save-notice", title: shown, "aria-label": shown, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: icon })) : state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: saves.retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said }), open && notice && (_jsx(SaveNoticeDialog, { notice: notice, onClose: () => setOpen(false), onClosed: (chosen) => (chosen ? onDecided() : button.current?.focus()), onAction: (action) => {
                     setOpen(false);
                     saves.run(action);
                 } }))] }));
@@ -171,7 +169,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]));
@@ -181,8 +179,18 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
     const environment = useRef(new Compartment());
     const access = useRef(new Compartment());
     const saves = useEditSaves(onChange);
-    const latest = useRef({ hand: saves.hand, host: resolved, onLeave });
-    latest.current = { hand: saves.hand, host: resolved, onLeave };
+    /**
+     * A refusal that gives the author choices — another person wrote the note, say — is decided
+     * before the note is written in again: every save after it would be refused too (#101).
+     */
+    const deciding = saves.state === 'failed' && (saves.notice?.actions.length ?? 0) > 0;
+    const [noticeOpen, setNoticeOpen] = useState(false);
+    // A notice with choices opens by itself as it arrives; one the save no longer carries closes.
+    useEffect(() => {
+        setNoticeOpen(!!saves.notice && saves.notice.actions.length > 0);
+    }, [saves.notice]);
+    const latest = useRef({ hand: saves.hand, host: resolved, onLeave, deciding, ask: () => setNoticeOpen(true) });
+    latest.current = { hand: saves.hand, host: resolved, onLeave, deciding, ask: () => setNoticeOpen(true) };
     /**
      * The texts handed to the host that it has not given back yet. A host that saves before it
      * passes the note again gives back a text the editor has since moved past; that echo is not a
@@ -336,7 +344,9 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
     // The note as edit mode opened it, as the editor holds its text: lines joined by `\n`.
     const opened = useRef(given.replace(/\r\n?/g, '\n'));
     const lineBreak = lineBreakOf(given);
-    const readOnly = !editable || lineBreak === null;
+    const locked = !editable || lineBreak === null;
+    // Held while the author decides: the caret still moves, and a key that would write asks again.
+    const readOnly = locked || deciding;
     /**
      * The editor splits its text on any line break, so a paste or a block written with `\n` is lines
      * like any other, and writes the note back with the break it was written with: what a host
@@ -353,7 +363,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
             state: EditorState.create({
                 doc: given,
                 extensions: [
-                    access.current.of([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]),
+                    access.current.of([EditorState.readOnly.of(readOnly), EditorView.editable.of(!locked)]),
                     environment.current.of(editorEnvironment.of({ host: resolved })),
                     history(),
                     markdown(),
@@ -373,6 +383,16 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                         return true;
                     }),
                     EditorView.domEventHandlers({
+                        // A key that would write, while the note waits for the author's choice, shows the choice again (#101).
+                        keydown: (event) => {
+                            if (!latest.current.deciding || event.ctrlKey || event.metaKey || event.altKey)
+                                return false;
+                            if (event.key.length !== 1 && !WRITING_KEYS.has(event.key))
+                                return false;
+                            event.preventDefault();
+                            latest.current.ask();
+                            return true;
+                        },
                         // The editing menu where the pointer is; Shift keeps the browser's, and so do the
                         // drawn blocks' own fields, which are the browser's to edit (#81).
                         contextmenu: (event, target) => {
@@ -436,8 +456,8 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
         view?.dispatch({ effects: environment.current.reconfigure(editorEnvironment.of({ host: resolved })) });
     }, [view, resolved]);
     useEffect(() => {
-        view?.dispatch({ effects: access.current.reconfigure([EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)]) });
-    }, [view, readOnly]);
+        view?.dispatch({ effects: access.current.reconfigure([EditorState.readOnly.of(readOnly), EditorView.editable.of(!locked)]) });
+    }, [view, readOnly, locked]);
     // A note the host changed — a tick saved, another device — is taken in as the change it is.
     useEffect(() => {
         if (!view)
@@ -504,7 +524,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 +533,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, deciding: deciding, open: noticeOpen, setOpen: setNoticeOpen, 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/click-source.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Where in a block's source a click on its drawing lands (#102): the text under the pointer is
+ * found in the source the block was drawn from, so the caret goes where the author clicked once
+ * the source is revealed, rather than to the end of the block's first line.
+ */
+/** The text node and offset under a point of the page, where the browser can say. */
+export declare function caretAt(x: number, y: number): {
+    node: Node;
+    offset: number;
+} | null;
+/**
+ * The offset in `source` that draws `offset` in the text node `node` of the drawing `root`, or
+ * `null` when the text there is not written in the source as it is drawn — a formula's typesetting,
+ * an escaped character, a note an embed draws — and the click cannot be mapped.
+ */
+export declare function sourceOffsetOf(root: HTMLElement, source: string, node: Node, offset: number): number | null;

package/dist/edit/click-source.js

@@ -0,0 +1,74 @@
+/**
+ * Where in a block's source a click on its drawing lands (#102): the text under the pointer is
+ * found in the source the block was drawn from, so the caret goes where the author clicked once
+ * the source is revealed, rather than to the end of the block's first line.
+ */
+/** How much of the text beside the pointer is looked for when its whole line is not in the source. */
+const WINDOW = 24;
+/** The least of it looked for: a letter or two is found anywhere. */
+const LEAST = 3;
+/** The text node and offset under a point of the page, where the browser can say. */
+export function caretAt(x, y) {
+    const position = document.caretPositionFromPoint?.(x, y);
+    if (position)
+        return { node: position.offsetNode, offset: position.offset };
+    const range = document.caretRangeFromPoint?.(x, y);
+    return range ? { node: range.startContainer, offset: range.startOffset } : null;
+}
+/**
+ * The offset in `source` that draws `offset` in the text node `node` of the drawing `root`, or
+ * `null` when the text there is not written in the source as it is drawn — a formula's typesetting,
+ * an escaped character, a note an embed draws — and the click cannot be mapped.
+ */
+export function sourceOffsetOf(root, source, node, offset) {
+    if (node.nodeType !== Node.TEXT_NODE || !root.contains(node))
+        return null;
+    const data = node.textContent ?? '';
+    const at = Math.max(0, Math.min(offset, data.length));
+    // A drawn paragraph joins its lines, which the source writes each after its own marker (`> `).
+    const lineStart = data.lastIndexOf('\n', at - 1) + 1;
+    const lineEnd = data.indexOf('\n', at) === -1 ? data.length : data.indexOf('\n', at);
+    const before = textBefore(root, node) + data.slice(0, lineStart);
+    const left = data.slice(Math.max(lineStart, at - WINDOW), at);
+    const right = data.slice(at, Math.min(lineEnd, at + WINDOW));
+    const candidates = [
+        { text: data.slice(lineStart, lineEnd), caret: at - lineStart },
+        { text: left + right, caret: left.length },
+        { text: left, caret: left.length },
+        { text: right, caret: 0 },
+    ];
+    for (const [index, { text, caret }] of candidates.entries()) {
+        if (!text.trim() || (index > 0 && text.trim().length < LEAST))
+            continue;
+        const found = nth(source, text, count(before, text));
+        if (found !== -1)
+            return found + caret;
+    }
+    return null;
+}
+/** The text drawn before `node` within `root`. */
+function textBefore(root, node) {
+    const range = document.createRange();
+    range.setStart(root, 0);
+    range.setEnd(node, 0);
+    return range.toString();
+}
+function count(text, piece) {
+    let found = 0;
+    for (let at = text.indexOf(piece); at !== -1; at = text.indexOf(piece, at + 1))
+        found++;
+    return found;
+}
+/**
+ * Where the `n`-th occurrence of `piece` (from 0) starts in `text`: the same text drawn twice is
+ * mapped to the occurrence it draws, and to the last one when the drawing shows more than the source.
+ */
+function nth(text, piece, n) {
+    let last = -1;
+    for (let at = text.indexOf(piece), seen = 0; at !== -1; at = text.indexOf(piece, at + 1), seen++) {
+        if (seen === n)
+            return at;
+        last = at;
+    }
+    return last;
+}