@vscode/markdown-editor 0.0.2-83 → 0.0.2-84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-83",
+  "version": "0.0.2-84",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -34,9 +34,8 @@
     "src/view/themes/github.css",
     "src/view/themes/vscode-github.css",
     "src/view/themes/vscode-default.css",
-    "src/contrib/comments/comments.css",
     "src/contrib/comments/commentInput.css",
-    "src/contrib/commentsVscode/vscodeCommentWidgetV2.css",
+    "src/contrib/comments/commentWidget.css",
     "src/contrib/find/find.css"
   ],
   "exports": {
@@ -61,9 +60,8 @@
     "./themes/github.css": "./src/view/themes/github.css",
     "./themes/vscode-github.css": "./src/view/themes/vscode-github.css",
     "./themes/vscode-default.css": "./src/view/themes/vscode-default.css",
-    "./comments.css": "./src/contrib/comments/comments.css",
     "./commentInput.css": "./src/contrib/comments/commentInput.css",
-    "./vscodeCommentWidgetV2.css": "./src/contrib/commentsVscode/vscodeCommentWidgetV2.css"
+    "./commentWidget.css": "./src/contrib/comments/commentWidget.css"
   },
   "scripts": {
     "build": "pnpm run build:dependencies && vite build",
@@ -79,7 +77,7 @@
     "test:e2e": "pnpm run build:fixture-dependencies && pnpm run build:fixtures && playwright test"
   },
   "dependencies": {
-    "@vscode/codicons": "^0.0.45",
+    "@vscode/codicons": "0.0.46-36",
     "@vscode/diff": "0.0.2-0",
     "@vscode/observables": "^0.1.1-0",
     "katex": "^0.16.33",
@@ -111,5 +109,5 @@
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
   },
-  "gitHead": "8bfa535027fcb90244ae3516d9440507ccc950f8"
+  "gitHead": "b5fd5cda44376c118dd383f8c03ac4f6a06c648e"
 }

package/src/contrib/comments/commentInput.css

