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

package/src/view/editor.css

@@ -1,3 +1,5 @@
+@import '@vscode/codicons/dist/codicon.css';
+
 /*
  * Base editor styles — ABSOLUTE MINIMUM.
  *
@@ -12,43 +14,122 @@
  * 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 {
+	display: flow-root;
 	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`. The block-start padding keeps every document clear of the top
+ * edge, independent of the first block's theme margins.
  */
 .md-editor-content {
+	--md-editor-content-inline-start-padding: 48px;
+	--md-readonly-toggle-width: 58px;
+	--md-readonly-toggle-height: 32px;
+	/* Leaves 16px of optical separation beyond the active block's 8px outset glow. */
+	--md-readonly-toggle-gap: 24px;
+	--md-readonly-toggle-inset: 4px;
+	--md-editor-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
 	margin-inline: auto;
-	padding: 48px;
+	padding-block: 24px 0;
+	padding-inline: var(--md-editor-content-inline-start-padding) var(--md-editor-content-inline-end-padding);
+}
+
+.md-editor-content-with-readonly-toggle {
+	--md-editor-content-inline-end-padding: calc(var(--md-readonly-toggle-width) + var(--md-readonly-toggle-gap) + var(--md-readonly-toggle-inset));
+}
+
+.md-editor-content-with-readonly-toggle>.md-document :is(.md-heading, .md-paragraph) {
+	overflow-wrap: anywhere;
 }
 
 .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.
