@powerduck/md-editor 0.2.0

package/dist/index.mjs

@@ -0,0 +1,482 @@
+import { Compartment as w, EditorState as k } from "@codemirror/state";
+import { EditorView as m, keymap as b, lineNumbers as p } from "@codemirror/view";
+import { history as v, defaultKeymap as g, historyKeymap as y } from "@codemirror/commands";
+import { markdown as C } from "@codemirror/lang-markdown";
+import { languages as B } from "@codemirror/language-data";
+import M from "markdown-it";
+import E from "markdown-it-texmath";
+import P from "katex";
+class x {
+  constructor(e, t) {
+    this.lineNumbersCompartment = new w();
+    const r = [
+      v(),
+      b.of([...g, ...y]),
+      C({ codeLanguages: B }),
+      m.lineWrapping,
+      this.lineNumbersCompartment.of(t.lineNumbers ? p() : []),
+      m.updateListener.of((i) => {
+        var s;
+        i.docChanged && ((s = t.onChange) == null || s.call(t, i.state.doc.toString()));
+      })
+    ];
+    this.view = new m({
+      state: k.create({ doc: t.value ?? "", extensions: r }),
+      parent: e
+    });
+  }
+  getValue() {
+    return this.view.state.doc.toString();
+  }
+  setValue(e) {
+    this.view.dispatch({
+      changes: { from: 0, to: this.view.state.doc.length, insert: e }
+    });
+  }
+  setLineNumbers(e) {
+    this.view.dispatch({
+      effects: this.lineNumbersCompartment.reconfigure(e ? p() : [])
+    });
+  }
+  insertAtCursor(e) {
+    const { from: t, to: r } = this.view.state.selection.main;
+    this.view.dispatch({
+      changes: { from: t, to: r, insert: e },
+      selection: { anchor: t + e.length }
+    }), this.view.focus();
+  }
+  focus() {
+    this.view.focus();
+  }
+  destroy() {
+    this.view.destroy();
+  }
+}
+function S(n) {
+  n.use(E, {
+    engine: P,
+    delimiters: "dollars",
+    katexOptions: {
+      throwOnError: !1,
+      strict: !1
+    }
+  });
+}
+let T = 0;
+function L(n) {
+  const e = n.renderer.rules.fence ? n.renderer.rules.fence.bind(n.renderer.rules) : (t, r, i, s, o) => o.renderToken(t, r, i);
+  n.renderer.rules.fence = (t, r, i, s, o) => {
+    const a = t[r];
+    if (!a) return e(t, r, i, s, o);
+    if (a.info.trim().toLowerCase() === "mindmap") {
+      const h = `md-editor-mindmap-${++T}`, u = encodeURIComponent(a.content);
+      return `<div class="md-editor-mindmap" id="${h}" data-source="${u}"></div>`;
+    }
+    return e(t, r, i, s, o);
+  };
+}
+async function N(n) {
+  const e = n.querySelectorAll(
+    ".md-editor-mindmap:not([data-hydrated])"
+  );
+  if (e.length === 0) return;
+  const { Transformer: t } = await import("markmap-lib"), r = await import("markmap-view"), i = r.Markmap ?? r.default;
+  if (!i) return;
+  const s = new t();
+  for (const o of Array.from(e)) {
+    o.setAttribute("data-hydrated", "1");
+    const a = decodeURIComponent(o.dataset.source ?? "") || "- Empty mindmap", { root: d } = s.transform(a);
+    o.innerHTML = "";
+    const h = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    h.setAttribute("style", "width:100%;height:100%;min-height:280px;"), o.appendChild(h), i.create(h, { autoFit: !0 }, d);
+  }
+}
+class R {
+  constructor(e = {}) {
+    this.md = new M({
+      html: e.html ?? !1,
+      linkify: !0,
+      breaks: e.breaks ?? !1,
+      typographer: !0
+    }), e.math !== !1 && S(this.md), this.mindmapEnabled = e.mindmap !== !1, this.mindmapEnabled && L(this.md);
+  }
+  render(e) {
+    return this.md.render(e || "");
+  }
+  /**
+   * Call after the rendered HTML is inserted into the DOM to hydrate
+   * mindmap placeholders into real SVG diagrams.
+   */
+  async hydrate(e) {
+    this.mindmapEnabled && await N(e);
+  }
+}
+class H {
+  constructor(e) {
+    this.buttons = /* @__PURE__ */ new Map(), this.el = document.createElement("div"), this.el.className = "md-editor-toolbar", this.el.setAttribute("role", "toolbar");
+    for (const t of e) {
+      const r = document.createElement("button");
+      if (r.type = "button", r.className = "md-editor-toolbar-btn", t.toggle && r.classList.add("is-toggle"), t.active && r.classList.add("is-active"), r.title = t.title, r.setAttribute("aria-label", t.title), r.setAttribute("data-action", t.name), r.innerHTML = t.icon, r.addEventListener("click", t.handler), this.buttons.set(t.name, r), this.el.appendChild(r), t.groupEnd) {
+        const i = document.createElement("span");
+        i.className = "md-editor-toolbar-sep", this.el.appendChild(i);
+      }
+    }
+  }
+  setActive(e, t) {
+    var r;
+    (r = this.buttons.get(e)) == null || r.classList.toggle("is-active", t);
+  }
+  setIcon(e, t) {
+    const r = this.buttons.get(e);
+    r && (r.innerHTML = t);
+  }
+  destroy() {
+    for (const e of this.buttons.values())
+      e.onclick = null;
+    this.buttons.clear(), this.el.remove();
+  }
+}
+function f(n) {
+  const e = n.trim();
+  return {
+    charCount: n.length,
+    wordCount: e ? e.split(/\s+/).length : 0
+  };
+}
+class A {
+  constructor(e) {
+    this.el = document.createElement("div"), this.el.className = "md-editor-statusbar", this.countEl = document.createElement("span"), this.blockEl = document.createElement("span"), this.blockEl.className = "md-editor-statusbar-muted", this.refreshBtn = document.createElement("button"), this.refreshBtn.type = "button", this.refreshBtn.className = "md-editor-statusbar-refresh", this.refreshBtn.textContent = "Refresh preview", this.refreshBtn.style.display = "none", this.refreshBtn.addEventListener("click", e.onRefreshPreview), this.el.appendChild(this.countEl), this.el.appendChild(this.blockEl), this.el.appendChild(this.refreshBtn);
+  }
+  update(e) {
+    this.countEl.textContent = `${e.charCount} chars · ${e.wordCount} words`, this.blockEl.textContent = `${e.blockCount} render blocks`, this.refreshBtn.style.display = e.autoPreview ? "none" : "";
+  }
+  destroy() {
+    this.refreshBtn.onclick = null, this.el.remove();
+  }
+}
+const I = /^ {0,3}#{1,6}\s/, V = /^ {0,3}(`{3,}|~{3,})/;
+function $(n) {
+  let e = 5381;
+  for (let t = 0; t < n.length; t++)
+    e = e * 33 ^ n.charCodeAt(t);
+  return (e >>> 0).toString(36) + ":" + n.length;
+}
+function j(n) {
+  var a;
+  const e = n.split(`
+`), t = [];
+  let r = [], i = !1, s = "";
+  for (const d of e) {
+    const h = d.match(V);
+    if (h) {
+      const u = ((a = h[1]) == null ? void 0 : a[0]) ?? "";
+      i ? u === s && (i = !1) : (i = !0, s = u), r.push(d);
+      continue;
+    }
+    if (!i && I.test(d) && r.length > 0) {
+      t.push(r.join(`
+`)), r = [d];
+      continue;
+    }
+    r.push(d);
+  }
+  r.length > 0 && t.push(r.join(`
+`)), t.length === 0 && t.push("");
+  const o = /* @__PURE__ */ new Map();
+  return t.map((d) => {
+    const h = $(d), u = (o.get(h) ?? 0) + 1;
+    return o.set(h, u), { key: `${h}#${u}`, hash: h, source: d };
+  });
+}
+class K {
+  constructor(e, t, r = 800) {
+    this.container = e, this.renderBlock = t, this.maxCacheEntries = r, this.nodeByKey = /* @__PURE__ */ new Map(), this.htmlByHash = /* @__PURE__ */ new Map(), this.prevBlocks = [];
+  }
+  update(e) {
+    const t = j(e), r = document.createDocumentFragment(), i = /* @__PURE__ */ new Map();
+    let s = 0;
+    for (const o of t) {
+      let a = this.nodeByKey.get(o.key);
+      if (!a) {
+        let d = this.htmlByHash.get(o.hash);
+        d === void 0 && (d = this.renderBlock(o.source), this.htmlByHash.set(o.hash, d), s++), a = document.createElement("div"), a.className = "md-editor-block", a.dataset.blockKey = o.key, a.innerHTML = d;
+      }
+      i.set(o.key, a), r.appendChild(a);
+    }
+    return this.container.innerHTML = "", this.container.appendChild(r), this.nodeByKey = i, this.prevBlocks = t, this.evictCacheIfNeeded(t), { rerenderedCount: s, totalCount: t.length };
+  }
+  /**
+   * When the cache exceeds the limit, evict hashes that no longer appear in
+   * the current document to prevent unbounded memory growth during long
+   * editing sessions.
+   */
+  evictCacheIfNeeded(e) {
+    if (this.htmlByHash.size <= this.maxCacheEntries) return;
+    const t = new Set(e.map((r) => r.hash));
+    for (const r of Array.from(this.htmlByHash.keys()))
+      t.has(r) || this.htmlByHash.delete(r);
+  }
+  getBlockCount() {
+    return this.prevBlocks.length;
+  }
+  destroy() {
+    this.container.innerHTML = "", this.nodeByKey.clear(), this.htmlByHash.clear(), this.prevBlocks = [];
+  }
+}
+function q(n, e) {
+  let t, r;
+  const i = (...s) => {
+    r = s, t !== void 0 && clearTimeout(t), t = setTimeout(() => {
+      t = void 0, r && n(...r);
+    }, e);
+  };
+  return i.cancel = () => {
+    t !== void 0 && clearTimeout(t), t = void 0;
+  }, i.flush = () => {
+    t !== void 0 && (clearTimeout(t), t = void 0, r && n(...r));
+  }, i;
+}
+function D(n, e = 120, t = 600) {
+  const r = Math.max(0, n), i = Math.floor(r / 2e4) * 60;
+  return Math.min(t, e + i);
+}
+function Q(n, e = 300) {
+  const t = window;
+  return typeof t.requestIdleCallback == "function" ? t.requestIdleCallback(n, { timeout: e }) : window.setTimeout(n, 0);
+}
+function X(n) {
+  const e = window;
+  typeof e.cancelIdleCallback == "function" ? e.cancelIdleCallback(n) : clearTimeout(n);
+}
+const c = (n) => `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">${n}</svg>`, l = {
+  bold: c(
+    '<path d="M4 3h4.2a2.4 2.4 0 0 1 0 4.8H4V3Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/><path d="M4 7.8h4.8a2.4 2.4 0 1 1 0 4.8H4V7.8Z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/>'
+  ),
+  italic: c(
+    '<path d="M9.5 3h-3M6.5 13h-3M8.2 3 5.8 13" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>'
+  ),
+  heading: c(
+    '<path d="M3.5 3v10M11.5 3v10M3.5 8h8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>'
+  ),
+  link: c(
+    '<path d="M6.8 9.2 9.2 6.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M7.6 4.4 8.4 3.6a2.6 2.6 0 1 1 3.7 3.7l-.9.9M8.4 11.6l-.8.8a2.6 2.6 0 1 1-3.7-3.7l.9-.9" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>'
+  ),
+  code: c(
+    '<path d="M5.5 4.5 2 8l3.5 3.5M10.5 4.5 14 8l-3.5 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>'
+  ),
+  table: c(
+    '<rect x="2.5" y="3" width="11" height="10" rx="1.2" stroke="currentColor" stroke-width="1.3"/><path d="M2.5 6.6h11M6.5 3v10" stroke="currentColor" stroke-width="1.3"/>'
+  ),
+  sigma: c(
+    '<path d="M11.5 3.5h-7l3.5 4.5-3.5 4.5h7" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" stroke-linecap="round"/>'
+  ),
+  mindmap: c(
+    '<circle cx="3.2" cy="8" r="1.6" stroke="currentColor" stroke-width="1.3"/><circle cx="12.2" cy="3.6" r="1.6" stroke="currentColor" stroke-width="1.3"/><circle cx="12.2" cy="12.4" r="1.6" stroke="currentColor" stroke-width="1.3"/><path d="M4.6 7.3 10.7 4.2M4.6 8.7l6.1 3.1" stroke="currentColor" stroke-width="1.3"/>'
+  ),
+  eye: c(
+    '<path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.3"/>'
+  ),
+  refresh: c(
+    '<path d="M13 8a5 5 0 1 1-1.6-3.7" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/><path d="M13 3v3.2H9.8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>'
+  ),
+  moon: c(
+    '<path d="M13 9.6A5.4 5.4 0 1 1 6.4 3a4.3 4.3 0 0 0 6.6 6.6Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>'
+  ),
+  sun: c(
+    '<circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.3"/><path d="M8 1.8v1.4M8 12.8v1.4M14.2 8h-1.4M3.2 8H1.8M12.4 3.6l-1 1M4.6 11.4l-1 1M12.4 12.4l-1-1M4.6 4.6l-1-1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>'
+  )
+}, F = {
+  bold: ["**", "**", "bold text"],
+  italic: ["_", "_", "italic text"],
+  heading: ["## ", "", "Heading"],
+  link: ["[", "](https://)", "link text"],
+  code: ["```\n", "\n```", "code"],
+  math: ["$", "$", "E=mc^2"],
+  mindmapBlock: [
+    `\`\`\`mindmap
+# Root topic
+## Branch one
+- Child A
+- Child B
+## Branch two
+\`\`\`
+`,
+    "",
+    ""
+  ],
+  table: [`| Col 1 | Col 2 |
+| --- | --- |
+| `, ` | content |
+`, "content"]
+};
+class Y {
+  constructor(e, t = {}) {
+    this.previewPane = null, this.incremental = null, this.toolbar = null, this.statusBar = null, this.scheduledRender = null, this.scheduledWait = 0;
+    const r = typeof e == "string" ? document.querySelector(e) : e;
+    if (!r) throw new Error("MarkdownEditor: mount container not found");
+    this.container = r, this.mode = t.mode ?? "simple", this.theme = t.theme ?? "light", this.showPreview = t.preview ?? !0, this.autoPreview = t.autoPreview ?? !0, this.renderDebounceOpt = t.renderDebounce, this.onChange = t.onChange, this.container.classList.add("md-editor-root", `md-editor-mode-${this.mode}`), this.container.setAttribute("data-theme", this.theme), this.renderer = new R({
+      math: t.math ?? !0,
+      mindmap: t.mindmap ?? !0
+    }), this.buildLayout(), this.codeEditor = new x(this.editorPane, {
+      value: t.value ?? "",
+      lineNumbers: this.mode === "complex",
+      onChange: (i) => {
+        var s;
+        (s = this.onChange) == null || s.call(this, i), this.autoPreview && this.requestPreviewRender(i), this.updateStatusBar(i);
+      }
+    }), this.mode === "complex" && (this.buildToolbar(), this.buildStatusBar()), this.previewPane && (this.incremental = new K(
+      this.previewPane,
+      (i) => this.renderer.render(i)
+    )), this.renderPreview(t.value ?? ""), this.updateStatusBar(t.value ?? "");
+  }
+  // ---------- Layout ----------
+  buildLayout() {
+    this.container.innerHTML = "", this.body = document.createElement("div"), this.body.className = "md-editor-body", this.editorPane = document.createElement("div"), this.editorPane.className = "md-editor-pane md-editor-source", this.body.appendChild(this.editorPane), this.showPreview && (this.previewPane = document.createElement("div"), this.previewPane.className = "md-editor-pane md-editor-preview", this.body.appendChild(this.previewPane)), this.container.appendChild(this.body);
+  }
+  buildToolbar() {
+    const e = [
+      { name: "heading", title: "Heading", icon: l.heading, handler: () => this.insertSnippet("heading") },
+      { name: "bold", title: "Bold", icon: l.bold, handler: () => this.insertSnippet("bold") },
+      {
+        name: "italic",
+        title: "Italic",
+        icon: l.italic,
+        handler: () => this.insertSnippet("italic"),
+        groupEnd: !0
+      },
+      { name: "link", title: "Link", icon: l.link, handler: () => this.insertSnippet("link") },
+      { name: "code", title: "Code block", icon: l.code, handler: () => this.insertSnippet("code") },
+      {
+        name: "table",
+        title: "Table",
+        icon: l.table,
+        handler: () => this.insertSnippet("table"),
+        groupEnd: !0
+      },
+      { name: "math", title: "Math formula", icon: l.sigma, handler: () => this.insertSnippet("math") },
+      {
+        name: "mindmap",
+        title: "Insert mindmap",
+        icon: l.mindmap,
+        handler: () => this.insertSnippet("mindmapBlock"),
+        groupEnd: !0
+      },
+      {
+        name: "preview",
+        title: "Toggle preview",
+        icon: l.eye,
+        toggle: !0,
+        active: this.showPreview,
+        handler: () => this.togglePreview()
+      },
+      {
+        name: "theme",
+        title: "Toggle theme",
+        icon: this.theme === "dark" ? l.sun : l.moon,
+        handler: () => this.setTheme(this.theme === "dark" ? "light" : "dark")
+      }
+    ];
+    this.toolbar = new H(e), this.container.insertBefore(this.toolbar.el, this.body);
+  }
+  buildStatusBar() {
+    this.statusBar = new A({
+      onRefreshPreview: () => this.renderPreview(this.codeEditor.getValue())
+    }), this.container.appendChild(this.statusBar.el);
+  }
+  insertSnippet(e) {
+    const [t, r, i] = F[e];
+    this.codeEditor.insertAtCursor(`${t}${i}${r}`);
+  }
+  togglePreview() {
+    var t;
+    if (!this.previewPane) return;
+    const e = this.previewPane.style.display !== "none";
+    this.previewPane.style.display = e ? "none" : "", (t = this.toolbar) == null || t.setActive("preview", !e);
+  }
+  // ---------- Render scheduling (performance core) ----------
+  requestPreviewRender(e) {
+    var r, i;
+    const t = this.renderDebounceOpt === !1 ? 0 : this.renderDebounceOpt ?? D(e.length);
+    if (t === 0) {
+      (r = this.scheduledRender) == null || r.cancel(), this.scheduledRender = null, this.renderPreview(e);
+      return;
+    }
+    (!this.scheduledRender || this.scheduledWait !== t) && ((i = this.scheduledRender) == null || i.cancel(), this.scheduledRender = q((s) => this.renderPreview(s), t), this.scheduledWait = t), this.scheduledRender(e);
+  }
+  renderPreview(e) {
+    if (!this.previewPane || !this.incremental) return;
+    const { totalCount: t } = this.incremental.update(e);
+    if (this.renderer.hydrate(this.previewPane), this.statusBar) {
+      const { charCount: r, wordCount: i } = f(e);
+      this.statusBar.update({
+        charCount: r,
+        wordCount: i,
+        blockCount: t,
+        mode: this.mode,
+        autoPreview: this.autoPreview
+      });
+    }
+  }
+  updateStatusBar(e) {
+    var i;
+    if (!this.statusBar) return;
+    const { charCount: t, wordCount: r } = f(e);
+    this.statusBar.update({
+      charCount: t,
+      wordCount: r,
+      blockCount: ((i = this.incremental) == null ? void 0 : i.getBlockCount()) ?? 0,
+      mode: this.mode,
+      autoPreview: this.autoPreview
+    });
+  }
+  // ---------- Public API ----------
+  getValue() {
+    return this.codeEditor.getValue();
+  }
+  setValue(e) {
+    var t;
+    this.codeEditor.setValue(e), (t = this.scheduledRender) == null || t.cancel(), this.renderPreview(e), this.updateStatusBar(e);
+  }
+  getHtml() {
+    return this.renderer.render(this.getValue());
+  }
+  /** Manually trigger a preview render (use when autoPreview is false). */
+  renderNow() {
+    var e;
+    (e = this.scheduledRender) == null || e.cancel(), this.renderPreview(this.codeEditor.getValue());
+  }
+  setAutoPreview(e) {
+    this.autoPreview = e, e && this.renderPreview(this.codeEditor.getValue()), this.updateStatusBar(this.codeEditor.getValue());
+  }
+  /** Switch between simple and complex modes at runtime. */
+  setMode(e) {
+    var t, r;
+    e !== this.mode && (this.mode = e, this.container.classList.remove("md-editor-mode-simple", "md-editor-mode-complex"), this.container.classList.add(`md-editor-mode-${e}`), this.codeEditor.setLineNumbers(e === "complex"), (t = this.toolbar) == null || t.destroy(), this.toolbar = null, (r = this.statusBar) == null || r.destroy(), this.statusBar = null, e === "complex" && (this.buildToolbar(), this.buildStatusBar(), this.updateStatusBar(this.codeEditor.getValue())));
+  }
+  setTheme(e) {
+    var t;
+    this.theme = e, this.container.setAttribute("data-theme", e), (t = this.toolbar) == null || t.setIcon("theme", e === "dark" ? l.sun : l.moon);
+  }
+  focus() {
+    this.codeEditor.focus();
+  }
+  destroy() {
+    var e, t, r, i;
+    (e = this.scheduledRender) == null || e.cancel(), this.scheduledRender = null, this.codeEditor.destroy(), (t = this.toolbar) == null || t.destroy(), this.toolbar = null, (r = this.statusBar) == null || r.destroy(), this.statusBar = null, (i = this.incremental) == null || i.destroy(), this.incremental = null, this.container.innerHTML = "", this.container.classList.remove("md-editor-root", `md-editor-mode-${this.mode}`), this.container.removeAttribute("data-theme");
+  }
+}
+export {
+  x as CodeEditor,
+  K as IncrementalRenderer,
+  Y as MarkdownEditor,
+  R as Renderer,
+  A as StatusBar,
+  H as Toolbar,
+  D as adaptiveDebounceMs,
+  X as cancelIdle,
+  f as countText,
+  q as debounce,
+  l as icons,
+  Q as scheduleIdle,
+  j as splitIntoBlocks
+};

