@vscode/markdown-editor 0.0.2-4 → 0.0.2-6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode/markdown-editor",
-  "version": "0.0.2-4",
+  "version": "0.0.2-6",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
   },
   "scripts": {
     "build": "vite build",
+    "build:explorer": "vite build --config vite.fixture.config.ts --outDir dist-explorer --emptyOutDir",
     "dev": "vite build --watch",
     "pack": "pnpm run build && pnpm pack",
     "test": "vitest --run",
@@ -58,6 +59,8 @@
     "@vscode/component-explorer-cli": "next",
     "@vscode/component-explorer-vite-plugin": "next",
     "@vscode/observables": "workspace:*",
+    "github-markdown-css": "^5.9.0",
+    "golden-layout": "^2.6.0",
     "markdown-it": "^14.2.0",
     "mermaid": "^11.15.0",
     "monaco-editor": "^0.52.2",

package/src/view/editor.css

@@ -20,6 +20,16 @@
 	caret-color: transparent;
 }
 
+/*
+ * The transient empty paragraph — the blank line conjured by pressing Enter at
+ * the end of a paragraph (see `PendingParagraph` in the model). It is not part
+ * of the document (Markdown has no empty-paragraph node); it holds a single
+ * `<br>` so it occupies one line's height, and the caret is painted over it.
+ */
+.md-pending-paragraph {
+	min-height: 1em;
+}
+
 /*
  * Inner content container. Holds the rendered document and the cursor/selection
  * overlays, which position themselves relative to this box, so it is the
@@ -40,14 +50,33 @@
 }
 
 /*
- * A rendered (inactive) link opens on a plain click, so it keeps the anchor's
- * pointer cursor. Once its block is active the link is editable source and a
- * plain click places the caret (Ctrl/Cmd+click still opens), so it shows the
- * normal editing cursor like the surrounding text.
+ * Cursor mirrors the same open affordance as the underline below: the anchor's
+ * pointer cursor appears exactly when a click would open the link. An inactive
+ * (rendered) link opens on a plain click, so it keeps the browser's default
+ * anchor pointer. Once its block is active a plain click places the caret, so
+ * the link shows the normal editing cursor — except while Ctrl/Cmd is held
+ * (`.md-mod-down`), when a click opens it and the pointer returns.
  */
 .md-block-active a {
 	cursor: inherit;
 }
+.md-editor.md-mod-down .md-block-active a[href] {
+	cursor: pointer;
+}
+
+/*
+ * Link underline is an "open affordance": show it only while a click on the
+ * link right now would actually open it. An inactive (rendered) link opens on
+ * a plain click, so hovering it underlines. An active link's plain click edits
+ * its source — it only opens with Ctrl/Cmd — so it underlines on hover only
+ * while that modifier is held (`.md-mod-down`, set live by the view).
+ */
+.md-editor a[href]:hover {
+	text-decoration: underline;
+}
+.md-editor:not(.md-mod-down) .md-block-active a[href]:hover {
+	text-decoration: none;
+}
 
 .md-fence-spacer {
 	visibility: hidden;
@@ -285,6 +314,54 @@
 	fill: rgba(59, 130, 246, 0.25);
 }
 
+/*
+ * Gutter markers (source-control style change indicators). The layer fills the
+ * content box; each marker is an absolutely-positioned bar pinned to the left
+ * gutter (inside `.md-editor-content`'s 48px padding). The view sets only
+ * `top`/`height`; horizontal placement, width and color live here so themes can
+ * tune them without touching layout. Like the other overlays it never eats
+ * pointer events.
+ */
+.md-gutter-layer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	overflow: visible;
+}
+
+.md-gutter-marker {
+	position: absolute;
+	left: var(--md-gutter-marker-left, 18px);
+	width: var(--md-gutter-marker-width, 3px);
+	border-radius: 2px;
+}
+
+.md-gutter-marker-added {
+	background: var(--md-gutter-added, #2ea043);
+}
+
+.md-gutter-marker-modified {
+	background: var(--md-gutter-modified, #0969da);
+}
+
+/*
+ * A deletion has no lines to span, so it is drawn as a downward-pointing
+ * triangle centered on the seam where the removed text used to be (the top of
+ * the line that now follows it), matching the git deleted-lines affordance.
+ */
+.md-gutter-marker-deleted {
+	width: 0;
+	height: 0;
+	border-radius: 0;
+	border-left: var(--md-gutter-marker-width, 3px) solid var(--md-gutter-deleted, #cf222e);
+	border-top: 4px solid transparent;
+	border-bottom: 4px solid transparent;
+	transform: translateY(-4px);
+}
+
 /* Source markers occupy the gutter so toggling them never shifts content. */
 .md-heading {
 	position: relative;

package/src/view/themes/github.css

@@ -99,10 +99,6 @@
     text-decoration: none;
 }
 
-.github-markdown-theme a:hover {
-    text-decoration: underline;
-}
-
 /* GitHub uses a 600 weight for bold, not the browser default 700. */
 .github-markdown-theme strong {
     font-weight: 600;