@latentic/live-markdown 0.3.0 → 0.4.0

package/dist/codemirror/core/editorTestHarness.js

@@ -0,0 +1,69 @@
+import "../../chunk-V6TY7KAL.js";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { ensureSyntaxTree } from "@codemirror/language";
+import { EditorSelection, EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { markdownDecorationsPlugin } from "./plugin.js";
+import {
+  mergeExtensions,
+  footnoteExtension,
+  highlightExtension,
+  mathExtension,
+  mermaidExtension,
+  tableExtension,
+  wikilinkExtension
+} from "../extensions/index.js";
+const live = [];
+const FULL_EXTENSIONS = mergeExtensions([
+  wikilinkExtension,
+  highlightExtension,
+  footnoteExtension,
+  mathExtension,
+  mermaidExtension,
+  tableExtension()
+]).extensions;
+function makeEditor(doc, caret2 = 0, extra = []) {
+  const parent = document.createElement("div");
+  document.body.appendChild(parent);
+  const state = EditorState.create({
+    doc,
+    selection: EditorSelection.cursor(caret2),
+    extensions: [markdown({ base: markdownLanguage }), markdownDecorationsPlugin, ...extra]
+  });
+  if (ensureSyntaxTree(state, doc.length, 5e3) === null) {
+    throw new Error(
+      `the markdown parse did not finish within 5s for a ${doc.length}-char document; any assertion after this would be testing an unparsed editor`
+    );
+  }
+  const view = new EditorView({ parent, state });
+  if (ensureSyntaxTree(view.state, doc.length, 5e3) === null) {
+    throw new Error(
+      `the markdown parse did not finish within 5s for a ${doc.length}-char document; any assertion after this would be testing an unparsed editor`
+    );
+  }
+  live.push(view);
+  return view;
+}
+function makeFullEditor(doc, caret2 = 0, extra = []) {
+  return makeEditor(doc, caret2, [...FULL_EXTENSIONS, ...extra]);
+}
+function destroyEditors() {
+  for (const view of live.splice(0)) {
+    view.destroy();
+    view.dom.parentElement?.remove();
+  }
+}
+function caret(view) {
+  return view.state.selection.main.head;
+}
+function text(view) {
+  return view.state.doc.toString();
+}
+export {
+  caret,
+  destroyEditors,
+  makeEditor,
+  makeFullEditor,
+  text
+};
+//# sourceMappingURL=editorTestHarness.js.map

package/dist/codemirror/core/editorTestHarness.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/codemirror/core/editorTestHarness.ts"],"sourcesContent":["/**\n * Test-only harness: a headless CodeMirror `EditorView` wired with the markdown\n * language + the live-preview decoration plugin, for keystroke-level tests of\n * the editor commands (cursor motion, delete, list continuation, formatting).\n *\n * CodeMirror runs under jsdom; each test FILE that uses this must declare\n * `// @vitest-environment jsdom` at its top. The Lezer tree is built eagerly so\n * the plugin's atomic/hidden ranges (which the commands consult) are present.\n *\n * Not shipped — nothing in the app imports it, so it tree-shakes out.\n */\n\nimport { markdown, markdownLanguage } from \"@codemirror/lang-markdown\";\nimport { ensureSyntaxTree } from \"@codemirror/language\";\nimport { EditorSelection, EditorState, type Extension } from \"@codemirror/state\";\nimport { EditorView } from \"@codemirror/view\";\n\nimport { markdownDecorationsPlugin } from \"./plugin\";\nimport {\n  mergeExtensions,\n  footnoteExtension,\n  highlightExtension,\n  mathExtension,\n  mermaidExtension,\n  tableExtension,\n  wikilinkExtension,\n} from \"../extensions\";\n\nconst live: EditorView[] = [];\n\n// The full rendering extension set the real editor composes — so a rendered-\n// output test sees what the user sees (wikilinks, highlight, footnotes, math,\n// tables), not just the base markdown decorations.\nconst FULL_EXTENSIONS = mergeExtensions([\n  wikilinkExtension,\n  highlightExtension,\n  footnoteExtension,\n  mathExtension,\n  mermaidExtension,\n  tableExtension(),\n]).extensions;\n\n/** A headless editor over `doc` with the caret at `caret`. Extra extensions\n *  (e.g. a keymap under test) can be appended. Track-and-cleanup via\n *  {@link destroyEditors} in an `afterEach`. */\nexport function makeEditor(doc: string, caret = 0, extra: Extension[] = []): EditorView {\n  const parent = document.createElement(\"div\");\n  document.body.appendChild(parent);\n  const state = EditorState.create({\n    doc,\n    selection: EditorSelection.cursor(caret),\n    extensions: [markdown({ base: markdownLanguage }), markdownDecorationsPlugin, ...extra],\n  });\n  // The commands under test read the plugin's atomic/hidden ranges, which are\n  // derived from the Lezer tree — so a tree that is not finished makes a guard\n  // silently not fire, and the test fails as a confusing content diff rather\n  // than as \"the parse did not finish\". `ensureSyntaxTree` reports that by\n  // returning null; ignoring it is how a parse timeout became a mystery.\n  if (ensureSyntaxTree(state, doc.length, 5000) === null) {\n    throw new Error(\n      `the markdown parse did not finish within 5s for a ${doc.length}-char document; ` +\n        \"any assertion after this would be testing an unparsed editor\",\n    );\n  }\n  const view = new EditorView({ parent, state });\n  // Again, on the view's own state. Creating the view starts CodeMirror's\n  // viewport-driven parse, and jsdom has no layout — so the viewport can be\n  // tiny and `syntaxTree(view.state)` returns a tree that stops short of the\n  // caret. A command asking \"am I inside a fence?\" then gets `null` and takes\n  // the plain-text path, which is a wrong answer rather than a slow one.\n  if (ensureSyntaxTree(view.state, doc.length, 5000) === null) {\n    throw new Error(\n      `the markdown parse did not finish within 5s for a ${doc.length}-char document; ` +\n        \"any assertion after this would be testing an unparsed editor\",\n    );\n  }\n  live.push(view);\n  return view;\n}\n\n/** Like {@link makeEditor} but with every rendering extension the real editor\n *  loads — for tests that assert the user-visible rendered output, not just the\n *  source. */\nexport function makeFullEditor(doc: string, caret = 0, extra: Extension[] = []): EditorView {\n  return makeEditor(doc, caret, [...FULL_EXTENSIONS, ...extra]);\n}\n\n/** Tear down every editor made since the last call. Call in `afterEach`. */\nexport function destroyEditors(): void {\n  for (const view of live.splice(0)) {\n    view.destroy();\n    view.dom.parentElement?.remove();\n  }\n}\n\n/** The current caret offset (head of the main selection). */\nexport function caret(view: EditorView): number {\n  return view.state.selection.main.head;\n}\n\n/** The current document text. */\nexport function text(view: EditorView): string {\n  return view.state.doc.toString();\n}\n"],"mappings":";AAYA,SAAS,UAAU,wBAAwB;AAC3C,SAAS,wBAAwB;AACjC,SAAS,iBAAiB,mBAAmC;AAC7D,SAAS,kBAAkB;AAE3B,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,OAAqB,CAAC;AAK5B,MAAM,kBAAkB,gBAAgB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,CAAC,EAAE;AAKI,SAAS,WAAW,KAAaA,SAAQ,GAAG,QAAqB,CAAC,GAAe;AACtF,QAAM,SAAS,SAAS,cAAc,KAAK;AAC3C,WAAS,KAAK,YAAY,MAAM;AAChC,QAAM,QAAQ,YAAY,OAAO;AAAA,IAC/B;AAAA,IACA,WAAW,gBAAgB,OAAOA,MAAK;AAAA,IACvC,YAAY,CAAC,SAAS,EAAE,MAAM,iBAAiB,CAAC,GAAG,2BAA2B,GAAG,KAAK;AAAA,EACxF,CAAC;AAMD,MAAI,iBAAiB,OAAO,IAAI,QAAQ,GAAI,MAAM,MAAM;AACtD,UAAM,IAAI;AAAA,MACR,qDAAqD,IAAI,MAAM;AAAA,IAEjE;AAAA,EACF;AACA,QAAM,OAAO,IAAI,WAAW,EAAE,QAAQ,MAAM,CAAC;AAM7C,MAAI,iBAAiB,KAAK,OAAO,IAAI,QAAQ,GAAI,MAAM,MAAM;AAC3D,UAAM,IAAI;AAAA,MACR,qDAAqD,IAAI,MAAM;AAAA,IAEjE;AAAA,EACF;AACA,OAAK,KAAK,IAAI;AACd,SAAO;AACT;AAKO,SAAS,eAAe,KAAaA,SAAQ,GAAG,QAAqB,CAAC,GAAe;AAC1F,SAAO,WAAW,KAAKA,QAAO,CAAC,GAAG,iBAAiB,GAAG,KAAK,CAAC;AAC9D;AAGO,SAAS,iBAAuB;AACrC,aAAW,QAAQ,KAAK,OAAO,CAAC,GAAG;AACjC,SAAK,QAAQ;AACb,SAAK,IAAI,eAAe,OAAO;AAAA,EACjC;AACF;AAGO,SAAS,MAAM,MAA0B;AAC9C,SAAO,KAAK,MAAM,UAAU,KAAK;AACnC;AAGO,SAAS,KAAK,MAA0B;AAC7C,SAAO,KAAK,MAAM,IAAI,SAAS;AACjC;","names":["caret"]}

