@vscode/markdown-editor 0.0.2-14 → 0.0.2-16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-14",
+  "version": "0.0.2-16",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -53,6 +53,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@vscode/codicons": "^0.0.45",
     "@vscode/diff": "0.0.2-0",
     "katex": "^0.16.33",
     "micromark": "^4.0.1",

package/src/contrib/comments/commentInput.css

@@ -28,11 +28,12 @@
 	box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
 	font-family: var(--vscode-font-family, system-ui, sans-serif);
 	font-size: 13px;
+	animation: md-comment-input-appear 150ms ease-out;
 }
 
 .md-comment-input-textarea {
 	flex: 1 1 auto;
-	min-width: 150px;
+	min-width: 0;
 	max-width: 400px;
 	margin: 0;
 	padding: 0 0 0 6px;
@@ -57,6 +58,24 @@
 	caret-color: var(--vscode-editorCursor-foreground, currentColor);
 }
 
+@keyframes md-comment-input-appear {
+	from {
+		opacity: 0;
+		transform: translateY(4px);
+	}
+
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.md-comment-input {
+		animation: none;
+	}
+}
+
 .md-comment-input-textarea:focus {
 	border-color: var(--vscode-focusBorder, #0078d4);
 	outline: none !important;

package/src/view/editor.css

@@ -1,3 +1,5 @@
+@import '@vscode/codicons/dist/codicon.css';
+
 /*
  * Base editor styles — ABSOLUTE MINIMUM.
  *
@@ -22,6 +24,7 @@
  */
 
 .md-editor {
+	display: flow-root;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	caret-color: transparent;
@@ -122,6 +125,55 @@
 	white-space: pre-wrap;
 }
 
+/*
+ * An unhandled block: a construct the parser does not model (setext heading,
+ * frontmatter fence, an extension token). Its raw source is shown verbatim,
+ * styled like a code block but visibly flagged as "not understood" — a dashed
+ * warning border and a small badge naming the originating token type (from the
+ * `data-unhandled-token` attribute) — so the content is preserved and editable
+ * rather than silently dropped.
+ *
+ * The wrapper is the non-scrolling box (border + block spacing + the badge); the
+ * inner `.md-unhandled-scroll` <pre> is the horizontal scroller. Keeping the
+ * badge on the wrapper (not the scroller) pins it to the visible top-right
+ * corner instead of letting it drift with the scrolled content.
+ */
+.md-unhandled-block {
+	position: relative;
+	margin: 0.5em 0;
+	border: 1px dashed #d0a000;
+	border-radius: 4px;
+}
+
+/*
+ * Inner scroller. Beats the per-theme `.md-theme-* .md-code-block` box rules
+ * (same class count) via the extra `pre` type selector: no margin/border of its
+ * own (those live on the wrapper), and top padding that reserves room for the
+ * pinned badge so it never overlaps the first source line.
+ */
+pre.md-unhandled-scroll.md-code-block {
+	margin: 0;
+	border: 0;
+	border-radius: 4px;
+	padding-top: 1.7em;
+}
+
+.md-unhandled-block::after {
+	content: 'unhandled: ' attr(data-unhandled-token);
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 1px 6px;
+	font-family: system-ui, sans-serif;
+	font-size: 10px;
+	line-height: 1.4;
+	color: #6b5200;
+	background: #f5e5a8;
+	border-bottom-left-radius: 4px;
+	pointer-events: none;
+	user-select: none;
+}
+
 /*
  * Visible whitespace indicators, shown only in the active/source view. The real
  * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
@@ -662,22 +714,21 @@
 
 .md-readonly-toggle {
 	position: absolute;
-	top: 8px;
-	right: 8px;
+	top: 4px;
+	right: 4px;
 	pointer-events: auto;
 	display: inline-flex;
 	align-items: center;
-	gap: 5px;
-	height: 26px;
-	padding: 0 10px;
-	border-radius: 13px;
+	gap: 6px;
+	padding: 4px 8px;
+	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 11px/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
+	font: 600 12px / 1 system-ui, -apple-system, 'Segoe UI', sans-serif;
 	letter-spacing: 0.02em;
 	cursor: pointer;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+	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;
 }