@memorysmithapp/markdown-renderer 0.8.0 → 0.8.2

package/dist/edit/NoteEditor.d.ts

@@ -43,8 +43,4 @@ export interface NoteEditorProps extends Omit<NoteHost, 'writable' | 'onToggleTa
  * for a note that mixes them, or has a lone `\r`, which the editor cannot keep byte for byte.
  */
 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, buttons, autoFocus, leaving, onLeave, ...host }: NoteEditorProps): import("react").JSX.Element;

package/dist/edit/NoteEditor.js

@@ -139,7 +139,7 @@ function Toolbar({ view, host, end, opened, onAttach, attaching, attachButton, }
     const button = (name, action, shortcut) => (_jsx("button", { type: "button", className: "edit-control", title: shortcut ? `${words[name]} (${shortcut})` : words[name], "aria-label": words[name], disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: run(action), children: ICONS[name] }, name));
     const block = (name) => button(name, insertBlockCommand(name));
     const level = view ? headingLevel(view.state) : 0;
-    return (_jsxs("div", { className: "edit-toolbar", role: "toolbar", "aria-label": words.toolbar, children: [_jsxs("div", { className: "edit-toolbar-tools", children: [_jsxs("span", { className: "edit-toolbar-group", children: [_jsx("button", { type: "button", className: "edit-control", title: words.revert, "aria-label": words.revert, disabled: !view || view.state.readOnly || view.state.doc.toString() === opened, onMouseDown: (event) => event.preventDefault(), onClick: run(command((state) => revert(state, opened))), children: ICONS.revert }), button('undo', undo, 'Mod-Z'), button('redo', redo, 'Mod-Shift-Z')] }), _jsx("span", { className: "edit-toolbar-group", children: _jsxs("select", { className: "edit-heading", "aria-label": words.heading, title: words.heading, value: level, disabled: disabled, onChange: (event) => view && command((state) => setHeading(state, Number(event.target.value)))(view), children: [_jsx("option", { value: 0, children: words.paragraph }), [1, 2, 3, 4, 5, 6].map((each) => (_jsx("option", { value: each, children: `${words.heading} ${each}` }, each)))] }) }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bold', command((state) => toggleMark(state, '**')), 'Mod-B'), button('italic', command((state) => toggleMark(state, '_')), 'Mod-I'), button('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-X'), button('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-H'), button('code', command((state) => toggleMark(state, '`')), 'Mod-E')] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('link', command(insertLink), 'Mod-K'), button('wikilink', command(insertWikilink), 'Mod-Shift-K'), button('footnote', command(insertFootnote)), button('comment', command(toggleComment), 'Mod-/'), _jsxs("span", { className: "edit-attach-control", children: [_jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attachSays(attaching, words), "aria-label": words.attach, "aria-busy": attaching.state === 'busy' ? true : undefined, "data-attach": attaching.state, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching.state === 'busy' ? ICONS.saving : attaching.state === 'failed' ? ICONS.notSaved : ICONS.attach }), attaching.state === 'busy' && attaching.fraction !== null && (_jsx("span", { className: "edit-attach-progress", role: "progressbar", "aria-label": words.attach, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(attaching.fraction * 100), style: { ['--edit-attach-fraction']: attaching.fraction } })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: attaching.state === 'idle' ? '' : attachSays(attaching, words) })] })] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'), button('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'), button('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'), button('quote', command(toggleQuote), 'Mod-Shift-.')] }), _jsxs("span", { className: "edit-toolbar-group", children: [block('callout'), block('table'), block('codeBlock'), block('math'), block('diagram'), block('rule')] })] }), end] }));
+    return (_jsxs("div", { className: "edit-toolbar", role: "toolbar", "aria-label": words.toolbar, children: [_jsxs("div", { className: "edit-toolbar-tools", children: [_jsxs("span", { className: "edit-toolbar-group", children: [_jsx("button", { type: "button", className: "edit-control", title: words.revert, "aria-label": words.revert, disabled: !view || view.state.readOnly || view.state.doc.toString() === opened, onMouseDown: (event) => event.preventDefault(), onClick: run(command((state) => revert(state, opened))), children: ICONS.revert }), button('undo', undo, 'Mod-Z'), button('redo', redo, 'Mod-Shift-Z, Mod-Y')] }), _jsx("span", { className: "edit-toolbar-group", children: _jsxs("select", { className: "edit-heading", "aria-label": words.heading, title: words.heading, value: level, disabled: disabled, onChange: (event) => view && command((state) => setHeading(state, Number(event.target.value)))(view), children: [_jsx("option", { value: 0, children: words.paragraph }), [1, 2, 3, 4, 5, 6].map((each) => (_jsx("option", { value: each, children: `${words.heading} ${each}` }, each)))] }) }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bold', command((state) => toggleMark(state, '**')), 'Mod-B'), button('italic', command((state) => toggleMark(state, '_')), 'Mod-I'), button('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-X'), button('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-H'), button('code', command((state) => toggleMark(state, '`')), 'Mod-E')] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('link', command(insertLink), 'Mod-K'), button('wikilink', command(insertWikilink), 'Mod-Shift-K'), button('footnote', command(insertFootnote)), button('comment', command(toggleComment), 'Mod-/'), _jsxs("span", { className: "edit-attach-control", children: [_jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attachSays(attaching, words), "aria-label": words.attach, "aria-busy": attaching.state === 'busy' ? true : undefined, "data-attach": attaching.state, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching.state === 'busy' ? ICONS.saving : attaching.state === 'failed' ? ICONS.notSaved : ICONS.attach }), attaching.state === 'busy' && attaching.fraction !== null && (_jsx("span", { className: "edit-attach-progress", role: "progressbar", "aria-label": words.attach, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(attaching.fraction * 100), style: { ['--edit-attach-fraction']: attaching.fraction } })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: attaching.state === 'idle' ? '' : attachSays(attaching, words) })] })] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'), button('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'), button('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'), button('quote', command(toggleQuote), 'Mod-Shift-.')] }), _jsxs("span", { className: "edit-toolbar-group", children: [block('callout'), block('table'), block('codeBlock'), block('math'), block('diagram'), block('rule')] })] }), end] }));
 }
 /**
  * Where the save of the author's last change stands, in the toolbar before the switch: an icon for
@@ -155,12 +155,12 @@ function SaveStatus({ saves, blocked, deciding, open, setOpen, host, onDecided,
     const { state, notice } = saves;
     const words = host.strings.editor;
     const button = useRef(null);
-    const base = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
+    const base = saves.running ? host.strings.updating : state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
     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: 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) => {
+    return (_jsxs("div", { className: "edit-save", "data-save": state, "aria-busy": saves.running ? true : undefined, 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);
                 } }))] }));
@@ -169,6 +169,12 @@ function SaveStatus({ saves, blocked, deciding, open, setOpen, 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.
  */