package/dist/perf/IncrementalRenderer.d.ts

@@ -0,0 +1,41 @@
+export interface IncrementalRenderResult {
+    /** Number of blocks actually re-rendered (cache miss) this update */
+    rerenderedCount: number;
+    /** Total number of blocks in this update */
+    totalCount: number;
+}
+/**
+ * Core performance strategy:
+ *
+ * 1. Source is split into blocks (see blocks.ts). Only changed blocks are
+ *    re-run through markdown-it / KaTeX.
+ * 2. Unchanged blocks reuse their existing DOM nodes directly (including
+ *    already-hydrated mindmap SVGs), with no string concatenation, innerHTML
+ *    assignment, or KaTeX computation.
+ * 3. Reordering is handled by appending existing nodes to a DocumentFragment
+ *    -- the browser moves them natively (auto-detaching from the old parent),
+ *    so no manual node-shuttling code is needed.
+ * 4. The result cache is keyed by content hash (not position), so undo/redo
+ *    and copy-paste of identical paragraphs also hit the cache.
+ * 5. Each block is wrapped in content-visibility: auto (see editor.css), so
+ *    off-screen blocks skip layout and paint entirely -- a decisive win for
+ *    multi-thousand-line documents.
+ */
+export declare class IncrementalRenderer {
+    private readonly container;
+    private readonly renderBlock;
+    private readonly maxCacheEntries;
+    private nodeByKey;
+    private htmlByHash;
+    private prevBlocks;
+    constructor(container: HTMLElement, renderBlock: (source: string) => string, maxCacheEntries?: number);
+    update(source: string): IncrementalRenderResult;
+    /**
+     * When the cache exceeds the limit, evict hashes that no longer appear in
+     * the current document to prevent unbounded memory growth during long
+     * editing sessions.
+     */
+    private evictCacheIfNeeded;
+    getBlockCount(): number;
+    destroy(): void;
+}

