@memorysmithapp/markdown-renderer 0.8.2 → 0.8.4

package/README.md

@@ -138,7 +138,7 @@ const notices = await diagnose(note, {
 
 A `notice` says the page will differ from the text — a fence never closed, a formula KaTeX cannot typeset, a diagram Mermaid cannot read, raw HTML, a footnote with no definition or no reference, a single-tilde strikethrough, a frontmatter never closed, a `name` that leaves the note unnamed or none at all, `aliases` or `tags` that are not a list, a body that does not start at `#` or skips a level. A `hint` says nothing is drawn wrong: no `aliases`, no `tags`, a link or an embed no note answers yet. Lines and columns count from 1 over the whole note, frontmatter included, and the `message` is English; a host words it in its own language from the `code`, which is stable. Mermaid is loaded only for a note that holds a diagram, and `diagrams: false` skips it.
 
-The host contract, the stylesheet's properties, the slots and the decisions behind them are in the repository's [`ARCHITECTURE.md`](https://github.com/memorysmithapp/memorysmithapp-markdown/blob/main/ARCHITECTURE.md).
+The host contract, the stylesheet's properties, the slots and the decisions behind them are in the repository's [`ARCHITECTURE.md`](https://github.com/memorysmithapp/memorysmithapp-markdown/blob/main/docs/ARCHITECTURE.md).
 
 ## Licence
 

package/dist/edit/blocks.js

@@ -225,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' : '%'));
@@ -239,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;
@@ -541,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) {
@@ -551,12 +556,13 @@ 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "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.2",
+    "@memorysmithapp/markdown-spec": "0.8.4",
     "@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);