@@ -1,150 +1,89 @@
-/*
- * Styling for the comment input box (CommentInputWidget). Mirrors VS Code's
- * agent-feedback input widget (`.agent-feedback-input-widget` in
- * agentFeedbackEditorInput.css): a soft rounded panel on the panel background,
- * wrapping a *borderless* auto-growing textarea that blends into the panel, with
- * a small "plus" action on the right. The whole box is the bubble — there is no
- * separate inner input field. Uses --vscode-* variables so it matches the host
- * theme, with neutral fallbacks for standalone fixtures.
- */
+@import '@vscode/codicons/dist/codicon.css';
 
 .md-comment-input {
 	box-sizing: border-box;
 	display: flex;
-	flex-direction: row;
 	align-items: flex-end;
-	/*
-	 * Hug the content: the bubble is as wide as its (auto-sized) textarea, up to
-	 * the textarea's max-width, and no wider than the available space. In the
-	 * editor the widget is `position: absolute` (already shrink-to-fit); this also
-	 * makes it hug content when placed in normal flow (e.g. in fixtures).
-	 */
-	width: fit-content;
-	padding: 4px;
-	background-color: var(--vscode-panel-background, var(--vscode-editor-background, #fff));
-	color: var(--vscode-input-foreground, var(--vscode-foreground, #1f1f1f));
-	border: 1px solid var(--vscode-editorWidget-border, var(--vscode-contrastBorder, rgba(59, 59, 59, 0.2)));
-	border-radius: 8px;
-	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;
+	width: 165px;
+	min-height: 24px;
+	padding: 3px 4px 3px 7px;
+	background-color: var(--vscode-menu-background);
+	color: var(--vscode-input-foreground);
+	border: 1px solid var(--vscode-menu-border);
+	border-radius: 6px;
+	box-shadow: 0 0 12px var(--vscode-widget-shadow);
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
 }
 
 .md-comment-input-textarea {
 	flex: 1 1 auto;
+	width: 0;
 	min-width: 0;
-	max-width: 400px;
+	min-height: 16px;
+	max-height: 160px;
 	margin: 0;
-	padding: 0 0 0 6px;
-	border: none;
-	border-radius: 4px;
+	padding: 0;
+	border: 0;
 	outline: none;
 	resize: none;
 	overflow-y: hidden;
-	max-height: 160px;
 	box-sizing: border-box;
-	background-color: var(--vscode-panel-background, var(--vscode-editor-background, #fff));
-	color: var(--vscode-input-foreground, inherit);
+	background: transparent;
+	color: var(--vscode-input-foreground);
 	font: inherit;
-	line-height: 22px;
+	line-height: 16px;
 	white-space: pre-wrap;
-	word-wrap: break-word;
-	/*
-	 * The box lives inside `.md-editor`, which sets `caret-color: transparent`
-	 * to hide the native caret (it paints its own). Restore a visible blinking
-	 * caret here so the focused comment input shows one.
-	 */
-	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;
+	overflow-wrap: anywhere;
+	caret-color: var(--vscode-editorCursor-foreground);
 }
 
 .md-comment-input-textarea::placeholder {
-	color: var(--vscode-input-placeholderForeground, #767676);
+	color: var(--vscode-input-placeholderForeground);
 	opacity: 1;
 }
 
-/* Hidden element used to measure text width for auto-growing (mirrors the
- * reference''s `.agent-feedback-input-measure`). */
 .md-comment-input-measure {
 	position: absolute;
 	visibility: hidden;
+	width: max-content;
 	height: 0;
 	overflow: hidden;
 	white-space: pre;
 	font: inherit;
 }
 
-.md-comment-input-actions {
-	display: flex;
-	align-items: center;
-	/*
-	 * Match the textarea's single line box (line-height) so the centered icon
-	 * lines up with the text's vertical center. The panel is `align-items:
-	 * flex-end`, so on a multi-line textarea this box stays pinned to the bottom
-	 * line — mirroring the reference agent-feedback widget.
-	 */
-	height: 22px;
-	margin-left: 2px;
-	flex-shrink: 0;
-}
-
 .md-comment-input-submit {
 	display: flex;
+	flex: 0 0 auto;
 	align-items: center;
 	justify-content: center;
-	box-sizing: content-box;
-	/*
-	 * 16px glyph inside a 22x22 hit-area (16 + 3px padding each side), matching
-	 * the reference ActionBar action-label so the icon's spacing and hover target
-	 * line up with the agent-feedback widget.
-	 */
 	width: 16px;
 	height: 16px;
-	padding: 3px;
-	border: none;
-	border-radius: 5px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: 0;
+	border-radius: 4px;
 	background: transparent;
-	color: var(--vscode-foreground, #1f1f1f);
+	color: var(--vscode-icon-foreground);
 	cursor: pointer;
 }
 
 .md-comment-input-submit:hover:not(:disabled) {
-	background-color: var(--vscode-toolbar-hoverBackground, rgba(0, 0, 0, 0.08));
+	background-color: var(--vscode-toolbar-hoverBackground);
 }
 
 .md-comment-input-submit:disabled {
-	opacity: 0.5;
 	cursor: default;
 }
 
-/*
- * While the comment box is shown, hide the editor''s painted caret (.md-cursor).
- * Focus — and the blinking caret — belong to the comment input, not the
- * document. The selection highlight stays visible (it shows what''s commented).
- */
+.md-comment-input .md-comment-input-submit .codicon {
+	display: block;
+	flex: none;
+	font-size: 12px;
+	line-height: 12px;
+}
+
 .md-comment-active .md-cursor {
 	display: none;
 }

package/src/contrib/comments/commentWidget.css

@@ -0,0 +1,60 @@
+@import '@vscode/codicons/dist/codicon.css';
+
+.md-comment-widget {
+	box-sizing: border-box;
+	display: flex;
+	align-items: flex-start;
+	width: max-content;
+	min-width: min(165px, var(--md-comment-available-width, 100%));
+	max-width: min(400px, var(--md-comment-available-width, 100%));
+	min-height: 24px;
+	padding: 3px 4px 3px 7px;
+	background-color: var(--vscode-menu-background);
+	color: var(--vscode-foreground);
+	border: 1px solid var(--vscode-menu-border);
+	border-radius: 6px;
+	box-shadow: 0 0 12px var(--vscode-widget-shadow);
+	font-family: var(--vscode-font-family);
+	font-size: var(--vscode-font-size);
+}
+
+.md-comment-widget:hover,
+.md-comment-widget--hover {
+	background-color: var(--vscode-list-hoverBackground);
+}
+
+.md-comment-widget-text {
+	flex: 1 1 auto;
+	min-width: 0;
+	line-height: 16px;
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+}
+
+.md-comment-widget-delete {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 16px;
+	margin: 0 0 0 4px;
+	padding: 0;
+	border: 0;
+	border-radius: 4px;
+	background: transparent;
+	color: var(--vscode-icon-foreground);
+	cursor: pointer;
+}
+
+.md-comment-widget-delete:hover,
+.md-comment-widget-delete--hover {
+	background-color: var(--vscode-toolbar-hoverBackground);
+}
+
+.md-comment-widget .md-comment-widget-delete .codicon {
+	display: block;
+	flex: none;
+	font-size: 12px;
+	line-height: 12px;
+}

package/src/contrib/comments/comments.css

@@ -1,129 +0,0 @@
-/*
- * Persistent comments: range highlights, leader lines, and the side rail of
- * comment cards (CommentsView). Uses --vscode-* variables with neutral
- * fallbacks so it works in standalone fixtures too.
- */
-
-/* --- Overlay layers ------------------------------------------------------ */
-
-.md-comment-shapes {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	/* The tail extends past the content into the rail; never clip it. */
-	overflow: visible;
-	/* Never block the document; hover is driven from the cards. */
-	pointer-events: none;
-}
-
-/* Highlight fill and leader stroke share one solid color inside a single
- * opacity group, so their overlap never darkens and the seam is invisible.
- * The leader starts inside the highlight (hidden under the fill) and its bottom
- * edge aligns with the selection bottom; the highlight's exit corner is squared
- * (see buildConnectedPath) so there is no notch. */
-.md-comment-group {
-	opacity: var(--md-comment-opacity, 0.16);
-	transition: opacity 0.1s ease;
-}
-
-.md-comment-group-hovered {
-	opacity: var(--md-comment-opacity-hover, 0.3);
-}
-
-.md-comment-shape-path {
-	fill: var(--md-comment-color, rgb(64, 120, 240));
-	stroke: none;
-}
-
-.md-comment-leader-path {
-	fill: none;
-	stroke: var(--md-comment-color, rgb(64, 120, 240));
-	stroke-width: 2;
-	stroke-linecap: butt;
-	stroke-linejoin: round;
-}
-
-/* --- Cards (the right rail) ---------------------------------------------- */
-
-.md-comment-card {
-	position: absolute;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	padding: 12px 14px;
-	background: var(--vscode-editorWidget-background, #fff);
-	color: var(--vscode-editorWidget-foreground, #1f1f1f);
-	border: 1px solid var(--vscode-editorWidget-border, #e0e0e0);
-	border-radius: 8px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-	font-family: var(--vscode-font-family, system-ui, sans-serif);
-	font-size: 13px;
-	transition: box-shadow 0.1s ease, border-color 0.1s ease, top 0.12s ease;
-}
-
-.md-comment-card-hovered {
-	border-color: var(--md-comment-leader-hover, rgba(64, 120, 240, 1));
-	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
-}
-
-.md-comment-card-header {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.md-comment-avatar {
-	flex: 0 0 auto;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 24px;
-	height: 24px;
-	border-radius: 50%;
-	background: var(--md-comment-avatar-bg, #d6e2fb);
-	color: var(--md-comment-avatar-fg, #25408f);
-	font-size: 10px;
-	font-weight: 600;
-	letter-spacing: 0.3px;
-}
-
-.md-comment-author {
-	font-weight: 600;
-}
-
-.md-comment-time {
-	color: var(--vscode-descriptionForeground, #767676);
-	font-size: 12px;
-}
-
-.md-comment-menu {
-	margin-left: auto;
-	color: var(--vscode-descriptionForeground, #767676);
-	cursor: default;
-	user-select: none;
-}
-
-.md-comment-body {
-	line-height: 1.45;
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.md-comment-reply {
-	align-self: flex-start;
-	margin: 0;
-	padding: 0;
-	border: none;
-	background: transparent;
-	color: var(--vscode-textLink-foreground, #2563c9);
-	font: inherit;
-	font-weight: 600;
-	cursor: pointer;
-}
-
-.md-comment-reply:hover {
-	text-decoration: underline;
-}

package/src/contrib/commentsVscode/vscodeCommentWidgetV2.css

@@ -1,171 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the MIT License. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-/*
- * Styling for VsCodeCommentWidgetV2 — a replica of the Figma "Markdown comment"
- * frames. It is theme-aware: every colour is driven by a VS Code `--vscode-*`
- * design token, with the original Figma dark values kept only as literal
- * fallbacks (so the card still renders when no theme provider is present). Wrap
- * the widget in `.vscode-comments-light` / `.vscode-comments-dark` (from
- * vscodeCommentTokens.css) to supply those tokens.
- *
- * Figma token  ->  VS Code token (fallback)
- *   editorWidget/background   --vscode-editorWidget-background   (#202122)
- *   editorHoverWidget/border  --vscode-editorHoverWidget-border  (#2a2b2c)
- *   foreground                --vscode-foreground                (#bfbfbf)
- *   icon/foreground           --vscode-icon-foreground           (#8c8c8c)
- *   textLink/foreground       --vscode-textLink-foreground       (#48a0c7)
- */
-
-/* Supplemental tokens not provided by vscodeCommentTokens.css. */
-.vscode-comments-light {
-    --vscode-icon-foreground: #616161;
-    --vscode-textLink-foreground: #005fb8;
-}
-
-.vscode-comments-dark {
-    --vscode-editorWidget-background: #202122;
-    --vscode-editorHoverWidget-border: #2a2b2c;
-    --vscode-foreground: #bfbfbf;
-    --vscode-icon-foreground: #8c8c8c;
-    --vscode-textLink-foreground: #4daafc;
-}
-
-.vscode-comment-widget-v2 {
-    box-sizing: border-box;
-    width: 320px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 8px;
-    /* size80 */
-    background: var(--vscode-editorWidget-background, #202122);
-    border: none;
-    border-radius: var(--vscode-cornerRadius-large, 8px);
-    /* Outer radius */
-    box-shadow:
-        inset 0 0 0 1px var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border, #2a2b2c)),
-        0 8px 8px rgba(0, 0, 0, 0.25);
-    font-family: var(--vscode-font-family, "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
-}
-
-.vscode-comment-widget-v2 *,
-.vscode-comment-widget-v2 *::before,
-.vscode-comment-widget-v2 *::after {
-    box-sizing: border-box;
-}
-
-/* Header row: username on the left, edit/trash actions on the right. */
-.vscode-comment-widget-v2-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-}
-
-.vscode-comment-widget-v2-title-group {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    /* size60 */
-    flex: 1 0 0;
-    min-width: 0;
-}
-
-.vscode-comment-widget-v2-username {
-    flex: 1 0 0;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    /* Font ramp/Heading 3: SF Pro Text Semibold 13 */
-    font-size: 13px;
-    font-weight: 600;
-    line-height: 16px;
-    color: var(--vscode-foreground, #bfbfbf);
-}
-
-.vscode-comment-widget-v2-actions {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    /* size40 */
-    flex-shrink: 0;
-}
-
-.vscode-comment-widget-v2-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: transparent;
-    color: var(--vscode-icon-foreground, #8c8c8c);
-    cursor: pointer;
-}
-
-.vscode-comment-widget-v2-action:hover {
-    color: var(--vscode-foreground, #bfbfbf);
-}
-
-.vscode-comment-widget-v2-action svg {
-    display: block;
-    width: 16px;
-    height: 16px;
-}
-
-/* Body: comment text + optional "See more" / "See less" toggle. */
-.vscode-comment-widget-v2-body {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    /* size60 */
-    width: 100%;
-}
-
-.vscode-comment-widget-v2-text {
-    margin: 0;
-    width: 100%;
-    /* Font ramp/Body 1: SF Pro Text Regular 13 */
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 16px;
-    color: var(--vscode-foreground, #bfbfbf);
-    opacity: 0.9;
-    white-space: pre-wrap;
-    word-break: break-word;
-}
-
-/* Collapsed bodies clamp to three lines (matches the Figma "See more" frame). */
-.vscode-comment-widget-v2--collapsed .vscode-comment-widget-v2-text {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    overflow: hidden;
-}
-
-.vscode-comment-widget-v2-toggle {
-    align-self: flex-start;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    text-align: left;
-    /* Font ramp/Label 1: SF Pro Text Regular 12 */
-    font-family: inherit;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: normal;
-    color: var(--vscode-textLink-foreground, #48a0c7);
-}
-
-.vscode-comment-widget-v2-toggle:hover {
-    text-decoration: underline;
-}