package/dist/perf/blocks.d.ts

@@ -0,0 +1,23 @@
+export interface SourceBlock {
+    /** Stable key for DOM node reuse (content hash + occurrence index) */
+    key: string;
+    /** Content hash used to detect whether this block changed */
+    hash: string;
+    /** Original markdown source for this block */
+    source: string;
+}
+/**
+ * Split a markdown document into blocks at ATX heading lines (# through ######).
+ *
+ * This split is safe under CommonMark semantics: a heading line is always the
+ * start of a new block, so unlike splitting on blank lines we never break
+ * list or blockquote structures that span blank lines.
+ *
+ * Content inside code fences (``` or ~~~) is never treated as a heading,
+ * preventing "# comment" in example code from being misread as a split point.
+ *
+ * Documents with no headings degrade to a single block. In that case
+ * incremental rendering falls back to full-document rendering, but the
+ * cross-edit result cache (htmlByHash) is still effective.
+ */
+export declare function splitIntoBlocks(source: string): SourceBlock[];

package/dist/perf/schedule.d.ts

@@ -0,0 +1,21 @@
+export interface DebouncedFn<A extends unknown[]> {
+    (...args: A): void;
+    cancel: () => void;
+    flush: () => void;
+}
+/**
+ * Trailing-edge debounce. Editor input events fire on every keystroke; the
+ * preview does not need to re-render on every one. Rendering after a pause
+ * is the first gatekeeping mechanism for keeping large documents responsive.
+ */
+export declare function debounce<A extends unknown[]>(fn: (...args: A) => void, wait: number): DebouncedFn<A>;
+/**
+ * Adaptive debounce interval based on document length. Larger documents cost
+ * more to render, so the pause should be longer to avoid redundant renders.
+ * Capped at max so small edits in large docs do not wait excessively.
+ */
+export declare function adaptiveDebounceMs(docLength: number, base?: number, max?: number): number;
+type IdleHandle = number;
+export declare function scheduleIdle(callback: () => void, timeout?: number): IdleHandle;
+export declare function cancelIdle(handle: IdleHandle): void;
+export {};

