@vscode/markdown-editor 0.0.2-2 → 0.0.2-21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-2",
+  "version": "0.0.2-21",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -14,11 +14,19 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "src/view/editor.css",
     "src/view/themes/default.css",
-    "src/view/themes/github.css"
+    "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"
   ],
   "exports": {
     ".": {
@@ -29,18 +37,32 @@
       "types": "./dist/observables.d.ts",
       "import": "./dist/observables.js"
     },
+    "./web-editors": {
+      "types": "./dist/web-editors.d.ts",
+      "import": "./dist/web-editors.js"
+    },
     "./editor.css": "./src/view/editor.css",
     "./themes/default.css": "./src/view/themes/default.css",
-    "./themes/github.css": "./src/view/themes/github.css"
+    "./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"
   },
   "scripts": {
-    "build": "vite build",
+    "build": "pnpm run build:dependencies && vite build",
+    "build:dependencies": "pnpm --filter @vscode/hubrpc build",
+    "build:explorer": "pnpm run build:dependencies && pnpm --filter @vscode/sample-web-editor build && vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
     "dev": "vite build --watch",
+    "pack": "pnpm run build && pnpm pack",
     "test": "vitest --run",
     "test:watch": "vitest",
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@vscode/codicons": "^0.0.45",
+    "@vscode/diff": "0.0.2-0",
     "katex": "^0.16.33",
     "micromark": "^4.0.1",
     "micromark-extension-gfm": "^3.0.0",
@@ -53,16 +75,21 @@
     "@playwright/test": "^1.58.2",
     "@types/katex": "^0.16.8",
     "@types/markdown-it": "^14.1.2",
-    "@vscode/component-explorer": "next",
-    "@vscode/component-explorer-cli": "next",
-    "@vscode/component-explorer-vite-plugin": "next",
+    "@vscode/component-explorer": "workspace:*",
+    "@vscode/component-explorer-cli": "workspace:*",
+    "@vscode/component-explorer-vite-plugin": "workspace:*",
+    "@vscode/hubrpc": "workspace:*",
     "@vscode/observables": "workspace:*",
+    "@vscode/sample-web-editor": "workspace:*",
+    "@vscode/web-editors": "workspace:*",
+    "github-markdown-css": "^5.9.0",
     "markdown-it": "^14.2.0",
     "mermaid": "^11.15.0",
     "monaco-editor": "^0.52.2",
     "typescript": "^5.7.0",
-    "vite": "^6.0.0",
+    "vite": "^6.4.3",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.0",
+    "zod": "^4.3.6"
   }
 }

package/src/contrib/comments/commentInput.css

@@ -0,0 +1,150 @@
+/*
+ * 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.
+ */
+
+.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;
+}
+
+.md-comment-input-textarea {
+	flex: 1 1 auto;
+	min-width: 0;
+	max-width: 400px;
+	margin: 0;
+	padding: 0 0 0 6px;
+	border: none;
+	border-radius: 4px;
+	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);
+	font: inherit;
+	line-height: 22px;
+	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;
+}
+
+.md-comment-input-textarea::placeholder {
+	color: var(--vscode-input-placeholderForeground, #767676);
+	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;
+	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;
+	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;
+	background: transparent;
+	color: var(--vscode-foreground, #1f1f1f);
+	cursor: pointer;
+}
+
+.md-comment-input-submit:hover:not(:disabled) {
+	background-color: var(--vscode-toolbar-hoverBackground, rgba(0, 0, 0, 0.08));
+}
+
+.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-active .md-cursor {
+	display: none;
+}

package/src/contrib/comments/comments.css

@@ -0,0 +1,129 @@
+/*
+ * 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

@@ -0,0 +1,166 @@
+/*---------------------------------------------------------------------------------------------
+ *  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-icon-foreground: #cccccc;
+    --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: 1px solid var(--vscode-editorHoverWidget-border, var(--vscode-editorWidget-border, #2a2b2c));
+    border-radius: var(--vscode-cornerRadius-large, 8px);
+    /* Outer radius */
+    box-shadow: 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: normal;
+    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: normal;
+    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;
+}