@vscode/markdown-editor 0.0.2-19 → 0.0.2-20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-19",
+  "version": "0.0.2-20",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/view/editor.css

@@ -273,15 +273,28 @@ pre.md-unhandled-scroll.md-code-block {
 }
 
 /*
- * Glue (table cell pipes, the task `[x] ` source, source padding) keeps its
- * inline footprint when hidden so column widths and the checkbox gutter stay
- * identical between active and inactive states.
+ * Glue normally keeps its inline footprint when hidden so source padding and
+ * widget gutters stay identical between active and inactive states. Hidden
+ * table-cell glue is the exception below: leaving it in inline flow lets its
+ * invisible spaces wrap around long cell content.
  */
 .md-glue-hidden {
 	display: inline;
 	visibility: hidden;
 }
 
+/*
+ * Inactive table pipes stay in the DOM/source tree, but leave layout and
+ * hit-testing entirely. Keeping an invisible rect either in the content flow or
+ * over the cell padding can create phantom lines or steal clicks from visible
+ * text. Hidden source offsets therefore collapse to the neighboring semantic
+ * seam, matching other display-none markers. Visible pipes retain the per-theme
+ * active/source layout.
+ */
+.md-table td>.md-glue-tableCellGlue.md-glue-hidden {
+	display: none;
+}
+
 /*
  * Inter-block glue: the run of blank lines between two top-level blocks. It is
  * mounted as the last inline child of the block that precedes it, so it sits at
@@ -318,15 +331,6 @@ pre.md-unhandled-scroll.md-code-block {
 	visibility: hidden;
 }
 
-/*
- * Table cell-glue pipes (`| `) keep their inline footprint when hidden so the
- * column widths stay identical active and inactive.
- */
-.md-marker-tableCellGlue.md-marker-hidden {
-	display: inline;
-	visibility: hidden;
-}
-
 /*
  * The code-block fences (```lang / ```) each sit on their own source line. When
  * hidden they keep their vertical footprint (visibility hidden, not display
@@ -361,6 +365,48 @@ pre.md-unhandled-scroll.md-code-block {
 	height: 16px;
 }
 
+/*
+ * A wide table scrolls horizontally inside its wrapper (the block box) instead
+ * of overflowing the page and scrolling the editor's fixed left gutter away.
+ * The wrapper is the scroll viewport the selection/caret clipping measures (see
+ * `BlockViewNode.scrollElement` / `blockViewportClip`); the inner `<table>`
+ * keeps `width: auto` (theme-defined) so it sizes to its content and overflows.
+ *
+ * `width: fit-content` keeps the wrapper hugging the table's intrinsic width, so
+ * a narrow table — and the active-block glow redirected onto the wrapper below —
+ * stays as wide as the table (unchanged from before this wrapper existed).
+ * `max-width: 100%` caps it at the content column, past which the table
+ * overflows and scrolls locally. This is the standard responsive-table pattern
+ * (cf. GitHub's own `width: max-content; max-width: 100%`).
+ */
+.md-table-wrapper {
+	overflow-x: auto;
+	width: fit-content;
+	max-width: 100%;
+}
+
+/*
+ * 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
+ * `overflow-y: auto`) clips descendant paint to its padding box, so the glow on
+ * the inner active `<table>` would be cut off (the table has no horizontal
+ * margin to give the shadow room). Render the generic active chrome on the
+ * wrapper instead — a scroll box's own shadow is never clipped by its own
+ * overflow, exactly like a code block carries the glow on its own scroller —
+ * 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) {
+	background: var(--md-block-active-background, #f8f8f8);
+	border-radius: 4px;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
+}
+
+.md-table.md-block-active {
+	background: none;
+	box-shadow: none;
+}
+
 .md-selection-layer {
 	position: absolute;
 	top: 0;
@@ -707,10 +753,10 @@ pre.md-unhandled-scroll.md-code-block {
  * Edit / read-only lock toggle.
  *
  * The host is a zero-height sticky strip pinned to the top of the scroll
- * viewport, so the lock stays in the top-right corner as the document scrolls.
- * Being height-0 it never participates in the document's vertical flow. Colors
- * use local `--md-readonly-*` custom properties with literal fallbacks so this
- * base file stays theme-agnostic (themes may override them).
+ * viewport, so the control stays in the top-right corner as the document
+ * scrolls. Being height-0 it never participates in the document's vertical
+ * flow. 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;
@@ -725,23 +771,32 @@ pre.md-unhandled-scroll.md-code-block {
 	top: 4px;
 	right: 4px;
 	pointer-events: auto;
-	display: inline-flex;
+	display: inline-grid;
+	grid-template-columns: repeat(2, 24px);
 	align-items: center;
-	gap: 6px;
-	padding: 4px 8px;
+	justify-items: center;
+	gap: 2px;
+	box-sizing: border-box;
+	width: 58px;
+	height: 32px;
+	padding: 3px;
+	overflow: hidden;
+	direction: ltr;
+	appearance: none;
 	border-radius: 999px;
-	border: 1px solid var(--md-readonly-border, #d4d4d4);
-	background: var(--md-readonly-background, #ffffff);
-	color: var(--md-readonly-foreground, #444);
-	font: 600 12px / 1 system-ui, -apple-system, 'Segoe UI', sans-serif;
-	letter-spacing: 0.02em;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font-size: 16px;
+	line-height: 1;
 	cursor: pointer;
 	box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
-	transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
 }
 
 .md-readonly-toggle:hover {
-	border-color: var(--md-readonly-border-hover, #b8b8b8);
+	border-color: var(--md-readonly-border-hover, #8d8d8d);
+	background: var(--md-readonly-background-hover, #e9e9e9);
 	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
 }
 
@@ -750,36 +805,80 @@ pre.md-unhandled-scroll.md-code-block {
 	outline-offset: 1px;
 }
 
-.md-readonly-toggle .md-readonly-toggle-icon {
-	display: inline-flex;
-	align-items: center;
+.md-readonly-toggle .md-readonly-toggle-indicator {
+	position: absolute;
+	top: 50%;
+	left: 3px;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: var(--md-readonly-accent, #4c8bf5);
+	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+	transform: translate(26px, -50%);
+	transition: background-color 0.12s ease, transform 0.16s ease;
 }
 
-.md-readonly-toggle .md-readonly-toggle-label {
-	white-space: nowrap;
+.md-readonly-toggle .md-readonly-toggle-icon {
+	position: relative;
+	z-index: 1;
+	display: block;
+	width: 16px;
+	height: 16px;
+	color: var(--md-readonly-foreground, #444444);
+	opacity: 0.62;
+	pointer-events: none;
+	transition: color 0.12s ease, opacity 0.12s ease;
 }
 
-/* Show the open padlock while editing, the closed one while locked. */
-.md-readonly-toggle .md-readonly-toggle-icon-locked {
-	display: none;
+.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+	color: var(--md-readonly-accent-foreground, #ffffff);
+	opacity: 1;
 }
 
-.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-unlocked {
-	display: none;
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-indicator {
+	transform: translate(0, -50%);
 }
 
-.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
-	display: inline-flex;
+@media (prefers-reduced-motion: reduce) {
+	.md-readonly-toggle,
+	.md-readonly-toggle .md-readonly-toggle-indicator,
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		transition: none;
+	}
 }
 
-/* Locked (read-only) state: filled accent so the engaged lock reads clearly. */
-.md-readonly-toggle.md-readonly-toggle-locked {
-	border-color: var(--md-readonly-accent, #4c8bf5);
-	background: var(--md-readonly-accent, #4c8bf5);
-	color: var(--md-readonly-accent-foreground, #ffffff);
-}
+@media (forced-colors: active) {
+	.md-readonly-toggle {
+		forced-color-adjust: none;
+		border-color: ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle:hover {
+		border-color: Highlight;
+		background: ButtonFace;
+		box-shadow: none;
+	}
 
-.md-readonly-toggle.md-readonly-toggle-locked:hover {
-	border-color: var(--md-readonly-accent-hover, #3a73d4);
-	background: var(--md-readonly-accent-hover, #3a73d4);
+	.md-readonly-toggle:focus-visible {
+		outline-color: Highlight;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-indicator {
+		background: Highlight;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		color: ButtonText;
+		opacity: 1;
+	}
+
+	.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+		color: HighlightText;
+	}
 }

package/src/view/themes/default.css

@@ -121,9 +121,14 @@
     --md-list-indent-step: 24px;
 }
 
+.md-theme-default .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
+    margin: 0.5em 0;
+}
+
 .md-theme-default .md-table {
     border-collapse: collapse;
-    margin: 0.5em 0;
     width: auto;
 }
 

package/src/view/themes/github.css

@@ -197,10 +197,15 @@
     line-height: 1;
 }
 
-.github-markdown-theme .md-table {
-    border-collapse: collapse;
+.github-markdown-theme .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
     margin-top: 0;
     margin-bottom: 16px;
+}
+
+.github-markdown-theme .md-table {
+    border-collapse: collapse;
     width: auto;
 }
 

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

@@ -48,6 +48,8 @@
      * stays visible on dark color themes.
      */
     --md-cursor-background: var(--vscode-editorCursor-foreground, #000);
+    --md-readonly-accent: var(--vscode-button-background, rgb(45, 92, 180));
+    --md-readonly-accent-foreground: var(--vscode-button-foreground, #fff);
 }
 
 .md-theme-vscode-default .md-heading {
@@ -238,10 +240,15 @@
     line-height: 1;
 }
 
-.md-theme-vscode-default .md-table {
-    border-collapse: collapse;
+.md-theme-vscode-default .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
     margin-top: 0;
     margin-bottom: 16px;
+}
+
+.md-theme-vscode-default .md-table {
+    border-collapse: collapse;
     width: auto;
 }
 

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

@@ -58,6 +58,8 @@
      * stays visible on dark color themes.
      */
     --md-cursor-background: var(--vscode-editorCursor-foreground, #000);
+    --md-readonly-accent: var(--vscode-button-background, rgb(45, 92, 180));
+    --md-readonly-accent-foreground: var(--vscode-button-foreground, #fff);
 }
 
 .md-theme-vscode-github .md-heading {
@@ -240,10 +242,15 @@
     line-height: 1;
 }
 
-.md-theme-vscode-github .md-table {
-    border-collapse: collapse;
+.md-theme-vscode-github .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
     margin-top: 0;
     margin-bottom: 16px;
+}
+
+.md-theme-vscode-github .md-table {
+    border-collapse: collapse;
     width: auto;
 }