@vscode/markdown-editor 0.0.2-1 → 0.0.2-11

package/src/view/editor.css

@@ -12,32 +12,81 @@
  * theme files (`themes/default.css`, `themes/github.css`) applied via the
  * `classNames` editor option; those selectors only ever match inside their
  * own theme class and never style the global scope.
+ *
+ * NO `--vscode-*` variables may be referenced here. This base file must stay
+ * theme-agnostic and know nothing about VS Code. Where a value needs to vary
+ * per theme, expose a local `--md-*` custom property WITH a sensible literal
+ * fallback (e.g. `var(--md-cursor-background, #000)`) and let a theme file set
+ * it. Only `themes/vscode.css` is permitted to read `--vscode-*` variables and
+ * map them onto these `--md-*` properties.
  */
 
 .md-editor {
-	position: relative;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	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
+ * positioning context. In limited-width mode the editor sets an inline
+ * `max-width` here and the auto inline margins center it within the full-width
+ * `.md-editor`.
+ */
+.md-editor-content {
+	position: relative;
+	margin-inline: auto;
 	padding: 48px;
 }
 
 .md-block-active {
-	background: #f8f8f8;
+	background: var(--md-block-active-background, #f8f8f8);
 	border-radius: 4px;
-	box-shadow: 0 0 0 8px #f8f8f8;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
 }
 
 /*
- * 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;
 	font-family: 'Cascadia Code', 'Fira Code', monospace;
@@ -274,6 +323,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;
@@ -346,14 +443,7 @@
 	overflow-x: auto;
 }
 
-/*
- * Paragraphs inside list items render inline so the item's content sits on
- * the same line as the list counter / source marker instead of wrapping
- * below it. Block-level <p> here would push the text down even with zero
- * margin, because the counter sits at the start of the principal box.
- */
 .md-list li>.md-paragraph {
-	display: inline;
 	margin: 0;
 }
 
@@ -433,20 +523,57 @@
 	white-space: pre;
 }
 
+/*
+ * A loose list item's later block (its second paragraph etc.) owns the source
+ * continuation indent that precedes it as its `leadingTrivia`. Like a nested
+ * list's gutter, that indent glue is pulled out of flow to the left so it never
+ * widens the line: the block's text stays aligned with the first paragraph
+ * above it, and the indent dots only appear in the left margin when the block is
+ * active (the footprint is identical in both states, so the text never shifts).
+ */
+.md-list li>.md-block,
+.md-task-list-item>.md-block {
+	position: relative;
+}
+
+.md-list li>.md-block>.md-glue-indent:first-child,
+.md-task-list-item>.md-block>.md-glue-indent:first-child {
+	position: absolute;
+	right: 100%;
+	top: 0;
+}
+
 .md-task-list-item {
 	list-style: none;
 	position: relative;
+	/*
+	 * Width of the checkbox / `[x]` source column. Single-sourced so the marker
+	 * reservation on the first paragraph and the left indent of any following
+	 * block (loose task items) stay in lockstep — keeping every block's text in
+	 * one vertical column under the marker.
+	 */
+	--md-task-marker-width: 1.75em;
 }
 
 /*
- * Reserve extra width after the `[x]`/`[ ]` source marker (the first glue in a
- * task item's paragraph) so the rendered checkbox widget overlaid on it has a
- * comfortable gap before the text. The padding applies in both active and
+ * Reserve the marker column after the `[x]`/`[ ]` source marker (the first glue
+ * in a task item's paragraph) so the rendered checkbox widget overlaid on it has
+ * a comfortable gap before the text. The fixed width applies in both active and
  * inactive states, so the first text character does not drift horizontally when
  * markers toggle (see the compare fixture's `checkMarkedTextX` assertion).
  */
 .md-task-list-item .md-paragraph>.md-glue:first-child {
-	padding-right: 0.7em;
+	display: inline-block;
+	width: var(--md-task-marker-width);
+}
+
+/*
+ * Following blocks in a loose task item (the second paragraph etc.) carry no
+ * marker glue, so indent them by the marker column to line their text up under
+ * the first paragraph's text rather than under the checkbox.
+ */
+.md-task-list-item>.md-block+.md-block {
+	padding-left: var(--md-task-marker-width);
 }
 
 .md-checkbox {
@@ -499,7 +626,7 @@
 .md-cursor {
 	position: absolute;
 	width: 2px;
-	background: #000;
+	background: var(--md-cursor-background, #000);
 	pointer-events: none;
 	animation: md-cursor-blink 1s step-end infinite;
 }

package/src/view/themes/github.css

@@ -19,7 +19,6 @@
     font-size: 16px;
     line-height: 1.5;
     color: #1f2328;
-    max-width: 800px;
     word-wrap: break-word;
 }
 
@@ -100,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;

package/src/view/themes/vscode.css

@@ -0,0 +1,331 @@
+/*
+ * VS Code markdown theme.
+ *
+ * A *variable-driven* theme: every color is expressed as `var(--vscode-*, …)`
+ * so the editor adopts whatever VS Code color theme is active (dark, light,
+ * high-contrast, or any custom theme) WITHOUT the editor knowing anything
+ * about VS Code. The editor only references variable NAMES — a documented
+ * contract — and bundles no VS Code CSS.
+ *
+ * Apply it via the editor `classNames` option:
+ *
+ *     new EditorView(model, { classNames: ['md-theme-vscode'] });
+ *
+ * In a real webview VS Code injects the `--vscode-*` custom properties onto
+ * the document root and sets a body theme class, so this theme just works. In
+ * the Component Explorer the same variables are supplied by a snapshot
+ * stylesheet scoped under a `.vscode-theme.<id>` wrapper (see
+ * `fixture/vscodeThemes`). Either way the cascade reaches this theme's rules.
+ *
+ * Fallbacks: each `var()` carries a light-palette fallback so the theme stays
+ * legible even with no `--vscode-*` variables present at all.
+ *
+ * Layout/typography mirrors the GitHub theme (the basis of the production VS
+ * Code markdown editor); only the colors are swapped for variables. Every
+ * selector is scoped under the theme class, so importing this file never
+ * affects the global page or any editor that did not opt in.
+ *
+ * Syntax-token colors are exposed as `--md-tok-*` custom properties (with
+ * light-palette fallbacks). Real VS Code derives token colors from the live
+ * tokenizer's color map (baked in per token), NOT from `--vscode-*`; the
+ * Component Explorer supplies a matching `--md-tok-*` palette per color theme.
+ */
+
+.md-editor.md-theme-vscode {
+    font-family: var(--markdown-font-family, -apple-system, BlinkMacSystemFont,
+            'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif);
+    font-size: var(--markdown-font-size, 16px);
+    line-height: var(--markdown-line-height, 1.5);
+    color: var(--vscode-editor-foreground, #1f2328);
+    word-wrap: break-word;
+    /*
+     * Active-block highlight (defined theme-agnostically in editor.css) follows
+     * the VS Code surface color so it stays a subtle inset on both light and
+     * dark color themes instead of a fixed light-grey box.
+     */
+    --md-block-active-background: var(--vscode-editorWidget-background, #f8f8f8);
+    /*
+     * Cursor color: editor.css paints `.md-cursor` with `--md-cursor-background`
+     * (theme-agnostic, black fallback); map it to the VS Code cursor color so it
+     * stays visible on dark color themes.
+     */
+    --md-cursor-background: var(--vscode-editorCursor-foreground, #000);
+}
+
+.md-theme-vscode .md-heading {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.md-theme-vscode h1.md-heading {
+    font-size: 2em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--vscode-textSeparator-foreground, #d1d9e0b3);
+}
+
+.md-theme-vscode h2.md-heading {
+    font-size: 1.5em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--vscode-textSeparator-foreground, #d1d9e0b3);
+}
+
+.md-theme-vscode h3.md-heading {
+    font-size: 1.25em;
+}
+
+.md-theme-vscode h4.md-heading {
+    font-size: 1em;
+}
+
+.md-theme-vscode h5.md-heading {
+    font-size: 0.875em;
+}
+
+.md-theme-vscode h6.md-heading {
+    font-size: 0.85em;
+    color: var(--vscode-descriptionForeground, #59636e);
+}
+
+.md-theme-vscode .md-paragraph {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+.md-theme-vscode .md-blockquote {
+    margin: 0 0 16px 0;
+    padding: 0 1em;
+    /*
+     * The left padding the `>` gutter hangs in (matches padding-left: 1em at
+     * the base font). Must be an absolute length, not `1em`: the marker
+     * positions itself with this var inside its own (smaller, 0.85em) font
+     * context, so an `em` value would resolve against the marker's font-size
+     * and pull the `>` out of alignment with the text.
+     */
+    --md-blockquote-pad: 16px;
+    color: var(--vscode-descriptionForeground, #59636e);
+    border-left: 0.25em solid var(--vscode-textBlockQuote-border, #d1d9e0);
+}
+
+.md-theme-vscode .md-list {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding-left: 2em;
+    /* The per-level indentation step the list gutter fills (matches padding-left). */
+    --md-list-indent-step: 2em;
+}
+
+.md-theme-vscode .md-thematic-break {
+    height: 0.25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: var(--vscode-textSeparator-foreground, #d1d9e0);
+    border: 0;
+}
+
+.md-theme-vscode a {
+    color: var(--vscode-textLink-foreground, #0969da);
+    text-decoration: none;
+}
+
+.md-theme-vscode a:hover {
+    text-decoration: underline;
+}
+
+.md-theme-vscode strong {
+    font-weight: 600;
+}
+
+/* Inline code. */
+.md-theme-vscode :not(pre)>code {
+    font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
+            'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);
+    font-size: 85%;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    color: var(--vscode-textPreformat-foreground, inherit);
+    background-color: var(--vscode-textPreformat-background, #818b981f);
+    border-radius: 6px;
+    white-space: break-spaces;
+}
+
+/* Fenced code block. */
+.md-theme-vscode .md-code-block {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding: 10px 16px;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: var(--vscode-textCodeBlock-background, #f6f8fa);
+    border-radius: 6px;
+}
+
+.md-theme-vscode .md-code-block code {
+    font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
+            'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);
+    padding: 0;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+/*
+ * Syntax-highlight token colors. Driven by `--md-tok-*` custom properties so
+ * the explorer (or any embedder) can supply a palette matched to the active
+ * color theme. Fallbacks are the VS Code light theme palette.
+ */
+.md-theme-vscode .md-code-block .tok-keyword {
+    color: var(--md-tok-keyword, #0000ff);
+}
+
+.md-theme-vscode .md-code-block .tok-string {
+    color: var(--md-tok-string, #a31515);
+}
+
+.md-theme-vscode .md-code-block .tok-comment {
+    color: var(--md-tok-comment, #008000);
+}
+
+.md-theme-vscode .md-code-block .tok-number {
+    color: var(--md-tok-number, #098658);
+}
+
+.md-theme-vscode .md-code-block .tok-regexp {
+    color: var(--md-tok-regexp, #811f3f);
+}
+
+.md-theme-vscode .md-code-block .tok-type {
+    color: var(--md-tok-type, #267f99);
+}
+
+.md-theme-vscode .md-code-block .tok-annotation {
+    color: var(--md-tok-annotation, #267f99);
+}
+
+.md-theme-vscode .md-code-block .tok-tag {
+    color: var(--md-tok-tag, #800000);
+}
+
+.md-theme-vscode .md-code-block .tok-attribute {
+    color: var(--md-tok-attribute, #e50000);
+}
+
+.md-theme-vscode .md-code-block .tok-delimiter {
+    color: var(--md-tok-delimiter, inherit);
+}
+
+/*
+ * Display math has no container styling (KaTeX renders it inline-centered).
+ * Keep only the block spacing; horizontal scroll comes from the base sheet.
+ */
+.md-theme-vscode .md-math-block {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+/*
+ * KaTeX renders inline math at 1.21em with its own (larger) line-height, which
+ * would inflate the surrounding line box. Collapse it so the rendered math fits
+ * the text line and the paragraph height stays identical active vs inactive.
+ */
+.md-theme-vscode .md-inline-math .katex {
+    line-height: 1;
+}
+
+.md-theme-vscode .md-table {
+    border-collapse: collapse;
+    margin-top: 0;
+    margin-bottom: 16px;
+    width: auto;
+}
+
+.md-theme-vscode .md-table th,
+.md-theme-vscode .md-table td {
+    padding: 6px 13px;
+    border: 1px solid var(--vscode-editorWidget-border, #d1d9e0);
+    text-align: left;
+}
+
+/*
+ * The editor renders every cell as <td> in a flat <table> of <tr> (no
+ * <thead>/<tbody>/<th>). Row order is: header, delimiter row, body rows.
+ */
+.md-theme-vscode .md-table tr:first-child td {
+    font-weight: 600;
+    padding-top: 11px;
+    padding-bottom: 11px;
+}
+
+/* Active: reclaim the header's extra spacing to host the delimiter row. */
+.md-theme-vscode .md-table.md-block-active tr:first-child td {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}
+
+.md-theme-vscode .md-table tr:nth-child(even):not(.md-table-delimiter-row) {
+    background-color: var(--vscode-textCodeBlock-background, #f6f8fa);
+}
+
+/*
+ * The delimiter row (`| --- | --- |`) is editor source shown only while
+ * editing; render it borderless with no vertical padding so it occupies just
+ * the compact 10px reclaimed from the header.
+ */
+.md-theme-vscode .md-table-delimiter-row td {
+    border: 0;
+    padding: 0 13px;
+    background: transparent;
+}
+
+/*
+ * Active table: the source `|` pipes ARE the outline. Drop the HTML cell
+ * borders (kept as transparent so the 1px box geometry — and thus the table's
+ * height and first-text X — is unchanged) and clear the zebra fill so the
+ * table reads as plain source.
+ */
+.md-theme-vscode .md-table.md-block-active td {
+    border-color: transparent;
+}
+
+.md-theme-vscode .md-table.md-block-active tr:nth-child(even):not(.md-table-delimiter-row) td {
+    background-color: transparent;
+}
+
+/*
+ * Shift each cell's leading pipe onto its left gridline (where the border was)
+ * and the last cell's closing pipe onto the right gridline. `position:
+ * relative` moves only the painted glyph by the cell's horizontal padding;
+ * siblings and the glue's reserved width are untouched, so active/inactive
+ * height and first-text X stay pixel-identical.
+ */
+.md-theme-vscode .md-table.md-block-active td>.md-glue-tableCellGlue:first-child,
+.md-theme-vscode .md-table.md-block-active .md-table-delimiter-row td>.md-marker-tableDelimiter {
+    position: relative;
+    left: -13px;
+}
+
+/*
+ * The last cell's closing `|` floats right after the (left-aligned) cell text.
+ * Pin it to the column's right gridline (the cell's border edge, 13px past the
+ * content box) so the right outline is a straight line.
+ */
+.md-theme-vscode .md-table.md-block-active td:last-child {
+    position: relative;
+}
+
+.md-theme-vscode .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+/*
+ * The delimiter row's last cell carries its closing `|` as a separate
+ * `tableDelimiterClose` marker; pin it to the same right gridline as the body
+ * rows' closing pipe so the last column's outline stays straight.
+ */
+.md-theme-vscode .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
+    position: absolute;
+    right: 0;
+    top: 0;
+}