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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-31",
+  "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;