package/dist/plugins/math.d.ts

@@ -0,0 +1,7 @@
+import type MarkdownIt from 'markdown-it';
+/**
+ * Enable math formula support via KaTeX.
+ * Inline:  $E=mc^2$
+ * Block:   $$ \\int_0^1 x^2 dx $$
+ */
+export declare function useMath(md: MarkdownIt): void;

package/dist/plugins/mindmap.d.ts

@@ -0,0 +1,24 @@
+import type MarkdownIt from 'markdown-it';
+/**
+ * Intercept ```mindmap code fences and convert their content (a markdown
+ * outline) into a placeholder div. The actual SVG rendering happens
+ * asynchronously in hydrateMindmaps() because markdown-it renders strings
+ * synchronously while markmap requires real DOM nodes.
+ *
+ * Usage (in the editor markdown source):
+ *
+ * ```mindmap
+ * # Root topic
+ * ## Branch one
+ * - Child A
+ * - Child B
+ * ## Branch two
+ * ```
+ */
+export declare function useMindmap(md: MarkdownIt): void;
+/**
+ * After the preview DOM is updated, render all non-hydrated mindmap nodes.
+ * markmap-lib / markmap-view are dynamically imported so they do not
+ * increase the initial bundle size when mindmaps are absent.
+ */
+export declare function hydrateMindmaps(root: HTMLElement): Promise<void>;

