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

package/src/view/themes/default.css

@@ -12,6 +12,7 @@
  */
 
 .md-editor.md-theme-default {
+    color-scheme: light;
     font-family: system-ui, -apple-system, sans-serif;
     font-size: 16px;
     line-height: 1.6;
@@ -29,7 +30,7 @@
 .md-theme-default .md-code-block {
     background: #f4f4f4;
     border-radius: 4px;
-    padding: 12px 16px;
+    padding: 8px 12px;
     margin: 0.5em 0;
 }
 
@@ -121,9 +122,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 +207,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 +218,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 +229,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 {

package/src/view/themes/github.css

@@ -14,12 +14,12 @@
  */
 
 .md-editor.github-markdown-theme {
+    color-scheme: light;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans',
         Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
     font-size: 16px;
     line-height: 1.5;
     color: #1f2328;
-    max-width: 800px;
     word-wrap: break-word;
 }
 
@@ -67,14 +67,8 @@
 .github-markdown-theme .md-blockquote {
     margin: 0 0 16px 0;
     padding: 0 1em;
-    /*
-     * The left padding the `>` gutter hangs in (matches padding-left: 1em at
-     * the 16px blockquote 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 `>` ~2px out of alignment with the text.
-     */
-    --md-blockquote-pad: 16px;
+    /* Matches padding-left; `em` is safe because shared marker geometry inherits font size. */
+    --md-blockquote-pad: 1em;
     color: #59636e;
     border-left: 0.25em solid #d1d9e0;
 }
@@ -100,10 +94,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;
@@ -125,7 +115,7 @@
 .github-markdown-theme .md-code-block {
     margin-top: 0;
     margin-bottom: 16px;
-    padding: 10px 16px;
+    padding: 8px 12px;
     font-size: 85%;
     line-height: 1.45;
     background-color: #f6f8fa;
@@ -202,10 +192,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;
 }
 
@@ -285,6 +280,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.
  */
 .github-markdown-theme .md-table.md-block-active td:last-child {
     position: relative;
@@ -293,7 +291,7 @@
 .github-markdown-theme .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }
 
 /*
@@ -304,5 +302,5 @@
 .github-markdown-theme .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
     position: absolute;
     right: 0;
-    top: 0;
+    top: auto;
 }

package/src/view/themes/vscode-default.css

@@ -0,0 +1,397 @@
+/*
+ * VS Code markdown theme — default preview variant (`md-theme-vscode-default`).
+ *
+ * One of two `--vscode-*`-variable-driven themes. This variant mirrors VS
+ * Code's own markdown *preview* stylesheet
+ * (`markdown-language-features/media/markdown.css`): a 14px base with a 22px
+ * line box, headings underlined with a 1px rule, a 5px blockquote bar, and
+ * code blocks framed by a 1px border on the editor's code-block background.
+ * Its heading scale is moderately reduced to better fit narrower editor panes.
+ * The sibling `vscode-github.css` (`md-theme-vscode-github`) instead mirrors
+ * GitHub's layout (16px base, badge-style inline code, zebra tables).
+ *
+ * Both themes are *variable-driven*: every color is `var(--vscode-*, …)` so the
+ * editor adopts whatever VS Code color theme is active WITHOUT the editor
+ * knowing anything about VS Code. They share the same `--md-tok-*` token
+ * palette, so only layout/typography differs between the two.
+ *
+ * Apply it via the editor `classNames` option:
+ *
+ *     new EditorView(model, { classNames: ['md-theme-vscode-default'] });
+ *
+ * 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`).
+ *
+ * Fallbacks: each `var()` carries a light-palette fallback so the theme stays
+ * legible even with no `--vscode-*` variables present at all. 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.
+ */
+
+.md-editor.md-theme-vscode-default {
+    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, 14px);
+    line-height: var(--markdown-line-height, 1.572);
+    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-html-comment-foreground: var(--vscode-descriptionForeground, #616161);
+    --md-html-comment-hover-foreground: var(--vscode-editor-foreground, #1f2328);
+    --md-html-comment-font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
+            'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);
+    --md-readonly-background: var(--vscode-button-secondaryBackground,
+            var(--vscode-editorWidget-background, #f3f3f3));
+    --md-readonly-background-hover: var(--vscode-button-secondaryHoverBackground,
+            var(--vscode-button-secondaryBackground,
+                var(--vscode-editorWidget-background, #e9e9e9)));
+    --md-readonly-foreground: var(--vscode-button-secondaryForeground,
+            var(--vscode-editorWidget-foreground, #444));
+    --md-readonly-border: var(--vscode-button-secondaryBorder,
+            var(--vscode-button-border,
+                var(--vscode-contrastBorder, var(--vscode-editorWidget-border, #b8b8b8))));
+    --md-readonly-border-hover: var(--vscode-button-secondaryBorder,
+            var(--vscode-button-border,
+                var(--vscode-contrastBorder, var(--vscode-editorWidget-border, #8d8d8d))));
+    --md-readonly-accent: var(--vscode-button-background, rgb(45, 92, 180));
+    --md-readonly-accent-foreground: var(--vscode-button-foreground, #fff);
+    --md-find-widget-background: var(--vscode-editorWidget-background, #f3f3f3);
+    --md-find-widget-foreground: var(--vscode-editorWidget-foreground, #222);
+    --md-find-widget-border: var(--vscode-editorWidget-border, #c8c8c8);
+    --md-find-widget-shadow: var(--vscode-widget-shadow, rgba(0, 0, 0, 0.2));
+    --md-find-input-background: var(--vscode-input-background, #fff);
+    --md-find-input-foreground: var(--vscode-input-foreground, #222);
+    --md-find-placeholder-foreground: var(--vscode-input-placeholderForeground, #767676);
+    --md-find-input-caret: var(--vscode-editorCursor-foreground, currentColor);
+    --md-find-input-border: var(--vscode-input-border, #cecece);
+    --md-find-count-foreground: var(--vscode-editorWidget-foreground, #222);
+    --md-find-focus-border: var(--vscode-focusBorder, #007fd4);
+    --md-find-button-hover-background: var(--vscode-inputOption-hoverBackground, rgba(128, 128, 128, 0.18));
+    --md-find-disabled-foreground: var(--vscode-disabledForeground, rgba(97, 97, 97, 0.5));
+    --md-find-editor-background: var(--vscode-editor-background, #ffffff);
+    --md-find-match-background: var(--vscode-editor-findMatchHighlightBackground, rgba(234, 92, 0, 0.33));
+    --md-find-current-background: var(--vscode-editor-findMatchBackground, #a8ac94);
+    --md-find-current-border: var(--vscode-editor-findMatchBorder,
+            color-mix(in srgb, var(--vscode-editorWidget-foreground, #616161) 55%,
+                var(--vscode-editor-findMatchBackground, #a8ac94)));
+    --md-find-option-background: var(--vscode-inputOption-activeBackground, #007acc);
+    --md-find-option-border: color-mix(in srgb,
+            var(--vscode-focusBorder, #007acc) 70%,
+            var(--vscode-inputOption-activeForeground, #000000));
+    --md-find-option-foreground: var(--vscode-inputOption-activeForeground, #fff);
+    --md-find-error-border: var(--vscode-inputValidation-errorBorder, #be1100);
+    --md-find-error-foreground: var(--vscode-errorForeground, #a1260d);
+    --md-separator-color: color-mix(in srgb,
+            var(--vscode-textSeparator-foreground, #d1d9e0) 60%, transparent);
+    --md-inline-code-background: color-mix(in srgb,
+            var(--vscode-textPreformat-background, #818b981f) 60%, transparent);
+}
+
+.vscode-high-contrast .md-editor.md-theme-vscode-default,
+.vscode-high-contrast-light .md-editor.md-theme-vscode-default {
+    --md-separator-color: var(--vscode-textSeparator-foreground, currentColor);
+    --md-inline-code-background: var(--vscode-textPreformat-background, #818b981f);
+}
+
+.md-theme-vscode-default .md-heading {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+}
+
+.md-theme-vscode-default h1.md-heading {
+    font-size: 1.75em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--md-separator-color);
+}
+
+.md-theme-vscode-default h2.md-heading {
+    font-size: 1.4em;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--md-separator-color);
+}
+
+.md-theme-vscode-default h3.md-heading {
+    font-size: 1.2em;
+}
+
+.md-theme-vscode-default h4.md-heading {
+    font-size: 1em;
+}
+
+.md-theme-vscode-default h5.md-heading {
+    font-size: 0.875em;
+}
+
+.md-theme-vscode-default h6.md-heading {
+    font-size: 0.85em;
+}
+
+.md-theme-vscode-default .md-paragraph {
+    margin-top: 0;
+    margin-bottom: 16px;
+}
+
+/*
+ * Preview blockquotes keep the normal foreground color (no dimming) and use a
+ * thick 5px rule with the VS Code blockquote surface tint.
+ */
+.md-theme-vscode-default .md-blockquote {
+    margin: 0 0 16px 0;
+    padding: 0 16px 0 12px;
+    /* The left padding the `>` gutter hangs in (matches padding-left). */
+    --md-blockquote-pad: 12px;
+    background-color: var(--vscode-textBlockQuote-background, transparent);
+    border-left: 5px solid var(--vscode-textBlockQuote-border, #d1d9e0);
+    border-radius: 2px;
+}
+
+.md-theme-vscode-default .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;
+}
+
+/* Preview renders thematic breaks as a thin 1px rule rather than a thick bar. */
+.md-theme-vscode-default .md-thematic-break {
+    height: 0;
+    padding: 0;
+    margin: 24px 0;
+    border: 0;
+    border-bottom: 1px solid var(--md-separator-color);
+}
+
+.md-theme-vscode-default a {
+    color: var(--vscode-textLink-foreground, #0969da);
+    text-decoration: none;
+}
+
+.md-theme-vscode-default a:hover {
+    text-decoration: underline;
+}
+
+.md-theme-vscode-default strong {
+    font-weight: 600;
+}
+
+/*
+ * Inline code. Preview keeps inline code at the body font size (1em) on a
+ * softened VS Code preformat surface, with only a small inset — no GitHub-style
+ * badge.
+ */
+.md-theme-vscode-default :not(pre)>code {
+    font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular,
+            'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace);
+    font-size: 1em;
+    line-height: 1.357em;
+    padding: 1px 3px;
+    margin: 0;
+    color: var(--vscode-textPreformat-foreground, inherit);
+    background-color: var(--md-inline-code-background);
+    border-radius: 4px;
+    white-space: break-spaces;
+}
+
+/* Fenced code block: framed by a 1px border, preview-style. */
+.md-theme-vscode-default .md-code-block {
+    margin-top: 0;
+    margin-bottom: 16px;
+    padding: 6px 10px;
+    line-height: 1.357;
+    background-color: var(--vscode-textCodeBlock-background, #f6f8fa);
+    border: 1px solid var(--vscode-widget-border, #d1d9e0);
+    border-radius: 3px;
+}
+
+.md-theme-vscode-default .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-default .md-code-block .tok-keyword {
+    color: var(--md-tok-keyword, #0000ff);
+}
+
+.md-theme-vscode-default .md-code-block .tok-string {
+    color: var(--md-tok-string, #a31515);
+}
+
+.md-theme-vscode-default .md-code-block .tok-comment {
+    color: var(--md-tok-comment, #008000);
+}
+
+.md-theme-vscode-default .md-code-block .tok-number {
+    color: var(--md-tok-number, #098658);
+}
+
+.md-theme-vscode-default .md-code-block .tok-regexp {
+    color: var(--md-tok-regexp, #811f3f);
+}
+
+.md-theme-vscode-default .md-code-block .tok-type {
+    color: var(--md-tok-type, #267f99);
+}
+
+.md-theme-vscode-default .md-code-block .tok-annotation {
+    color: var(--md-tok-annotation, #267f99);
+}
+
+.md-theme-vscode-default .md-code-block .tok-tag {
+    color: var(--md-tok-tag, #800000);
+}
+
+.md-theme-vscode-default .md-code-block .tok-attribute {
+    color: var(--md-tok-attribute, #e50000);
+}
+
+.md-theme-vscode-default .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-default .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-default .md-inline-math .katex {
+    line-height: 1;
+}
+
+.md-theme-vscode-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-top: 0;
+    margin-bottom: 16px;
+}
+
+.md-theme-vscode-default .md-table {
+    border-collapse: collapse;
+    width: auto;
+}
+
+.md-theme-vscode-default .md-table th,
+.md-theme-vscode-default .md-table td {
+    padding: 5px 10px;
+    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-default .md-table tr:first-child td {
+    font-weight: 600;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+/* Active: reclaim the header's extra spacing to host the delimiter row. */
+.md-theme-vscode-default .md-table.md-block-active tr:first-child td {
+    padding-top: 2px;
+    padding-bottom: 2px;
+}
+
+.md-theme-vscode-default .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 space reclaimed from the header.
+ */
+.md-theme-vscode-default .md-table-delimiter-row td {
+    border: 0;
+    padding: 0 10px;
+    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-default .md-table.md-block-active td {
+    border-color: transparent;
+}
+
+.md-theme-vscode-default .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-default .md-table.md-block-active td>.md-glue-tableCellGlue:first-child,
+.md-theme-vscode-default .md-table.md-block-active .md-table-delimiter-row td>.md-marker-tableDelimiter {
+    position: relative;
+    left: -10px;
+}
+
+/*
+ * 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, 10px past the
+ * content box) so the right outline is a straight line. `top: auto` keeps the
+ * pipe on the content line (the shared editor.css rule takes it out of flow);
+ * the previous `top: 0` floated it to the cell's top edge, so on tall/wrapping
+ * rows it no longer lined up with the in-flow leading pipes.
+ */
+.md-theme-vscode-default .md-table.md-block-active td:last-child {
+    position: relative;
+}
+
+.md-theme-vscode-default .md-table.md-block-active td:last-child>.md-glue-tableCellGlue:last-child {
+    position: absolute;
+    right: 0;
+    top: auto;
+}
+
+/*
+ * 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-default .md-table.md-block-active .md-table-delimiter-row td:last-child>.md-marker-tableDelimiterClose {
+    position: absolute;
+    right: 0;
+    top: auto;
+}