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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-112",
+  "version": "0.0.2-113",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -110,5 +110,5 @@
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
   },
-  "gitHead": "93c9d73b3c13ff168626bc22a0457aaf361a9563"
+  "gitHead": "4445737237dc9e9f9e6a5ef7f28ed84c049478cf"
 }

package/src/view/editor.css

@@ -1254,6 +1254,93 @@ pre.md-unhandled-scroll.md-code-block {
 	overflow-x: auto;
 }
 
+/* Keep actions out of the horizontal scroller and sticky within a long block. */
+.md-code-block-container {
+	display: flow-root;
+	position: relative;
+	min-width: 0;
+}
+
+.md-code-block-container > .md-code-block {
+	box-sizing: border-box;
+	min-height: 36px;
+}
+
+.md-code-block-actions {
+	position: sticky;
+	top: 0;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 6px;
+	box-sizing: border-box;
+	height: 32px;
+	margin-bottom: -32px;
+	padding: 4px 4px 0;
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+
+.md-code-block-container:hover>.md-code-block-actions,
+.md-code-block-actions:focus-within,
+.md-code-block-actions.md-code-block-copy-feedback {
+	opacity: 1;
+}
+
+.md-code-block-copy {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	flex: none;
+	width: 28px;
+	height: 28px;
+	padding: 4px;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	border-radius: 4px;
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	cursor: pointer;
+	pointer-events: auto;
+}
+
+.md-code-block-copy:hover {
+	background: var(--md-readonly-background-hover, #e9e9e9);
+}
+
+.md-code-block-copy:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-code-block-copy-status:not(:empty) {
+	padding: 2px 6px;
+	border-radius: 4px;
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font: 12px/1.4 sans-serif;
+}
+
+@media (hover: none) {
+	.md-code-block-actions {
+		opacity: 1;
+	}
+}
+
+@media (forced-colors: active) {
+	.md-code-block-copy,
+	.md-code-block-copy-status:not(:empty) {
+		background: ButtonFace;
+		color: ButtonText;
+		border-color: ButtonText;
+	}
+
+	.md-code-block-copy:focus-visible {
+		outline-color: Highlight;
+	}
+}
+
 .md-math-block {
 	overflow-x: auto;
 }
@@ -1262,7 +1349,8 @@ pre.md-unhandled-scroll.md-code-block {
 	margin: 0;
 }
 
-.md-list li>.md-block {
+.md-list li>.md-block,
+.md-list li>.md-code-block-container>.md-code-block {
 	margin: 0;
 }
 
@@ -1407,12 +1495,14 @@ ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
  * active (the footprint is identical in both states, so the text never shifts).
  */
 .md-list li>.md-block,
-.md-task-list-item>.md-block {
+.md-task-list-item>.md-block,
+.md-list li>.md-code-block-container>.md-code-block {
 	position: relative;
 }
 
 .md-list li>.md-block>.md-glue-indent:first-child,
-.md-task-list-item>.md-block>.md-glue-indent:first-child {
+.md-task-list-item>.md-block>.md-glue-indent:first-child,
+.md-list li>.md-code-block-container>.md-code-block>.md-glue-indent:first-child {
 	position: absolute;
 	right: 100%;
 	top: 0;

package/src/view/themes/default.css

@@ -27,6 +27,10 @@
     margin: 0.5em 0;
 }
 
+.md-theme-default .md-code-block-container {
+    margin: 0.5em 0;
+}
+
 .md-theme-default .md-code-block {
     background: #f4f4f4;
     border-radius: 4px;
@@ -34,6 +38,10 @@
     margin: 0.5em 0;
 }
 
+.md-theme-default .md-code-block-container > .md-code-block {
+    margin: 0;
+}
+
 .md-theme-default .md-code-block code {
     font-family: 'Cascadia Code', 'Fira Code', monospace;
     font-size: 14px;

package/src/view/themes/github.css

@@ -112,6 +112,11 @@
 }
 
 /* Fenced code block. */
+.github-markdown-theme .md-code-block-container {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
 .github-markdown-theme .md-code-block {
     margin-top: 0;
     margin-bottom: 16px;
@@ -122,6 +127,10 @@
     border-radius: 6px;
 }
 
+.github-markdown-theme .md-code-block-container > .md-code-block {
+    margin: 0;
+}
+
 .github-markdown-theme .md-code-block code {
     font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
         'Liberation Mono', monospace;

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

@@ -209,6 +209,11 @@
 }
 
 /* Fenced code block: framed by a 1px border, preview-style. */
+.md-theme-vscode-default .md-code-block-container {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
 .md-theme-vscode-default .md-code-block {
     margin-top: 0;
     margin-bottom: 16px;
@@ -219,6 +224,10 @@
     border-radius: 3px;
 }
 
+.md-theme-vscode-default .md-code-block-container > .md-code-block {
+    margin: 0;
+}
+
 .md-theme-vscode-default .md-code-block code {
     font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
             'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);

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

@@ -205,6 +205,11 @@
 }
 
 /* Fenced code block. */
+.md-theme-vscode-github .md-code-block-container {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
 .md-theme-vscode-github .md-code-block {
     margin-top: 0;
     margin-bottom: 16px;
@@ -215,6 +220,10 @@
     border-radius: 6px;
 }
 
+.md-theme-vscode-github .md-code-block-container > .md-code-block {
+    margin: 0;
+}
+
 .md-theme-vscode-github .md-code-block code {
     font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
             'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);