@memorysmithapp/markdown-renderer 0.8.1 → 0.8.3

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.js

@@ -98,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 = () => {
@@ -117,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;
@@ -150,6 +225,8 @@ export function ImageBlock({ view, source, children }) {
     const frame = useRef(null);
     const size = readImageSize(source);
     const [image, setImage] = useState(null);
+    // A kept file that is not a picture — its card, its player — takes the column, as it is read (#122).
+    const [file, setFile] = useState(false);
     const [natural, setNatural] = useState(null);
     const [locked, setLocked] = useState(() => size?.height == null);
     const [unit, setUnit] = useState(() => (size?.percent == null ? 'px' : '%'));
@@ -164,7 +241,10 @@ export function ImageBlock({ view, source, children }) {
         const element = frame.current;
         if (!element)
             return;
-        const look = () => setImage(element.querySelector('img'));
+        const look = () => {
+            setImage(element.querySelector('img'));
+            setFile(element.querySelector('.attachment-card, .attachment-player') !== null);
+        };
         look();
         if (typeof MutationObserver === 'undefined')
             return;
@@ -438,10 +518,14 @@ export function ImageBlock({ view, source, children }) {
             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)
@@ -451,6 +535,7 @@ 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 = () => {
@@ -461,7 +546,7 @@ export function ImageBlock({ view, source, children }) {
     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 : '', "data-ms-in-place": offered ? '' : 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, "data-ms-file": file ? '' : 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) {
@@ -471,19 +556,23 @@ export function ImageBlock({ view, source, children }) {
         }, children: [children, offered && (_jsxs(_Fragment, { children: [_jsxs("span", { className: "edit-image-controls", "data-ms-control": "", onPointerDown: hold, onTouchStart: hold, onMouseDown: (event) => {
                             // A press anywhere but on a field, a choice or a button — a gap between them, the
                             // padding, a word beside a field — keeps the focus where it is. Its default would put
-                            // the editor's caret where the press fell, and the image would show its source (#107).
-                            if (!event.target.closest('input, select, textarea, button'))
+                            // the editor's caret where the press fell, and the image would show its source (#107). A
+                            // disabled one is a gap too: it takes no focus, and the caret would go where it fell (#121).
+                            if (!event.target.closest('input:enabled, select:enabled, textarea:enabled, button:enabled'))
                                 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 }), _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) => {
+                            _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", "data-unit": unit, 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);
@@ -501,6 +590,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/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.1",
+  "version": "0.8.3",
   "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.1",
+    "@memorysmithapp/markdown-spec": "0.8.3",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",

package/structure.css

@@ -469,6 +469,11 @@
   max-width: 100%;
   vertical-align: middle;
 }
+/* A kept file that is not a picture, a card or a player, has no width of its own
+   to shrink the frame to: it takes the column, as in reading mode (#122). */
+.markdown .edit-image[data-ms-file] {
+  display: block;
+}
 .markdown .edit-image-controls {
   position: absolute;
   top: var(--edit-image-bottom, 100%);
@@ -493,6 +498,11 @@
 .markdown .edit-image-height {
   width: 4.2em;
 }
+/* Under a share of the page, the lock, the height and its unit mean nothing: they
+   are not shown, and keep their place so the controls after them stay put (#121). */
+.markdown .edit-image-size[data-unit='%'] > :is(.edit-control:disabled, .edit-image-height, .edit-image-unit-label) {
+  visibility: hidden;
+}
 .markdown .edit-image-description {
   flex: 1 1 10rem;
   min-width: 0;

package/theme-default.css

@@ -1983,9 +1983,6 @@
   border-color: rgb(var(--ms-callout-stop));
   outline: 1px solid rgb(var(--ms-callout-stop));
 }
-.markdown .edit-image-controls .edit-field:disabled {
-  opacity: 0.5;
-}
 .markdown .edit-image-unit {
   height: 1.9rem;
   border: 1px solid var(--ms-border);