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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-14",
+  "version": "0.0.2-140",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -14,6 +14,19 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "typesVersions": {
+    "*": {
+      "config": [
+        "./dist/config.d.ts"
+      ],
+      "commands": [
+        "./dist/commands.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
     "src/view/editor.css",
@@ -21,58 +34,84 @@
     "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",
+    "src/contrib/rename/rename.css",
+    "src/contrib/suggest/suggest.css"
   ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./observables": {
-      "types": "./dist/observables.d.ts",
-      "import": "./dist/observables.js"
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    },
+    "./commands": {
+      "types": "./dist/commands.d.ts",
+      "import": "./dist/commands.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/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",
+    "./rename.css": "./src/contrib/rename/rename.css",
+    "./suggest.css": "./src/contrib/suggest/suggest.css"
   },
   "scripts": {
-    "build": "vite build",
-    "build:explorer": "vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
+    "build": "pnpm run build:dependencies && vite build",
+    "build:dependencies": "pnpm --filter @vscode/hubrpc build && pnpm --filter @vscode/web-editors build",
+    "build:fixture-dependencies": "pnpm run build:dependencies && pnpm --filter @vscode/cmark-gfm-wasm build && pnpm --filter @vscode/component-explorer-vite-plugin... build && pnpm --filter @vscode/sample-web-editor build",
+    "typecheck:fixtures": "tsc --project tsconfig.fixtures.json",
+    "screenshots": "node scripts/screenshots.mjs render",
+    "test:screenshots": "node --test scripts/screenshots.test.mjs",
+    "build:fixtures": "pnpm run typecheck:fixtures && vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
+    "build:explorer": "pnpm run build:fixture-dependencies && pnpm run build:fixtures",
+    "serve:e2e-fixtures": "vite preview --config vite.fixture.config.ts --outDir dist-explorer",
     "dev": "vite build --watch",
     "pack": "pnpm run build && pnpm pack",
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:e2e": "playwright test"
+    "test:e2e": "pnpm run build:fixture-dependencies && pnpm run build:fixtures && playwright test"
   },
   "dependencies": {
+    "@vscode/codicons": "0.0.46-36",
     "@vscode/diff": "0.0.2-0",
+    "@vscode/observables": "^0.1.1-0",
+    "entities": "6.0.1",
     "katex": "^0.16.33",
     "micromark": "^4.0.1",
+    "micromark-extension-frontmatter": "^2.0.0",
     "micromark-extension-gfm": "^3.0.0",
+    "micromark-extension-gfm-autolink-literal": "^2.1.0",
     "micromark-extension-gfm-strikethrough": "^2.1.0",
     "micromark-extension-gfm-table": "^2.1.1",
     "micromark-extension-gfm-task-list-item": "^2.1.0",
-    "micromark-extension-math": "^3.1.0"
+    "micromark-extension-math": "^3.1.0",
+    "micromark-util-decode-string": "^2.0.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "1.56.1",
     "@types/katex": "^0.16.8",
     "@types/markdown-it": "^14.1.2",
-    "@vscode/component-explorer": "0.2.1-59",
-    "@vscode/component-explorer-cli": "0.2.1-60",
-    "@vscode/component-explorer-vite-plugin": "0.2.1-59",
-    "@vscode/observables": "workspace:*",
+    "@vscode/cmark-gfm-wasm": "workspace:*",
+    "@vscode/component-explorer": "workspace:*",
+    "@vscode/component-explorer-cli": "workspace:*",
+    "@vscode/component-explorer-vite-plugin": "workspace:*",
+    "@vscode/hubrpc": "workspace:*",
+    "@vscode/sample-web-editor": "workspace:*",
+    "@vscode/web-editors": "workspace:*",
     "github-markdown-css": "^5.9.0",
-    "golden-layout": "^2.6.0",
-    "markdown-it": "^14.2.0",
+    "markdown-it": "^14.3.2",
     "mermaid": "^11.15.0",
     "monaco-editor": "^0.52.2",
     "typescript": "^5.7.0",
@@ -80,5 +119,6 @@
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.0",
     "zod": "^4.3.6"
-  }
+  },
+  "gitHead": "1a58b44df87a0ab2c45f0740f5e12445c4bb966d"
 }

package/src/contrib/comments/commentInput.css

@@ -1,131 +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;
+	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;
-	min-width: 150px;
-	max-width: 400px;
+	width: 0;
+	min-width: 0;
+	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);
-}
-
-.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;
+}