@vscode/markdown-editor 0.0.2-113 → 0.0.2-114

package/src/view/editor.css

@@ -25,6 +25,8 @@
  */
 
 .md-editor {
+	--md-marker-font-family: 'Cascadia Code', 'Fira Code', monospace;
+	--md-marker-font-scale: 0.85;
 	display: flow-root;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
@@ -697,13 +699,7 @@
 
 .md-marker {
 	color: #999;
-	font-family: 'Cascadia Code', 'Fira Code', monospace;
-	/*
-	 * 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-family: var(--md-marker-font-family);
 	font-size: calc(1em * var(--md-marker-font-scale));
 	display: inline;
 	overflow: hidden;
@@ -928,6 +924,11 @@ pre.md-unhandled-scroll.md-code-block {
 	display: none;
 }
 
+/* A fallback-font newline glyph must not increase the source line's height. */
+.md-glue-blockQuoteSourceGap > .md-ws-newline-glyph {
+	line-height: 0;
+}
+
 /*
  * Glue normally keeps its inline footprint when hidden so source padding and
  * widget gutters stay identical between active and inactive states. Hidden
@@ -989,10 +990,9 @@ pre.md-unhandled-scroll.md-code-block {
  * mounted as the last inline child of the block that precedes it, so it sits at
  * the end of that block's last line rather than on its own lines between the
  * blocks. When a neighbouring block is active it is revealed: each blank-line
- * newline shows a real `↵` glyph character (`.md-ws-newline-glyph`) while the
- * trailing line-terminator `\n` collapses (`white-space: normal`) so the run
- * adds no line break and no height — active and inactive therefore have the
- * same height. When hidden it collapses to nothing.
+ * newline shows a real `↵` glyph character (`.md-ws-newline-glyph`) so each
+ * source offset remains distinct. The glyphs stay on the preceding source line
+ * rather than introducing line breaks. When hidden the run collapses to nothing.
  */
 .md-glue-blockGap,
 .md-glue-blockQuoteSourceGap {
@@ -1001,14 +1001,64 @@ pre.md-unhandled-scroll.md-code-block {
 
 /*
  * The structural block break between two top-level blocks. Like `.md-glue-blockGap`
- * its trailing line-terminator `\n` collapses (`white-space: normal`) so the run
- * adds no height; its leading newline is painted as the blue break glyph
+ * its newlines stay inline so the run adds no height; its leading newline is painted as the blue break glyph
  * (`.md-ws-blockbreak-glyph`).
  */
 .md-glue-blockBreak {
 	white-space: normal;
 }
 
+.md-source-editing :is(.md-paragraph, .md-heading, .md-empty-block, td),
+.md-source-editing :is(.md-text, .md-marker) {
+	white-space: pre-wrap;
+}
+
+.md-editor.md-source-editing .md-block,
+.md-editor.md-source-editing .md-list > li {
+	margin-block: 0;
+}
+
+.md-source-editing .md-empty-block {
+	min-height: 1lh;
+}
+
+.md-source-editing .md-list > .md-empty-block {
+	list-style: none;
+	counter-increment: list-item 0;
+	margin-inline-start: calc(-1 * var(--md-list-indent-step, 2em));
+}
+
+.md-source-editing .md-glue-emptyLine {
+	white-space: pre-wrap;
+	visibility: visible;
+}
+
+.md-source-editing .md-glue-blockTerminator {
+	display: none;
+}
+
+.md-source-editing .md-glue-lineSuffix {
+	white-space: pre-wrap;
+	visibility: visible;
+}
+
+.md-source-editing .md-ws-newline::before {
+	content: none;
+}
+
+.md-source-editing :is(.md-ws-space, .md-ws-tab) {
+	white-space: inherit;
+}
+
+/* These source holders already have a <br> supplying their line ending. */
+.md-source-block :is(.md-hardbreak-src, .md-blockquote-linebreak-source) {
+	white-space: normal;
+}
+
+.md-source-block .md-blockquote-linebreak-source .md-ws-newline::before {
+	content: none;
+}
+
 /*
  * The task-list checkbox marker (`[x]`/`[ ]`) is special: instead of being
  * removed from layout when hidden, it keeps its inline width (visibility
@@ -1075,6 +1125,27 @@ pre.md-unhandled-scroll.md-code-block {
 	max-width: 100%;
 }
 
+.md-table:has(> .md-glue-blockGap) {
+	position: relative;
+}
+
+/* Table trivia must not generate an anonymous row when source is revealed. */
+.md-table > .md-glue-blockGap {
+	position: absolute;
+	left: 100%;
+	bottom: 0.3em;
+}
+
+.md-editor:not(.md-source-editing) .md-paragraph:has(> .md-glue-indent:first-child) {
+	position: relative;
+}
+
+.md-editor:not(.md-source-editing) .md-paragraph > .md-glue-indent:first-child {
+	position: absolute;
+	right: 100%;
+	top: 0;
+}
+
 /*
  * The active-block highlight is an *outset* glow (`box-shadow: 0 0 0 8px`).
  * Making the wrapper a scroll box (`overflow-x: auto`, which also forces
@@ -1162,6 +1233,7 @@ pre.md-unhandled-scroll.md-code-block {
 /* Source markers occupy the gutter so toggling them never shifts content. */
 .md-heading {
 	position: relative;
+	min-height: 1lh;
 }
 
 .md-heading>.md-marker:first-child {
@@ -1191,6 +1263,18 @@ pre.md-unhandled-scroll.md-code-block {
 	display: none;
 }
 
+/* Nested heading prefixes must not overlap their enclosing quote/list gutter. */
+.md-source-editing :is(.md-blockquote, .md-list) .md-heading > .md-marker:first-child {
+	position: static;
+	display: inline;
+	font-size: calc(1em * var(--md-marker-font-scale));
+	transform: none;
+}
+
+.md-source-editing :is(.md-blockquote, .md-list) .md-heading > .md-marker-hidden:first-child {
+	display: none;
+}
+
 /*
  * Block-quote prefixes (`> `, one per quoted source line) are real
  * `blockQuoteMarker` markers, siblings of the quote's child blocks. Each hangs
@@ -1210,7 +1294,8 @@ pre.md-unhandled-scroll.md-code-block {
 	position: relative;
 }
 
-.md-blockquote>.md-marker-blockQuoteMarker {
+.md-blockquote>.md-marker-blockQuoteMarker,
+.md-source-editing li > .md-glue-blockQuotePrefix {
 	position: absolute;
 	right: calc(100% - var(--md-blockquote-pad, 0px) - 1ch);
 	top: auto;
@@ -1234,6 +1319,10 @@ pre.md-unhandled-scroll.md-code-block {
 	transform-origin: left center;
 }
 
+.md-source-editing li > .md-glue-blockQuotePrefix {
+	right: calc(100% + var(--md-list-indent-step, 2em) - 1ch);
+}
+
 /* Inactive: gone entirely (the gutter is empty, the text stays put). */
 .md-blockquote>.md-marker-blockQuoteMarker.md-marker-hidden {
 	display: none;
@@ -1363,25 +1452,30 @@ pre.md-unhandled-scroll.md-code-block {
 	position: relative;
 }
 
+.md-list > li {
+	min-height: 1lh;
+	position: relative;
+}
+
 /*
  * The list marker is pulled into the gutter by markerKind (not `:first-child`),
  * because a nested item may carry its source indentation as a leading glue
  * before the marker. Gutter-positioning keeps the marker out of the inline
  * flow so toggling it never shifts the item's text horizontally.
  *
- * 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).
+ * The source box follows the first body line; the native reading marker is
+ * never replaced or resized. Source symbols share the body's font baseline,
+ * not a font-dependent optical centre of the painted asterisk.
  */
 .md-list-item-active>.md-marker-listItemMarker {
 	position: absolute;
 	right: 100%;
 	top: 0;
+}
+
+.md-list-item-active>.md-marker-listItemMarker,
+.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
+.md-source-editing .md-list-gutter > .md-marker-listItemMarker {
 	line-height: inherit;
 	height: calc(1lh / var(--md-marker-font-scale));
 	display: inline-flex;
@@ -1395,20 +1489,55 @@ pre.md-unhandled-scroll.md-code-block {
  * (`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 {
+.md-list-item-active>.md-marker-listItemMarker.md-marker-hidden,
+.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker.md-marker-hidden {
 	display: none;
 }
 
+/* An unfinished marker still uses the gutter of its completed "marker + space" prefix. */
+.md-list-item-incomplete > .md-marker-listItemMarker::after,
+.md-list-item-incomplete > .md-list-gutter > .md-marker-listItemMarker::after {
+	content: ' ';
+	white-space: pre;
+}
+
+.md-list-item-incomplete .md-marker-listItemMarker > .md-list-item-line-anchor {
+	font-size: calc(1em / var(--md-marker-font-scale));
+}
+
+.md-marker-listItemMarker:has(> .md-list-marker-symbol) {
+	font-family: inherit;
+	--md-marker-font-scale: 1;
+}
+
+.md-list-marker-symbol {
+	display: inline-block;
+	flex: 0 0 1em;
+	width: 1em;
+	text-align: center;
+}
+
+.md-marker-listItemMarker:has(> .md-list-marker-symbol) > :is(.md-ws-space, .md-ws-tab) {
+	font-family: var(--md-marker-font-family);
+	word-spacing: calc(0.5em - 1ch + var(--md-list-marker-reserve) / var(--md-list-marker-spaces));
+	tab-size: calc(0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces));
+}
+
+.md-list-item-incomplete > .md-marker-listItemMarker:has(> .md-list-marker-symbol)::after,
+.md-list-item-incomplete > .md-list-gutter > .md-marker-listItemMarker:has(> .md-list-marker-symbol)::after {
+	width: 0.5em;
+}
+
 /*
  * 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: 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.
+ * compensation above a no-op for it.
  */
 ol.md-list>.md-list-item-active>.md-marker-listItemMarker,
-ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
+ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
+.md-source-editing ol.md-list > li > .md-list-gutter > .md-marker-listItemMarker {
 	font-family: inherit;
 	--md-marker-font-scale: 1;
 }
@@ -1441,23 +1570,40 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	justify-content: space-between;
 }
 
+.md-source-editing .md-list-gutter {
+	top: 0;
+	height: 1lh;
+	align-items: center;
+}
+
+.md-source-editing .md-list-gutter > .md-glue-indent {
+	--md-source-indent-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em));
+	--md-source-space-width: calc(var(--md-source-indent-width) / var(--md-indent-length));
+	flex-basis: var(--md-source-indent-width);
+	display: block;
+	font-family: var(--md-marker-font-family);
+	/* Stretch the source character itself so DOM ranges and selections fill the cell too. */
+	word-spacing: calc(var(--md-source-space-width) - 1ch);
+	tab-size: var(--md-source-space-width);
+}
+
+.md-source-editing .md-list-gutter > .md-marker-listItemMarker.md-marker-hidden {
+	display: inline-flex;
+	visibility: hidden;
+}
+
 .md-list-gutter>.md-marker-listItemMarker {
 	flex: 0 0 auto;
+	white-space: pre;
 }
 
 /*
- * 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.
+ * A nested item's gutter stays one body line tall. The marker has the same
+ * compensated line box as a top-level marker, including when it hosts the
+ * incomplete item's zero-source caret anchor.
  *
- * 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.
+ * The gutter and source symbol carry body typography, so their baselines stay
+ * aligned without measuring fonts or changing native reading markers.
  */
 .md-list-item-active>.md-list-gutter {
 	height: 1lh;
@@ -1486,6 +1632,10 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	display: none;
 }
 
+.md-source-editing .md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: inline;
+}
+
 /*
  * A loose list item's later block (its second paragraph etc.) owns the source
  * continuation indent that precedes it as its `leadingTrivia`. Like a nested
@@ -1517,7 +1667,62 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	 * block (loose task items) stay in lockstep — keeping every block's text in
 	 * one vertical column under the marker.
 	 */
+}
+
+.md-list > li {
 	--md-task-marker-width: 1.75em;
+	--md-list-label-reserve: 0em;
+	--md-list-marker-reserve: var(--md-list-label-reserve);
+	--md-list-source-padding: 0em;
+}
+
+.md-list > .md-list-item-active {
+	--md-list-source-padding: calc((var(--md-list-marker-spaces) - 1) * 0.5em);
+}
+
+.md-list > .md-task-list-item {
+	--md-list-marker-reserve: 0em;
+}
+
+.md-source-editing .md-list-with-task-items > li:not(.md-empty-block) {
+	--md-list-label-reserve: 0.5em;
+}
+
+.md-source-editing .md-list > li > .md-paragraph {
+	padding-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-source-editing .md-list > li > .md-list-item-line-anchor {
+	margin-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-source-editing .md-list > li > .md-marker-listItemMarker {
+	right: calc(100% - (var(--md-list-label-reserve) + var(--md-list-source-padding)) / var(--md-marker-font-scale));
+}
+
+.md-source-editing .md-list-gutter {
+	right: calc(100% - var(--md-list-label-reserve) - var(--md-list-source-padding));
+}
+
+.md-source-editing .md-marker-listItemMarker {
+	word-spacing: calc(var(--md-list-marker-reserve) / var(--md-marker-font-scale) / var(--md-list-marker-spaces));
+}
+
+/* Keep the mandatory separator's native width; each extra source space adds a body-sized half-em cell. */
+.md-source-editing .md-marker-listItemMarker > :is(.md-ws-space, .md-ws-tab) ~ :is(.md-ws-space, .md-ws-tab) {
+	font-family: var(--md-marker-font-family);
+	word-spacing: calc((0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces)) / var(--md-marker-font-scale) - 1ch);
+	tab-size: calc((0.5em + var(--md-list-marker-reserve) / var(--md-list-marker-spaces)) / var(--md-marker-font-scale));
+}
+
+.md-source-editing .md-task-separator {
+	position: absolute;
+	left: calc(var(--md-list-source-padding) - 1em + 1.5ch * var(--md-marker-font-scale));
+	top: 0;
+	font-family: var(--md-marker-font-family);
+	white-space: pre;
+	word-spacing: calc((1.5em - 1.5ch * var(--md-marker-font-scale)) / var(--md-separator-length) - 1ch);
+	tab-size: calc((1.5em - 1.5ch * var(--md-marker-font-scale)) / var(--md-separator-length));
 }
 
 /*
@@ -1531,7 +1736,7 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	padding-left: var(--md-task-marker-width);
 }
 
-.md-task-list-item>.md-paragraph>.md-glue:first-child {
+.md-task-list-item>.md-paragraph>.md-glue-taskListCheck {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -1547,6 +1752,39 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	padding-left: var(--md-task-marker-width);
 }
 
+.md-source-editing .md-task-list-item > .md-list-gutter {
+	right: calc(100% - var(--md-list-source-padding));
+}
+
+.md-source-editing .md-task-list-item > .md-list-gutter::after {
+	content: '';
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	flex: 0 0 calc(1em / var(--md-marker-font-scale) + 1.5ch);
+}
+
+.md-source-editing .md-task-list-item > .md-paragraph > .md-glue-taskListCheck {
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	left: calc((var(--md-list-source-padding) - 1em) / var(--md-marker-font-scale) - 1.5ch);
+	width: 3ch;
+}
+
+.md-source-editing .md-task-list-item > .md-block + .md-block:not(.md-list) {
+	padding-left: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
+.md-source-editing .md-task-list-item > .md-list {
+	padding-left: var(--md-list-indent-step, 2em);
+}
+
+.md-source-editing .md-checkbox {
+	font-family: var(--md-marker-font-family);
+	font-size: calc(1em * var(--md-marker-font-scale));
+	left: calc((var(--md-list-source-padding) - 1em) / var(--md-marker-font-scale) - 8px);
+	top: calc((1lh / var(--md-marker-font-scale) - 16px) / 2);
+}
+
 .md-checkbox {
 	/* The rendered task-list widget — editor chrome, not markdown typography. */
 	appearance: none;
@@ -1725,7 +1963,7 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 	right: var(--md-readonly-toggle-inset);
 	pointer-events: auto;
 	display: inline-grid;
-	grid-template-columns: repeat(2, 24px);
+	grid-template-columns: repeat(3, 24px);
 	align-items: center;
 	justify-items: center;
 	gap: 2px;
@@ -1891,7 +2129,8 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
 		opacity: 1;
 	}
 
-	.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle:not(.md-readonly-toggle-locked):not(.md-readonly-toggle-source) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle.md-readonly-toggle-source .md-readonly-toggle-icon-source,
 	.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
 		color: HighlightText;
 	}