@memorysmithapp/markdown-renderer 0.6.0 → 0.7.0

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;
 }

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.6.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.6.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

@@ -97,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;
@@ -116,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;
@@ -146,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. */
@@ -430,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);
 }
@@ -1936,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%;
 }