@latentic/live-markdown 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # Changelog
 
+## [0.3.0] - 2026-08-29
+
+### Added
+
+- **A host can contribute extension modules.** `extensions?: readonly
+  MarkdownExtension[]` on the editor, merged in one pass with the built-ins and
+  host-last, so a module can deliberately override a construct and the merger
+  still warns when a node rule is redefined. Applies in source mode as well as
+  wysiwyg — a keymap is not a rendering concern. Read when an editor state is
+  built, so building the array inline cannot remount the editor.
+
+  Toolbar contributions now reach the host through the `toolbar` slot's
+  context; the merger always collected them and the component dropped them.
+
+- `composeExtensions` is renamed **`mergeExtensions`**, with the old name kept
+  as a deprecated alias. "compose" read as the name of an app rather than as the
+  verb, which is the wrong signal for a package meant for many hosts.
+
+### Fixed
+
+- **A checked task box reads as checked in dark.** The tick used
+  `--cds-icon-on-color` — white in every theme — against a fill of
+  `--cds-icon-primary`, which inverts. In dark that was #ffffff on #f4f4f4, a
+  contrast ratio of 1.10. It now uses `--cds-background`, the inverse of the
+  fill by construction.
+
+- **The task box is sized to the text.** 1rem beside 1rem text is as tall as the
+  whole em box; it now derives from its own `font-size: 0.875em`, with box, tick
+  and baseline offset all in `em` of that, and sits on the x-height instead of
+  hanging off the baseline.
+
+## [0.2.0] - 2026-08-28
+
+### Added
+
+- **A host can theme fenced-code syntax colours.** Each palette entry carries a
+  CSS custom property alongside its colour, and the editor paints
+  `var(--md-code-…, <One Light value>)`, so a dark theme can restyle code.
+  Previously impossible: the editor takes no `extensions` prop and the generated
+  highlight classes are content-hashed, leaving no seam at all.
+
+  The clipboard renderer deliberately keeps literal colours. Pasted HTML arrives
+  with no stylesheet, so a `var()` there resolves to nothing and pastes
+  colourless code into Google Docs or Word — and the document being pasted into
+  is white whatever theme the editor was in.
+
+  Roles are named individually (`--md-code-keyword`, `--md-code-string`, …) even
+  where two share a value, so one can be restyled without the other. A host that
+  sets no variables gets a byte-identical palette: the literal is the fallback.
+
 ## [0.1.1] - 2026-08-24
 
 ### Added

package/README.md

@@ -186,7 +186,8 @@ The `toolbar` render prop receives the live `EditorView`, so host buttons can dr
 | `value` | `string` | — | The markdown content (controlled) |
 | `onChange` | `(value: string, changes: DocumentTextChange[]) => void` | — | Called after edits, debounced |
 | `mode` | `"wysiwyg" \| "source"` | `"wysiwyg"` | Rich rendering or raw markdown |
-| `toolbar` | `(ctx: { view: EditorView }) => ReactNode` | — | Host-rendered toolbar, given the live editor view |
+| `extensions` | `readonly MarkdownExtension[]` | — | Host-contributed extension modules, merged after the built-ins |
+| `toolbar` | `(ctx: { view, contributions }) => ReactNode` | — | Host-rendered toolbar, given the live editor view and any toolbar items the extensions contributed |
 | `selectionActions` | `(ctx: { selection, dismiss }) => ReactNode` | — | Host-rendered actions for the current selection (e.g. a comment bubble) |
 | `linkTargets` | `ReadonlySet<string>` | — | Known file paths for wikilink resolution |
 | `onNavigateToLink` | `(path: string) => void` | — | Called on Cmd/Ctrl-click of an internal link |
@@ -209,13 +210,32 @@ Built-in extensions:
 - `tableExtension` — GFM tables with cell navigation
 - `wikilinkExtension` — `[[wikilink]]` rendering and navigation
 
