@memorysmithapp/markdown-renderer 0.8.0 → 0.8.1

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). */
@@ -133,6 +139,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 +227,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 +273,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 +398,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,7 +435,7 @@ 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)
@@ -402,10 +452,16 @@ export function ImageBlock({ view, source, children }) {
         else
             resize({ width: end.width, height: null, percent: null });
     };
+    /** 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,7 +476,7 @@ 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();

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/package.json

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