@memorysmithapp/markdown-renderer 0.5.0 → 0.7.0

package/dist/host.d.ts

@@ -38,7 +38,9 @@ export interface NoteHost {
     /**
      * The note a target names, for an embed to draw in place: its body as the host keeps it, its name
      * and its address. Asked only for a target exactly one note reaches; `null` draws the embed as
-     * pending. Without it, every embed of a note is pending. The package never fetches.
+     * pending. Without it, every embed of a note is pending. The package never fetches. In edit mode
+     * each embedded note is also asked for as the editor opens, to lay the page out at its height
+     * before it is reached (#94): a host that loads from the network may cache what it answered.
      */
     readonly loadNote?: (name: string) => Promise<EmbeddedNote | null>;
     /**
@@ -92,9 +94,21 @@ export interface NoteHost {
     /**
      * Draws a file the notebook keeps where a note embeds it: an image, audio, video, or a card. The
      * dimensions are the ones the embed declared, in CSS pixels, or `null`.
+     *
+     * In edit mode the node may be drawn outside the host's React tree, in the root of a block the
+     * editor draws, so it must not depend on the host's context; a node that throws there leaves the
+     * block's Markdown in its place (#90).
      */
     readonly renderAttachment?: (file: AttachmentRequest) => ReactNode;
-    /** Draws a link to an internal address, through the host's router. */
+    /**
+     * Draws a link to an internal address, through the host's router.
+     *
+     * In edit mode the node may be drawn outside the host's React tree, in the root of a block the
+     * editor draws — a callout, a table, an embed, the properties — so it must not depend on the host's
+     * context: a router's `<Link>`, which reads its router from context, throws there. Hand it what it
+     * needs (a `navigate` captured where the router is) or draw an anchor whose click the host follows.
+     * A node that throws leaves the block's Markdown in its place (#90).
+     */
     readonly renderLink?: (link: LinkRequest) => ReactNode;
     /** The words the page shows, in the reader's language; each one left out is MemorySmith's English. */
     readonly strings?: NoteStringsInput;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { NoteBody, type NoteBodyProps, type NoteMode } from './NoteBody.js';
+export type { NoteButtons } from './NoteActions.js';
 export type { SaveAction, SaveNotice, SaveOutcome, SaveRefusal } from './edit/saves.js';
 export { isAttachRefusal } from './host.js';
 export type { AttachAttributes, AttachmentRequest, AttachProgress, AttachRefusal, EmbeddedNote, KeptFile, KeptFileEntry, LinkChoiceNote, LinkChoices, LinkRequest, NoteHost } from './host.js';

package/dist/mode-icons.d.ts

@@ -4,3 +4,4 @@ export declare const ICON_MARKDOWN: import("react").JSX.Element;
 export declare const ICON_COPY: import("react").JSX.Element;
 export declare const ICON_CHECK: import("react").JSX.Element;
 export declare const ICON_CLOSE: import("react").JSX.Element;
+export declare const ICON_OWN_SIZE: import("react").JSX.Element;

package/dist/mode-icons.js

@@ -9,3 +9,5 @@ export const ICON_MARKDOWN = svg('M10 12.5 8 15l2 2.5', 'm14 12.5 2 2.5-2 2.5',
 export const ICON_COPY = svg('M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z', 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2');
 export const ICON_CHECK = svg('M20 6 9 17l-5-5');
 export const ICON_CLOSE = svg('M18 6 6 18', 'm6 6 12 12');
+// The button that draws an image at its own size (#98): Lucide's scaling (ISC).
+export const ICON_OWN_SIZE = svg('M21 3 9 15', 'M12 3H3v18h18v-9', 'M16 3h5v5', 'M14 15H9v-5');

package/dist/strings.d.ts

@@ -109,6 +109,8 @@ export interface EditorWords {
     readonly attachFailed: string;
     /** Said after the host's step while more files wait their turn (#88). */
     readonly attachQueued: (count: number) => string;
+    /** Said over a drawn block's lines when drawing it failed, so the block is never left empty (#90). */
+    readonly blockFailed: string;
     /** A code block's language, chosen at its top right (#84). */
     readonly language: string;
     readonly plainText: string;
@@ -156,6 +158,12 @@ export interface EditorWords {
     readonly addItem: string;
     readonly removeItem: string;
     readonly calloutType: string;
+    /** The field of an image's width in edit mode, in pixels (#98). */
+    readonly imageWidth: string;
+    /** The button that draws an image at its own size again (#98). */
+    readonly imageOwnSize: string;
+    /** The handle at an image's corner that drags its size (#98). */
+    readonly imageResize: string;
     readonly fold: string;
     readonly foldNone: string;
     readonly foldOpen: string;

package/dist/strings.js

@@ -113,6 +113,7 @@ export const ENGLISH = {
         attaching: 'Attaching…',
         attachFailed: 'The file was not attached',
         attachQueued: (count) => (count === 1 ? '1 more file waiting' : `${count} more files waiting`),
+        blockFailed: 'This block could not be drawn; its Markdown is below',
         language: 'Language',
         plainText: 'Plain text',
         mermaidDiagram: 'Mermaid diagram',
@@ -155,6 +156,9 @@ export const ENGLISH = {
         addItem: 'Add',
         removeItem: 'Remove',
         calloutType: 'Type',
+        imageWidth: 'Width, in pixels',
+        imageOwnSize: 'Its own size',
+        imageResize: 'Drag to resize',
         fold: 'Folding',
         foldNone: 'Not foldable',
         foldOpen: 'Folds, open',

package/dist/theme.d.ts

@@ -23,6 +23,7 @@
 import type { ReactNode } from 'react';
 import type { FileShape } from './file-types.js';
 import type { KeptFile } from './host.js';
+import type { NoteButtons } from './NoteActions.js';
 import type { PropertyEntry } from './properties.js';
 export type Scheme = 'light' | 'dark';
 /**
@@ -119,6 +120,7 @@ export interface ThemeProperties {
     readonly chipBg?: string;
     readonly chipColor?: string;
     readonly chipFont?: string;
+    readonly buttonWordsFrom?: string;
 }
 /** The names of `ThemeProperties`, in the order the documentation lists them. */
 export declare const THEME_PROPERTIES: (keyof ThemeProperties)[];
@@ -251,8 +253,11 @@ export interface ModeSwitchSlotProps {
     readonly label: string;
     /** The default theme's icon of that action: a pencil to edit, an eye to read. */
     readonly icon: ReactNode;
-    /** Whether the host asked for the icon alone or the icon and its word. */
-    readonly display: 'icon' | 'label';
+    /**
+     * How the host asked the buttons around the note to show their word (#96): the icon alone, the
+     * icon and its word, or the word only on a wide note (`responsive`).
+     */
+    readonly display: NoteButtons;
     /** Switches to the other mode. */
     readonly toggle: () => void;
 }
@@ -315,7 +320,10 @@ export interface Theme {
     };
     /** An icon per callout kind, drawn in the title in place of the stylesheet's. */
     readonly icons?: Readonly<Record<string, ReactNode>>;
-    /** The slots the theme fills. */
+    /**
+     * The slots the theme fills. In edit mode a slot may be drawn outside the host's React tree, in
+     * the root of a block the editor draws, so it must not depend on the host's context (#90).
+     */
     readonly components?: Partial<ThemeComponents>;
 }
 /**

package/dist/theme.js

@@ -42,6 +42,7 @@ export const THEME_PROPERTIES = Object.keys({
     propertiesRule: 1, propertiesLabelFont: 1, propertiesLabelColor: 1, propertiesKeyColor: 1,
     iconPropertyText: 1, iconPropertyList: 1, iconPropertyDate: 1, iconPropertyBoolean: 1,
     chipBg: 1, chipColor: 1, chipFont: 1,
+    buttonWordsFrom: 1,
 });
 /** `textSoft` → `--markdown-text-soft`, `h1Size` → `--markdown-h1-size`. */
 export function customPropertyOf(name) {

package/package.json

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

package/structure.css

@@ -15,6 +15,13 @@
   box-sizing: border-box;
 }
 
+/* What is laid out of the flow hangs from the note, never from the page: a
+   host that scrolls the note in a pane of its own keeps a page of its own
+   height (#93). */
+.markdown {
+  position: relative;
+}
+
 .markdown img {
   max-width: 100%;
 }
@@ -90,10 +97,14 @@
    and the text of a title flows around it. In edit mode it stays there, at
    the end of a bar that holds the toolbar to its left and the save's status
    under it, and the bar stays at the top of the note while it scrolls. */
-/* The group at the top right: Show Markdown, Copy Markdown and the switch (#76). */
+/* The group at the top right: Show Markdown, Copy Markdown and the switch (#76).
+   It stays at the top of what is in view while the note is read and scrolled,
+   as the bar does in edit mode, and the text flows around the place it takes
+   at the top of the note (#97). */
 .markdown .note-corner {
   float: right;
-  position: relative;
+  position: sticky;
+  top: 0;
   z-index: 2;
   display: inline-flex;
   align-items: stretch;
@@ -109,6 +120,30 @@
 .markdown .mode-switch-glyph {
   flex: none;
 }
+/* The buttons around a note show their word as the host asked (#96). A
+   `responsive` one measures what it stands in — the note in reading, the bar
+   in edit mode, the dialog of Show Markdown — as a container, and shows its
+   word only from `--markdown-button-words-from` on. A container query cannot
+   read a custom property, so the threshold is a switch computed from the
+   container's width: 0px on a narrower one and 1px from it on, which the
+   word's width and the space before it are multiplied by. The editor's root
+   is never the container, because a container holds what is fixed, and the
+   menu of a right-click is fixed to the window. */
+.markdown.has-responsive-buttons,
+.markdown .has-responsive-buttons {
+  container-type: inline-size;
+}
+.markdown .note-button-word {
+  white-space: nowrap;
+}
+.markdown [data-buttons='responsive'] {
+  gap: 0;
+}
+.markdown [data-buttons='responsive'] .note-button-word {
+  overflow: hidden;
+  max-width: calc(clamp(0px, (100cqi - var(--markdown-button-words-from, 560px)) * 1000, 1px) * 10000);
+  margin-inline-start: min(calc(clamp(0px, (100cqi - var(--markdown-button-words-from, 560px)) * 1000, 1px) * 10000), 0.35em);
+}
 .markdown .edit-bar {
   position: sticky;
   top: 0;
@@ -139,6 +174,7 @@
 }
 .markdown .edit-corner .note-corner {
   float: none;
+  position: relative;
 }
 /* On a phone the corner keeps the top right, and the tools take the whole
    width under it rather than a narrow column beside it. */
@@ -397,6 +433,12 @@
 .markdown .cm-ms-math-block {
   display: flow-root;
 }
+/* A block that could not be drawn shows its lines as they were written (#90). */
+.markdown .cm-ms-block-failed pre {
+  margin: 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
 /* A table's cell is where a click edits it: it fills its column and keeps a
    size of its own when it is empty, as every cell of a new table is, or it
    would be nothing wide and nothing could be clicked (#68). */
@@ -417,3 +459,28 @@
   max-width: 100%;
   vertical-align: middle;
 }
+/* An image in edit mode carries its size's controls over its top right and a
+   handle at its bottom right corner that drags it (#98). */
+.markdown .edit-image {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle;
+}
+.markdown .edit-image-controls {
+  align-items: center;
+  white-space: nowrap;
+}
+.markdown .edit-image-width {
+  width: 5em;
+}
+.markdown .edit-image-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 0.9rem;
+  height: 0.9rem;
+  cursor: nwse-resize;
+  touch-action: none;
+}

package/theme-default.css

@@ -1193,9 +1193,16 @@
   cursor: pointer;
 }
 .markdown .mode-switch.mode-switch-icon,
-.markdown .note-action {
+.markdown .note-action.note-action-icon {
   padding: 0.3rem 0.4rem;
 }
+/* A responsive button keeps an icon's padding on a narrow note and takes a
+   word's from --markdown-button-words-from on (#96). */
+.markdown .mode-switch.mode-switch-responsive,
+.markdown .note-action.note-action-responsive {
+  padding-block: 0.3rem;
+  padding-inline: calc(0.4rem + min(calc(clamp(0px, (100cqi - var(--markdown-button-words-from, 560px)) * 1000, 1px) * 10000), 0.3rem));
+}
 .markdown .note-action {
   color: var(--ms-text-soft);
 }
@@ -1913,6 +1920,20 @@
 .markdown .cm-ms-block:hover {
   box-shadow: 0 0 0 1px var(--ms-border);
 }
+.markdown .cm-ms-block-failed {
+  padding: 0.5rem 0.75rem;
+  border: 1px dashed var(--ms-border);
+  border-radius: var(--ms-radius);
+}
+.markdown .cm-ms-block-failed-notice {
+  margin: 0 0 0.35rem;
+  color: var(--ms-text-soft);
+  font-size: 0.85em;
+}
+.markdown .cm-ms-block-failed pre {
+  font-family: var(--ms-font-mono);
+  font-size: 0.9em;
+}
 .markdown .edit-block-controls {
   opacity: 0;
   padding: 0.1rem;
@@ -1922,9 +1943,51 @@
   transition: opacity 0.12s;
 }
 .markdown .cm-ms-block:hover .edit-block-controls,
-.markdown .edit-block:focus-within .edit-block-controls {
+.markdown .edit-block:focus-within .edit-block-controls,
+.markdown .edit-image:hover .edit-block-controls,
+.markdown .edit-image:focus-within .edit-block-controls,
+.markdown .edit-image[data-resizing] .edit-block-controls {
+  opacity: 1;
+}
+.markdown .edit-image-controls {
+  font-size: 0.8rem;
+  line-height: 1.2;
+}
+.markdown .edit-image-width.edit-field {
+  height: 1.9rem;
+  border-color: var(--ms-border);
+  background: var(--ms-surface);
+  color: var(--ms-text);
+  font-size: 0.8rem;
+}
+.markdown .edit-image-unit {
+  padding-inline-end: 0.2rem;
+  color: var(--ms-text-soft);
+  font-size: 0.8rem;
+}
+/* The handle is a corner of the accent's colour, shown with the controls. */
+.markdown .edit-image-handle {
+  opacity: 0;
+  border-right: 3px solid var(--ms-accent);
+  border-bottom: 3px solid var(--ms-accent);
+  border-bottom-right-radius: 3px;
+  transition: opacity 0.12s;
+}
+.markdown .edit-image:hover .edit-image-handle,
+.markdown .edit-image[data-resizing] .edit-image-handle {
   opacity: 1;
 }
+/* Where nothing hovers, as on a phone, an image's size is always at hand. */
+@media (hover: none) {
+  .markdown .edit-image .edit-block-controls,
+  .markdown .edit-image .edit-image-handle {
+    opacity: 1;
+  }
+}
+.markdown .edit-image[data-resizing] .cm-ms-image,
+.markdown .edit-image[data-resizing] img {
+  outline: 1px dashed var(--ms-accent);
+}
 .markdown .edit-table table {
   width: 100%;
 }