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

package/src/view/editor.css

@@ -1,3 +1,5 @@
+@import '@vscode/codicons/dist/codicon.css';
+
 /*
  * Base editor styles — ABSOLUTE MINIMUM.
  *
@@ -12,32 +14,82 @@
  * 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 the `themes/vscode-*.css` themes are permitted to read `--vscode-*`
+ * variables and map them onto these `--md-*` properties.
  */
 
 .md-editor {
-	position: relative;
+	display: flow-root;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	caret-color: transparent;
-	padding: 48px;
+}
+
+/*
+ * 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: 0 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;
@@ -73,6 +125,55 @@
 	white-space: pre-wrap;
 }
 
+/*
+ * An unhandled block: a construct the parser does not model (setext heading,
+ * frontmatter fence, an extension token). Its raw source is shown verbatim,
+ * styled like a code block but visibly flagged as "not understood" — a dashed
+ * warning border and a small badge naming the originating token type (from the
+ * `data-unhandled-token` attribute) — so the content is preserved and editable
+ * rather than silently dropped.
+ *
+ * The wrapper is the non-scrolling box (border + block spacing + the badge); the
+ * inner `.md-unhandled-scroll` <pre> is the horizontal scroller. Keeping the
+ * badge on the wrapper (not the scroller) pins it to the visible top-right
+ * corner instead of letting it drift with the scrolled content.
+ */
+.md-unhandled-block {
+	position: relative;
+	margin: 0.5em 0;
+	border: 1px dashed #d0a000;
+	border-radius: 4px;
+}
+
+/*
+ * Inner scroller. Beats the per-theme `.md-theme-* .md-code-block` box rules
+ * (same class count) via the extra `pre` type selector: no margin/border of its
+ * own (those live on the wrapper), and top padding that reserves room for the
+ * pinned badge so it never overlaps the first source line.
+ */
+pre.md-unhandled-scroll.md-code-block {
+	margin: 0;
+	border: 0;
+	border-radius: 4px;
+	padding-top: 1.7em;
+}
+
+.md-unhandled-block::after {
+	content: 'unhandled: ' attr(data-unhandled-token);
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 1px 6px;
+	font-family: system-ui, sans-serif;
+	font-size: 10px;
+	line-height: 1.4;
+	color: #6b5200;
+	background: #f5e5a8;
+	border-bottom-left-radius: 4px;
+	pointer-events: none;
+	user-select: none;
+}
+
 /*
  * Visible whitespace indicators, shown only in the active/source view. The real
  * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
@@ -172,15 +273,28 @@
 }
 
 /*
- * Glue (table cell pipes, the task `[x] ` source, source padding) keeps its
- * inline footprint when hidden so column widths and the checkbox gutter stay
- * identical between active and inactive states.
+ * Glue normally keeps its inline footprint when hidden so source padding and
+ * widget gutters stay identical between active and inactive states. Hidden
+ * table-cell glue is the exception below: leaving it in inline flow lets its
+ * invisible spaces wrap around long cell content.
  */
 .md-glue-hidden {
 	display: inline;
 	visibility: hidden;
 }
 
