@memorysmithapp/markdown-renderer 0.7.0 → 0.7.1

package/dist/edit/NoteEditor.js

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

package/dist/edit/click-source.d.ts

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

package/dist/edit/click-source.js

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

package/dist/edit/live.js

@@ -19,6 +19,7 @@ import { highlightLanguage } from '../highlight.js';
 import { analyze } from './analyze.js';
 import { DEFAULT_METRICS, estimateHeight, lineHeightOf, measureLines, measuredHeight, rememberHeight, withinReason } from './heights.js';
 import { AddProperties, CalloutBlock, ImageBlock, PropertiesBlock, reveal, Snippet, TableBlock } from './blocks.js';
+import { caretAt, sourceOffsetOf } from './click-source.js';
 import { LanguageControl } from './LanguageControl.js';
 import { toggleTaskBox } from './commands.js';
 export const editorEnvironment = Facet.define({
@@ -263,8 +264,12 @@ class BlockWidget extends WidgetType {
             if (!widget.revealsOnClick)
                 return;
             event.preventDefault();
-            // At the end of its first line: after a fence's language, a callout's title, a formula's `$$`.
-            reveal(view, view.state.doc.lineAt(blockStart(view, element, widget.key)).to);
+            // Where the text clicked is written in the source (#102); else at the end of its first line,
+            // after a callout's title or a diagram's fence.
+            const start = blockStart(view, element, widget.key);
+            const caret = caretAt(event.clientX, event.clientY);
+            const offset = caret ? sourceOffsetOf(element, widget.source, caret.node, caret.offset) : null;
+            reveal(view, offset === null ? view.state.doc.lineAt(start).to : Math.min(start + offset, view.state.doc.length));
         });
         // A link inside a drawn block is followed with a modifier only, as in the text.
         element.addEventListener('click', (event) => {

package/dist/strings.d.ts

@@ -187,6 +187,8 @@ export interface EditorWords {
     readonly retry: string;
     /** Said when the author asked to go back to reading and the last change is not saved. */
     readonly stayInEdit: string;
+    /** Said while a refused save waits for the author's choice before the note is written in again (#101). */
+    readonly chooseToEdit: string;
 }
 /** The words MemorySmith shows in English, used for every word a host does not give. */
 export declare const ENGLISH: NoteStrings;

package/dist/strings.js

@@ -179,6 +179,7 @@ export const ENGLISH = {
         saving: 'Saving…',
         retry: 'Try again',
         stayInEdit: 'Not saved: the note stays in edit',
+        chooseToEdit: 'Choose what to do with it to keep writing',
     },
     loading: 'Loading…',
     failed: 'Something went wrong.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "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.7.0",
+    "@memorysmithapp/markdown-spec": "0.7.1",
     "@types/hast": "3.0.5",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",