package/dist/codemirror/core/editorTheme.d.ts

@@ -0,0 +1,39 @@
+import * as _codemirror_state from '@codemirror/state';
+
+/**
+ * Editor theme.
+ *
+ * Lives in `EditorView.baseTheme` rather than in `global.scss` for
+ * three load-bearing reasons:
+ *
+ *   1. **Line-metric integrity.** CM6 measures line heights from the
+ *      DOM through a `requestMeasure` cycle to compute click → byte
+ *      and scroll → viewport mappings. Styles injected via
+ *      `EditorView.theme` participate in that cycle at the right
+ *      moment; styles from an external sheet can land *after* the
+ *      first measurement, so clicks land on the wrong line until the
+ *      next measure fires. (This was the click-drift the spike
+ *      shipped — fixed by moving here.)
+ *   2. **Specificity that beats the base theme without `!important`.**
+ *      CM6 ships its monospace-and-purple base theme via the same
+ *      mechanism; layering `EditorView.theme` on top is the only
+ *      collision-free pattern.
+ *   3. **No margin/padding on heading lines.** Margins between
+ *      `.cm-line` siblings shift visual position without changing
+ *      `offsetTop`, so the metric cache and the eye disagree —
+ *      that's the canonical click-on-wrong-line bug. We change
+ *      `font:` (which doesn't touch line-height), nothing else.
+ *
+ * Zettlr's `markdown-editor/theme/editor.ts` is the canonical
+ * reference for this pattern in the open-source ecosystem.
+ */
+/**
+ * `EditorView.theme` (not `baseTheme`) — `baseTheme` is the
+ * low-priority slot meant for theme packages and gets out-specifity'd
+ * by any app-level CSS (Carbon's globals in our case). `theme` is the
+ * app-priority slot; our intent is to override CM6's defaults, so
+ * this is the right tier.
+ */
+declare const editorBaseTheme: _codemirror_state.Extension;
+
+export { editorBaseTheme };