+The built-ins load themselves. To add your own, hand the editor your modules:
+
+```tsx
+<CodeMirrorMarkdownEditor value={md} onChange={setMd} extensions={[myExtension]} />
+```
+
+They are merged **after** the built-ins, so a module can deliberately override a
+construct — the merger warns when a node rule is redefined, so an accidental
+shadow is not silent. Modules apply in source mode as well as wysiwyg: a keymap
+or a plain CM6 extension is not a markdown-rendering concern, and node rules
+simply go unread while the painter is off.
+
+The prop is read when an editor state is built, not on every render, so building
+the array inline costs nothing and cannot remount the editor. Changing it
+mid-session takes effect at the next rebuild.
+
+To merge modules yourself — composing a preset, or feeding a CodeMirror view you
+own — `mergeExtensions` is the same function the editor uses:
+
 ```tsx
-import { composeExtensions, mathExtension, tableExtension } from "@latentic/live-markdown";
+import { mergeExtensions, mathExtension, tableExtension } from "@latentic/live-markdown";
 
-const composed = composeExtensions([mathExtension, tableExtension]);
-// composed.extensions — CM6 Extension[] (each extension's node rules ride
-//                        along via a facet, so this is all the editor needs)
-// composed.toolbar    — merged ToolbarContribution[]
+const merged = mergeExtensions([mathExtension, tableExtension]);
+// merged.extensions — CM6 Extension[] (each module's node rules ride along via
+//                      a facet, so this is all a view needs)
+// merged.toolbar    — merged ToolbarContribution[]
 ```
 
 ### A custom extension
@@ -223,7 +243,7 @@ const composed = composeExtensions([mathExtension, tableExtension]);
 A rule is one function per Lezer node name, returning how that node paints. The `mark` combinator covers the common "style this span" case. Rules merge last-wins, so an extension can introduce a construct from its own grammar or deliberately restyle a built-in one:
 
 ```tsx
-import { composeExtensions, mark, type MarkdownExtension } from "@latentic/live-markdown";
+import { mark, type MarkdownExtension } from "@latentic/live-markdown";
 
 const fancyEmphasis: MarkdownExtension = {
   name: "fancy-emphasis",
@@ -234,7 +254,7 @@ const fancyEmphasis: MarkdownExtension = {
   },
 };
 
-const composed = composeExtensions([fancyEmphasis]);
+<CodeMirrorMarkdownEditor value={md} onChange={setMd} extensions={[fancyEmphasis]} />
 ```
 
 `Paint` is a closed set — line class, span mark, hide, widget, or nothing — while node names grow, so styling a construct is always one rule in one place.

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import * as _codemirror_view from '@codemirror/view';
-import { Decoration, ViewPlugin, DecorationSet, ViewUpdate, EditorView, Command, KeyBinding } from '@codemirror/view';
+import { Decoration, ViewPlugin, DecorationSet, ViewUpdate, KeyBinding, EditorView, Command } from '@codemirror/view';
 import * as _codemirror_state from '@codemirror/state';
 import { EditorState, Facet, Extension } from '@codemirror/state';
 import { syntaxTree } from '@codemirror/language';
@@ -384,6 +384,71 @@ type CommentOnExcerpt = (excerpt: {
     range: SourceRange;
 }, anchor: CommentAnchor) => void;
 
