tiptap-markdown-react 0.8.12 → 0.9.0

package/dist/index.js

@@ -1,25 +1,26 @@
 "use client";
 import { Markdown } from "@tiptap/markdown";
+import { c as renderOrUpdateChart, d as destroyChart } from "./scrollToTocHeading-CIJu2AcX.js";
+import { C, a, R, b, f, m, r, s } from "./scrollToTocHeading-CIJu2AcX.js";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import Image from "@tiptap/extension-image";
 import { TableOfContents } from "@tiptap/extension-table-of-contents";
 import { NodeViewWrapper, ReactNodeViewRenderer, NodeViewContent, useEditor, EditorContent, useEditorState } from "@tiptap/react";
-import { forwardRef, useEffect, useRef, useImperativeHandle, useMemo, useState, useId, useCallback, useContext, createContext } from "react";
-import { e as enrichMarkdownCitations, s as styles$5 } from "./ReportContent-c_UlJnVY.js";
-import { R, a } from "./ReportContent-c_UlJnVY.js";
-import { C as CitationRef, g as mergeCommentIntervals, f as mapCommentAnchors, b as baseExtensions, c as CommentMark, l as lowlight, m as makeTocGetId, p as pureCodeBlock, a as pureImage, h as renderMathInto, i as subscribeMathClick } from "./extractToc-CecK9W_w.js";
-import { d, e, s } from "./extractToc-CecK9W_w.js";
+import { useId, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle, useCallback, useContext, createContext } from "react";
+import { s as serializeChartPayload, u as unwrapChartConfigs, b as parseGfmTable, c as normalizeChartPayload, e as enrichMarkdownCitations, d as styles$5 } from "./ReportContent-Re3hNps8.js";
+import { R as R2, a as a2 } from "./ReportContent-Re3hNps8.js";
+import { C as CitationRef, i as mergeCommentIntervals, h as mapCommentAnchors, j as reportChart, p as prepareChartMarkdown, b as baseExtensions, f as CommentMark, l as lowlight, m as makeTocGetId, a as pureCodeBlock, c as pureImage, k as renderMathInto, n as subscribeMathClick } from "./extractToc-Dv40DtV5.js";
+import { g, e, d, s as s2 } from "./extractToc-Dv40DtV5.js";
 import { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension, Node as Node$1 } from "@tiptap/core";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import { DecorationSet, Decoration } from "@tiptap/pm/view";
 import { FileHandlePlugin } from "@tiptap/extension-file-handler";
+import { createPortal } from "react-dom";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Popover from "@radix-ui/react-popover";
-import { createPortal } from "react-dom";
 import { isInTable, selectedRect, rowIsHeader, CellSelection } from "@tiptap/pm/tables";
