@memorysmithapp/markdown-renderer 0.8.1 → 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.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;
@@ -438,10 +513,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 +530,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 = () => {
@@ -483,7 +563,10 @@ export function ImageBlock({ view, source, children }) {
                             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 +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/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.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.1",
+    "@memorysmithapp/markdown-spec": "0.8.2",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",