@vscode/markdown-editor 0.0.2-0

package/src/view/editor.css

@@ -0,0 +1,517 @@
+/*
+ * Base editor styles — ABSOLUTE MINIMUM.
+ *
+ * Only the *functional* chrome the editor needs regardless of theme:
+ * positioning, source markers, the rendered cursor/selection, the
+ * active-block highlight, the task-list checkbox widget, and the structural
+ * layout that keeps active/inactive rendering identical (markers in the
+ * gutter, list paragraphs inline).
+ *
+ * NO markdown-content typography lives here (fonts, sizes, colors,
+ * heading/paragraph/blockquote/table spacing). That lives in opt-in, scoped
+ * 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.
+ */
+
+.md-editor {
+	position: relative;
+	outline: none;
+	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
+	caret-color: transparent;
+	padding: 48px;
+}
+
+.md-block-active {
+	background: #f8f8f8;
+	border-radius: 4px;
+	box-shadow: 0 0 0 8px #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.
+ */
+.md-block-active a {
+	cursor: inherit;
+}
+
+.md-fence-spacer {
+	visibility: hidden;
+	font-family: 'Cascadia Code', 'Fira Code', monospace;
+	font-size: 0.85em;
+}
+
+.md-marker {
+	color: #999;
+	font-family: 'Cascadia Code', 'Fira Code', monospace;
+	font-size: 0.85em;
+	display: inline;
+	overflow: hidden;
+	max-width: 100px;
+	opacity: 1;
+	line-height: 1;
+}
+
+.md-marker-hidden {
+	display: none;
+}
+
+/*
+ * Active thematic break: the source markup (`---`) shown in place of the
+ * rendered rule, in the muted monospace used for all revealed source. Rendered
+ * inline-block so the hostless trailing gap (its `\n\n`, revealed as `↵`
+ * glyphs) flows on the same line, to the right of the `---`.
+ */
+.md-thematic-break-source {
+	display: inline-block;
+	color: #999;
+	font-family: 'Cascadia Code', 'Fira Code', monospace;
+	font-size: 0.85em;
+	white-space: pre-wrap;
+}
+
+/*
+ * Visible whitespace indicators, shown only in the active/source view. The real
+ * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
+ * are unaffected); the glyph is a pure CSS overlay. Spaces and tabs overlay
+ * their glyph (keeping the character's own width), while a newline shows its
+ * glyph inline since the line ending collapses to zero/again width.
+ */
+.md-ws-space,
+.md-ws-tab {
+	position: relative;
+	/*
+	 * Each decorated whitespace span wraps a single space/tab and is made
+	 * non-collapsing, so adjacent dots in a run like `foo  bar` each keep their
+	 * own width (two dots, not one). Scoping this to the span — rather than
+	 * preserving whitespace on the whole leaf — leaves a literal `\n` in the
+	 * source (e.g. a hard break's holder) collapsible, so only the `<br>`
+	 * breaks the line and no stray empty line appears.
+	 */
+	white-space: pre;
+}
+
+/*
+ * A decorated text leaf needs no special whitespace handling of its own: its
+ * non-obvious whitespace is kept from collapsing by the `white-space: pre` on
+ * the individual indicator spans (see `.md-ws-space`), and plain runs between
+ * them never contain consecutive spaces.
+ */
+.md-ws-space::before,
+.md-ws-tab::before {
+	position: absolute;
+	left: 0;
+	right: 0;
+	text-align: center;
+	color: #b0b0b0;
+	pointer-events: none;
+}
+
+.md-ws-space::before {
+	content: '·';
+}
+
+.md-ws-tab::before {
+	content: '⇥';
+}
+
+.md-ws-newline::before {
+	content: '↵';
+	color: #b0b0b0;
+	pointer-events: none;
+}
+
+/*
+ * Inter-block gap newline rendered as a real `↵` glyph character (see the
+ * `newlineGlyph` whitespace mode). Unlike `.md-ws-newline` it has no `::before`
+ * overlay — the glyph is the character's own text, so it keeps its own width and
+ * its selection box coincides exactly with the glyph (every newline is
+ * individually selectable). It is not whitespace, so it never collapses.
+ */
+.md-ws-newline-glyph {
+	color: #b0b0b0;
+}
+
+/*
+ * The structural block break: the leading newline of an inter-block gap (a
+ * `blockBreak` glue) — the `\n` that starts the next block. Painted as a real
+ * `↵` glyph like `.md-ws-newline-glyph`, but blue, to distinguish "this newline
+ * splits two blocks" (delete it and they merge) from the neutral blank-line
+ * glyphs that follow. A soft break inside a single block stays neutral.
+ */
+.md-ws-blockbreak-glyph {
+	color: #4a90d9;
+}
+
+/*
+ * Hard line break: the `<br>` always renders so the line breaks in both views;
+ * the break's source characters are revealed only while the block is active.
+ * The holder keeps default whitespace handling so its literal `\n` collapses
+ * (only the `<br>` breaks the line); the trailing spaces stay visible because
+ * each decorated dot span is non-collapsing (see `.md-ws-space`).
+ *
+ * The break's source markers are painted in the same blue as the structural
+ * block break (`.md-ws-blockbreak-glyph`) to signal a deliberate, structural
+ * line break rather than incidental whitespace: both trailing-space dots (drawn
+ * via `.md-ws-space::before`, so their colour is overridden there) and the
+ * escape backslash (the holder's own text).
+ */
+.md-hardbreak-src {
+	color: #4a90d9;
+}
+
+.md-hardbreak-src .md-ws-space::before {
+	color: #4a90d9;
+}
+
+.md-hardbreak-src-hidden {
+	display: none;
+}
+
+/*
+ * 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.
+ */
+.md-glue-hidden {
+	display: inline;
+	visibility: hidden;
+}
+
+/*
+ * 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
+ * the end of that block's last line rather than on its own lines between the
+ * blocks. When a neighbouring block is active it is revealed: each blank-line
+ * newline shows a real `↵` glyph character (`.md-ws-newline-glyph`) while the
+ * trailing line-terminator `\n` collapses (`white-space: normal`) so the run
+ * adds no line break and no height — active and inactive therefore have the
+ * same height. When hidden it collapses to nothing.
+ */
+.md-glue-blockGap {
+	white-space: normal;
+}
+
+/*
+ * The structural block break between two top-level blocks. Like `.md-glue-blockGap`
+ * its trailing line-terminator `\n` collapses (`white-space: normal`) so the run
+ * adds no height; its leading newline is painted as the blue break glyph
+ * (`.md-ws-blockbreak-glyph`).
+ */
+.md-glue-blockBreak {
+	white-space: normal;
+}
+
+/*
+ * The task-list checkbox marker (`[x]`/`[ ]`) is special: instead of being
+ * removed from layout when hidden, it keeps its inline width (visibility
+ * hidden) and the rendered checkbox is overlaid on top of it. This keeps the
+ * inline flow identical in active and inactive mode, so the text following
+ * the marker does not drift horizontally when markers are toggled.
+ */
+.md-marker-checkbox.md-marker-hidden {
+	display: inline;
+	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
+ * none) so the inactive block reserves the same two fence lines the active
+ * block shows. This keeps the code block's height identical between active and
+ * inactive, avoiding a layout shift on focus.
+ */
+.md-marker-openFence.md-marker-hidden,
+.md-marker-closeFence.md-marker-hidden {
+	display: inline;
+	visibility: hidden;
+}
+
+/*
+ * The table delimiter (`| --- | --- |`) row is collapsed entirely while the
+ * table is inactive and revealed — compact, small font — while active. The
+ * header reserves the matching vertical space when inactive (in the theme
+ * files), so the total table height is unchanged between the two states.
+ */
+.md-table-delimiter-row {
+	display: none;
+}
+
+.md-block-active .md-table-delimiter-row {
+	display: table-row;
+}
+
+.md-table-delimiter-row td {
+	padding: 0;
+	font-size: 11px;
+	line-height: 1;
+	height: 16px;
+}
+
+.md-selection-layer {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+	overflow: visible;
+}
+
+.md-selection-path {
+	fill: rgba(59, 130, 246, 0.25);
+}
+
+/* Source markers occupy the gutter so toggling them never shifts content. */
+.md-heading {
+	position: relative;
+}
+
+.md-heading>.md-marker:first-child {
+	position: absolute;
+	right: 100%;
+	white-space: pre;
+	top: 0;
+	/* Match the heading's line box (font-size + line-height inherited) so the
+	 * marker box equals the first text line at every heading level; then center
+	 * the glyph vertically and shrink it back to the muted marker size. */
+	font-size: inherit;
+	line-height: inherit;
+	height: 1lh;
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
+	transform: scale(0.85);
+	transform-origin: right center;
+}
+
+/*
+ * The gutter rule above sets `display: inline-flex`, which outranks the plain
+ * `.md-marker-hidden { display: none }` (more specific), so the marker must be
+ * re-hidden here for the inactive heading — otherwise the `#` would always show.
+ */
+.md-heading>.md-marker-hidden:first-child {
+	display: none;
+}
+
+/*
+ * Block-quote prefixes (`> `, one per quoted source line) are real
+ * `blockQuoteMarker` markers, siblings of the quote's child blocks. Each hangs
+ * in the quote's left padding instead of taking inline width: its right edge is
+ * pulled to the content edge (`right: 100% - pad`) so the `>` sits just left of
+ * the quoted text, and `top: auto` keeps it on its own source line. Because the
+ * markers add no inline width, the quoted text keeps the exact same x in active
+ * and inactive mode (toggling the prefix never shifts content); because every
+ * marker measures from the same content edge, the markers of one quote stack in
+ * a single vertical column, and a nested quote — itself inset by the outer
+ * quote's padding — forms its own column one level in.
+ *
+ * `--md-blockquote-pad` is the quote's own left padding, published by the theme
+ * so this functional rule can find the content edge without hard-coding it.
+ */
+.md-blockquote {
+	position: relative;
+}
+
+.md-blockquote>.md-marker-blockQuoteMarker {
+	position: absolute;
+	right: calc(100% - var(--md-blockquote-pad, 0px));
+	top: auto;
+	white-space: pre;
+}
+
+/* Inactive: gone entirely (the gutter is empty, the text stays put). */
+.md-blockquote>.md-marker-blockQuoteMarker.md-marker-hidden {
+	display: none;
+}
+
+/* Code/math blocks scroll horizontally; their look is theme-defined. */
+.md-code-block {
+	overflow-x: auto;
+}
+
+.md-math-block {
+	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;
+}
+
+.md-list li>.md-block {
+	margin: 0;
+}
+
+.md-list li>.md-block+.md-block {
+	margin-top: 0.25em;
+}
+
+.md-list-item-active {
+	list-style: none;
+	position: relative;
+}
+
+/*
+ * The list marker is pulled into the gutter by markerKind (not `:first-child`),
+ * because a nested item may carry its source indentation as a leading glue
+ * before the marker. Gutter-positioning keeps the marker out of the inline
+ * flow so toggling it never shifts the item's text horizontally.
+ *
+ * `line-height: inherit` makes the marker share the item's line box (its own
+ * `.md-marker` rule shrinks it to `line-height: 1`, which floats the glyph to
+ * the top of the taller text line); matching the line box vertically centres
+ * the `-` with the rendered text.
+ */
+.md-list-item-active>.md-marker-listItemMarker {
+	position: absolute;
+	right: 100%;
+	top: 0;
+	line-height: inherit;
+	white-space: pre;
+}
+
+/*
+ * A nested item's source indentation precedes its bullet (`␣␣- text`). The
+ * indent glue and the bullet are mounted together in this gutter span, which is
+ * pulled out of flow with its right edge at the content edge. The gutter itself
+ * is shrink-to-fit: the dot run gets a fixed *structural* width of `(level − 1)`
+ * indent steps and the bullet contributes its own intrinsic width on top, so the
+ * gutter's left edge lands exactly one bullet-width left of the root content
+ * column — i.e. aligned with the root bullet. The dot run's width is driven by
+ * the nesting level rather than the literal source glyphs, so the dots fill the
+ * whole indentation column, every level lines up in a vertical track aligned to
+ * the root bullet, and a leading tab lands on the same column as the equivalent
+ * spaces. The glue's revealed dots are spread across the column; the bullet sits
+ * flush against the text. It is absolute in both states (not just active) so the
+ * hidden indentation never widens the line.
+ */
+.md-list-gutter {
+	position: absolute;
+	right: 100%;
+	display: flex;
+	white-space: pre;
+}
+
+.md-list-gutter>.md-glue-indent {
+	flex: 0 0 calc((var(--md-list-level, 1) - 1) * var(--md-list-indent-step, 2em));
+	display: flex;
+	justify-content: space-between;
+}
+
+.md-list-gutter>.md-marker-listItemMarker {
+	flex: 0 0 auto;
+}
+
+
+/*
+ * Re-attributed source indentation (the spaces after a line break that precede
+ * a nested list) keeps its exact width in both states: `white-space: pre` so
+ * the run does not collapse, paired with the hidden footprint of
+ * `.md-glue-hidden` when inactive. This keeps the nested item's text at the
+ * same horizontal position whether or not the indentation dots are shown.
+ */
+.md-glue-indent {
+	white-space: pre;
+}
+
+.md-task-list-item {
+	list-style: none;
+	position: relative;
+}
+
+/*
+ * 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
+ * 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;
+}
+
+.md-checkbox {
+	/* The rendered task-list widget — editor chrome, not markdown typography. */
+	appearance: none;
+	-webkit-appearance: none;
+	margin: 0;
+	width: 16px;
+	height: 16px;
+	border: 2px solid #bbb;
+	border-radius: 3px;
+	position: absolute;
+	left: 0;
+	top: 0.25em;
+	cursor: pointer;
+	transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.md-checkbox:checked {
+	background-color: #4c8bf5;
+	border-color: #4c8bf5;
+}
+
+.md-checkbox:checked::after {
+	content: '';
+	position: absolute;
+	left: 3px;
+	top: 0px;
+	width: 5px;
+	height: 9px;
+	border: solid white;
+	border-width: 0 2px 2px 0;
+	transform: rotate(45deg);
+}
+
+.md-checkbox:hover {
+	border-color: #888;
+}
+
+.md-checkbox:checked:hover {
+	background-color: #3a73d4;
+	border-color: #3a73d4;
+}
+
+.md-checkbox:disabled {
+	cursor: default;
+	opacity: 0.6;
+}
+
+.md-cursor {
+	position: absolute;
+	width: 2px;
+	background: #000;
+	pointer-events: none;
+	animation: md-cursor-blink 1s step-end infinite;
+}
+
+@keyframes md-cursor-blink {
+
+	0%,
+	100% {
+		opacity: 1;
+	}
+
+	50% {
+		opacity: 0;
+	}
+}