package/dist/codemirror/core/editorTheme.js

@@ -0,0 +1,498 @@
+import "../../chunk-V6TY7KAL.js";
+import { EditorView } from "@codemirror/view";
+const editorBaseTheme = EditorView.theme({
+  // CM6 paints a focus outline by default. The caret IS the focus
+  // indicator in Compose; the box would be visual noise.
+  "&.cm-focused": {
+    outline: "none"
+  },
+  // Body type. Override CM6's monospace default *here* (not in the
+  // external stylesheet) so the measurement cycle sees it.
+  ".cm-content": {
+    fontFamily: 'var(--cds-body-01-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+    fontSize: "1rem",
+    // Tight line-height: the caret height tracks the line box
+    // (line-height × font-size), so anything above 1.4 starts to
+    // feel disproportionate. 1.4 is the value Zettlr uses for the
+    // same reason.
+    lineHeight: "1.4",
+    color: "var(--cds-text-primary, #161616)",
+    maxWidth: "48rem",
+    margin: "0 auto"
+  },
+  // Scroller padding — kept here so it's part of the same theme
+  // bundle as the content metrics.
+  ".cm-scroller": {
+    padding: "1.5rem 3rem"
+  },
+  // Drawn selection (selectionLayer.ts) — ranges paint from logical state so
+  // the highlight survives the virtualized viewport. The widget tint sits
+  // ABOVE block widgets (their opaque backgrounds hide the below-layer band).
+  ".cm-selectionBackground": {
+    background: "var(--cds-highlight, #d0e2ff)"
+  },
+  "&:not(.cm-focused) .cm-selectionBackground": {
+    background: "var(--cds-layer-accent-01, #e0e0e0)"
+  },
+  ".cm-selectionWidgetTint": {
+    background: "rgba(15, 98, 254, 0.08)"
+  },
+  // Caret stroke. CM6 owns the height (it tracks the current line-box,
+  // so headings get a heading-sized caret automatically per spec 6.2).
+  // Width is spec's 1 px at the default root size, in rem so it follows the
+  // user's text-size preference; "thick caret" mode is a Phase-N follow-up.
+  //
+  // The COLOUR has to be stated. CodeMirror's base theme paints the caret
+  // `solid black` and only picks its lighter variant when the view theme is
+  // registered with `{ dark: true }`. This editor is themed through CSS custom
+  // properties instead, so CodeMirror believes it is always light — leaving a
+  // black caret on a dark canvas, invisible exactly where someone is typing.
+  ".cm-cursor, .cm-dropCursor": {
+    borderLeftWidth: "0.0625rem",
+    borderLeftColor: "var(--cds-text-primary, #161616)"
+  },
+  // Headings — `font:` shorthand changes size + weight *without*
+  // setting line-height (it inherits the content's 1.5). The vertical
+  // breathing room is `padding` not `margin` for the click-metric
+  // reason above — sibling margins drift, sibling padding doesn't.
+  ".cm-heading--1": {
+    fontWeight: "700",
+    fontSize: "2.0rem",
+    lineHeight: "1.3",
+    paddingTop: "0.6em",
+    paddingBottom: "0.2em"
+  },
+  ".cm-heading--2": {
+    fontWeight: "700",
+    fontSize: "1.6rem",
+    lineHeight: "1.3",
+    paddingTop: "0.5em",
+    paddingBottom: "0.15em"
+  },
+  ".cm-heading--3": {
+    fontWeight: "700",
+    fontSize: "1.3rem",
+    lineHeight: "1.3",
+    paddingTop: "0.4em",
+    paddingBottom: "0.1em"
+  },
+  ".cm-heading--4": { fontWeight: "700", fontSize: "1.15rem", paddingTop: "0.3em" },
+  ".cm-heading--5": { fontWeight: "700", fontSize: "1.05rem", paddingTop: "0.25em" },
+  ".cm-heading--6": {
+    fontWeight: "700",
+    fontSize: "1.0rem",
+    color: "var(--cds-text-secondary, #525252)",
+    paddingTop: "0.2em"
+  },
+  // Inline / block styling. All sized by font + color only — never
+  // by margin/padding, never by line-height override.
+  ".cm-strong": { fontWeight: "700" },
+  ".cm-emphasis": { fontStyle: "italic" },
+  ".cm-strikethrough": { textDecoration: "line-through" },
+  // Code backgrounds are translucent, never opaque: the drawn selection
+  // (selectionLayer.ts) paints BELOW the content, so an opaque background here
+  // blanks the highlight on exactly these rows/chips while the prose around
+  // them tints. The alphas composite to the intended resting colors on the
+  // white canvas — #e0e0e0 for the inline chip, #f6f8fa (GitHub-style) for
+  // fence lines.
+  ".cm-inline-code": {
+    fontFamily: 'var(--cds-code-01-font-family, ui-monospace, "SF Mono", Menlo, monospace)',
+    fontSize: "0.92em",
+    padding: "0 0.25em",
+    background: "rgba(141, 141, 141, 0.27)",
+    borderRadius: "0.1875rem"
+  },
+  ".cm-fenced-code": {
+    fontFamily: 'var(--cds-code-01-font-family, ui-monospace, "SF Mono", Menlo, monospace)',
+    fontSize: "0.92em",
+    background: "rgba(30, 80, 130, 0.04)",
+    paddingLeft: "0.75em",
+    paddingBottom: "0"
+  },
+  // Language tag on a fence's opener row — visible (never invisible typing)
+  // and rendered as a small pill so it reads as the block's chrome, not as a
+  // wrong-font first code line (§12.4/§12.7).
+  ".cm-code-info": {
+    color: "var(--cds-text-secondary, #6f6f6f)",
+    fontSize: "0.75em",
+    background: "var(--cds-layer-accent-01, #e8ebee)",
+    padding: "0.1em 0.5em",
+    borderRadius: "999rem",
+    verticalAlign: "0.1em",
+    cursor: "pointer"
+  },
+  ".cm-code-info:hover": {
+    background: "var(--cds-layer-accent-hover-01, #d1d7dc)",
+    color: "var(--cds-text-primary, #161616)"
+  },
+  // The languageless placeholder: same chip, dimmed, so every closed block
+  // has a discoverable language control.
+  ".cm-code-info--unset": {
+    opacity: "0.55",
+    fontStyle: "italic"
+  },
+  ".cm-blockquote": {
+    borderInlineStart: "0.1875rem solid var(--cds-border-subtle-02, #c6c6c6)",
+    paddingInlineStart: "0.75em",
+    color: "var(--cds-text-secondary, #525252)",
+    fontStyle: "italic"
+  },
+  // List-item line: small left indent so the bullet widget sits in
+  // its own column. Padding (not margin) keeps click metrics exact.
+  ".cm-list-line": {
+    paddingInlineStart: "0.5em"
+  },
+  // Bullet widget — styled here so the widget's HTML inherits the
+  // right colour against body type.
+  ".cm-bullet-widget": {
+    display: "inline-block",
+    width: "1em",
+    color: "var(--cds-text-secondary, #525252)",
+    fontWeight: "700"
+  },
+  // Ordered-list number (`1.`) — wider than a bullet's fixed 1em so multi-digit
+  // markers fit, with a small gap before the item text. Normal weight: a bold
+  // number reads as heavier than the body text it labels.
+  ".cm-ordered-marker": {
+    width: "auto",
+    minWidth: "1.2em",
+    marginRight: "0.3em",
+    fontWeight: "normal"
+  },
+  // Task list checkbox — drawn as a Carbon checkbox, not the native control.
+  // `appearance: none` is what replaces WebKit's small rounded default; the box
+  // then matches the design system rather than approximating it with an accent
+  // colour over the native shape.
+  //
+  // Sized in `em`, not `rem`: a 1rem box beside 1rem text is as tall as the
+  // whole em box, so it towered over lowercase letters, whose cap height is
+  // nearer 0.7em. One knob — the checkbox's own `font-size` — drives the box,
+  // the tick and the baseline offset, so the parts cannot drift apart, and the
+  // control tracks the text if a list ever renders at another size.
+  ".cm-task-checkbox": {
+    appearance: "none",
+    WebkitAppearance: "none",
+    boxSizing: "border-box",
+    position: "relative",
+    fontSize: "0.875em",
+    width: "1em",
+    height: "1em",
+    margin: "0 0.45em 0 0",
+    cursor: "pointer",
+    // Centres the box on the x-height rather than hanging it off the baseline.
+    verticalAlign: "-0.2em",
+    border: "0.0625em solid var(--cds-icon-primary, #161616)",
+    borderRadius: "0.0625em",
+    background: "transparent"
+  },
+  ".cm-task-checkbox:checked": {
+    background: "var(--cds-icon-primary, #161616)",
+    borderColor: "var(--cds-icon-primary, #161616)"
+  },
+  // The tick: an L (right + bottom border) rotated 45° into a check.
+  //
+  // Drawn in `--cds-background`, NOT `--cds-icon-on-color`. "On color" means an
+  // icon on a branded fill and is white in every theme, while the box here is
+  // filled with `--cds-icon-primary` — which inverts. In dark that was a white
+  // tick on a near-white box: a checked item read as unchecked.
+  //
+  // `top` is the OPTICAL centre, not the geometric one. The L's ink sits below
+  // and right of its own rect centre, and `rotate(45deg)` turns that diagonal
+  // offset into a purely downward one — 0.065em of it — so the rect has to ride
+  // that much higher for the tick to look centred. Geometric centring (0.1875em)
+  // renders visibly low; the old 0.0625em was visibly high.
+  ".cm-task-checkbox:checked::after": {
+    content: "''",
+    position: "absolute",
+    left: "0.3125em",
+    top: "0.125em",
+    width: "0.25em",
+    height: "0.5em",
+    border: "solid var(--cds-background, #ffffff)",
+    // 0.125em read as a heavy slab once the box shrank to 0.875em.
+    borderWidth: "0 0.1em 0.1em 0",
+    transform: "rotate(45deg)"
+  },
+  ".cm-task-checkbox:focus-visible": {
+    outline: "0.125rem solid var(--cds-focus, #0f62fe)",
+    outlineOffset: "0.0625rem"
+  },
+  // Inline image widget. Constrained max-width so a single large
+  // image doesn't blow up the editor; lazy loading via `<img loading="lazy">`.
+  ".cm-image-widget": {
+    display: "inline-block",
+    maxWidth: "min(100%, 32rem)",
+    height: "auto",
+    borderRadius: "0.25rem",
+    margin: "0.25em 0"
+  },
+  // Horizontal-rule widget. Inline span styled as a full-width
+  // border so the line stays inside CM6's line layout.
+  ".cm-hr-widget": {
+    display: "inline-block",
+    width: "100%",
+    height: "0",
+    borderTop: "0.0625rem solid var(--cds-border-subtle-02, #c6c6c6)",
+    verticalAlign: "middle"
+  },
+  ".cm-table-widget": {
+    borderCollapse: "collapse",
+    width: "100%",
+    // `fixed` distributes width evenly across columns instead of letting the
+    // auto algorithm shrink columns toward their content — with the inherited
+    // `cm-lineWrapping` word-breaking, an auto-shrunk column wraps one
+    // character per line ("T / o / p / i / c").
+    tableLayout: "fixed"
+  },
+  ".cm-table-widget th, .cm-table-widget td": {
+    border: "0.0625rem solid var(--cds-border-subtle-02, #c6c6c6)",
+    padding: "0.4em 0.75em",
+    verticalAlign: "top",
+    // No native text-selection: a drag would otherwise zig-zag a ragged
+    // selection across cells (uneven heights). `tablev2` tracks the
+    // drag and tints whole cells uniformly instead; the cell editor re-enables
+    // selection for its own content (below).
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    // Wrap at word boundaries like prose (overriding the `word-break: break-word`
+    // cm-lineWrapping inherits onto `.cm-content`), but still break a single
+    // over-long token (e.g. `complementarity/orchestration`) so it can't spill
+    // past its fixed-width column into the neighbour.
+    overflowWrap: "break-word",
+    wordBreak: "normal"
+  },
+  ".cm-table-widget thead th": {
+    background: "var(--cds-layer-accent-01, #e8e8e8)",
+    fontWeight: "600",
+    textAlign: "left"
+  },
+  // The cell editor's own content stays selectable so a mounted cell edits
+  // normally (only the surrounding grid is locked, above).
+  ".cm-table-widget .cm-content": {
+    userSelect: "text",
+    WebkitUserSelect: "text"
+  },
+  // Cell highlight: `--selected` is a drag-selection (tablev2);
+  // `--hover` previews the row/column a "Comment on this row/column" menu item
+  // targets; `--commenting` is held by the host while that comment composer is
+  // open. All read as the same even tint.
+  ".cm-table-cell--selected, .cm-table-cell--hover, .cm-table-cell--commenting": {
+    backgroundColor: "var(--cds-highlight, #d0e2ff)"
+  },
+  // Hover inserters (tablev2/tableV2HoverControls.ts). The wrapper reserves a top + left
+  // padding gutter; JS parks the two "+" circles in it — clear of the grid, so
+  // they never clip at a corner or sit under the header.
+  ".cm-table-wrap": {
+    position: "relative",
+    // Vertical spacing is PADDING, never margin — the same rule the headings and
+    // lists above follow. CM6 measures a block widget's height from its border
+    // box (margins excluded), so a margin here under-measures the table and
+    // drifts every click below it down onto the next line. The top padding
+    // doubles as the hover-"+" gutter.
+    paddingTop: "2.5em",
+    paddingBottom: "0.5em",
+    paddingLeft: "2em"
+  },
+  // Two-step delete (tableArmed.ts). The first Backspace/Delete next to a table
+  // parks the caret at its edge and arms it: the table gets a blue "selected"
+  // outline, and a green line is drawn at the armed edge — Zettlr's "green line
+  // cursor behind the table" cue, signalling the next press removes it. The
+  // caret is hidden while arming (it renders on the blank line just past the
+  // table, which reads as "the cursor never moved") by hiding the drawn cursor
+  // layer.
+  "&.cm-table-arming .cm-cursorLayer": {
+    display: "none"
+  },
+  ".cm-table-armed .cm-table-widget": {
+    outline: "0.125rem solid var(--cds-border-interactive, #0f62fe)",
+    outlineOffset: "0.0625rem",
+    position: "relative"
+  },
+  ".cm-table-wrap[data-armed-edge] .cm-table-widget::after": {
+    content: "''",
+    position: "absolute",
+    left: "0",
+    right: "0",
+    height: "0.1875rem",
+    background: "var(--cds-support-success, #24a148)",
+    pointerEvents: "none"
+  },
+  '.cm-table-wrap[data-armed-edge="end"] .cm-table-widget::after': {
+    bottom: "-0.375rem"
+  },
+  '.cm-table-wrap[data-armed-edge="start"] .cm-table-widget::after': {
+    top: "-0.375rem"
+  },
+  ".cm-table-inserter": {
+    position: "absolute",
+    display: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "1.25rem",
+    height: "1.25rem",
+    borderRadius: "50%",
+    appearance: "none",
+    border: "none",
+    padding: "0",
+    cursor: "pointer",
+    zIndex: "3",
+    // Subtle at rest (a neutral chip); the primary accent is the hover
+    // affordance. The glyph is a centred SVG stroked with currentColor.
+    background: "var(--cds-layer-accent-01, #e0e0e0)",
+    color: "var(--cds-icon-secondary, #525252)",
+    boxShadow: "0 0.0625rem 0.125rem rgba(0, 0, 0, 0.12)",
+    transition: "background 80ms ease, color 80ms ease"
+  },
+  ".cm-table-inserter:hover": {
+    background: "var(--cds-link-primary, #0f62fe)",
+    color: "#ffffff"
+  },
+  ".cm-image-menu": {
+    background: "var(--cds-layer-01, #ffffff)",
+    border: "0.0625rem solid var(--cds-border-subtle-01, #e0e0e0)",
+    borderRadius: "0.125rem",
+    boxShadow: "0 0.25rem 0.75rem rgba(0, 0, 0, 0.15)",
+    padding: "0.25rem 0",
+    minWidth: "11rem",
+    fontFamily: 'var(--cds-body-01-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)',
+    fontSize: "0.875rem"
+  },
+  ".cm-image-menu__item": {
+    appearance: "none",
+    background: "transparent",
+    border: "none",
+    textAlign: "start",
+    padding: "0.4rem 0.75rem",
+    cursor: "pointer",
+    width: "100%",
+    color: "var(--cds-text-primary, #161616)",
+    font: "inherit"
+  },
+  ".cm-image-menu__item:hover": {
+    background: "var(--cds-layer-hover-01, #e8e8e8)"
+  },
+  ".cm-image-menu__item--danger": {
+    color: "var(--cds-text-error, #da1e28)"
+  },
+  ".cm-math-inline": {
+    fontFamily: "KaTeX_Main, serif"
+  },
+  ".cm-math-block": {
+    display: "block",
+    margin: "0.5em 0",
+    textAlign: "center",
+    fontFamily: "KaTeX_Main, serif"
+  },
+  // A diagram reads as CONTENT, not a control: no fill or pointer on hover —
+  // just a hairline frame plus a corner "Edit" chip as the click-to-edit cue.
+  ".cm-mermaid-block": {
+    position: "relative",
+    display: "flex",
+    justifyContent: "center",
+    margin: "0.5em 0",
+    padding: "0.75em",
+    borderRadius: "0.25rem"
+  },
+  ".cm-mermaid-block:hover": {
+    outline: "0.0625rem solid var(--cds-border-subtle-01, #e0e0e0)"
+  },
+  // The click-to-select state — native selection paints nothing over a block
+  // widget, so the widget carries its own "I'm selected, ⌘C copies me" look.
+  ".cm-mermaid-block--selected, .cm-mermaid-block--selected:hover": {
+    outline: "0.125rem solid var(--cds-focus, #0f62fe)",
+    outlineOffset: "-0.125rem",
+    background: "rgba(15, 98, 254, 0.06)"
+  },
+  ".cm-mermaid-edit": {
+    position: "absolute",
+    insetBlockStart: "0.375rem",
+    insetInlineEnd: "0.375rem",
+    padding: "0.1rem 0.5rem",
+    fontSize: "0.75rem",
+    color: "var(--cds-text-secondary, #525252)",
+    background: "var(--cds-layer-01, #f4f4f4)",
+    border: "0.0625rem solid var(--cds-border-subtle-01, #e0e0e0)",
+    borderRadius: "999rem",
+    cursor: "pointer",
+    opacity: "0",
+    transition: "opacity 80ms ease"
+  },
+  ".cm-mermaid-block:hover .cm-mermaid-edit": {
+    opacity: "1"
+  },
+  ".cm-mermaid-block > svg": {
+    maxWidth: "100%",
+    height: "auto",
+    // Uniform click handling: SVG sub-elements otherwise swallow pointer
+    // events over parts of the diagram, making click-to-select land only on
+    // the background.
+    pointerEvents: "none"
+  },
+  ".cm-mermaid-block--pending": {
+    color: "var(--cds-text-secondary, #525252)",
+    fontStyle: "italic"
+  },
+  ".cm-mermaid-block--error": {
+    display: "block",
+    borderLeft: "0.1875rem solid var(--cds-support-error, #da1e28)",
+    background: "var(--cds-layer-01, #f4f4f4)"
+  },
+  ".cm-mermaid-error__title": {
+    color: "var(--cds-text-error, #da1e28)",
+    fontSize: "0.875em"
+  },
+  ".cm-mermaid-error__message": {
+    margin: "0.5em 0 0",
+    fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
+    fontSize: "0.75em",
+    color: "var(--cds-text-secondary, #525252)",
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere"
+  },
+  ".cm-html-inline, .cm-html-block": {
+    display: "inline"
+  },
+  ".cm-html-block": {
+    display: "block",
+    margin: "0.5em 0"
+  },
+  ".cm-link": {
+    color: "var(--cds-link-primary, #0f62fe)",
+    textDecoration: "underline"
+  },
+  // Wikilink label — distinguish from regular markdown links via a
+  // dashed underline so a non-technical reader can tell at a glance
+  // that this is a vault-internal target. Matches the Tiptap version
+  // (`.wikilink`).
+  ".cm-wikilink": {
+    color: "var(--cds-link-primary, #0f62fe)",
+    textDecoration: "underline dashed",
+    cursor: "pointer"
+  },
+  // Explicit yellow, not var(--cds-highlight): the app maps that token to the
+  // drawn-selection color, and a mark bound to it is indistinguishable from
+  // selected text. Translucent so the below-content selection band reads
+  // through; the alpha composites to the intended #fff8c5 resting yellow on
+  // the white canvas.
+  ".cm-highlight": {
+    background: "rgba(255, 235, 89, 0.35)",
+    padding: "0 0.1em",
+    borderRadius: "0.125rem"
+  },
+  ".cm-footnote-ref": {
+    fontSize: "0.75em",
+    verticalAlign: "super",
+    color: "var(--cds-link-primary, #0f62fe)",
+    cursor: "pointer"
+  },
+  ".cm-footnote-def": {
+    fontSize: "0.875em",
+    color: "var(--cds-text-secondary, #525252)",
+    paddingInlineStart: "0.5em",
+    borderInlineStart: "0.125rem solid var(--cds-border-subtle-02, #c6c6c6)"
+  }
+});
+export {
+  editorBaseTheme
+};
+//# sourceMappingURL=editorTheme.js.map