@vscode/markdown-editor 0.0.2-117 → 0.0.2-118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-117",
+  "version": "0.0.2-118",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -96,7 +96,8 @@
     "micromark-extension-gfm-strikethrough": "^2.1.0",
     "micromark-extension-gfm-table": "^2.1.1",
     "micromark-extension-gfm-task-list-item": "^2.1.0",
-    "micromark-extension-math": "^3.1.0"
+    "micromark-extension-math": "^3.1.0",
+    "micromark-util-decode-string": "^2.0.1"
   },
   "devDependencies": {
     "@playwright/test": "1.56.1",
@@ -119,5 +120,5 @@
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
   },
-  "gitHead": "40666b73de7efda9a0b0b487a56342b4cbd33be9"
+  "gitHead": "3398cd4a37a0c24ace23ae3bf06d3924d4ea5068"
 }

package/src/view/editor.css

@@ -27,6 +27,9 @@
 .md-editor {
 	--md-marker-font-family: 'Cascadia Code', 'Fira Code', monospace;
 	--md-marker-font-scale: 0.85;
+	--md-readonly-toggle-width: 58px;
+	--md-readonly-toggle-height: 32px;
+	--md-readonly-toggle-inset: 8px;
 	display: flow-root;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
@@ -64,28 +67,29 @@
  * edge, independent of the first block's theme margins.
  */
 .md-editor-content {
-	--md-editor-content-inline-start-padding: 48px;
-	--md-readonly-toggle-width: 58px;
-	--md-readonly-toggle-height: 32px;
-	/* Leaves 16px of optical separation beyond the active block's 8px outset glow. */
-	--md-readonly-toggle-gap: 24px;
-	--md-readonly-toggle-inset: 4px;
+	--md-editor-min-inline-padding: 24px;
+	--md-editor-content-inline-start-padding: clamp(var(--md-editor-min-inline-padding), 8%, 80px);
 	--md-editor-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
+	display: flow-root;
 	margin-inline: auto;
 	padding-block: 24px 0;
 	padding-inline: var(--md-editor-content-inline-start-padding) var(--md-editor-content-inline-end-padding);
 }
 
-.md-editor-content-with-readonly-toggle {
-	--md-editor-content-inline-end-padding: calc(var(--md-readonly-toggle-width) + var(--md-readonly-toggle-gap) + var(--md-readonly-toggle-inset));
+.md-editor-content:has(> .md-document > .md-heading) {
+	--md-editor-min-inline-padding: 3.5em;
 }
 
-.md-editor-content-with-readonly-toggle>.md-document :is(.md-heading, .md-paragraph) {
+.md-editor-content>.md-document :is(.md-heading, .md-paragraph) {
 	overflow-wrap: anywhere;
 }
 
-.md-block-active {
+.md-editor .md-document > .md-heading:first-child {
+	margin-block-start: 0;
+}
+
+:where(.md-editor:not(.md-no-active-block-highlight)) .md-block-active {
 	background: var(--md-block-active-background, #f8f8f8);
 	border-radius: 4px;
 	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
@@ -148,7 +152,7 @@
 .md-rich-link {
 	display: inline-flex;
 	align-items: baseline;
-	max-width: min(100%, 52rem);
+	max-width: min(100%, var(--md-rich-link-line-width, 52rem));
 	box-sizing: border-box;
 	gap: 0.24em;
 	padding: 1px 0.3em;
@@ -199,11 +203,19 @@
 }
 
 .md-rich-link-title {
-	max-width: 200px;
+	max-width: var(--md-rich-link-title-width, 200px);
+}
+
+.md-rich-link-label {
+	max-width: var(--md-rich-link-title-width, none);
 }
 
 .md-rich-link[data-md-rich-link-kind='session'] :is(.md-rich-link-label, .md-rich-link-title) {
-	max-width: 150px;
+	max-width: var(--md-rich-link-title-width, 150px);
+}
+
+.md-rich-link-line-end {
+	--md-rich-link-title-width: none;
 }
 
 .md-rich-link-label[hidden],
@@ -426,7 +438,7 @@
 ) :is(.md-rich-link-label, .md-rich-link-title) {
 	position: relative;
 	top: 0.25px;
-	max-width: 200px;
+	max-width: var(--md-rich-link-title-width, 200px);
 	color: inherit;
 	font-weight: 400;
 }
@@ -841,7 +853,7 @@ pre.md-unhandled-scroll.md-code-block {
 	left: 0;
 	right: 0;
 	text-align: center;
-	color: #b0b0b0;
+	color: var(--md-whitespace-foreground, #b0b0b0);
 	pointer-events: none;
 }
 
@@ -855,7 +867,7 @@ pre.md-unhandled-scroll.md-code-block {
 
 .md-ws-newline::before {
 	content: '↵';
-	color: #b0b0b0;
+	color: var(--md-whitespace-foreground, #b0b0b0);
 	pointer-events: none;
 }
 
@@ -1028,6 +1040,10 @@ pre.md-unhandled-scroll.md-code-block {
 	margin-inline-start: calc(-1 * var(--md-list-indent-step, 2em));
 }
 
+.md-source-editing .md-list > li > .md-empty-block {
+	padding-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding));
+}
+
 .md-source-editing .md-glue-emptyLine {
 	white-space: pre-wrap;
 	visibility: visible;
@@ -1157,7 +1173,7 @@ pre.md-unhandled-scroll.md-code-block {
  * and drop it from the table, which keeps `md-block-active` purely for the
  * per-theme source-pipe styling.
  */
-.md-table-wrapper:has(> .md-table.md-block-active) {
+:where(.md-editor:not(.md-no-active-block-highlight)) .md-table-wrapper:has(> .md-table.md-block-active) {
 	background: var(--md-block-active-background, #f8f8f8);
 	border-radius: 4px;
 	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
@@ -1517,7 +1533,8 @@ pre.md-unhandled-scroll.md-code-block {
 	text-align: center;
 }
 
-.md-marker-listItemMarker:has(> .md-list-marker-symbol) > :is(.md-ws-space, .md-ws-tab) {
+.md-marker-listItemMarker:has(> .md-list-marker-symbol) > :is(.md-ws-space, .md-ws-tab),
+.md-source-editing .md-list-continuation-separator {
 	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));
@@ -1576,7 +1593,8 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	align-items: center;
 }
 
-.md-source-editing .md-list-gutter > .md-glue-indent {
+.md-source-editing .md-list-gutter > .md-glue-indent,
+.md-source-editing .md-list-continuation-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);
@@ -1587,6 +1605,27 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	tab-size: var(--md-source-space-width);
 }
 
+.md-source-editing .md-task-list-item > .md-list-gutter > .md-glue-indent {
+	--md-source-indent-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em) / 2);
+}
+
+.md-source-editing .md-list-continuation-prefix {
+	font-family: var(--md-marker-font-family);
+	white-space: pre;
+}
+
+.md-source-editing .md-list-continuation-prefix > span {
+	display: inline;
+}
+
+.md-source-editing .md-list-continuation-symbol {
+	word-spacing: calc(1em - 1ch);
+}
+
+.md-source-editing .md-list-continuation-outside {
+	margin-inline-start: calc((var(--md-list-level) - var(--md-list-source-indent)) * var(--md-list-indent-step, 2em) - 1.5em - var(--md-list-marker-reserve));
+}
+
 .md-source-editing .md-list-gutter > .md-marker-listItemMarker.md-marker-hidden {
 	display: inline-flex;
 	visibility: hidden;
@@ -1661,16 +1700,9 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 .md-task-list-item {
 	list-style: none;
 	position: relative;
-	/*
-	 * Width of the checkbox / `[x]` source column. Single-sourced so the marker
-	 * reservation on the first paragraph and the left indent of any following
-	 * 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;
@@ -1684,23 +1716,23 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	--md-list-marker-reserve: 0em;
 }
 
-.md-source-editing .md-list-with-task-items > li:not(.md-empty-block) {
+.md-list-with-task-items > li:not(.md-empty-block) {
 	--md-list-label-reserve: 0.5em;
 }
 
-.md-source-editing .md-list > li > .md-paragraph {
+.md-editor .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 {
+.md-editor .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 {
+.md-editor .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 {
+.md-editor .md-list-gutter {
 	right: calc(100% - var(--md-list-label-reserve) - var(--md-list-source-padding));
 }
 
@@ -1715,7 +1747,7 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	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 {
+.md-task-separator {
 	position: absolute;
 	left: calc(var(--md-list-source-padding) - 1em + 1.5ch * var(--md-marker-font-scale));
 	top: 0;
@@ -1725,60 +1757,76 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	tab-size: calc((1.5em - 1.5ch * var(--md-marker-font-scale)) / var(--md-separator-length));
 }
 
-/*
- * Reserve the marker column on the paragraph rather than only on its first
- * inline child. This gives every wrapped line the same content edge. The
- * source marker glue is positioned over that reserved column, as is the
- * rendered checkbox, so activating the item does not shift its text (see the
- * compare fixture's `checkMarkedTextX` assertion).
- */
-.md-task-list-item>.md-paragraph {
-	padding-left: var(--md-task-marker-width);
-}
-
 .md-task-list-item>.md-paragraph>.md-glue-taskListCheck {
 	position: absolute;
 	top: 0;
-	left: 0;
-	width: var(--md-task-marker-width);
+	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;
 }
 
-/*
- * Following blocks in a loose task item (the second paragraph etc.) carry no
- * marker glue, so indent them by the marker column to line their text up under
- * the first paragraph's text rather than under the checkbox.
- */
-.md-task-list-item>.md-block+.md-block {
-	padding-left: var(--md-task-marker-width);
+.md-source-editing .md-task-list-item > .md-paragraph > .md-glue-taskListCheck {
+	position: static;
+	display: inline-block;
+	margin-inline-start: calc((-1em - var(--md-list-label-reserve)) / var(--md-marker-font-scale) - 1.5ch);
+}
+
+.md-source-editing .md-task-separator {
+	position: static;
+}
+
+.md-source-editing .md-list li > .md-paragraph > .md-list-continuation-prefix {
+	right: calc(100% - var(--md-list-label-reserve) - var(--md-list-source-padding));
+}
+
+.md-source-editing .md-list .md-code-block-container:has(> .md-code-list-source) {
+	display: block;
+	--md-list-prefix-width: calc(var(--md-list-source-indent) * var(--md-list-indent-step, 2em) + 1em + var(--md-list-marker-spaces) * 0.5em + var(--md-list-label-reserve));
+	margin-inline-start: calc(var(--md-list-label-reserve) + var(--md-list-source-padding) - var(--md-list-prefix-width));
+}
+
+.md-source-editing .md-list .md-code-list-source {
+	position: relative;
+	font-size: inherit;
+	border-inline-start-width: 0;
+	padding-inline-start: var(--md-list-prefix-width);
+}
+
+.md-source-editing .md-list li > .md-code-block-container > .md-code-list-source > .md-list-continuation-prefix:first-child {
+	right: calc(100% - var(--md-list-prefix-width));
+	top: auto;
+}
+
+.md-code-source-line {
+	position: relative;
 }
 
-.md-source-editing .md-task-list-item > .md-list-gutter {
+.md-code-source-line > .md-list-continuation-prefix {
+	position: absolute;
+	right: 100%;
+}
+
+.md-editor .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 {
+.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) {
+.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 {
+.md-task-list-item > .md-list {
 	padding-left: var(--md-list-indent-step, 2em);
 }
 
-.md-source-editing .md-checkbox {
+.md-task-list-item > .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);
@@ -1941,17 +1989,15 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 /*
  * Edit / read-only lock toggle.
  *
- * The asymmetric content padding reserves a real rail for the control:
- * button width + gap + edge inset. The zero-height sticky host spans the
- * document column and that rail, keeping the button beside (never over) the
- * rendered document as it scrolls. Colors use local `--md-readonly-*` custom
+ * The sticky overlay never changes text flow or the symmetric content margins.
+ * Narrow margins let the control overlap content rather than reserving a rail.
+ * Colors use local `--md-readonly-*` custom
  * properties with literal fallbacks so this base file stays theme-agnostic
  * (themes may override them).
  */
 .md-readonly-toggle-host {
 	position: sticky;
-	top: 0;
-	width: calc(100% + var(--md-editor-content-inline-end-padding));
+	top: var(--md-readonly-toggle-inset);
 	height: 0;
 	z-index: 10;
 	pointer-events: none;
@@ -1985,17 +2031,6 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker,
 	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
-/*
- * Below this width there is not enough document column for the side rail to be
- * useful. Give the host its own row and stop it from sticking, so neither long
- * unbreakable content nor later content scrolled through the viewport can ever
- * pass underneath the button.
- */
-.md-editor-narrow .md-readonly-toggle-host {
-	position: relative;
-	height: calc(var(--md-readonly-toggle-height) + var(--md-readonly-toggle-inset) + var(--md-readonly-toggle-inset));
-}
-
 .md-readonly-toggle::after {
 	content: '';
 	position: absolute;

package/src/view/themes/vscode-default.css

@@ -49,6 +49,7 @@
      * stays visible on dark color themes.
      */
     --md-cursor-background: var(--vscode-editorCursor-foreground, #000);
+    --md-whitespace-foreground: var(--vscode-editorWhitespace-foreground, #b0b0b0);
     --md-html-comment-foreground: var(--vscode-descriptionForeground, #616161);
     --md-html-comment-hover-foreground: var(--vscode-editor-foreground, #1f2328);
     --md-html-comment-font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,

package/src/view/themes/vscode-github.css

@@ -58,6 +58,7 @@
      * stays visible on dark color themes.
      */
     --md-cursor-background: var(--vscode-editorCursor-foreground, #000);
+    --md-whitespace-foreground: var(--vscode-editorWhitespace-foreground, #b0b0b0);
     --md-html-comment-foreground: var(--vscode-descriptionForeground, #59636e);
     --md-html-comment-hover-foreground: var(--vscode-editor-foreground, #1f2328);
     --md-html-comment-font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,