@vscode/markdown-editor 0.0.2-69 → 0.0.2-70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-69",
+  "version": "0.0.2-70",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -111,5 +111,5 @@
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
   },
-  "gitHead": "3b3369062b24a0ad0e8be745df06a406a424950f"
+  "gitHead": "1fc3f6d3213aba002772f2b36cde88fd23f89a42"
 }

package/src/view/editor.css

@@ -152,7 +152,13 @@
 .md-marker {
 	color: #999;
 	font-family: 'Cascadia Code', 'Fira Code', monospace;
-	font-size: 0.85em;
+	/*
+	 * Revealed source is painted a step smaller than body text. Published as a
+	 * custom property because a gutter marker has to undo it to size its box
+	 * against the body line box — see `.md-list-item-active>.md-marker-listItemMarker`.
+	 */
+	--md-marker-font-scale: 0.85;
+	font-size: calc(1em * var(--md-marker-font-scale));
 	display: inline;
 	overflow: hidden;
 	max-width: 100px;
@@ -691,29 +697,48 @@ pre.md-unhandled-scroll.md-code-block {
  * before the marker. Gutter-positioning keeps the marker out of the inline
  * flow so toggling it never shifts the item's text horizontally.
  *
- * `line-height: inherit` makes the marker share the item's line box (its own
- * `.md-marker` rule shrinks it to `line-height: 1`, which floats the glyph to
- * the top of the taller text line); matching the line box vertically centres
- * the `-` with the rendered text.
+ * Vertical centring makes the marker box exactly the item's first line box and
+ * centres the glyph in it. Getting that box right is the whole trick: an
+ * inherited UNITLESS line-height is re-resolved against the element's own
+ * font-size, so a marker shrunk by `--md-marker-font-scale` also gets a
+ * proportionally shorter line box which, pinned at `top: 0`, floats the glyph
+ * above the text. Dividing `1lh` by that same scale cancels the shrink exactly,
+ * without touching the painted size and without a `transform` (which would
+ * shrink the box the caret geometry is measured from).
  */
 .md-list-item-active>.md-marker-listItemMarker {
 	position: absolute;
 	right: 100%;
 	top: 0;
 	line-height: inherit;
+	height: calc(1lh / var(--md-marker-font-scale));
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
 	white-space: pre;
 }
 
+/*
+ * `display: inline-flex` above outranks the plain `.md-marker-hidden`
+ * (`display: none`), so — exactly as for headings — re-hide the marker here for
+ * the states that ask for it, otherwise the bullet could never be hidden.
+ */
+.md-list-item-active>.md-marker-listItemMarker.md-marker-hidden {
+	display: none;
+}
+
 /*
  * An inactive ordered item uses the browser's native `::marker`. Match its
  * typography when revealing the source marker so switching the active item
- * does not change the number's width or horizontal position. Keep unordered
- * source markers in the standard muted monospace source style.
+ * does not change the number's width or horizontal position: an ordered marker
+ * opts out of the muted size step entirely, which also makes the `1lh`
+ * compensation above a no-op for it. Keep unordered source markers in the
+ * standard muted monospace source style.
  */
 ol.md-list>.md-list-item-active>.md-marker-listItemMarker,
 ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	font-family: inherit;
-	font-size: inherit;
+	--md-marker-font-scale: 1;
 }
 
 /*
@@ -748,6 +773,25 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	flex: 0 0 auto;
 }
 
+/*
+ * A NESTED item's bullet is a flex child of the gutter, so the direct-child
+ * rule above cannot reach it and it would otherwise stretch to the gutter's
+ * full height with its glyph parked at the top. Centring is therefore done by
+ * the gutter itself: it is statically positioned (hence aligned to the item's
+ * first line), so making it one line box tall and centring its children puts
+ * the bullet and the indentation dots on that line.
+ *
+ * The gutter carries body typography, so its `1lh` needs no compensation — and
+ * the bullet inside keeps its own muted `font-size`, which is exactly what the
+ * shrink-to-fit gutter reserves. Shrinking the bullet visually instead would
+ * make the gutter reserve more width than the bullet paints and slide the whole
+ * indentation column left.
+ */
+.md-list-item-active>.md-list-gutter {
+	height: 1lh;
+	align-items: center;
+}
+
 
 /*
  * Re-attributed source indentation (the spaces after a line break that precede