@inkandswitch/patchwork-pkg-base 0.0.128 → 0.0.130

package/packages/codemirror-markdown/dist/extensions/markdown.js

@@ -2167,6 +2167,7 @@ var TaskWidget = class extends WidgetType {
     box.disabled = !view.state.facet(EditorView2.editable);
     box.setAttribute("aria-label", this.checked ? "Done" : "To do");
     box.addEventListener("mousedown", (event) => {
+      if (event.button !== 0) return;
       event.preventDefault();
       if (box.disabled) return;
       toggle(view, view.posAtDOM(box));
@@ -2235,18 +2236,23 @@ import {
   WidgetType as WidgetType2
 } from "@codemirror/view";
 var hidden = Decoration3.replace({});
-var taskMark = Decoration3.mark({ class: "cm-md-hang", inclusive: true });
+var taskMark = Decoration3.mark({
+  class: "cm-md-hang cm-md-list-marker",
+  inclusive: true
+});
 var HeadingLabel = class extends WidgetType2 {
-  constructor(level) {
+  /** `shown` only on the caret's line; elsewhere it keeps its room, unseen. */
+  constructor(level, shown) {
     super();
     this.level = level;
+    this.shown = shown;
   }
   eq(other) {
-    return other.level === this.level;
+    return other.level === this.level && other.shown === this.shown;
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang cm-md-heading-label";
+    span.className = `cm-md-hang cm-md-heading-label${this.shown ? "" : " cm-md-heading-label-idle"}`;
     span.setAttribute("aria-hidden", "true");
     const n = document.createElement("span");
     n.className = "cm-md-heading-level";
@@ -2261,7 +2267,7 @@ var Bullet = class extends WidgetType2 {
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang";
+    span.className = "cm-md-hang cm-md-list-marker";
     const dot = document.createElement("span");
     dot.className = "cm-bullet";
     span.append(dot);
@@ -2278,7 +2284,7 @@ var NumberLabel = class extends WidgetType2 {
   }
   toDOM() {
     const span = document.createElement("span");
-    span.className = "cm-md-hang cm-md-hang-number";
+    span.className = "cm-md-hang cm-md-list-marker cm-md-hang-number";
     span.textContent = this.text;
     return span;
   }
@@ -2342,6 +2348,85 @@ function alpha(n) {
   }
   return out;
 }
+var codeLine = Decoration3.line({ class: "cm-md-code" });
+var calloutMarker = Decoration3.mark({ class: "cm-md-callout-marker" });
+function caretLines(state) {
+  const lines = /* @__PURE__ */ new Set();
+  for (const r of state.selection.ranges) {
+    const last = state.doc.lineAt(r.to).number;
+    for (let n = state.doc.lineAt(r.from).number; n <= last; n++) lines.add(n);
+  }
+  return lines;
+}
+var CALLOUTS = {
+  note: "Note",
+  tip: "Tip",
+  important: "Important",
+  warning: "Warning",
+  caution: "Caution"
+};
+function calloutAt(line) {
+  const m = /^((?:\s*>\s?)+)\[!(\w+)\][ \t]*(.*)$/.exec(line.text);
+  if (!m) return null;
+  const type = m[2].toLowerCase();
+  if (!(type in CALLOUTS)) return null;
+  const from = line.from + m[1].length;
+  return {
+    type,
+    from,
+    to: line.from + line.text.length - m[3].length,
+    titled: m[3].trim() !== ""
+  };
+}
+var ICONS = {
+  note: '<circle cx="8" cy="8" r="6.25"/><path d="M8 7.25v4M8 4.75v.01"/>',
+  tip: '<path d="M5.75 11.5h4.5M6.5 14h3M8 1.75a4.25 4.25 0 0 0-2.5 7.7c.5.4.75.9.75 1.55V11.5h3.5V11c0-.65.25-1.15.75-1.55A4.25 4.25 0 0 0 8 1.75z"/>',
+  important: '<path d="M2.25 3.25a1.5 1.5 0 0 1 1.5-1.5h8.5a1.5 1.5 0 0 1 1.5 1.5v6.5a1.5 1.5 0 0 1-1.5 1.5H7l-3 2.5v-2.5h-.25a1.5 1.5 0 0 1-1.5-1.5z"/><path d="M8 4.5v3M8 9.5v.01"/>',
+  warning: '<path d="M7.13 2.25a1 1 0 0 1 1.74 0l5.6 9.75a1 1 0 0 1-.87 1.5H2.4a1 1 0 0 1-.87-1.5z"/><path d="M8 6v3M8 11v.01"/>',
+  caution: '<path d="M5.5 1.75h5l3.75 3.75v5l-3.75 3.75h-5L1.75 10.5v-5z"/><path d="M8 5v3.5M8 10.75v.01"/>'
+};
+var CalloutTitle = class extends WidgetType2 {
+  constructor(type, label) {
+    super();
+    this.type = type;
+    this.label = label;
+  }
+  eq(other) {
+    return other.type === this.type && other.label === this.label;
+  }
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-md-callout-title";
+    span.innerHTML = `<svg viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${ICONS[this.type]}</svg>`;
+    if (this.label) span.append(CALLOUTS[this.type]);
+    else span.setAttribute("aria-label", CALLOUTS[this.type]);
+    return span;
+  }
+};
+function listLines(state, from, to, decos) {
+  const { doc: doc2 } = state;
+  const tree = syntaxTree2(state);
+  const last = doc2.lineAt(to).number;
+  for (let n = doc2.lineAt(from).number; n <= last; n++) {
+    const line = doc2.line(n);
+    const indent = /^[ \t]*/.exec(line.text)[0].length;
+    if (indent === line.length) continue;
+    let depth = 0;
+    let code = false;
+    for (let node = tree.resolveInner(line.from + indent, 1); node; node = node.parent) {
+      if (node.name === "ListItem") depth++;
+      if (node.name === "FencedCode" || node.name === "CodeBlock") code = true;
+    }
+    if (!depth) continue;
+    decos.push(
+      Decoration3.line({
+        class: "cm-md-list-line",
+        attributes: { style: `--md-list-depth: ${depth}` }
+      }).range(line.from)
+    );
+    if (indent && !code) decos.push(hidden.range(line.from, line.from + indent));
+  }
+}
 function skipSpaces(state, pos) {
   const line = state.doc.lineAt(pos);
   while (pos < line.to && state.doc.sliceString(pos, pos + 1) === " ") pos++;
@@ -2350,6 +2435,7 @@ function skipSpaces(state, pos) {
 function build2(view) {
   const { state } = view;
   const { doc: doc2 } = state;
+  const editing = caretLines(state);
   const decos = [];
   for (const { from, to } of view.visibleRanges) {
     syntaxTree2(state).iterate({
@@ -2361,10 +2447,14 @@ function build2(view) {
         if (heading) {
           const mark = node.node.firstChild;
           if (!mark || mark.name !== "HeaderMark") return;
+          const line = doc2.lineAt(node.from);
           decos.push(
             Decoration3.replace({
-              widget: new HeadingLabel(Number(heading[1]))
-            }).range(doc2.lineAt(node.from).from, skipSpaces(state, mark.to))
+              widget: new HeadingLabel(Number(heading[1]), editing.has(line.number))
+            }).range(line.from, skipSpaces(state, mark.to)),
+            // the heading's size on the whole line, for what the highlighter
+            // doesn't wrap (a rendered link): see headingLines in the theme.
+            Decoration3.line({ class: `cm-md-h${heading[1]}` }).range(line.from)
           );
           return;
         }
@@ -2394,20 +2484,43 @@ function build2(view) {
           }
           return;
         }
+        if ((name === "BulletList" || name === "OrderedList") && node.node.parent?.name !== "ListItem") {
+          listLines(state, node.from, node.to, decos);
+          return;
+        }
+        if (name === "FencedCode" || name === "CodeBlock") {
+          const first = doc2.lineAt(node.from).number;
+          const last = doc2.lineAt(node.to).number;
+          for (let n = first; n <= last; n++)
+            decos.push(codeLine.range(doc2.line(n).from));
+          return false;
+        }
         if (name === "Blockquote") {
           for (let p = node.node.parent; p; p = p.parent)
             if (p.name === "Blockquote") return;
           const first = doc2.lineAt(node.from).number;
           const last = doc2.lineAt(node.to).number;
+          const callout = calloutAt(doc2.line(first));
           for (let n = first; n <= last; n++) {
             const line = doc2.line(n);
             const classes = ["cm-md-quote"];
             if (n === first) classes.push("cm-md-quote-first");
             if (n === last) classes.push("cm-md-quote-last");
+            if (callout) {
+              classes.push("cm-md-callout", `cm-md-callout-${callout.type}`);
+              if (n === first) classes.push("cm-md-callout-title-line");
+            }
             decos.push(
               Decoration3.line({ class: classes.join(" ") }).range(line.from)
             );
           }
+          if (callout) {
+            decos.push(
+              editing.has(first) ? calloutMarker.range(callout.from, callout.to) : Decoration3.replace({
+                widget: new CalloutTitle(callout.type, !callout.titled)
+              }).range(callout.from, callout.to)
+            );
+          }
           return;
         }
         if (name === "QuoteMark") {
@@ -2435,7 +2548,7 @@ var marginPlugin = ViewPlugin3.fromClass(
       this.decorations = build2(view);
     }
     update(update) {
-      if (update.docChanged || update.viewportChanged || syntaxTree2(update.startState) !== syntaxTree2(update.state)) {
+      if (update.docChanged || update.selectionSet || update.viewportChanged || syntaxTree2(update.startState) !== syntaxTree2(update.state)) {
         this.decorations = build2(update.view);
       }
     }
@@ -2445,7 +2558,9 @@ var marginPlugin = ViewPlugin3.fromClass(
 var zoomed = (length) => `calc(${length} * var(--markdown-zoom, 1))`;
 var marginTheme = EditorView3.baseTheme({
   ".cm-content": {
-    "--markdown-hang": zoomed("2.5rem")
+    "--markdown-hang": zoomed("2.5rem"),
+    "--markdown-list-indent": zoomed("1.6rem"),
+    "--markdown-quote-indent": zoomed("1.1rem")
   },
   ".cm-md-hang": {
     display: "inline-flex",
@@ -2478,31 +2593,137 @@ var marginTheme = EditorView3.baseTheme({
     fontFamily: "var(--markdown-body-family, inherit)",
     letterSpacing: "0.02em"
   },
+  ".cm-md-heading-label-idle": {
+    visibility: "hidden"
+  },
+  // a list line: padded one indent per level (CodeMirror's own 6px first)
+  ".cm-md-list-line": {
+    paddingLeft: "calc(6px + var(--md-list-depth, 1) * var(--markdown-list-indent))"
+  },
+  // its marker, in that padding: from the start of the indent, not hung right
+  ".cm-md-list-marker": {
+    width: "var(--markdown-list-indent)",
+    marginLeft: "calc(-1 * var(--markdown-list-indent))",
+    justifyContent: "flex-start",
+    paddingRight: "0"
+  },
   ".cm-md-heading-level": {
     fontSize: "0.75em",
     verticalAlign: "-0.15em"
   },
   ".cm-md-hang .cm-bullet": {
     display: "inline-block",
-    width: "0.4em",
-    height: "0.4em",
+    width: "0.5em",
+    height: "0.5em",
+    // in the box's left, centred under where a number's first digit sits
+    marginLeft: "0.15em",
     borderRadius: "50%",
-    background: "var(--syntax-list-marker, currentColor)",
-    color: "var(--text-editor-line)",
+    // theming's list marker colour (the primary accent, as ink)
+    background: "var(--syntax-list-marker, var(--text-editor-primary-text, currentColor))",
     alignSelf: "center"
   },
   ".cm-md-hang .cm-task": {
     margin: "0"
   },
+  // a quote: its bar on the body's column, its text one quote indent in
   ".cm-md-quote": {
-    position: "relative"
+    position: "relative",
+    paddingLeft: "calc(6px + var(--markdown-quote-indent))"
+  },
+  ".cm-md-code": {
+    fontFamily: "var(--text-editor-family-code)"
+  },
+  // GitHub-style callouts. Colours from theming's --studio-callout-* (the
+  // accent: bar) and --text-editor-callout-*-text/-fill (title ink, box
+  // tint), with fallbacks for running without the theme.
+  ...Object.fromEntries(
+    Object.keys(CALLOUTS).map((type) => {
+      const fallback = { note: "#36e", tip: "#1a7f37", important: "#8250df", warning: "#d4a72c", caution: "#d1242f" }[type];
+      return [
+        `.cm-md-callout-${type}`,
+        {
+          "--md-callout": `var(--studio-callout-${type}, ${fallback})`,
+          "--md-callout-text": `var(--text-editor-callout-${type}-text, color-mix(in oklch, var(--md-callout), currentColor 35%))`,
+          "--md-callout-fill": `var(--text-editor-callout-${type}-fill, color-mix(in oklch, var(--md-callout) 9%, transparent))`
+        }
+      ];
+    })
+  ),
+  ".cm-md-callout": {
+    // the body reads as body text, not as a quote: the theme's quote styling
+    // (italic, the punctuation grey) comes through these variables.
+    "--syntax-quote": "var(--text-editor-line)",
+    "--syntax-style-quote": "normal",
+    "--syntax-weight-quote": "normal",
+    "--syntax-fill-quote": "transparent",
+    // a stacking context, so the tint drawn behind the text (z-index -1)
+    // stays above the editor's own background.
+    isolation: "isolate",
+    paddingRight: zoomed("0.75rem")
+  },
+  // (doubled up to outrank the plain quote bar's rule further down)
+  ".cm-md-quote.cm-md-callout::before": {
+    background: "var(--md-callout)",
+    opacity: "1"
+  },
+  ".cm-md-callout::after": {
+    content: '""',
+    position: "absolute",
+    zIndex: "-1",
+    left: "6px",
+    right: "0",
+    top: "0",
+    bottom: "0",
+    background: "var(--md-callout-fill)"
+  },
+  ".cm-md-callout.cm-md-quote-first": {
+    paddingTop: zoomed("0.5rem")
+  },
+  ".cm-md-callout.cm-md-quote-last": {
+    paddingBottom: zoomed("0.5rem")
+  },
+  ".cm-md-callout.cm-md-quote-first::before, .cm-md-callout.cm-md-quote-first::after": {
+    top: "0",
+    borderTopRightRadius: "6px"
+  },
+  ".cm-md-callout.cm-md-quote-last::before, .cm-md-callout.cm-md-quote-last::after": {
+    bottom: "0",
+    borderBottomRightRadius: "6px"
+  },
+  ".cm-md-callout.cm-md-quote-first::before": { borderTopRightRadius: "0" },
+  ".cm-md-callout.cm-md-quote-last::before": { borderBottomRightRadius: "0" },
+  ".cm-md-callout-title-line": {
+    color: "var(--md-callout-text)",
+    fontWeight: "600"
+  },
+  ".cm-md-callout-title": {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.4em",
+    color: "var(--md-callout-text)",
+    fontWeight: "600",
+    marginRight: "0.4em"
+  },
+  ".cm-md-callout-title svg": {
+    width: "1em",
+    height: "1em",
+    flex: "none"
+  },
+  // the raw `[!NOTE]`, on the caret's line. it parses as a reference link,
+  // so the highlighter's link colour and underline are undone inside it.
+  ".cm-md-callout-marker, .cm-md-callout-marker *": {
+    color: "var(--md-callout-text)",
+    textDecoration: "none"
+  },
+  ".cm-md-callout-marker": {
+    fontFamily: "var(--text-editor-family-code)",
+    fontSize: "0.9em"
   },
   ".cm-md-quote::before": {
     content: '""',
     position: "absolute",
-    // on the bullets' column: centred on where a hung dot sits (the hang's
-    // right padding, then half a dot at the hang's 0.8rem).
-    left: `calc(-1 * (${zoomed("0.6rem")} + ${zoomed("0.16rem")}) - 1.5px)`,
+    // on the body's column (past CodeMirror's own 6px line padding)
+    left: "6px",
     top: "0",
     bottom: "0",
     width: "3px",
@@ -2690,9 +2911,6 @@ function renumber(state, list) {
   });
   return changes;
 }
-function needsRenumber(state, list) {
-  return list.name === "OrderedList" && renumber(state, list).length > 0;
-}
 function clearDone(state, list) {
   const all = items(list);
   const gone = new Set(all.flatMap((it, i) => done(state, it) ? [i] : []));
@@ -2825,16 +3043,28 @@ function menuItems(view, pos) {
   if (!list) return [];
   const apply = (changes, userEvent) => () => view.dispatch({ changes, userEvent });
   const out = [];
-  if (needsRenumber(state, list)) {
-    out.push({ label: "Fix numbering", run: apply(renumber(state, list), "input.renumber") });
+  if (list.name === "OrderedList") {
+    const changes = renumber(state, list);
+    out.push({
+      label: "Fix numbering",
+      run: apply(changes, "input.renumber"),
+      disabled: !changes.length
+    });
   }
   const hasTasks = items(list).some((it) => done(state, it) !== null);
   if (hasTasks) {
     const n = countDone(state, list);
-    if (moveDoneDown(state, list).length)
-      out.push({ label: "Move done to bottom", run: apply(moveDoneDown(state, list), "input.move") });
-    if (n)
-      out.push({ label: `Clear done (${n})`, run: apply(clearDone(state, list), "delete.clear-done") });
+    const moves = moveDoneDown(state, list);
+    out.push({
+      label: "Move done to bottom",
+      run: apply(moves, "input.move"),
+      disabled: !moves.length
+    });
+    out.push({
+      label: n ? `Clear done (${n})` : "Clear done",
+      run: apply(clearDone(state, list), "delete.clear-done"),
+      disabled: !n
+    });
     const hiding = isHidingDone(state);
     out.push({
       label: hiding ? "Show done" : "Hide done",
@@ -2849,12 +3079,13 @@ function openMenu(view, x, y, entries) {
   menu.setAttribute("role", "menu");
   menu.style.left = `${x}px`;
   menu.style.top = `${y}px`;
-  const buttons = entries.map(({ label, run }) => {
+  const buttons = entries.map(({ label, run, disabled }) => {
     const b = document.createElement("button");
     b.type = "button";
     b.className = "cm-md-menu-item";
     b.setAttribute("role", "menuitem");
     b.textContent = label;
+    b.disabled = !!disabled;
     b.addEventListener("click", () => {
       close();
       run();
@@ -2875,10 +3106,13 @@ function openMenu(view, x, y, entries) {
     } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
       const step2 = e.key === "ArrowDown" ? 1 : -1;
-      buttons[(i + step2 + buttons.length) % buttons.length]?.focus();
+      const live = buttons.filter((b) => !b.disabled);
+      const at = live.indexOf(buttons[i]);
+      live[(at + step2 + live.length) % live.length]?.focus();
     }
   };
   function close() {
+    if (menu.matches?.(":popover-open")) menu.hidePopover();
     menu.remove();
     window.removeEventListener("pointerdown", outside, true);
     window.removeEventListener("scroll", close, true);
@@ -2890,10 +3124,20 @@ function openMenu(view, x, y, entries) {
   window.addEventListener("blur", close);
   menu.addEventListener("keydown", keys);
   view.dom.appendChild(menu);
-  const r = menu.getBoundingClientRect();
-  if (r.right > window.innerWidth) menu.style.left = `${Math.max(0, x - r.width)}px`;
-  if (r.bottom > window.innerHeight) menu.style.top = `${Math.max(0, y - r.height)}px`;
-  buttons[0]?.focus();
+  if (typeof menu.showPopover === "function") {
+    menu.popover = "manual";
+    menu.showPopover();
+  }
+  let r = menu.getBoundingClientRect();
+  if (r.left !== x || r.top !== y) {
+    menu.style.left = `${x + (x - r.left)}px`;
+    menu.style.top = `${y + (y - r.top)}px`;
+    r = menu.getBoundingClientRect();
+  }
+  const shift = (prop, by) => menu.style[prop] = `${parseFloat(menu.style[prop]) - by}px`;
+  if (r.right > window.innerWidth) shift("left", r.width);
+  if (r.bottom > window.innerHeight) shift("top", r.height);
+  buttons.find((b) => !b.disabled)?.focus();
   return close;
 }
 var menuPlugin = ViewPlugin4.fromClass(
@@ -2923,6 +3167,9 @@ var menuPlugin = ViewPlugin4.fromClass(
 var listsTheme = EditorView4.baseTheme({
   ".cm-md-menu": {
     position: "fixed",
+    // undo the popover defaults (centred, inset 0)
+    inset: "auto",
+    margin: "0",
     zIndex: "var(--studio-layer-popover, 4000)",
     display: "flex",
     flexDirection: "column",
@@ -2942,7 +3189,10 @@ var listsTheme = EditorView4.baseTheme({
     borderRadius: "4px",
     cursor: "var(--studio-cursor-default, default)"
   },
-  ".cm-md-menu-item:hover, .cm-md-menu-item:focus-visible": {
+  ".cm-md-menu-item:disabled": {
+    opacity: "0.45"
+  },
+  ".cm-md-menu-item:not(:disabled):hover, .cm-md-menu-item:focus-visible": {
     background: "var(--studio-fill-offset-20, #eee)"
   },
   ".cm-md-hidden-done": {
@@ -3280,6 +3530,18 @@ var baseHeadingStyles = {
   fontWeight: "var(--studio-heading-weight, 400)",
   textDecoration: "none"
 };
+var headingSizes = {
+  1: { fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
+  2: { fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`, lineHeight: zoomed2("2rem") },
+  3: { fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`, lineHeight: zoomed2("1.75rem") },
+  4: { fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})` }
+};
+var headingLines = Object.fromEntries(
+  Object.entries(headingSizes).map(([level, size]) => [
+    `.cm-md-h${level}`,
+    { fontFamily: baseHeadingStyles.fontFamily, fontWeight: baseHeadingStyles.fontWeight, ...size }
+  ])
+);
 var baseCodeStyles = {
   fontFamily: "var(--text-editor-family-code)",
   fontSize: "1em"
@@ -3298,31 +3560,28 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
   {
     tag: tags.heading1,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-1, ${zoomed2("1.5rem")})`,
-    lineHeight: zoomed2("2rem"),
+    ...headingSizes[1],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading2,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-2, ${zoomed2("1.5rem")})`,
-    lineHeight: zoomed2("2rem"),
+    ...headingSizes[2],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading3,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-3, ${zoomed2("1.25rem")})`,
-    lineHeight: zoomed2("1.75rem"),
+    ...headingSizes[3],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
   {
     tag: tags.heading4,
     ...baseHeadingStyles,
-    fontSize: `var(--studio-heading-size-4, ${zoomed2("1.1rem")})`,
+    ...headingSizes[4],
     marginBottom: zoomed2("1rem"),
     marginTop: zoomed2("2rem")
   },
@@ -3335,7 +3594,7 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
     color: "var(--syntax-comment, #555)",
     fontFamily: "var(--text-editor-family-code)"
   },
-  { tag: tags.quote, fontStyle: "var(--syntax-style-quote, italic)" },
+  // quotes are set off by their bar (margin.ts), not by italics.
   {
     tag: tags.strong,
     fontFamily: bodyFont(style),
@@ -3397,7 +3656,7 @@ var markdownSyntaxHighlighting = (style) => HighlightStyle.define([
   { tag: tags.monospace, ...baseCodeStyles }
 ]);
 var theme = (style) => [
-  EditorView8.theme(markdownStyles(style)),
+  EditorView8.theme({ ...markdownStyles(style), ...headingLines }),
   syntaxHighlighting(markdownSyntaxHighlighting(style))
 ];