package/dist/react/MarkdownEditor.d.ts

@@ -0,0 +1,32 @@
+import { type CSSProperties } from "react";
+import { type EditorMode, type EditorTheme, type MarkdownEditorOptions } from "../index.js";
+export interface MarkdownEditorProps extends Omit<MarkdownEditorOptions, "value" | "onChange"> {
+    /** Controlled value. When provided and different from internal state, syncs the editor. */
+    value?: string;
+    /** Uncontrolled initial value. Only applied on mount. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface MarkdownEditorHandle {
+    getValue: () => string;
+    setValue: (value: string) => void;
+    getHtml: () => string;
+    focus: () => void;
+    setMode: (mode: EditorMode) => void;
+    setTheme: (theme: EditorTheme) => void;
+    /** Manually trigger a preview render when autoPreview is false. */
+    renderNow: () => void;
+}
+/**
+ * Only "structural" options (mode, math, mindmap, preview, autoPreview,
+ * renderDebounce) trigger a destroy-and-recreate of the underlying instance,
+ * because they change DOM structure or the rendering pipeline.
+ *
+ * theme and value use their own lightweight sync paths and never recreate
+ * the instance -- critical for large documents where rebuilding CodeMirror
+ * and clearing the incremental render cache on every React re-render would
+ * be prohibitively expensive.
+ */
+export declare const MarkdownEditorReact: import("react").ForwardRefExoticComponent<MarkdownEditorProps & import("react").RefAttributes<MarkdownEditorHandle>>;

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export { MarkdownEditorReact } from './MarkdownEditor.js';
+export type { MarkdownEditorProps, MarkdownEditorHandle } from './MarkdownEditor.js';
+export type { EditorMode, EditorTheme, MarkdownEditorOptions } from '../index.js';

