@memorysmithapp/markdown-renderer 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memorysmithapp/markdown-renderer",
-  "version": "0.6.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.6.0",
+    "@memorysmithapp/markdown-spec": "0.7.1",
     "@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%;
 }