+ * The whole-empty-document case. Markdown has no empty-paragraph node, so a
+ * document with no content parses to a single empty paragraph (see
+ * `_ensureBlocks` in the parser) which renders as a childless `<p>` of zero
+ * height. Give it one line's height so the editor presents an intentional,
+ * clickable empty editing surface — and so typing the first character causes no
+ * layout shift (a filled line is also one `lh` tall).
+ */
+.md-paragraph:empty {
+	min-height: 1lh;
+}
+
+/*
+ * ...and never paint the active-block card over that zero-content line: with no
+ * text to size it, the card's background + 8px box-shadow glow would show up as
+ * a stray gray bar. The two extra classes outrank the base `.md-block-active`
+ * rule above in every theme (themes only remap `--md-block-active-background`).
+ */
+.md-paragraph:empty.md-block-active {
+	background: transparent;
+	box-shadow: none;
+}
+
+/*
+ * 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;
@@ -84,6 +165,33 @@
 	white-space: pre-wrap;
 }
 
+/*
+ * An unhandled block: a construct the parser does not model (setext heading,
+ * an extension token). Its raw source is shown verbatim,
+ * styled like a code block but visibly flagged as "not understood" by a dashed
+ * warning border, so the content is preserved and editable rather than silently
+ * dropped.
+ *
+ * The wrapper is the non-scrolling box (border + block spacing); the inner
+ * `.md-unhandled-scroll` <pre> is the horizontal scroller.
+ */
+.md-unhandled-block {
+	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).
+ */
+pre.md-unhandled-scroll.md-code-block {
+	margin: 0;
+	border: 0;
+	border-radius: 4px;
+}
+
 /*
  * Visible whitespace indicators, shown only in the active/source view. The real
  * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
@@ -183,15 +291,61 @@
 }
 
 /*
- * 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;
+}
+
+/*
+ * Active table: take each cell's TRAILING structural glue (the source space
+ * after the cell text, and — via the per-theme `right: 0` rule — the last
+ * column's closing `|`) out of the cell's inline flow. Left in flow, that glue
+ * wraps below long cell content (the same wrapping the hidden-glue note above
+ * describes), which makes the cell two lines tall: the browser's default
+ * `vertical-align: middle` then re-centres the other cells' single-line content
+ * in Y, their runs merge into one oversized VisualLine, and the caret — sized
+ * directly from that line box — grows far past the line height while the
+ * visible pipes drift apart row-to-row. Positioning the trailing glue
+ * absolutely removes it from wrapping flow while keeping its real client rects
+ * at the static (content-line) position, so caret placement, hit-testing,
+ * source mapping and injectivity are unchanged. `top`/`bottom: auto` keep it on
+ * that content line rather than the cell's top edge. This mirrors the inactive
+ * `display: none` above; the leading `| ` glue deliberately stays in flow (a
+ * relative glyph shift, per theme) so first-text X is preserved.
+ *
+ * `:not(:first-child)` restricts this to a genuine trailing glue: a non-empty
+ * cell emits leading + trailing glue, but an EMPTY cell parses to a single glue
+ * node that is simultaneously first and last child. That lone node is the
+ * cell's leading pipe, so it must stay in flow like every other leading pipe;
+ * excluding it keeps empty cells identical to their previous (base) behaviour.
+ */
+.md-table.md-block-active td {
+	position: relative;
+}
+
+.md-table.md-block-active td>.md-glue-tableCellGlue:last-child:not(:first-child) {
+	position: absolute;
+	top: auto;
+	bottom: auto;
+}
+
 /*
  * 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
@@ -228,15 +382,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
@@ -271,6 +416,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;
@@ -285,6 +472,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;
@@ -437,6 +672,16 @@
 	white-space: pre;
 }
 
+/*
+ * A continuation-line indent inside a paragraph is source-only padding. When
+ * inactive, the preceding soft-break newline already collapses to the single
+ * rendered space Markdown requires; retaining the hidden indent would add the
+ * tab/space run's width on top of it.
+ */
+.md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: none;
+}
+
 /*
  * 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
@@ -540,11 +785,43 @@
 .md-cursor {
 	position: absolute;
 	width: 2px;
-	background: #000;
+	background: var(--md-cursor-background, #000);
 	pointer-events: none;
+}
+
+/*
+ * The painted caret is only shown while the editor is genuinely focused — focus
+ * rests inside it and its window is focused, mirrored onto the root as
+ * `.md-focused`. When unfocused, hide the caret element but keep its layout box
+ * (so caret geometry, selection and comment anchoring are unchanged) and stop
+ * the blink. Adding the animation on focus restarts it from 0% (a solid caret).
+ */
+.md-editor:not(.md-focused) .md-cursor {
+	visibility: hidden;
+}
+
+.md-editor.md-focused .md-cursor {
 	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;
+}
+
+.md-editor.md-readonly-editing-attempt {
+	animation: md-readonly-editing-attempt 300ms ease-out;
+}
+
+@keyframes md-readonly-editing-attempt {
+	50% {
+		box-shadow: inset 0 0 0 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	}
+}
+
 @keyframes md-cursor-blink {
 
 	0%,
@@ -555,4 +832,201 @@
 	50% {
 		opacity: 0;
 	}
+}
+
+/*
+ * Edit / read-only lock toggle.
+ *
+ * The asymmetric content padding reserves a real rail for the control:
+ * button width + gap + edge inset. The zero-height sticky host spans the
+ * document column and that rail, keeping the button beside (never over) the
+ * rendered document as it scrolls. 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;
+	width: calc(100% + var(--md-editor-content-inline-end-padding));
+	height: 0;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.md-readonly-toggle {
+	position: absolute;
+	top: 4px;
+	right: var(--md-readonly-toggle-inset);
+	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: var(--md-readonly-toggle-width);
+	height: var(--md-readonly-toggle-height);
+	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 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
+	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+/*
+ * Below this width there is not enough document column for the side rail to be
+ * useful. Give the host its own row and stop it from sticking, so neither long
+ * unbreakable content nor later content scrolled through the viewport can ever
+ * pass underneath the button.
+ */
+.md-editor-narrow .md-readonly-toggle-host {
+	position: relative;
+	height: calc(var(--md-readonly-toggle-height) + var(--md-readonly-toggle-inset) + var(--md-readonly-toggle-inset));
+}
+
+.md-readonly-toggle::after {
+	content: '';
+	position: absolute;
+	z-index: 2;
+	top: -8px;
+	bottom: -8px;
+	left: -30px;
+	width: 24px;
+	background: linear-gradient(90deg,
+			transparent,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 24%,
+			var(--md-readonly-shine, #ffffff) 50%,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 76%,
+			transparent);
+	box-shadow: 0 0 8px 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	opacity: 0;
+	pointer-events: none;
+	transform: skewX(-20deg);
+}
+
+.md-readonly-toggle.md-readonly-toggle-shine::after {
+	animation: md-readonly-toggle-shine 2s linear;
+	will-change: transform, opacity;
+}
+
+@keyframes md-readonly-toggle-shine {
+	0% {
+		opacity: 0;
+		transform: translateX(0) skewX(-20deg);
+	}
+
+	12%,
+	88% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(122px) skewX(-20deg);
+	}
+}
+
+.md-readonly-toggle:hover {
+	border-color: var(--md-readonly-border-hover, #8d8d8d);
+	background: var(--md-readonly-background-hover, #e9e9e9);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+.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-editor.md-readonly-editing-attempt,
+	.md-readonly-toggle,
+	.md-readonly-toggle .md-readonly-toggle-indicator,
+	.md-readonly-toggle .md-readonly-toggle-icon,
+	.md-readonly-toggle.md-readonly-toggle-shine::after {
+		animation: none;
+		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::after {
+		display: 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;
 }
 
@@ -201,6 +206,9 @@
  * box) so the right outline is a straight line. Absolute removes it from flow,
  * but it is the trailing node so no text shifts; the leading pipe still fixes
  * first-text X and the row stays one line tall, keeping the compare invariants.
+ * `top: auto` keeps the pipe on the content line (the shared editor.css rule
+ * also takes trailing glue out of flow); the previous `top: 0` floated it to
+ * the cell's top edge, misaligning it with the leading pipes on wrapping rows.
  */
 .md-theme-default .md-table.md-block-active td:last-child {
     position: relative;
@@ -209,7 +217,7 @@
 .md-theme-default .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -220,7 +228,7 @@
 .md-theme-default .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 .md-theme-default code {