+/*
+ * Inactive table pipes stay in the DOM/source tree, but leave layout and
+ * hit-testing entirely. Keeping an invisible rect either in the content flow or
+ * over the cell padding can create phantom lines or steal clicks from visible
+ * text. Hidden source offsets therefore collapse to the neighboring semantic
+ * seam, matching other display-none markers. Visible pipes retain the per-theme
+ * active/source layout.
+ */
+.md-table td>.md-glue-tableCellGlue.md-glue-hidden {
+	display: none;
+}
+
 /*
  * Inter-block glue: the run of blank lines between two top-level blocks. It is
  * mounted as the last inline child of the block that precedes it, so it sits at
@@ -217,15 +331,6 @@
 	visibility: hidden;
 }
 
-/*
- * Table cell-glue pipes (`| `) keep their inline footprint when hidden so the
- * column widths stay identical active and inactive.
- */
-.md-marker-tableCellGlue.md-marker-hidden {
-	display: inline;
-	visibility: hidden;
-}
-
 /*
  * The code-block fences (```lang / ```) each sit on their own source line. When
  * hidden they keep their vertical footprint (visibility hidden, not display
@@ -260,6 +365,48 @@
 	height: 16px;
 }
 
+/*
+ * A wide table scrolls horizontally inside its wrapper (the block box) instead
+ * of overflowing the page and scrolling the editor's fixed left gutter away.
+ * The wrapper is the scroll viewport the selection/caret clipping measures (see
+ * `BlockViewNode.scrollElement` / `blockViewportClip`); the inner `<table>`
+ * keeps `width: auto` (theme-defined) so it sizes to its content and overflows.
+ *
+ * `width: fit-content` keeps the wrapper hugging the table's intrinsic width, so
+ * a narrow table — and the active-block glow redirected onto the wrapper below —
+ * stays as wide as the table (unchanged from before this wrapper existed).
+ * `max-width: 100%` caps it at the content column, past which the table
+ * overflows and scrolls locally. This is the standard responsive-table pattern
+ * (cf. GitHub's own `width: max-content; max-width: 100%`).
+ */
+.md-table-wrapper {
+	overflow-x: auto;
+	width: fit-content;
+	max-width: 100%;
+}
+
+/*
+ * The active-block highlight is an *outset* glow (`box-shadow: 0 0 0 8px`).
+ * Making the wrapper a scroll box (`overflow-x: auto`, which also forces
+ * `overflow-y: auto`) clips descendant paint to its padding box, so the glow on
+ * the inner active `<table>` would be cut off (the table has no horizontal
+ * margin to give the shadow room). Render the generic active chrome on the
+ * wrapper instead — a scroll box's own shadow is never clipped by its own
+ * overflow, exactly like a code block carries the glow on its own scroller —
+ * and drop it from the table, which keeps `md-block-active` purely for the
+ * per-theme source-pipe styling.
+ */
+.md-table-wrapper:has(> .md-table.md-block-active) {
+	background: var(--md-block-active-background, #f8f8f8);
+	border-radius: 4px;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
+}
+
+.md-table.md-block-active {
+	background: none;
+	box-shadow: none;
+}
+
 .md-selection-layer {
 	position: absolute;
 	top: 0;
@@ -274,6 +421,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 +541,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 +621,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,11 +724,19 @@
 .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;
 }
 
+/*
+ * Read-only mode retains the logical caret for selection and comment anchoring.
+ * Hide only its painted element so unlocking can restore it in place.
+ */
+.md-editor.md-readonly .md-cursor {
+	visibility: hidden;
+}
+
 @keyframes md-cursor-blink {
 
 	0%,
@@ -514,4 +747,138 @@
 	50% {
 		opacity: 0;
 	}
+}
+
+/*
+ * Edit / read-only lock toggle.
+ *
+ * The host is a zero-height sticky strip pinned to the top of the scroll
+ * viewport, so the control stays in the top-right corner as the document
+ * scrolls. Being height-0 it never participates in the document's vertical
+ * flow. Colors use local `--md-readonly-*` custom properties with literal
+ * fallbacks so this base file stays theme-agnostic (themes may override them).
+ */
+.md-readonly-toggle-host {
+	position: sticky;
+	top: 0;
+	height: 0;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.md-readonly-toggle {
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	pointer-events: auto;
+	display: inline-grid;
+	grid-template-columns: repeat(2, 24px);
+	align-items: center;
+	justify-items: center;
+	gap: 2px;
+	box-sizing: border-box;
+	width: 58px;
+	height: 32px;
+	padding: 3px;
+	overflow: hidden;
+	direction: ltr;
+	appearance: none;
+	border-radius: 999px;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+	box-shadow: 0 0 12px rgba(0, 0, 0, 0.14);
+	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+.md-readonly-toggle:hover {
+	border-color: var(--md-readonly-border-hover, #8d8d8d);
+	background: var(--md-readonly-background-hover, #e9e9e9);
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16);
+}
+
+.md-readonly-toggle:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-readonly-toggle .md-readonly-toggle-indicator {
+	position: absolute;
+	top: 50%;
+	left: 3px;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: var(--md-readonly-accent, #4c8bf5);
+	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+	transform: translate(26px, -50%);
+	transition: background-color 0.12s ease, transform 0.16s ease;
+}
+
+.md-readonly-toggle .md-readonly-toggle-icon {
+	position: relative;
+	z-index: 1;
+	display: block;
+	width: 16px;
+	height: 16px;
+	color: var(--md-readonly-foreground, #444444);
+	opacity: 0.62;
+	pointer-events: none;
+	transition: color 0.12s ease, opacity 0.12s ease;
+}
+
+.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+	color: var(--md-readonly-accent-foreground, #ffffff);
+	opacity: 1;
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-indicator {
+	transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.md-readonly-toggle,
+	.md-readonly-toggle .md-readonly-toggle-indicator,
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		transition: none;
+	}
+}
+
+@media (forced-colors: active) {
+	.md-readonly-toggle {
+		forced-color-adjust: none;
+		border-color: ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle:hover {
+		border-color: Highlight;
+		background: ButtonFace;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle:focus-visible {
+		outline-color: Highlight;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-indicator {
+		background: Highlight;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		color: ButtonText;
+		opacity: 1;
+	}
+
+	.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+		color: HighlightText;
+	}
 }

package/src/view/themes/default.css

@@ -121,9 +121,14 @@
     --md-list-indent-step: 24px;
 }
 
+.md-theme-default .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
+    margin: 0.5em 0;
+}
+
 .md-theme-default .md-table {
     border-collapse: collapse;
-    margin: 0.5em 0;
     width: auto;
 }
 

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;
@@ -202,10 +197,15 @@
     line-height: 1;
 }
 
-.github-markdown-theme .md-table {
-    border-collapse: collapse;
+.github-markdown-theme .md-table-wrapper {
+    /* Block spacing lives on the wrapper (the scroll/BFC box) so it collapses
+       with siblings as before; the inner table has no margin of its own. */
     margin-top: 0;
     margin-bottom: 16px;
+}
+
+.github-markdown-theme .md-table {
+    border-collapse: collapse;
     width: auto;
 }