+interface ToolbarContribution {
+    readonly id: string;
+    readonly group: "heading" | "format" | "block" | "insert" | string;
+    readonly label: string;
+    readonly icon: ReactNode;
+    readonly shortcut?: string;
+    readonly isActive?: (caretContext: CaretContextSnapshot) => boolean;
+    readonly run: (view: _codemirror_view.EditorView) => void;
+}
+interface CaretContextSnapshot {
+    readonly bold: boolean;
+    readonly italic: boolean;
+    readonly code: boolean;
+    readonly link: boolean;
+    readonly heading: 1 | 2 | 3 | 4 | 5 | 6 | 0;
+    readonly bulletList: boolean;
+    readonly orderedList: boolean;
+    readonly blockquote: boolean;
+}
+interface MarkdownExtension {
+    readonly name: string;
+    readonly version: string;
+    readonly description?: string;
+    /** Node rules for constructs this extension's grammar introduces (or
+     *  deliberately overrides) — merged into the decoration painter via
+     *  `nodeRulesFacet`, so an extension never edits the base table. */
+    readonly rules?: NodeRules;
+    readonly extensions?: Extension[];
+    readonly keymap?: KeyBinding[];
+    readonly toolbar?: ToolbarContribution[];
+}
+
+interface ComposedExtension {
+    extensions: Extension[];
+    toolbar: ToolbarContribution[];
+}
+/**
+ * Merge extension modules into one set of CodeMirror extensions plus the
+ * toolbar items they contribute. Later modules win: a host's rules are applied
+ * after the built-ins, so it can deliberately override a construct.
+ */
+declare function mergeExtensions(modules: readonly MarkdownExtension[]): ComposedExtension;
+/**
+ * @deprecated Renamed to {@link mergeExtensions}. "compose" reads as the app
+ * this package was extracted from rather than as the verb; the editor is meant
+ * for more hosts than that one. Kept as an alias so the rename is not breaking.
+ */
+declare const composeExtensions: typeof mergeExtensions;
+
+declare const highlightExtension: MarkdownExtension;
+
+declare const footnoteExtension: MarkdownExtension;
+
+declare const mathExtension: MarkdownExtension;
+
+declare const mermaidExtension: MarkdownExtension;
+
+/**
+ * A FACTORY, not a const: each composition gets its own editing surface (the
+ * one-active-edit state), so two mounted editors can never share a cell edit.
+ */
+declare function tableExtension(): MarkdownExtension;
+
+declare const wikilinkExtension: MarkdownExtension;
+
 type CodeMirrorEditorMode = "wysiwyg" | "source";
 /** A non-empty editor selection, in document byte offsets. */
 interface EditorSelectionSnapshot {
@@ -399,13 +464,27 @@ interface CodeMirrorMarkdownEditorProps {
     linkTargets?: ReadonlySet<string>;
     onNavigateToLink?: (path: string) => void;
     /**
-     * Host-rendered toolbar. The editor owns the live `EditorView` and hands it to
-     * the slot; the host builds whatever toolbar UI it wants (formatting buttons,
-     * file actions, …) around it. Omit for a chromeless editor. Return a STABLE
-     * element shape so the host's own memoisation can hold across keystrokes.
+     * Extension modules contributed by the host, merged AFTER the built-ins so a
+     * host can deliberately override a construct (the merger warns when a node
+     * rule is redefined).
+     *
+     * Read when an editor state is built — on mount, and on the swaps that
+     * rebuild one — not on every render, so passing a fresh array each time costs
+     * nothing and cannot remount the editor. Changing it mid-session therefore
+     * takes effect at the next rebuild.
+     *
+     * Applies in BOTH modes: a module's node rules simply go unread while the
+     * decoration painter is off, but its keymaps and plain CodeMirror extensions
+     * are not markdown-rendering concerns and should not be silently dropped in
+     * source mode.
      */
+    extensions?: readonly MarkdownExtension[];
+    /** Host-rendered toolbar. `contributions` carries the toolbar items the
+     *  extension modules asked for; the host decides whether and how to render
+     *  them alongside its own. */
     toolbar?: (ctx: {
         view: EditorView;
+        contributions: readonly ToolbarContribution[];
     }) => ReactNode;
     /**
      * Host-rendered actions for the current text selection (e.g. a comment / ask
@@ -456,7 +535,7 @@ interface CodeMirrorMarkdownEditorProps {
      */
     onFlushReady?: (flush: (() => void) | null) => void;
 }
-declare function CodeMirrorMarkdownEditorInner({ mode, onChange, value, workspaceRoot, filePath, linkTargets, onNavigateToLink, toolbar, selectionActions, resolveImageSrc, saveImageBytes, onOpenExternalUrl, onCommentOnExcerpt, renderClipboardHtml, onAfterContentSwap, onFlushReady, }: CodeMirrorMarkdownEditorProps): react.JSX.Element;
+declare function CodeMirrorMarkdownEditorInner({ mode, onChange, value, workspaceRoot, filePath, linkTargets, onNavigateToLink, extensions: hostExtensions, toolbar, selectionActions, resolveImageSrc, saveImageBytes, onOpenExternalUrl, onCommentOnExcerpt, renderClipboardHtml, onAfterContentSwap, onFlushReady, }: CodeMirrorMarkdownEditorProps): react.JSX.Element;
 /**
  * Memoised export — same reason as the Tiptap editor. AppShell
  * re-renders on every chat-thread token; without memoisation each
@@ -504,60 +583,6 @@ declare const blockCommands: {
  */
 declare function onEditorUpdate(view: EditorView, fn: (update: ViewUpdate) => void): () => void;
 
-interface ToolbarContribution {
-    readonly id: string;
-    readonly group: "heading" | "format" | "block" | "insert" | string;
-    readonly label: string;
-    readonly icon: ReactNode;
-    readonly shortcut?: string;
-    readonly isActive?: (caretContext: CaretContextSnapshot) => boolean;
-    readonly run: (view: _codemirror_view.EditorView) => void;
-}
-interface CaretContextSnapshot {
-    readonly bold: boolean;
-    readonly italic: boolean;
-    readonly code: boolean;
-    readonly link: boolean;
-    readonly heading: 1 | 2 | 3 | 4 | 5 | 6 | 0;
-    readonly bulletList: boolean;
-    readonly orderedList: boolean;
-    readonly blockquote: boolean;
-}
-interface MarkdownExtension {
-    readonly name: string;
-    readonly version: string;
-    readonly description?: string;
-    /** Node rules for constructs this extension's grammar introduces (or
-     *  deliberately overrides) — merged into the decoration painter via
-     *  `nodeRulesFacet`, so an extension never edits the base table. */
-    readonly rules?: NodeRules;
-    readonly extensions?: Extension[];
-    readonly keymap?: KeyBinding[];
-    readonly toolbar?: ToolbarContribution[];
-}
-
-interface ComposedExtension {
-    extensions: Extension[];
-    toolbar: ToolbarContribution[];
-}
-declare function composeExtensions(modules: readonly MarkdownExtension[]): ComposedExtension;
-
-declare const highlightExtension: MarkdownExtension;
-
-declare const footnoteExtension: MarkdownExtension;
-
-declare const mathExtension: MarkdownExtension;
-
-declare const mermaidExtension: MarkdownExtension;
-
-/**
- * A FACTORY, not a const: each composition gets its own editing surface (the
- * one-active-edit state), so two mounted editors can never share a cell edit.
- */
-declare function tableExtension(): MarkdownExtension;
-
-declare const wikilinkExtension: MarkdownExtension;
-
 /**
  * Mermaid rendering, decoupled from CodeMirror — shared by the editor widget,
  * the document export (which ships the SVG to the backend), and the clipboard
@@ -852,4 +877,4 @@ interface ResolveWorkspaceLinkOptions {
 }
 declare function resolveWorkspaceLink(href: string, options: ResolveWorkspaceLinkOptions): ResolvedWorkspaceLink | null;
 
-export { type CaretContextSnapshot, type CodeMirrorEditorMode, CodeMirrorMarkdownEditor, type CodeMirrorMarkdownEditorProps, type ComposedExtension, type DocumentTextChange, type EditorSelectionSnapshot, type Frontmatter, type FrontmatterValue, type HighlightedSpan, IMAGE_EDIT_ALT_EVENT, type ImageEditAltEventDetail, type ImageInsertOptions, type ImageInsertResult, type ImageResolveContext, type InlineScanMatch, type InlineScanRule, type MarkdownDocument, type MarkdownExtension, type MermaidRenderResult, type NodeContext, type NodeRule, type NodeRules, type OpenExternalUrl, type Paint, type ResolveImageSrc, type ResolveWorkspaceLinkOptions, type ResolvedWorkspaceLink, type SaveImageBytes, type SourceRange, type ToolbarContribution, blockCommands, buildImageMarkdown, composeExtensions, computeFileDir, defaultResolveImageSrc, dirnamePath, editorBaseTheme, escapeAttr, escapeText, extractImageBlobs, extractImageFiles, footnoteExtension, formatCommands, getCachedMermaidPng, hasUriScheme, headingLine, hideAlways, highlightExtension, highlightFenceSpans, imageInsertHandlers, inlineScanRulesFacet, insertImageBlob, isAbsolutePath, isMermaidFenceInfo, joinPath, line, mark, markdownDecorationsPlugin, mathExtension, mermaidExtension, nodeRulesFacet, onEditorUpdate, parseFrontmatter, parseWikilinkBody, pickImageFileForCaret, raw, renderMermaidToSvg, resolveWikilinkTarget, resolveWorkspaceLink, scanInline, serializeMarkdown, setFrontmatterField, showImageActionMenu, structural, tableExtension, treeAt, warmMermaidPng, wikilinkExtension };
+export { type CaretContextSnapshot, type CodeMirrorEditorMode, CodeMirrorMarkdownEditor, type CodeMirrorMarkdownEditorProps, type ComposedExtension, type DocumentTextChange, type EditorSelectionSnapshot, type Frontmatter, type FrontmatterValue, type HighlightedSpan, IMAGE_EDIT_ALT_EVENT, type ImageEditAltEventDetail, type ImageInsertOptions, type ImageInsertResult, type ImageResolveContext, type InlineScanMatch, type InlineScanRule, type MarkdownDocument, type MarkdownExtension, type MermaidRenderResult, type NodeContext, type NodeRule, type NodeRules, type OpenExternalUrl, type Paint, type ResolveImageSrc, type ResolveWorkspaceLinkOptions, type ResolvedWorkspaceLink, type SaveImageBytes, type SourceRange, type ToolbarContribution, blockCommands, buildImageMarkdown, composeExtensions, computeFileDir, defaultResolveImageSrc, dirnamePath, editorBaseTheme, escapeAttr, escapeText, extractImageBlobs, extractImageFiles, footnoteExtension, formatCommands, getCachedMermaidPng, hasUriScheme, headingLine, hideAlways, highlightExtension, highlightFenceSpans, imageInsertHandlers, inlineScanRulesFacet, insertImageBlob, isAbsolutePath, isMermaidFenceInfo, joinPath, line, mark, markdownDecorationsPlugin, mathExtension, mergeExtensions, mermaidExtension, nodeRulesFacet, onEditorUpdate, parseFrontmatter, parseWikilinkBody, pickImageFileForCaret, raw, renderMermaidToSvg, resolveWikilinkTarget, resolveWorkspaceLink, scanInline, serializeMarkdown, setFrontmatterField, showImageActionMenu, structural, tableExtension, treeAt, warmMermaidPng, wikilinkExtension };

package/dist/index.js

@@ -443,23 +443,59 @@ function onEditorUpdate(view, fn) {
   };
 }
 var CODE_PALETTE = [
-  { tag: [tags.keyword, tags.modifier, tags.operatorKeyword], color: "#a626a4" },
-  { tag: [tags.string, tags.special(tags.string)], color: "#50a14f" },
-  { tag: tags.comment, color: "#a0a1a7", fontStyle: "italic" },
-  { tag: [tags.number, tags.bool, tags.null, tags.atom], color: "#986801" },
-  { tag: [tags.function(tags.variableName), tags.function(tags.propertyName)], color: "#4078f2" },
-  { tag: [tags.typeName, tags.className, tags.namespace], color: "#c18401" },
-  { tag: tags.definition(tags.variableName), color: "#e45649" },
-  { tag: tags.propertyName, color: "#4078f2" },
-  { tag: [tags.tagName, tags.self], color: "#e45649" },
-  { tag: tags.attributeName, color: "#986801" },
-  { tag: [tags.regexp, tags.escape], color: "#0184bc" },
-  { tag: tags.invalid, color: "#ca1243" }
+  {
+    tag: [tags.keyword, tags.modifier, tags.operatorKeyword],
+    color: "#a626a4",
+    cssVar: "--md-code-keyword"
+  },
+  {
+    tag: [tags.string, tags.special(tags.string)],
+    color: "#50a14f",
+    cssVar: "--md-code-string"
+  },
+  {
+    tag: tags.comment,
+    color: "#a0a1a7",
+    cssVar: "--md-code-comment",
+    fontStyle: "italic"
+  },
+  {
+    tag: [tags.number, tags.bool, tags.null, tags.atom],
+    color: "#986801",
+    cssVar: "--md-code-literal"
+  },
+  {
+    tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+    color: "#4078f2",
+    cssVar: "--md-code-function"
+  },
+  {
+    tag: [tags.typeName, tags.className, tags.namespace],
+    color: "#c18401",
+    cssVar: "--md-code-type"
+  },
+  {
+    tag: tags.definition(tags.variableName),
+    color: "#e45649",
+    cssVar: "--md-code-variable"
+  },
+  { tag: tags.propertyName, color: "#4078f2", cssVar: "--md-code-property" },
+  { tag: [tags.tagName, tags.self], color: "#e45649", cssVar: "--md-code-tag" },
+  { tag: tags.attributeName, color: "#986801", cssVar: "--md-code-attribute" },
+  { tag: [tags.regexp, tags.escape], color: "#0184bc", cssVar: "--md-code-regexp" },
+  { tag: tags.invalid, color: "#ca1243", cssVar: "--md-code-invalid" }
 ];
+function themedColor(spec) {
+  return `var(${spec.cssVar}, ${spec.color})`;
+}
 
 // src/codemirror/code/codeHighlight.ts
 var style = HighlightStyle.define(
-  CODE_PALETTE.map((spec) => ({ tag: spec.tag, color: spec.color, fontStyle: spec.fontStyle }))
+  CODE_PALETTE.map((spec) => ({
+    tag: spec.tag,
+    color: themedColor(spec),
+    fontStyle: spec.fontStyle
+  }))
 );
 var codeHighlight = syntaxHighlighting(style);
 
@@ -2579,23 +2615,30 @@ var editorBaseTheme = EditorView.theme({
     marginRight: "0.3em",
     fontWeight: "normal"
   },
-  // Task list checkbox — drawn as a Carbon checkbox, not the native control: a
-  // 1rem square that fills with the icon token and shows a white tick when
-  // checked. `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.
+  // 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",
-    width: "1rem",
-    height: "1rem",
-    margin: "0 0.4em 0 0",
+    fontSize: "0.875em",
+    width: "1em",
+    height: "1em",
+    margin: "0 0.45em 0 0",
     cursor: "pointer",
-    verticalAlign: "-0.15em",
-    border: "0.0625rem solid var(--cds-icon-primary, #161616)",
-    borderRadius: "0.0625rem",
+    // 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": {
@@ -2603,15 +2646,20 @@ var editorBaseTheme = EditorView.theme({
     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.
   ".cm-task-checkbox:checked::after": {
     content: "''",
     position: "absolute",
-    left: "0.3125rem",
-    top: "0.0625rem",
-    width: "0.25rem",
-    height: "0.5rem",
-    border: "solid var(--cds-icon-on-color, #ffffff)",
-    borderWidth: "0 0.125rem 0.125rem 0",
+    left: "0.3125em",
+    top: "0.0625em",
+    width: "0.25em",
+    height: "0.5em",
+    border: "solid var(--cds-background, #ffffff)",
+    borderWidth: "0 0.125em 0.125em 0",
     transform: "rotate(45deg)"
   },
   ".cm-task-checkbox:focus-visible": {
@@ -4314,7 +4362,7 @@ function pickImageFileForCaret(view) {
   };
   input.click();
 }
-function composeExtensions(modules) {
+function mergeExtensions(modules) {
   const extensions = [];
   const toolbar = [];
   const allKeyBindings = [];
@@ -4338,6 +4386,7 @@ function composeExtensions(modules) {
   if (allKeyBindings.length) extensions.push(keymap.of(allKeyBindings));
   return { extensions, toolbar };
 }
+var composeExtensions = mergeExtensions;
 var HIGHLIGHT_RE = /==([^=\n]+?)==/g;
 var HIDE2 = Decoration.replace({});
 var highlightMark = Decoration.mark({ class: "cm-highlight" });
@@ -5540,6 +5589,7 @@ function CodeMirrorMarkdownEditorInner({
   filePath,
   linkTargets,
   onNavigateToLink,
+  extensions: hostExtensions,
   toolbar,
   selectionActions,
   resolveImageSrc,
@@ -5588,6 +5638,9 @@ function CodeMirrorMarkdownEditorInner({
   const syncedHashRef = useRef(/* @__PURE__ */ new Map());
   const currentFileRef = useRef(filePath);
   const modeInitializedRef = useRef(decorationsEnabled);