+/**
+ * Redo on Ctrl+Shift+Z, Cmd+Shift+Z on macOS, on every platform, as well as on Ctrl+Y (#120):
+ * CodeMirror binds Ctrl+Shift+Z to redo on Linux only, and elsewhere drops the Shift of the key
+ * and undoes, so the key most people redo with lost them one more step.
+ */
+const redoKeys = [{ key: 'Mod-Shift-z', run: redo, preventDefault: true }];
 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.
@@ -183,14 +189,14 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
      * 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 deciding = (saves.state === 'failed' && (saves.notice?.actions.length ?? 0) > 0) || saves.running;
     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) };
+    const latest = useRef({ hand: saves.hand, host: resolved, onLeave, deciding, running: saves.running, ask: () => setNoticeOpen(true) });
+    latest.current = { hand: saves.hand, host: resolved, onLeave, deciding, running: saves.running, 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
@@ -373,7 +379,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                     livePage(measureMetrics(parent.current)),
                     autocompletion({ override: [wikilinkCompletion(() => latest.current.host)], icons: false }),
                     shortcuts(() => created),
-                    keymap.of([...markdownKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
+                    keymap.of([...markdownKeymap, ...redoKeys, ...historyKeymap, indentWithTab, ...defaultKeymap]),
                     // A file pasted or dropped is attached, where the host keeps files (#75).
                     menuKeys((target) => {
                         if (target.state.readOnly)
@@ -391,7 +397,9 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                             if (event.key.length !== 1 && !WRITING_KEYS.has(event.key))
                                 return false;
                             event.preventDefault();
-                            latest.current.ask();
+                            // While the choice runs there is nothing to choose again: the key writes nothing (#119).
+                            if (!latest.current.running)
+                                latest.current.ask();
                             return true;
                         },
                         // The editing menu where the pointer is; Shift keeps the browser's, and so do the

package/dist/edit/blocks.d.ts

@@ -49,6 +49,9 @@ export declare const MIN_IMAGE_SIZE = 16;
  * controls, gaps included, and the frame is marked busy while one of them has the focus, while the
  * handle is dragged and for a moment after a pointer or a touch on them.
  *
+ * Sized in place, as a table is edited in place, the image shows its source only from a button among
+ * its controls or when the caret reaches it from the keyboard; a click on the picture shows nothing (#112).
+ *
  * 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.
  */

package/dist/edit/blocks.js

@@ -76,6 +76,12 @@ export function CalloutBlock({ view, text, marker }) {
 // ── Images ───────────────────────────────────────────────────────────────────
 /** The narrowest an image is sized to, by a field or the handle: something a reader still sees (#105). */
 export const MIN_IMAGE_SIZE = 16;
+/**
+ * The size in pixels an image had when its unit was switched to a share of the page, where its
+ * source starts: switched back with nothing changed between, it is written again, not the width the
+ * share rounds to (#113). Kept by the editor, since the image is drawn anew for its new source.
+ */
+const switchedUnits = new WeakMap();
 /** How long after a pointer or a touch on its controls a click on the image is not taken as one to edit its source (#107). */
 const CONTROLS_GUARD_MS = 800;
 /** How long after a control of an image writes the image is held where it was on the screen (#107). */
@@ -92,9 +98,7 @@ const SCROLL_JUMP = 120;
  */
 function holdInPlace(view, block, run) {
     const top = block.getBoundingClientRect().top;
-    let scroller = view.scrollDOM;
-    while (scroller && !(scroller.scrollHeight > scroller.clientHeight && /(auto|scroll)/.test(getComputedStyle(scroller).overflowY)))
-        scroller = scroller.parentElement;
+    const scroller = scrollerOf(view);
     const scrolled = () => (scroller ? scroller.scrollTop : window.scrollY);
     const before = scrolled();
     const back = () => {
@@ -111,6 +115,83 @@ function holdInPlace(view, block, run) {
     window.addEventListener('scroll', back, true);
     setTimeout(() => window.removeEventListener('scroll', back, true), SCROLL_HOLD_MS);
 }
+/** What the editor scrolls in: its own scroller, a pane of the host that scrolls, or `null` for the window. */
+function scrollerOf(view) {
+    let scroller = view.scrollDOM;
+    while (scroller && !(scroller.scrollHeight > scroller.clientHeight && /(auto|scroll)/.test(getComputedStyle(scroller).overflowY)))
+        scroller = scroller.parentElement;
+    return scroller;
+}
+/**
+ * Room left after the last line of a note while an image is resized near its end (#116): the
+ * pixels of padding added under the text, and its padding before. Kept once the drag ends, so the
+ * page does not jump back when the image is written smaller, and given back as the author scrolls
+ * up, a pixel of it for a pixel of scroll, where it is out of sight.
+ */
+const roomBelow = new WeakMap();
+function setRoom(view, added) {
+    const room = roomBelow.get(view) ?? { added: 0, base: parseFloat(getComputedStyle(view.contentDOM).paddingBottom || '0') || 0, dragging: false, trim: null };
+    room.added = Math.max(0, Math.round(added));
+    view.contentDOM.style.paddingBottom = room.added > 0 ? `${room.base + room.added}px` : '';
+    roomBelow.set(view, room);
+    const scroller = scrollerOf(view);
+    const target = scroller ?? window;
+    if (room.added > 0 && !room.trim) {
+        room.trim = () => {
+            if (room.dragging)
+                return;
+            const max = scroller ? scroller.scrollHeight - scroller.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
+            const slack = max - (scroller ? scroller.scrollTop : window.scrollY);
+            if (slack > 0)
+                setRoom(view, room.added - slack);
+        };
+        target.addEventListener('scroll', room.trim, { passive: true });
+    }
+    else if (room.added === 0 && room.trim) {
+        target.removeEventListener('scroll', room.trim);
+        room.trim = null;
+    }
+}
+/**
+ * Holds the top of a picture where it is on the screen while its handle is dragged and once it is
+ * written (#116): only the text below it moves. The page could not stay put by itself: shrinking
+ * a picture near the end of a note made the page shorter than where it was scrolled to, and the
+ * browser brought everything above down; growing it after that, the browser's scroll anchoring
+ * kept the text below in place and the picture grew upward, away from the pointer. So the note is
+ * given room after its last line for as much as the picture may shrink, the anchoring is turned off
+ * on what scrolls for the drag, and any move of the picture's top left is scrolled back.
+ */
+function pinTop(view, picture) {
+    const scroller = scrollerOf(view);
+    const anchored = scroller ?? document.documentElement;
+    const anchoring = anchored.style.overflowAnchor;
+    anchored.style.overflowAnchor = 'none';
+    const top = picture()?.getBoundingClientRect().top ?? null;
+    const height = picture()?.getBoundingClientRect().height ?? 0;
+    const room = roomBelow.get(view);
+    setRoom(view, Math.max(room?.added ?? 0, height));
+    roomBelow.get(view).dragging = true;
+    const hold = () => {
+        const now = picture()?.getBoundingClientRect().top;
+        if (top === null || now === undefined)
+            return;
+        const moved = now - top;
+        if (Math.abs(moved) < 1)
+            return;
+        if (scroller)
+            scroller.scrollBy(0, moved);
+        else
+            window.scrollBy(0, moved);
+    };
+    const release = () => {
+        hold();
+        anchored.style.overflowAnchor = anchoring;
+        const left = roomBelow.get(view);
+        if (left)
+            left.dragging = false;
+    };
+    return { hold, release };
+}
 /** A number as a field holds it: digits and nothing else, or `null`. */
 function wholeNumber(text) {
     return /^\d{1,6}$/.test(text.trim()) ? Number(text.trim()) : null;
@@ -133,6 +214,9 @@ function wholeNumber(text) {
  * controls, gaps included, and the frame is marked busy while one of them has the focus, while the
  * handle is dragged and for a moment after a pointer or a touch on them.
  *
+ * Sized in place, as a table is edited in place, the image shows its source only from a button among
+ * its controls or when the caret reaches it from the keyboard; a click on the picture shows nothing (#112).
+ *
  * 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.
  */
@@ -218,6 +302,30 @@ export function ImageBlock({ view, source, children }) {
         const width = content ? content.clientWidth - parseFloat(getComputedStyle(content).paddingLeft || '0') - parseFloat(getComputedStyle(content).paddingRight || '0') : 0;
         return width > 0 ? Math.round(width) : null;
     };
+    /** The widest a share of the page draws the picture: that share of the column, in pixels. */
+    const shareWidth = (share) => {
+        const wide = column();
+        return wide === null ? `${share}%` : `${Math.round((wide * share) / 100)}px`;
+    };
+    // A share of the page is a share of the column the note is read at (§3.14), as reading mode draws
+    // it. Written as a percentage it would resolve against the frame, which shrinks to the picture, and
+    // the picture would be drawn at that share of itself (#113): it is given in pixels of the column.
+    const percent = size?.percent ?? null;
+    useEffect(() => {
+        const content = frame.current?.closest('.cm-content') ?? null;
+        if (!image || percent === null || !content)
+            return;
+        const place = () => {
+            if (!drag.current)
+                image.style.maxWidth = shareWidth(percent);
+        };
+        place();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(place);
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, [image, percent]);
     /** The image as it is drawn now, or `null` before it is laid out. */
     const drawn = () => {
         const box = image?.getBoundingClientRect();
@@ -240,6 +348,11 @@ export function ImageBlock({ view, source, children }) {
         const tallest = Math.max(proportion === null ? 0 : Math.ceil(width * proportion), natural?.height ?? 0);
         return { min: MIN_IMAGE_SIZE, max: tallest > 0 && widest > 0 ? tallest : MAX_IMAGE_WIDTH };
     };
+    /** Where the image's source starts in the note, or `null` when it is not in the page. */
+    const place = () => {
+        const widget = frame.current?.closest('.cm-ms-inline-block, .cm-ms-block');
+        return widget ? view.posAtDOM(widget) : null;
+    };
     const apply = (changes) => {
         const widget = frame.current?.closest('.cm-ms-inline-block, .cm-ms-block');
         if (!widget || changes.length === 0)
@@ -360,11 +473,23 @@ export function ImageBlock({ view, source, children }) {
         const wide = column();
         // The size it is drawn at, said in the other unit, when it has one.
         if (next === '%' && size?.percent == null && size?.width != null && now && wide) {
-            resize({ width: null, height: null, percent: Math.min(100, Math.max(1, Math.round((now.width / wide) * 100))) });
+            const share = Math.min(100, Math.max(1, Math.round((now.width / wide) * 100)));
+            const at = place();
+            if (at !== null)
+                switchedUnits.set(view, { at, percent: share, width: size.width, height: size.height });
+            resize({ width: null, height: null, percent: share });
         }
-        else if (next === 'px' && size?.percent != null && now) {
-            resize({ width: now.width, height: null, percent: null });
+        else if (next === 'px' && size?.percent != null) {
+            const left = switchedUnits.get(view);
+            if (left && left.at === place() && left.percent === size.percent) {
+                resize({ width: left.width, height: left.height, percent: null });
+                setLocked(left.height === null);
+            }
+            else if (now)
+                resize({ width: now.width, height: null, percent: null });
         }
+        if (next === 'px')
+            switchedUnits.delete(view);
         if (next === '%')
             setLocked(true);
     };
@@ -385,13 +510,17 @@ export function ImageBlock({ view, source, children }) {
         if (image) {
             image.style.width = '';
             image.style.height = '';
-            image.style.maxWidth = '';
+            image.style.maxWidth = percent === null ? '' : shareWidth(percent);
         }
         hold();
-        if (cancelled || !end)
-            return;
-        if (Math.abs(end.width - start.width) < 1 && Math.abs(end.height - start.height) < 1)
-            return;
+        // The picture keeps its place while it is written and drawn again at its new size (#116).
+        const settle = () => {
+            start.pin.hold();
+            requestAnimationFrame(start.pin.hold);
+            setTimeout(start.pin.release, SCROLL_HOLD_MS);
+        };
+        if (cancelled || !end || (Math.abs(end.width - start.width) < 1 && Math.abs(end.height - start.height) < 1))
+            return settle();
         if (unit === '%') {
             const percent = percentOf(end.width);
             if (percent !== null)
@@ -401,11 +530,18 @@ export function ImageBlock({ view, source, children }) {
             resize({ width: end.width, height: end.height, percent: null });
         else
             resize({ width: end.width, height: null, percent: null });
+        settle();
+    };
+    /** Shows the image's notation, as a table's button does: the caret goes before it (#112). */
+    const showSource = () => {
+        const widget = frame.current?.closest('.cm-ms-inline-block, .cm-ms-block');
+        if (widget)
+            reveal(view, view.posAtDOM(widget));
     };
     const offered = size !== null && image !== null;
     const unitWord = unit === '%' ? '%' : 'px';
     const invalid = (name) => (refused?.field === name ? { 'aria-invalid': true, title: words.imageOutOfRange(refused.range.min, refused.range.max, name === 'width' ? unitWord : 'px') } : {});
-    return (_jsxs("span", { ref: frame, className: "edit-image", "data-resizing": dragged === null ? undefined : '', onFocus: () => frame.current && (frame.current.dataset['msBusy'] = ''), onBlur: hold, onMouseDown: (event) => {
+    return (_jsxs("span", { ref: frame, className: "edit-image", "data-resizing": dragged === null ? undefined : '', "data-ms-in-place": offered ? '' : undefined, onFocus: () => frame.current && (frame.current.dataset['msBusy'] = ''), onBlur: hold, onMouseDown: (event) => {
             // The frame's own area is the space between the picture and its controls: a press there is
             // one meant for them, and shows nothing (#107).
             if (event.target === event.currentTarget) {
@@ -420,14 +556,17 @@ export function ImageBlock({ view, source, children }) {
                                 event.preventDefault();
                         }, children: [size.description ? (_jsx("input", { className: "edit-field edit-image-description", type: "text", "aria-label": words.imageDescription, title: words.imageDescription, placeholder: image.alt, value: typed.description ?? size.description.text, ...field('description') })) : (
                             // An embed writes no description (§5.8): the file's own is shown, and is not edited here.
-                            _jsx("input", { className: "edit-field edit-image-description", type: "text", readOnly: true, "aria-label": words.imageDescription, title: words.imageDescription, placeholder: image.alt, value: "" })), _jsxs("span", { className: "edit-image-size", children: [_jsx("input", { className: "edit-field edit-image-width", type: "text", inputMode: "numeric", autoComplete: "off", "aria-label": words.imageWidth, title: words.imageWidth, placeholder: unit === '%' ? '' : natural === null ? '' : String(natural.width), value: typed.width ?? (shownWidth === null ? '' : String(shownWidth)), ...field('width'), ...invalid('width') }), _jsxs("select", { className: "edit-image-unit", "aria-label": words.imageUnit, title: words.imageUnit, value: unit, onChange: (event) => chooseUnit(event.target.value), children: [_jsx("option", { value: "px", children: "px" }), _jsx("option", { value: "%", children: "%" })] }), _jsx(Control, { label: locked ? words.imageKeepRatio : words.imageFreeRatio, onClick: toggleLock, pressed: locked, disabled: unit === '%', focusable: true, children: locked ? ICON_RATIO_LOCKED : ICON_RATIO_FREE }), _jsx("input", { className: "edit-field edit-image-height", type: "text", inputMode: "numeric", autoComplete: "off", "aria-label": words.imageHeight, title: words.imageHeight, disabled: unit === '%', placeholder: natural === null || unit === '%' ? '' : String(natural.height), value: unit === '%' ? '' : (typed.height ?? (shownHeight === null ? '' : String(shownHeight))), ...field('height'), ...invalid('height') }), _jsx("span", { className: "edit-image-unit-label", "aria-hidden": "true", children: "px" }), _jsx(Control, { label: words.imageOwnSize, onClick: () => resize(null), pressed: size.width === null && size.percent === null, focusable: true, children: ICON_OWN_SIZE })] }), refused && (_jsx("span", { className: "edit-image-refused", role: "status", children: words.imageOutOfRange(refused.range.min, refused.range.max, refused.field === 'width' ? unitWord : 'px') }))] }), _jsx("span", { className: "edit-image-handle", "data-ms-control": "", "data-free": free ? '' : undefined, title: free ? words.imageResizeFree : words.imageResizeKeep, "aria-hidden": "true", onPointerDown: (event) => {
+                            _jsx("input", { className: "edit-field edit-image-description", type: "text", readOnly: true, "aria-label": words.imageDescription, title: words.imageDescription, placeholder: image.alt, value: "" })), _jsxs("span", { className: "edit-image-size", children: [_jsx("input", { className: "edit-field edit-image-width", type: "text", inputMode: "numeric", autoComplete: "off", "aria-label": words.imageWidth, title: words.imageWidth, placeholder: unit === '%' ? '' : natural === null ? '' : String(natural.width), value: typed.width ?? (shownWidth === null ? '' : String(shownWidth)), ...field('width'), ...invalid('width') }), _jsxs("select", { className: "edit-image-unit", "aria-label": words.imageUnit, title: words.imageUnit, value: unit, onChange: (event) => chooseUnit(event.target.value), children: [_jsx("option", { value: "px", children: "px" }), _jsx("option", { value: "%", children: "%" })] }), _jsx(Control, { label: locked ? words.imageKeepRatio : words.imageFreeRatio, onClick: toggleLock, pressed: locked, disabled: unit === '%', focusable: true, children: locked ? ICON_RATIO_LOCKED : ICON_RATIO_FREE }), _jsx("input", { className: "edit-field edit-image-height", type: "text", inputMode: "numeric", autoComplete: "off", "aria-label": words.imageHeight, title: words.imageHeight, disabled: unit === '%', placeholder: natural === null || unit === '%' ? '' : String(natural.height), value: unit === '%' ? '' : (typed.height ?? (shownHeight === null ? '' : String(shownHeight))), ...field('height'), ...invalid('height') }), _jsx("span", { className: "edit-image-unit-label", "aria-hidden": "true", children: "px" }), _jsx(Control, { label: words.imageOwnSize, onClick: () => resize(null), pressed: size.width === null && size.percent === null, focusable: true, children: ICON_OWN_SIZE }), _jsx(Control, { label: words.source, onClick: showSource, children: ICONS.source })] }), refused && (_jsx("span", { className: "edit-image-refused", role: "status", children: words.imageOutOfRange(refused.range.min, refused.range.max, refused.field === 'width' ? unitWord : 'px') }))] }), _jsx("span", { className: "edit-image-handle", "data-ms-control": "", "data-free": free ? '' : undefined, title: free ? words.imageResizeFree : words.imageResizeKeep, "aria-hidden": "true", onPointerDown: (event) => {
                             event.preventDefault();
                             event.stopPropagation();
                             const now = drawn();
                             if (!now)
                                 return;
                             event.currentTarget.setPointerCapture?.(event.pointerId);
-                            drag.current = { x: event.clientX, y: event.clientY, ...now, pointer: event.pointerId };
+                            const widget = frame.current?.closest('.cm-ms-inline-block, .cm-ms-block') ?? null;
+                            // The picture the widget draws, the one drawn anew once it is written included.
+                            const pin = pinTop(view, () => widget?.querySelector('.edit-image img') ?? null);
+                            drag.current = { x: event.clientX, y: event.clientY, ...now, pointer: event.pointerId, pin };
                             if (frame.current)
                                 frame.current.dataset['msBusy'] = '';
                             setShift(event.shiftKey);
@@ -445,6 +584,7 @@ export function ImageBlock({ view, source, children }) {
                             }
                             else
                                 image.style.height = 'auto';
+                            start.pin.hold();
                             // What the page lets it be: never wider than the column.
                             setDragged(drawn());
                         }, onPointerUp: (event) => endDrag(event, false), onPointerCancel: (event) => endDrag(event, true), children: ICON_RESIZE })] }))] }));

package/dist/edit/live.js

@@ -260,8 +260,17 @@ class BlockWidget extends WidgetType {
             // dragged, the click a touch on them leaves behind — never shows the source (#107).
             if (target.closest('[data-ms-control], [data-ms-busy]'))
                 return;
-            if (event.metaKey || event.ctrlKey)
+            // CodeMirror hands the editor no event from inside a drawn block: a link around it is followed here (#112).
+            if (event.metaKey || event.ctrlKey) {
+                followLinkAround(event, view, element);
                 return;
+            }
+            // A picture sized in place, as a table is edited in place, shows its source from its button or
+            // the keyboard, never from a click (#112); kept from placing the caret beside it, which would.
+            if (target.closest('[data-ms-in-place]')) {
+                event.preventDefault();
+                return;
+            }
             const widget = drawing.get(element) ?? this;
             if (!widget.revealsOnClick)
                 return;
@@ -872,29 +881,96 @@ const blockKeys = Prec.high(keymap.of([
     { key: 'ArrowDown', run: enterBlock(true) },
     { key: 'ArrowUp', run: enterBlock(false) },
 ]));
-/** Follows a link with a modifier held: a wikilink through the host, an address the page follows in a new tab. */
-const follow = EditorView.domEventHandlers({
+/** Where the first press of a gesture fell in the note, read before the press moved the caret. */
+const firstPress = new WeakMap();
+/** The longest a browser counts two presses as one gesture: Windows' default double-click time. */
+const MULTI_CLICK_MS = 500;
+/**
+ * Selects the word, or the line, a double or a triple click starts on (#114). The first press puts
+ * the caret where it fell, which reveals the markers beside it, or hides the ones it left, and moves
+ * the rest of the line under the pointer by their width: the second press, read where it lands,
+ * would select the marker or the next word. It is read where the first one fell instead.
+ */
+const multiClick = EditorView.domEventHandlers({
     mousedown(event, view) {
-        if (!(event.metaKey || event.ctrlKey))
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
             return false;
-        const target = event.target.closest('[data-target], [data-href]');
-        if (!target)
+        if (event.detail <= 1) {
+            const at = view.posAtCoords({ x: event.clientX, y: event.clientY });
+            if (at === null)
+                firstPress.delete(view);
+            else
+                firstPress.set(view, { at, time: event.timeStamp });
             return false;
-        event.preventDefault();
-        const { host } = view.state.facet(editorEnvironment);
-        const name = target.dataset['target'];
-        if (name !== undefined) {
-            const address = host.resolve(name);
-            if (address !== null)
-                host.navigate(address);
-            return true;
         }
-        const address = followable(target.dataset['href'] ?? '');
-        if (address)
-            window.open(address, '_blank', 'noreferrer');
+        const first = firstPress.get(view);
+        if (!first || event.timeStamp - first.time > MULTI_CLICK_MS * (event.detail - 1))
+            return false;
+        const { state } = view;
+        const line = state.doc.lineAt(first.at);
+        const range = event.detail === 2 ? (state.wordAt(first.at) ?? EditorSelection.cursor(first.at)) : EditorSelection.range(line.from, line.to);
+        event.preventDefault();
+        view.dispatch({ selection: EditorSelection.single(range.from, range.to), userEvent: 'select.pointer' });
         return true;
     },
 });
+/** Follows a link with a modifier held: a wikilink through the host, an address the page follows in a new tab. */
+const follow = EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (!(event.metaKey || event.ctrlKey))
+            return false;
+        return followLink(event, view);
+    },
+});
+/** Follows the link a press with a modifier fell in, if any: `true` when it did. */
+function followLink(event, view) {
+    const target = event.target.closest('[data-target], [data-href]');
+    if (!target)
+        return false;
+    event.preventDefault();
+    followAddress(view, target.dataset['target'], target.dataset['href']);
+    return true;
+}
+/**
+ * Follows the link a drawn block stands in, pressed with a modifier: CodeMirror draws no mark around
+ * a widget, so the link around an image is found among the marks over its source (#112).
+ */
+function followLinkAround(event, view, element) {
+    if (followLink(event, view))
+        return true;
+    const widget = drawing.get(element);
+    if (!widget)
+        return false;
+    const from = view.posAtDOM(element);
+    const to = from + widget.source.length;
+    const links = [];
+    view.state.field(decorationsField).between(from, to, (start, end, decoration) => {
+        const attributes = decoration.spec.attributes;
+        if (!attributes || start > from || end < to)
+            return;
+        if (attributes['data-target'] !== undefined || attributes['data-href'] !== undefined)
+            links.push({ target: attributes['data-target'], href: attributes['data-href'] });
+    });
+    const link = links[0];
+    if (!link)
+        return false;
+    event.preventDefault();
+    followAddress(view, link.target, link.href);
+    return true;
+}
+/** Goes to a wikilink's note through the host, or opens an address the page follows in a new tab. */
+function followAddress(view, name, href) {
+    const { host } = view.state.facet(editorEnvironment);
+    if (name !== undefined) {
+        const address = host.resolve(name);
+        if (address !== null)
+            host.navigate(address);
+        return;
+    }
+    const address = followable(href ?? '');
+    if (address)
+        window.open(address, '_blank', 'noreferrer');
+}
 /** How long an embed measured ahead of being drawn may take to load before it is let go (#94). */
 const PREMEASURE_TIMEOUT = 8000;
 /**
@@ -1036,5 +1112,6 @@ export function livePage(metrics) {
         embedPremeasure,
         blockKeys,
         follow,
+        multiClick,
     ];
 }

package/dist/edit/saves.d.ts

@@ -42,6 +42,11 @@ export interface EditSaves {
     readonly retry: () => void;
     /** Runs one of the notice's actions and follows it like a save. */
     readonly run: (action: SaveAction) => void;
+    /**
+     * Whether an action the author chose is still running (#119): the note stays held until it
+     * settles, and a moment after, so the text the host gives back is in before the author writes.
+     */
+    readonly running: boolean;
 }
 /** Whether a value is a notice a host gave: a title, a message and its actions. */
 export declare function isSaveNotice(value: unknown): value is SaveNotice;

package/dist/edit/saves.js

@@ -26,6 +26,7 @@ export function isSaveNotice(value) {
 }
 export function useEditSaves(onChange) {
     const [status, setStatus] = useState({ state: 'idle', notice: null });
+    const [running, setRunning] = useState(false);
     const latest = useRef({ onChange, count: 0, text: null, alive: true });
     latest.current.onChange = onChange;
     useEffect(() => {
@@ -35,13 +36,18 @@ export function useEditSaves(onChange) {
             self.alive = false;
         };
     }, []);
-    /** Follows what the host answered, a change's save or an action; `done` is the state of an answer that is not a promise. */
-    const follow = useCallback((answer, done) => {
+    /**
+     * Follows what the host answered, a change's save or an action; `done` is the state of an answer
+     * that is not a promise, and `settled` is told once it is over.
+     */
+    const follow = useCallback((answer, done, settled) => {
         const self = latest.current;
         const count = ++self.count;
         const settle = (state, notice = null) => {
             if (self.alive && count === self.count)
                 setStatus({ state, notice });
+            if (state !== 'saving')
+                settled?.();
         };
         let result;
         try {
@@ -68,6 +74,12 @@ export function useEditSaves(onChange) {
             hand(text);
     }, [hand]);
     // An action that answers nothing has done what it does: the author decided, and nothing is left to say.
-    const run = useCallback((action) => follow(() => action.run(), 'saved'), [follow]);
-    return { state: status.state, notice: status.notice, hand, retry, run };
+    // The note is held from the choice until the action settles, and for a turn of the event loop after
+    // it, so a text the host gives back as it settles is drawn before a key reaches it (#119).
+    const run = useCallback((action) => {
+        const self = latest.current;
+        setRunning(true);
+        follow(() => action.run(), 'saved', () => setTimeout(() => self.alive && setRunning(false)));
+    }, [follow]);
+    return { state: status.state, notice: status.notice, hand, retry, run, running };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "A React component that draws a MemorySmith note exactly as MemorySmith's reading page does.",
   "keywords": [
     "markdown",
@@ -79,7 +79,7 @@
     "unified": "11.0.5"
   },
   "devDependencies": {
-    "@memorysmithapp/markdown-spec": "0.8.0",
+    "@memorysmithapp/markdown-spec": "0.8.2",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",