-import { C, R as R2, f, r, s as s2 } from "./scrollToTocHeading-CwapFaVP.js";
 function CitationRefView({ node, extension }) {
   const index = String(node.attrs.index ?? "");
   const url = node.attrs.url || null;
@@ -86,9 +87,9 @@ function stripCommentAnchorMarks(slice, markType) {
   const strip = (fragment) => {
     const children = [];
     fragment.forEach((child) => {
-      if (child.isText && child.marks.some((m) => m.type === markType)) {
+      if (child.isText && child.marks.some((m2) => m2.type === markType)) {
         children.push(
-          child.mark(child.marks.filter((m) => m.type !== markType))
+          child.mark(child.marks.filter((m2) => m2.type !== markType))
         );
       } else if (child.content.size > 0) {
         children.push(child.copy(strip(child.content)));
@@ -103,7 +104,7 @@ function stripCommentAnchorMarks(slice, markType) {
 function sliceHasCommentMarks(slice, markType) {
   let found = false;
   slice.content.descendants((node) => {
-    if (node.isText && node.marks.some((m) => m.type === markType)) {
+    if (node.isText && node.marks.some((m2) => m2.type === markType)) {
       found = true;
       return false;
     }
@@ -122,9 +123,9 @@ function collectCommentRanges(doc) {
   const byId = /* @__PURE__ */ new Map();
   doc.descendants((node, pos) => {
     if (!node.isText) return true;
-    for (const m of node.marks) {
-      if (m.type.name !== "commentAnchor") continue;
-      const ids = m.attrs.commentIds ?? [];
+    for (const m2 of node.marks) {
+      if (m2.type.name !== "commentAnchor") continue;
+      const ids = m2.attrs.commentIds ?? [];
       for (const id of ids) {
         const arr = byId.get(id) ?? [];
         arr.push({ from: pos, to: pos + node.nodeSize });
@@ -180,19 +181,19 @@ function commentAnchorPlugin(options = {}) {
         const decos = [];
         const bounds = blockBounds(state.doc);
         if (showGutter) {
-          for (const b of bounds) {
+          for (const b2 of bounds) {
             const idsInBlock = [];
             for (const [id, ranges] of byId) {
-              if (rangesIntersectBlock(ranges, b.start, b.end)) {
+              if (rangesIntersectBlock(ranges, b2.start, b2.end)) {
                 idsInBlock.push(id);
               }
             }
             if (idsInBlock.length > 0) {
               decos.push(
                 Decoration.widget(
-                  b.start,
-                  (view) => gutterDom(idsInBlock, view, b.start),
-                  { side: -1, key: `tmr-gutter:${b.start}` }
+                  b2.start,
+                  (view) => gutterDom(idsInBlock, view, b2.start),
+                  { side: -1, key: `tmr-gutter:${b2.start}` }
                 )
               );
             }
@@ -206,10 +207,10 @@ function commentAnchorPlugin(options = {}) {
               Decoration.inline(r2.from, r2.to, { class: "tmr-comment-active" })
             );
           }
-          for (const b of bounds) {
-            if (rangesIntersectBlock(ranges, b.start, b.end)) {
+          for (const b2 of bounds) {
+            if (rangesIntersectBlock(ranges, b2.start, b2.end)) {
               decos.push(
-                Decoration.node(b.start, b.end, {
+                Decoration.node(b2.start, b2.end, {
                   class: "tmr-comment-block-active"
                 })
               );
@@ -272,9 +273,9 @@ function collectCommentIds(editor) {
   const ids = [];
   editor.state.doc.descendants((node) => {
     if (!node.isText) return true;
-    for (const m of node.marks) {
-      if (m.type.name !== "commentAnchor") continue;
-      for (const id of m.attrs.commentIds ?? []) {
+    for (const m2 of node.marks) {
+      if (m2.type.name !== "commentAnchor") continue;
+      for (const id of m2.attrs.commentIds ?? []) {
         if (!ids.includes(id)) ids.push(id);
       }
     }
@@ -286,9 +287,9 @@ function commentRangesById(editor, commentId) {
   const ranges = [];
   editor.state.doc.descendants((node, pos) => {
     if (!node.isText) return true;
-    for (const m of node.marks) {
-      if (m.type.name !== "commentAnchor") continue;
-      const ids = m.attrs.commentIds ?? [];
+    for (const m2 of node.marks) {
+      if (m2.type.name !== "commentAnchor") continue;
+      const ids = m2.attrs.commentIds ?? [];
       if (ids.includes(commentId)) {
         ranges.push({ from: pos, to: pos + node.nodeSize });
       }
@@ -496,6 +497,374 @@ const MarkdownPaste = Extension.create({
     ];
   }
 });
+const defaultChartLabels = {
+  tabLabel: (chartType, index) => `${chartType} ${index + 1}`,
+  done: "Done",
+  cancel: "Cancel",
+  configLabel: "Chart config (JSON)",
+  tableLabel: "Data table (Markdown)"
+};
+const defaultToolbarLabels = {
+  undo: "Undo",
+  redo: "Redo",
+  style: "Style",
+  normalText: "Normal text",
+  headingLabel: (level) => `Heading ${level}`,
+  fontSize: "Font size",
+  fontSizeDefault: "Default",
+  bold: "Bold",
+  italic: "Italic",
+  underline: "Underline",
+  strike: "Strikethrough",
+  code: "Inline code",
+  textColor: "Text color",
+  highlight: "Highlight",
+  colorNone: "None",
+  colorTheme: "THEME",
+  scriptMenu: "Superscript / Subscript",
+  scriptNormal: "Normal",
+  superscript: "Superscript",
+  subscript: "Subscript",
+  link: "Link",
+  linkPrompt: "Enter URL",
+  image: "Image",
+  imageUploadFailed: "Image upload failed",
+  importMarkdownFailed: "Markdown import failed",
+  importDocument: "Import",
+  importDocumentHint: "Import a file",
+  importDocumentOther: "Document",
+  importDocumentBusy: "Importing…",
+  importDocumentUploading: (percent) => `Uploading ${percent}%`,
+  importDocumentConverting: "Converting…",
+  importDocumentFailed: "Import failed",
+  blockquote: "Blockquote",
+  bulletList: "Bullet list",
+  orderedList: "Ordered list",
+  taskList: "Task list",
+  more: "More",
+  codeBlock: "Code block",
+  hr: "Divider",
+  importMarkdown: "Markdown",
+  tableInsert: "Insert table",
+  tableSizeSelected: (cols, rows) => `${cols} × ${rows}`,
+  tableAddColumnBefore: "Add column before",
+  tableAddColumnAfter: "Add column after",
+  tableDeleteColumn: "Delete column",
+  tableAddRowBefore: "Add row before",
+  tableAddRowAfter: "Add row after",
+  tableDeleteRow: "Delete row",
+  tableAddColumnBeforeN: (n) => `Add ${n} columns before`,
+  tableAddColumnAfterN: (n) => `Add ${n} columns after`,
+  tableDeleteColumnN: (n) => `Delete ${n} columns`,
+  tableAddRowBeforeN: (n) => `Add ${n} rows before`,
+  tableAddRowAfterN: (n) => `Add ${n} rows after`,
+  tableDeleteRowN: (n) => `Delete ${n} rows`,
+  tableDeleteTable: "Delete table",
+  inlineMath: "Inline equation",
+  blockMath: "Block equation",
+  mathPlaceholder: "E = mc^2",
+  mathDone: "Done",
+  mathCancel: "Cancel",
+  mathNewInline: "New equation",
+  mathNewBlock: "Add a TeX equation"
+};
+const defaultColorPaletteLabels = {
+  none: "None",
+  theme: "THEME"
+};
+const defaultTocLabels = {
+  title: "Contents",
+  expand: "Expand",
+  collapse: "Collapse"
+};
+const defaultCodeBlockLabels = {
+  autoDetect: "Auto-detect",
+  delete: "Delete code block"
+};
+const defaultCommentLabels = {
+  open: "Open",
+  resolved: "Resolved",
+  dismissed: "Dismissed",
+  outdated: "Outdated",
+  ambiguous: "Ambiguous",
+  partial: "Partially matched",
+  gutterTitle: "Comment"
+};
+function buildEditors(payload) {
+  const flat = payload.config.length === 1 ? payload.config[0] : payload.config;
+  const full = serializeChartPayload(payload);
+  const lines = full.split("\n");
+  const tableText = lines.slice(2).join("\n");
+  return {
+    configText: JSON.stringify(flat, null, 2),
+    tableText
+  };
+}
+function ChartEditorPopover({
+  payload,
+  anchor,
+  doneLabel = "Done",
+  cancelLabel = "Cancel",
+  configLabel = "Chart config (JSON)",
+  tableLabel = "Data table (Markdown)",
+  onConfirm,
+  onCancel
+}) {
+  const titleId = useId();
+  const initial = buildEditors(payload);
+  const [configText, setConfigText] = useState(initial.configText);
+  const [tableText, setTableText] = useState(initial.tableText);
+  const [error, setError] = useState(null);
+  const panelRef = useRef(null);
+  useEffect(() => {
+    const onKey = (e2) => {
+      if (e2.key === "Escape") onCancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onCancel]);
+  useEffect(() => {
+    const onDown = (e2) => {
+      var _a;
+      const t = e2.target;
+      if ((_a = panelRef.current) == null ? void 0 : _a.contains(t)) return;
+      if (anchor == null ? void 0 : anchor.contains(t)) return;
+      onCancel();
+    };
+    window.addEventListener("mousedown", onDown);
+    return () => window.removeEventListener("mousedown", onDown);
+  }, [anchor, onCancel]);
+  const style = (() => {
+    if (!anchor) return { top: 80, left: 80 };
+    const r2 = anchor.getBoundingClientRect();
+    const top = Math.min(r2.bottom + 8, window.innerHeight - 40);
+    const left = Math.min(Math.max(8, r2.left), window.innerWidth - 340);
+    return { top, left };
+  })();
+  const submit = () => {
+    try {
+      const parsed = JSON.parse(configText);
+      const configs = unwrapChartConfigs(parsed);
+      if (!(configs == null ? void 0 : configs.length)) {
+        setError("Invalid chart config JSON");
+        return;
+      }
+      const table = parseGfmTable(
+        tableText.endsWith("\n") ? tableText : `${tableText}
+`
+      );
+      if (!table) {
+        setError("Invalid Markdown table");
+        return;
+      }
+      const next = normalizeChartPayload(
+        configs,
+        table.columns,
+        table.dataSource
+      );
+      if (!next) {
+        setError("No supported chartType / axes in config");
+        return;
+      }
+      onConfirm(next);
+    } catch (e2) {
+      setError(e2.message || "Parse error");
+    }
+  };
+  const onKeyDown = (e2) => {
+    if ((e2.metaKey || e2.ctrlKey) && e2.key === "Enter") {
+      e2.preventDefault();
+      submit();
+    }
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: "tmr-chart-popover",
+        style: { top: style.top, left: style.left },
+        role: "dialog",
+        "aria-labelledby": titleId,
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { id: titleId, className: "tmr-chart-title", children: "Edit chart" }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            configLabel,
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value: configText,
+                onChange: (e2) => setConfigText(e2.target.value),
+                spellCheck: false
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            tableLabel,
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                value: tableText,
+                onChange: (e2) => setTableText(e2.target.value),
+                spellCheck: false
+              }
+            )
+          ] }),
+          error ? /* @__PURE__ */ jsx("div", { className: "tmr-chart-popover-error", children: error }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "tmr-chart-popover-actions", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, children: cancelLabel }),
+            /* @__PURE__ */ jsx("button", { type: "button", "data-primary": "true", onClick: submit, children: doneLabel })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function tabLabel(chartType, title, index, fallback) {
+  if (title == null ? void 0 : title.trim()) return title;
+  return fallback(chartType, index);
+}
+function ChartView({
+  node,
+  updateAttributes,
+  editor,
+  extension,
+  selected
+}) {
+  const canvasRef = useRef(null);
+  const chartRef = useRef(null);
+  const rootRef = useRef(null);
+  const [active2, setActive2] = useState(0);
+  const [editing, setEditing] = useState(false);
+  const payload = useMemo(
+    () => ({
+      config: node.attrs.config ?? [],
+      columns: node.attrs.columns ?? [],
+      dataSource: node.attrs.dataSource ?? []
+    }),
+    [node.attrs.config, node.attrs.columns, node.attrs.dataSource]
+  );
+  const editable = Boolean(editor == null ? void 0 : editor.isEditable) && extension.options.chartEditable !== false;
+  const theme = extension.options.chartTheme ?? null;
+  const configs = payload.config;
+  const safeIndex = Math.min(active2, Math.max(0, configs.length - 1));
+  const config = configs[safeIndex];
+  const height = (config == null ? void 0 : config.height) ?? 320;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !config) return;
+    chartRef.current = renderOrUpdateChart({
+      canvas,
+      config,
+      payload,
+      theme,
+      chart: chartRef.current
+    });
+    return () => {
+    };
+  }, [config, payload, theme]);
+  useEffect(() => {
+    return () => {
+      destroyChart(chartRef.current);
+      chartRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    destroyChart(chartRef.current);
+    chartRef.current = null;
+    const canvas = canvasRef.current;
+    if (!canvas || !config) return;
+    chartRef.current = renderOrUpdateChart({
+      canvas,
+      config,
+      payload,
+      theme,
+      chart: null
+    });
+  }, [safeIndex]);
+  const labels = {
+    ...defaultChartLabels,
+    ...extension.options.chartLabels
+  };
+  const onOpenEdit = () => {
+    if (!editable) return;
+    setEditing(true);
+  };
+  return /* @__PURE__ */ jsxs(
+    NodeViewWrapper,
+    {
+      as: "div",
+      className: `tmr-chart${editable ? " tmr-chart--interactive" : ""}`,
+      "data-type": "chart",
+      "data-selected": selected ? "true" : void 0,
+      ref: rootRef,
+      onClick: (e2) => {
+        if (e2.target.closest("button")) return;
+        onOpenEdit();
+      },
+      children: [
+        (config == null ? void 0 : config.title) ? /* @__PURE__ */ jsx("div", { className: "tmr-chart-title", children: config.title }) : null,
+        (config == null ? void 0 : config.dataTime) ? /* @__PURE__ */ jsx("div", { className: "tmr-chart-time", children: config.dataTime }) : null,
+        configs.length > 1 ? /* @__PURE__ */ jsx("div", { className: "tmr-chart-tabs", role: "tablist", children: configs.map((c, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            className: "tmr-chart-tab",
+            "data-active": i === safeIndex ? "true" : "false",
+            "aria-selected": i === safeIndex,
+            onClick: (e2) => {
+              e2.stopPropagation();
+              setActive2(i);
+            },
+            children: tabLabel(c.chartType, c.title, i, labels.tabLabel)
+          },
+          `${c.chartType}-${i}`
+        )) }) : null,
+        /* @__PURE__ */ jsx("div", { className: "tmr-chart-canvas-host", style: { height }, children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) }),
+        editing ? /* @__PURE__ */ jsx(
+          ChartEditorPopover,
+          {
+            payload,
+            anchor: rootRef.current,
+            doneLabel: labels.done,
+            cancelLabel: labels.cancel,
+            configLabel: labels.configLabel,
+            tableLabel: labels.tableLabel,
+            onCancel: () => setEditing(false),
+            onConfirm: (next) => {
+              updateAttributes({
+                config: next.config,
+                columns: next.columns,
+                dataSource: next.dataSource
+              });
+              setEditing(false);
+              setActive2(0);
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function createChart(options = {}) {
+  const { editable = true, chartTheme = null, chartLabels } = options;
+  return reportChart.extend({
+    addOptions() {
+      return {
+        HTMLAttributes: {},
+        chartEditable: editable,
+        chartTheme,
+        chartLabels
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer(ChartView);
+    }
+  });
+}
 function Svg({ size = "1em", children, ...rest }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -644,92 +1013,6 @@ const TableDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "M15 5v14" }),
   /* @__PURE__ */ jsx("path", { d: "m7 2 10 20" })
 ] });
-const defaultToolbarLabels = {
-  undo: "Undo",
-  redo: "Redo",
-  style: "Style",
-  normalText: "Normal text",
-  headingLabel: (level) => `Heading ${level}`,
-  fontSize: "Font size",
-  fontSizeDefault: "Default",
-  bold: "Bold",
-  italic: "Italic",
-  underline: "Underline",
-  strike: "Strikethrough",
-  code: "Inline code",
-  textColor: "Text color",
-  highlight: "Highlight",
-  colorNone: "None",
-  colorTheme: "THEME",
-  scriptMenu: "Superscript / Subscript",
-  scriptNormal: "Normal",
-  superscript: "Superscript",
-  subscript: "Subscript",
-  link: "Link",
-  linkPrompt: "Enter URL",
-  image: "Image",
-  imageUploadFailed: "Image upload failed",
-  importMarkdownFailed: "Markdown import failed",
-  importDocument: "Import",
-  importDocumentHint: "Import a file",
-  importDocumentOther: "Document",
-  importDocumentBusy: "Importing…",
-  importDocumentUploading: (percent) => `Uploading ${percent}%`,
-  importDocumentConverting: "Converting…",
-  importDocumentFailed: "Import failed",
-  blockquote: "Blockquote",
-  bulletList: "Bullet list",
-  orderedList: "Ordered list",
-  taskList: "Task list",
-  more: "More",
-  codeBlock: "Code block",
-  hr: "Divider",
-  importMarkdown: "Markdown",
-  tableInsert: "Insert table",
-  tableSizeSelected: (cols, rows) => `${cols} × ${rows}`,
-  tableAddColumnBefore: "Add column before",
-  tableAddColumnAfter: "Add column after",
-  tableDeleteColumn: "Delete column",
-  tableAddRowBefore: "Add row before",
-  tableAddRowAfter: "Add row after",
-  tableDeleteRow: "Delete row",
-  tableAddColumnBeforeN: (n) => `Add ${n} columns before`,
-  tableAddColumnAfterN: (n) => `Add ${n} columns after`,
-  tableDeleteColumnN: (n) => `Delete ${n} columns`,
-  tableAddRowBeforeN: (n) => `Add ${n} rows before`,
-  tableAddRowAfterN: (n) => `Add ${n} rows after`,
-  tableDeleteRowN: (n) => `Delete ${n} rows`,
-  tableDeleteTable: "Delete table",
-  inlineMath: "Inline equation",
-  blockMath: "Block equation",
-  mathPlaceholder: "E = mc^2",
-  mathDone: "Done",
-  mathCancel: "Cancel",
-  mathNewInline: "New equation",
-  mathNewBlock: "Add a TeX equation"
-};
-const defaultColorPaletteLabels = {
-  none: "None",
-  theme: "THEME"
-};
-const defaultTocLabels = {
-  title: "Contents",
-  expand: "Expand",
-  collapse: "Collapse"
-};
-const defaultCodeBlockLabels = {
-  autoDetect: "Auto-detect",
-  delete: "Delete code block"
-};
-const defaultCommentLabels = {
-  open: "Open",
-  resolved: "Resolved",
-  dismissed: "Dismissed",
-  outdated: "Outdated",
-  ambiguous: "Ambiguous",
-  partial: "Partially matched",
-  gutterTitle: "Comment"
-};
 const wrapper = "_wrapper_5i2vi_2";
 const header$1 = "_header_5i2vi_18";
 const langTrigger = "_langTrigger_5i2vi_28";
@@ -922,9 +1205,8 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   showCommentGutter = true,
   commentInteractive = true
 }, ref) {
-  const preparedInitial = enrichMarkdownCitations(
-    initialMarkdown,
-    sources ?? []
+  const preparedInitial = prepareChartMarkdown(
+    enrichMarkdownCitations(initialMarkdown, sources ?? [])
   );
   const editor = useEditor({
     extensions: [
@@ -932,6 +1214,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       CodeBlock.configure({ lowlight, codeBlockLabels }),
       ImageWithConfirmDelete.configure({ inline: false }),
       ImportPlaceholder,
+      createChart({ editable: true }),
       createCitationRef({ renderCitation }),
       CommentMark,
       commentAnchorExtension({
@@ -943,7 +1226,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
         getId: makeTocGetId(),
         onUpdate: (anchors) => {
           onTocChange == null ? void 0 : onTocChange(
-            anchors.filter((a2) => a2.level <= 6).map((a2) => ({ id: a2.id, level: a2.level, text: a2.textContent }))
+            anchors.filter((a3) => a3.level <= 6).map((a3) => ({ id: a3.id, level: a3.level, text: a3.textContent }))
           );
         }
       }),
@@ -1054,7 +1337,9 @@ function MarkdownPreview({
   className
 }) {
   const prepared = useMemo(
-    () => enrichMarkdownCitations(markdown, sources ?? []),
+    () => prepareChartMarkdown(
+      enrichMarkdownCitations(markdown, sources ?? [])
+    ),
     [markdown, sources]
   );
   const extensions = useMemo(
@@ -1062,6 +1347,7 @@ function MarkdownPreview({
       ...baseExtensions,
       pureCodeBlock,
       pureImage,
+      createChart({ editable: false }),
       createCitationRef({ renderCitation }),
       Markdown
     ],
@@ -1119,7 +1405,9 @@ function resolveImportMenuItems({
   return [markdown];
 }
 function insertMarkdown(editor, markdown, sources = []) {
-  const prepared = enrichMarkdownCitations(markdown, sources);
+  const prepared = prepareChartMarkdown(
+    enrichMarkdownCitations(markdown, sources)
+  );
   if (!prepared) return;
   if (tryInsertMarkdown(editor, prepared)) return;
   for (const block of splitTopLevelBlocks(prepared)) {
@@ -2849,9 +3137,10 @@ export {
   COMMENT_ACTIVE_META,
   COMMENT_CLICK_META,
   COMMENT_GUTTER_META,
+  C as ChartMount,
   CheckIcon,
   ChevronDownIcon,
-  C as CitationInteractive,
+  a as CitationInteractive,
   CitationRef,
   CodeBlockView,
   CodeIcon,
@@ -2877,8 +3166,9 @@ export {
   MarkdownWysiwygEditor,
   MenuIcon,
   RedoIcon,
-  R as ReportContent,
-  R2 as ReportContentInteractive,
+  R2 as ReportContent,
+  R as ReportContentInteractive,
+  b as ReportContentWithCharts,
   RowAfterIcon,
   RowBeforeIcon,
   RowDeleteIcon,
@@ -2888,16 +3178,18 @@ export {
   TrashIcon,
   UnderlineIcon,
   UndoIcon,
-  a as applyCitationSources,
+  a2 as applyCitationSources,
   applyCommentAnchorsToEditor,
   baseExtensions,
-  d as blockTextHash,
+  g as blockTextHash,
   collectCommentIds,
   commentAnchorExtension,
   commentAnchorPlugin,
   commentAnchorPluginKey,
   commentRangesById,
+  createChart,
   createCitationRef,
+  defaultChartLabels,
   defaultCodeBlockLabels,
   defaultColorPaletteLabels,
   defaultCommentLabels,
@@ -2913,12 +3205,17 @@ export {
   makeTocGetId,
   mapCommentAnchors,
   mergeCommentIntervals,
+  m as mountChartsInContainer,
   nextComment,
+  prepareChartMarkdown,
+  d as pureChart,
   pureCodeBlock,
   pureImage,
   r as readCitationAttrs,
-  s2 as scrollToTocHeading,
-  s as stabilizeMarkdown,
+  reportChart,
+  s as scrollToTocHeading,
+  serializeChartPayload,
+  s2 as stabilizeMarkdown,
   stripCommentAnchorMarks,
   useIsMobile
 };