@vscode/markdown-editor 0.0.2-30 → 0.0.2-32

package/package.json

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

package/src/view/editor.css

@@ -45,7 +45,8 @@
  * overlays, which position themselves relative to this box, so it is the
  * positioning context. In limited-width mode the editor sets an inline
  * `max-width` here and the auto inline margins center it within the full-width
- * `.md-editor`.
+ * `.md-editor`. The block-start padding keeps every document clear of the top
+ * edge, independent of the first block's theme margins.
  */
 .md-editor-content {
 	--md-editor-content-inline-start-padding: 48px;
@@ -57,7 +58,7 @@
 	--md-editor-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
 	margin-inline: auto;
-	padding-block: 0;
+	padding-block: 24px 0;
 	padding-inline: var(--md-editor-content-inline-start-padding) var(--md-editor-content-inline-end-padding);
 }
 
@@ -815,6 +816,52 @@ pre.md-unhandled-scroll.md-code-block {
 	animation: md-readonly-editing-attempt 300ms ease-out;
 }
 
+.md-readonly-edit-at {
+	position: absolute;
+	z-index: 20;
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	box-sizing: border-box;
+	min-height: 26px;
+	padding: 4px 9px 4px 7px;
+	white-space: nowrap;
+	appearance: none;
+	border: 1px solid var(--md-readonly-accent, #4c8bf5);
+	border-radius: 999px;
+	background: var(--md-readonly-accent, #4c8bf5);
+	color: var(--md-readonly-accent-foreground, #ffffff);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
+	font: 600 12px/1 system-ui, sans-serif;
+	cursor: pointer;
+	animation: md-readonly-edit-at-appear 120ms ease-out;
+}
+
+.md-readonly-edit-at[hidden] {
+	display: none;
+}
+
+.md-readonly-edit-at:hover {
+	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+	filter: brightness(1.08);
+}
+
+.md-readonly-edit-at:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 2px;
+}
+
+.md-readonly-edit-at .codicon {
+	font-size: 14px;
+}
+
+@keyframes md-readonly-edit-at-appear {
+	from {
+		opacity: 0;
+		transform: translateY(-2px) scale(0.96);
+	}
+}
+
 @keyframes md-readonly-editing-attempt {
 	50% {
 		box-shadow: inset 0 0 0 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
@@ -982,6 +1029,7 @@ pre.md-unhandled-scroll.md-code-block {
 @media (prefers-reduced-motion: reduce) {
 
 	.md-editor.md-readonly-editing-attempt,
+	.md-readonly-edit-at,
 	.md-readonly-toggle,
 	.md-readonly-toggle .md-readonly-toggle-indicator,
 	.md-readonly-toggle .md-readonly-toggle-icon,
@@ -992,6 +1040,19 @@ pre.md-unhandled-scroll.md-code-block {
 }
 
 @media (forced-colors: active) {
+	.md-readonly-edit-at {
+		forced-color-adjust: none;
+		border-color: Highlight;
+		background: Highlight;
+		color: HighlightText;
+		box-shadow: none;
+		filter: none;
+	}
+
+	.md-readonly-edit-at:focus-visible {
+		outline-color: Highlight;
+	}
+
 	.md-readonly-toggle {
 		forced-color-adjust: none;
 		border-color: ButtonText;

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

@@ -53,11 +53,14 @@
     --md-readonly-accent-foreground: var(--vscode-button-foreground, #fff);
     --md-separator-color: color-mix(in srgb,
             var(--vscode-textSeparator-foreground, #d1d9e0) 60%, transparent);
+    --md-inline-code-background: color-mix(in srgb,
+            var(--vscode-textPreformat-background, #818b981f) 60%, transparent);
 }
 
 .vscode-high-contrast .md-editor.md-theme-vscode-default,
 .vscode-high-contrast-light .md-editor.md-theme-vscode-default {
     --md-separator-color: var(--vscode-textSeparator-foreground, currentColor);
+    --md-inline-code-background: var(--vscode-textPreformat-background, #818b981f);
 }
 
 .md-theme-vscode-default .md-heading {
@@ -150,8 +153,9 @@
 }
 
 /*
- * Inline code. Preview keeps inline code at the body font size (1em) on the VS
- * Code preformat surface, with only a small inset — no GitHub-style badge.
+ * Inline code. Preview keeps inline code at the body font size (1em) on a
+ * softened VS Code preformat surface, with only a small inset — no GitHub-style
+ * badge.
  */
 .md-theme-vscode-default :not(pre)>code {
     font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
@@ -161,7 +165,7 @@
     padding: 1px 3px;
     margin: 0;
     color: var(--vscode-textPreformat-foreground, inherit);
-    background-color: var(--vscode-textPreformat-background, #818b981f);
+    background-color: var(--md-inline-code-background);
     border-radius: 4px;
     white-space: break-spaces;
 }

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

@@ -60,6 +60,13 @@
     --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-inline-code-background: color-mix(in srgb,
+            var(--vscode-textPreformat-background, #818b981f) 60%, transparent);
+}
+
+.vscode-high-contrast .md-editor.md-theme-vscode-github,
+.vscode-high-contrast-light .md-editor.md-theme-vscode-github {
+    --md-inline-code-background: var(--vscode-textPreformat-background, #818b981f);
 }
 
 .md-theme-vscode-github .md-heading {
@@ -155,7 +162,7 @@
     padding: 0.2em 0.4em;
     margin: 0;
     color: var(--vscode-textPreformat-foreground, inherit);
-    background-color: var(--vscode-textPreformat-background, #818b981f);
+    background-color: var(--md-inline-code-background);
     border-radius: 6px;
     white-space: break-spaces;
 }