package/dist/react.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react/jsx-runtime"),n=require("react"),y=require("./index.cjs"),k=n.forwardRef(function(g,v){const{value:u,defaultValue:E,onChange:a,className:M,style:V,mode:i,theme:c,math:d,mindmap:l,preview:f,autoPreview:m,renderDebounce:w}=g,s=n.useRef(null),t=n.useRef(null),o=n.useRef(a);return o.current=a,n.useLayoutEffect(()=>{if(!s.current)return;const e=new y.MarkdownEditor(s.current,{value:u??E??"",mode:i,theme:c,math:d,mindmap:l,preview:f,autoPreview:m,renderDebounce:w,onChange:r=>{var R;return(R=o.current)==null?void 0:R.call(o,r)}});return t.current=e,()=>{e.destroy(),t.current=null}},[i,d,l,f,m,w]),n.useEffect(()=>{const e=t.current;!e||u===void 0||e.getValue()!==u&&e.setValue(u)},[u]),n.useEffect(()=>{t.current&&c&&t.current.setTheme(c)},[c]),n.useImperativeHandle(v,()=>({getValue:()=>{var e;return((e=t.current)==null?void 0:e.getValue())??""},setValue:e=>{var r;return(r=t.current)==null?void 0:r.setValue(e)},getHtml:()=>{var e;return((e=t.current)==null?void 0:e.getHtml())??""},focus:()=>{var e;return(e=t.current)==null?void 0:e.focus()},setMode:e=>{var r;return(r=t.current)==null?void 0:r.setMode(e)},setTheme:e=>{var r;return(r=t.current)==null?void 0:r.setTheme(e)},renderNow:()=>{var e;return(e=t.current)==null?void 0:e.renderNow()}}),[]),h.jsx("div",{ref:s,className:M,style:V})});exports.MarkdownEditorReact=k;