@memorysmithapp/markdown-renderer 0.7.0 → 0.8.0

package/structure.css

@@ -459,8 +459,10 @@
   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). */
+/* An image in edit mode carries its controls under it, never over the picture,
+   whose top left is often its subject, and a handle at its bottom right corner
+   that drags it (#98, #106). The controls hang from the image's bottom edge with
+   no gap, so the pointer travels from the picture to them without leaving it. */
 .markdown .edit-image {
   position: relative;
   display: inline-block;
@@ -468,19 +470,55 @@
   vertical-align: middle;
 }
 .markdown .edit-image-controls {
+  position: absolute;
+  top: var(--edit-image-bottom, 100%);
+  left: 0;
+  z-index: 2;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  width: max-content;
+  min-width: 100%;
+  max-width: min(26rem, calc(100vw - 2rem));
+  box-sizing: border-box;
+}
+.markdown .edit-image-size {
+  display: inline-flex;
   align-items: center;
+  gap: 0.15rem;
   white-space: nowrap;
 }
-.markdown .edit-image-width {
-  width: 5em;
+.markdown .edit-image-width,
+.markdown .edit-image-height {
+  width: 4.2em;
 }
+.markdown .edit-image-description {
+  flex: 1 1 10rem;
+  min-width: 0;
+}
+.markdown .edit-image-refused {
+  flex-basis: 100%;
+}
+/* The handle is a touch target of at least 24px at the picture's corner, whose arrows say it resizes. */
 .markdown .edit-image-handle {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  top: calc(var(--edit-image-bottom, 100%) - 24px);
+  left: calc(var(--edit-image-right, 100%) - 24px);
   z-index: 1;
-  width: 0.9rem;
-  height: 0.9rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
   cursor: nwse-resize;
   touch-action: none;
 }
+/* Where nothing hovers, the controls stand in the flow under the image, so
+   they never lie over the text that follows it. */
+@media (hover: none) {
+  .markdown .edit-image-controls {
+    position: static;
+    min-width: 0;
+  }
+}

package/theme-default.css

@@ -1950,38 +1950,79 @@
   opacity: 1;
 }
 .markdown .edit-image-controls {
+  opacity: 0;
+  padding: 0.2rem;
+  border: 1px solid var(--ms-border);
+  border-radius: var(--ms-radius);
+  background: var(--ms-surface);
   font-size: 0.8rem;
   line-height: 1.2;
+  transition: opacity 0.12s;
+  pointer-events: none;
 }
-.markdown .edit-image-width.edit-field {
+.markdown .edit-image:hover .edit-image-controls,
+.markdown .edit-image:focus-within .edit-image-controls,
+.markdown .edit-image[data-ms-busy] .edit-image-controls,
+.markdown .edit-image[data-resizing] .edit-image-controls {
+  opacity: 1;
+  pointer-events: auto;
+}
+.markdown .edit-image-controls .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-controls .edit-image-width,
+.markdown .edit-image-controls .edit-image-height {
+  flex: none;
+  width: 4.2em;
+}
+.markdown .edit-image-controls .edit-field[aria-invalid='true'] {
+  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 {
-  padding-inline-end: 0.2rem;
+  height: 1.9rem;
+  border: 1px solid var(--ms-border);
+  border-radius: var(--ms-radius);
+  background: var(--ms-surface);
+  color: var(--ms-text-soft);
+  font-size: 0.8rem;
+}
+.markdown .edit-image-unit-label {
+  padding-inline: 0.1rem 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-refused {
+  color: rgb(var(--ms-callout-stop));
+  font-size: 0.75rem;
+}
+/* The handle is the accent's diagonal arrows on the surface, 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;
+  border-top-left-radius: var(--ms-radius);
+  background: var(--ms-surface);
+  color: var(--ms-accent);
+  font-size: 16px;
   transition: opacity 0.12s;
 }
 .markdown .edit-image:hover .edit-image-handle,
+.markdown .edit-image[data-ms-busy] .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-controls,
   .markdown .edit-image .edit-image-handle {
     opacity: 1;
+    pointer-events: auto;
   }
 }
 .markdown .edit-image[data-resizing] .cm-ms-image,