+  const hostExtensionsRef = useRef(hostExtensions);
+  hostExtensionsRef.current = hostExtensions;
+  const toolbarContributionsRef = useRef([]);
   function buildExtensions() {
     const base = [
       history(),
@@ -5747,16 +5800,20 @@ function CodeMirrorMarkdownEditorInner({
     ];
     if (decorationsEnabled) {
       base.push(markdownDecorationsPlugin);
-      const composed = composeExtensions([
+    }
+    const merged = mergeExtensions([
+      ...decorationsEnabled ? [
         wikilinkExtension,
         highlightExtension,
         footnoteExtension,
         mathExtension,
         mermaidExtension,
         tableExtension()
-      ]);
-      base.push(...composed.extensions);
-    }
+      ] : [],
+      ...hostExtensionsRef.current ?? []
+    ]);
+    base.push(...merged.extensions);
+    toolbarContributionsRef.current = merged.toolbar;
     return base;
   }
   const buildExtensionsRef = useRef(buildExtensions);
@@ -5914,7 +5971,7 @@ function CodeMirrorMarkdownEditorInner({
     view.dispatch({ selection: EditorSelection.cursor(head) });
   }, []);
   const toolbarNode = useMemo(
-    () => viewForToolbar && toolbar ? toolbar({ view: viewForToolbar }) : null,
+    () => viewForToolbar && toolbar ? toolbar({ view: viewForToolbar, contributions: toolbarContributionsRef.current }) : null,
     [viewForToolbar, toolbar]
   );
   const selectionNode = useMemo(
@@ -5929,6 +5986,6 @@ function CodeMirrorMarkdownEditorInner({
 }
 var CodeMirrorMarkdownEditor = memo(CodeMirrorMarkdownEditorInner);
 
-export { CodeMirrorMarkdownEditor, IMAGE_EDIT_ALT_EVENT, blockCommands, buildImageMarkdown, composeExtensions, computeFileDir, defaultResolveImageSrc, dirnamePath, editorBaseTheme, escapeAttr, escapeText, extractImageBlobs, extractImageFiles, footnoteExtension, formatCommands, getCachedMermaidPng, hasUriScheme, headingLine, hideAlways, highlightExtension, highlightFenceSpans, imageInsertHandlers, inlineScanRulesFacet, insertImageBlob, isAbsolutePath, isMermaidFenceInfo, joinPath, line, mark, markdownDecorationsPlugin, mathExtension, mermaidExtension, nodeRulesFacet, onEditorUpdate, parseFrontmatter, parseWikilinkBody, pickImageFileForCaret, raw, renderMermaidToSvg, resolveWikilinkTarget, resolveWorkspaceLink, scanInline, serializeMarkdown, setFrontmatterField, showImageActionMenu, structural, tableExtension, treeAt, warmMermaidPng, wikilinkExtension };
+export { CodeMirrorMarkdownEditor, IMAGE_EDIT_ALT_EVENT, blockCommands, buildImageMarkdown, composeExtensions, computeFileDir, defaultResolveImageSrc, dirnamePath, editorBaseTheme, escapeAttr, escapeText, extractImageBlobs, extractImageFiles, footnoteExtension, formatCommands, getCachedMermaidPng, hasUriScheme, headingLine, hideAlways, highlightExtension, highlightFenceSpans, imageInsertHandlers, inlineScanRulesFacet, insertImageBlob, isAbsolutePath, isMermaidFenceInfo, joinPath, line, mark, markdownDecorationsPlugin, mathExtension, mergeExtensions, mermaidExtension, nodeRulesFacet, onEditorUpdate, parseFrontmatter, parseWikilinkBody, pickImageFileForCaret, raw, renderMermaidToSvg, resolveWikilinkTarget, resolveWorkspaceLink, scanInline, serializeMarkdown, setFrontmatterField, showImageActionMenu, structural, tableExtension, treeAt, warmMermaidPng, wikilinkExtension };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map