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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-20",
+  "version": "0.0.2-21",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -14,6 +14,9 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "src/view/editor.css",
@@ -34,6 +37,10 @@
       "types": "./dist/observables.d.ts",
       "import": "./dist/observables.js"
     },
+    "./web-editors": {
+      "types": "./dist/web-editors.d.ts",
+      "import": "./dist/web-editors.js"
+    },
     "./editor.css": "./src/view/editor.css",
     "./themes/default.css": "./src/view/themes/default.css",
     "./themes/github.css": "./src/view/themes/github.css",
@@ -44,8 +51,9 @@
     "./vscodeCommentWidgetV2.css": "./src/contrib/commentsVscode/vscodeCommentWidgetV2.css"
   },
   "scripts": {
-    "build": "vite build",
-    "build:explorer": "vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
+    "build": "pnpm run build:dependencies && vite build",
+    "build:dependencies": "pnpm --filter @vscode/hubrpc build",
+    "build:explorer": "pnpm run build:dependencies && pnpm --filter @vscode/sample-web-editor build && vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
     "dev": "vite build --watch",
     "pack": "pnpm run build && pnpm pack",
     "test": "vitest --run",
@@ -67,12 +75,14 @@
     "@playwright/test": "^1.58.2",
     "@types/katex": "^0.16.8",
     "@types/markdown-it": "^14.1.2",
-    "@vscode/component-explorer": "0.2.1-59",
-    "@vscode/component-explorer-cli": "0.2.1-60",
-    "@vscode/component-explorer-vite-plugin": "0.2.1-59",
+    "@vscode/component-explorer": "workspace:*",
+    "@vscode/component-explorer-cli": "workspace:*",
+    "@vscode/component-explorer-vite-plugin": "workspace:*",
+    "@vscode/hubrpc": "workspace:*",
     "@vscode/observables": "workspace:*",
+    "@vscode/sample-web-editor": "workspace:*",
+    "@vscode/web-editors": "workspace:*",
     "github-markdown-css": "^5.9.0",
-    "golden-layout": "^2.6.0",
     "markdown-it": "^14.2.0",
     "mermaid": "^11.15.0",
     "monaco-editor": "^0.52.2",

package/src/view/editor.css

@@ -26,6 +26,7 @@
 .md-editor {
 	display: flow-root;
 	outline: none;
+	container: md-editor / inline-size;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	caret-color: transparent;
 }
@@ -48,9 +49,27 @@
  * `.md-editor`.
  */
 .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-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
 	margin-inline: auto;
-	padding: 0 48px;
+	padding-block: 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-with-readonly-toggle>.md-document :is(.md-heading, .md-paragraph) {
+	overflow-wrap: anywhere;
 }
 
 .md-block-active {
@@ -295,6 +314,39 @@ pre.md-unhandled-scroll.md-code-block {
 	display: none;
 }
 
+/*
+ * Active table: take each cell's TRAILING structural glue (the source space
+ * after the cell text, and — via the per-theme `right: 0` rule — the last
+ * column's closing `|`) out of the cell's inline flow. Left in flow, that glue
+ * wraps below long cell content (the same wrapping the hidden-glue note above
+ * describes), which makes the cell two lines tall: the browser's default
+ * `vertical-align: middle` then re-centres the other cells' single-line content
+ * in Y, their runs merge into one oversized VisualLine, and the caret — sized
+ * directly from that line box — grows far past the line height while the
+ * visible pipes drift apart row-to-row. Positioning the trailing glue
+ * absolutely removes it from wrapping flow while keeping its real client rects
+ * at the static (content-line) position, so caret placement, hit-testing,
+ * source mapping and injectivity are unchanged. `top`/`bottom: auto` keep it on
+ * that content line rather than the cell's top edge. This mirrors the inactive
+ * `display: none` above; the leading `| ` glue deliberately stays in flow (a
+ * relative glyph shift, per theme) so first-text X is preserved.
+ *
+ * `:not(:first-child)` restricts this to a genuine trailing glue: a non-empty
+ * cell emits leading + trailing glue, but an EMPTY cell parses to a single glue
+ * node that is simultaneously first and last child. That lone node is the
+ * cell's leading pipe, so it must stay in flow like every other leading pipe;
+ * excluding it keeps empty cells identical to their previous (base) behaviour.
+ */
+.md-table.md-block-active td {
+	position: relative;
+}
+
+.md-table.md-block-active td>.md-glue-tableCellGlue:last-child:not(:first-child) {
+	position: absolute;
+	top: auto;
+	bottom: auto;
+}
+
 /*
  * 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
@@ -621,6 +673,16 @@ pre.md-unhandled-scroll.md-code-block {
 	white-space: pre;
 }
 
+/*
+ * A continuation-line indent inside a paragraph is source-only padding. When
+ * inactive, the preceding soft-break newline already collapses to the single
+ * rendered space Markdown requires; retaining the hidden indent would add the
+ * tab/space run's width on top of it.
+ */
+.md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: none;
+}
+
 /*
  * 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
@@ -752,15 +814,17 @@ 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 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).
+ * 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
+ * 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));
 	height: 0;
 	z-index: 10;
 	pointer-events: none;
@@ -769,7 +833,7 @@ pre.md-unhandled-scroll.md-code-block {
 .md-readonly-toggle {
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	right: var(--md-readonly-toggle-inset);
 	pointer-events: auto;
 	display: inline-grid;
 	grid-template-columns: repeat(2, 24px);
@@ -777,8 +841,8 @@ pre.md-unhandled-scroll.md-code-block {
 	justify-items: center;
 	gap: 2px;
 	box-sizing: border-box;
-	width: 58px;
-	height: 32px;
+	width: var(--md-readonly-toggle-width);
+	height: var(--md-readonly-toggle-height);
 	padding: 3px;
 	overflow: hidden;
 	direction: ltr;
@@ -790,14 +854,71 @@ pre.md-unhandled-scroll.md-code-block {
 	font-size: 16px;
 	line-height: 1;
 	cursor: pointer;
-	box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
 	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.
+ */
+@container md-editor (max-width: 320px) {
+	.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;
+	z-index: 2;
+	top: -8px;
+	bottom: -8px;
+	left: -30px;
+	width: 24px;
+	background: linear-gradient(90deg,
+			transparent,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 24%,
+			var(--md-readonly-shine, #ffffff) 50%,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 76%,
+			transparent);
+	box-shadow: 0 0 8px 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	opacity: 0;
+	pointer-events: none;
+	transform: skewX(-20deg);
+}
+
+.md-readonly-toggle.md-readonly-toggle-shine::after {
+	animation: md-readonly-toggle-shine 2s linear;
+	will-change: transform, opacity;
+}
+
+@keyframes md-readonly-toggle-shine {
+	0% {
+		opacity: 0;
+		transform: translateX(0) skewX(-20deg);
+	}
+
+	12%,
+	88% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(122px) skewX(-20deg);
+	}
+}
+
 .md-readonly-toggle:hover {
 	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);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.1);
 }
 
 .md-readonly-toggle:focus-visible {
@@ -843,7 +964,9 @@ pre.md-unhandled-scroll.md-code-block {
 @media (prefers-reduced-motion: reduce) {
 	.md-readonly-toggle,
 	.md-readonly-toggle .md-readonly-toggle-indicator,
-	.md-readonly-toggle .md-readonly-toggle-icon {
+	.md-readonly-toggle .md-readonly-toggle-icon,
+	.md-readonly-toggle.md-readonly-toggle-shine::after {
+		animation: none;
 		transition: none;
 	}
 }
@@ -857,6 +980,10 @@ pre.md-unhandled-scroll.md-code-block {
 		box-shadow: none;
 	}
 
+	.md-readonly-toggle::after {
+		display: none;
+	}
+
 	.md-readonly-toggle:hover {
 		border-color: Highlight;
 		background: ButtonFace;

package/src/view/themes/default.css

@@ -206,6 +206,9 @@
  * box) so the right outline is a straight line. Absolute removes it from flow,
  * but it is the trailing node so no text shifts; the leading pipe still fixes
  * first-text X and the row stays one line tall, keeping the compare invariants.
+ * `top: auto` keeps the pipe on the content line (the shared editor.css rule
+ * also takes trailing glue out of flow); the previous `top: 0` floated it to
+ * the cell's top edge, misaligning it with the leading pipes on wrapping rows.
  */
 .md-theme-default .md-table.md-block-active td:last-child {
     position: relative;
@@ -214,7 +217,7 @@
 .md-theme-default .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -225,7 +228,7 @@
 .md-theme-default .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 .md-theme-default code {

package/src/view/themes/github.css

@@ -285,6 +285,9 @@
  * box) so the right outline is a straight line. Absolute removes it from flow,
  * but it is the trailing node so no text shifts; the leading pipe still fixes
  * first-text X and the row stays one line tall, keeping the compare invariants.
+ * `top: auto` keeps the pipe on the content line (the shared editor.css rule
+ * also takes trailing glue out of flow); the previous `top: 0` floated it to
+ * the cell's top edge, misaligning it with the leading pipes on wrapping rows.
  */
 .github-markdown-theme .md-table.md-block-active td:last-child {
     position: relative;
@@ -293,7 +296,7 @@
 .github-markdown-theme .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -304,5 +307,5 @@
 .github-markdown-theme .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }

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

@@ -320,7 +320,10 @@
 /*
  * The last cell's closing `|` floats right after the (left-aligned) cell text.
  * Pin it to the column's right gridline (the cell's border edge, 10px past the
- * content box) so the right outline is a straight line.
+ * content box) so the right outline is a straight line. `top: auto` keeps the
+ * pipe on the content line (the shared editor.css rule takes it out of flow);
+ * the previous `top: 0` floated it to the cell's top edge, so on tall/wrapping
+ * rows it no longer lined up with the in-flow leading pipes.
  */
 .md-theme-vscode-default .md-table.md-block-active td:last-child {
     position: relative;
@@ -329,7 +332,7 @@
 .md-theme-vscode-default .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -340,5 +343,5 @@
 .md-theme-vscode-default .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }

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

@@ -322,7 +322,10 @@
 /*
  * The last cell's closing `|` floats right after the (left-aligned) cell text.
  * Pin it to the column's right gridline (the cell's border edge, 13px past the
- * content box) so the right outline is a straight line.
+ * content box) so the right outline is a straight line. `top: auto` keeps the
+ * pipe on the content line (the shared editor.css rule takes it out of flow);
+ * the previous `top: 0` floated it to the cell's top edge, so on tall/wrapping
+ * rows it no longer lined up with the in-flow leading pipes.
  */
 .md-theme-vscode-github .md-table.md-block-active td:last-child {
     position: relative;
@@ -331,7 +334,7 @@
 .md-theme-vscode-github .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -342,5 +345,5 @@
 .md-theme-vscode-github .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }