tiptap-markdown-react 0.8.11 → 0.9.0

package/dist/index.js

@@ -1,24 +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 { C, R as R2, f, r, s as s2 } from "./scrollToTocHeading-CwapFaVP.js";
+import { isInTable, selectedRect, rowIsHeader, CellSelection } from "@tiptap/pm/tables";
 function CitationRefView({ node, extension }) {
   const index = String(node.attrs.index ?? "");
   const url = node.attrs.url || null;
@@ -85,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)));
@@ -102,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;
     }
@@ -121,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 });
@@ -179,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}` }
                 )
               );
             }
@@ -205,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"
                 })
               );
@@ -271,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);
       }
     }
@@ -285,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 });
       }
@@ -495,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",
@@ -636,84 +1006,13 @@ const RowDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
   /* @__PURE__ */ jsx("path", { d: "m9 8 6 8" }),
   /* @__PURE__ */ jsx("path", { d: "m15 8-6 8" })
 ] });
-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",
-  tableAddColumnBefore: "Add column before",
-  tableAddColumnAfter: "Add column after",
-  tableDeleteColumn: "Delete column",
-  tableAddRowBefore: "Add row before",
-  tableAddRowAfter: "Add row after",
-  tableDeleteRow: "Delete row",
-  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 TableDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 5v14" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 5v14" }),
+  /* @__PURE__ */ jsx("path", { d: "m7 2 10 20" })
+] });
 const wrapper = "_wrapper_5i2vi_2";
 const header$1 = "_header_5i2vi_18";
 const langTrigger = "_langTrigger_5i2vi_28";
@@ -906,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: [
@@ -916,6 +1214,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       CodeBlock.configure({ lowlight, codeBlockLabels }),
       ImageWithConfirmDelete.configure({ inline: false }),
       ImportPlaceholder,
+      createChart({ editable: true }),
       createCitationRef({ renderCitation }),
       CommentMark,
       commentAnchorExtension({
@@ -927,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 }))
           );
         }
       }),
@@ -1038,7 +1337,9 @@ function MarkdownPreview({
   className
 }) {
   const prepared = useMemo(
-    () => enrichMarkdownCitations(markdown, sources ?? []),
+    () => prepareChartMarkdown(
+      enrichMarkdownCitations(markdown, sources ?? [])
+    ),
     [markdown, sources]
   );
   const extensions = useMemo(
@@ -1046,6 +1347,7 @@ function MarkdownPreview({
       ...baseExtensions,
       pureCodeBlock,
       pureImage,
+      createChart({ editable: false }),
       createCitationRef({ renderCitation }),
       Markdown
     ],
@@ -1103,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)) {
@@ -1142,45 +1446,140 @@ function splitTopLevelBlocks(markdown) {
 function stripToPlainText(markdown) {
   return markdown.replace(/!\[[^\]]*\]\([^)]+\)/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/^#{1,6}\s+/gm, "").replace(/^[ \t]*[-*+]\s+/gm, "").replace(/^[ \t]*\d+\.\s+/gm, "").replace(/[*_~`]+/g, "").replace(/<[^>]+>/g, "").replace(/\|/g, " ").replace(/\s+/g, " ").trim();
 }
-const toolbar = "_toolbar_16b09_2";
-const inner = "_inner_16b09_15";
-const btn = "_btn_16b09_27";
-const btnActive = "_btnActive_16b09_50";
-const tableBubble = "_tableBubble_16b09_66";
-const txtIcon = "_txtIcon_16b09_78";
-const colorIcon = "_colorIcon_16b09_86";
-const colorIconGlyph = "_colorIconGlyph_16b09_94";
-const colorIconBar = "_colorIconBar_16b09_100";
-const scriptTrigger = "_scriptTrigger_16b09_107";
-const scriptTriggerGlyph = "_scriptTriggerGlyph_16b09_127";
-const divider = "_divider_16b09_135";
-const styleTrigger = "_styleTrigger_16b09_144";
-const styleTriggerLabel = "_styleTriggerLabel_16b09_173";
-const styleTriggerCaret = "_styleTriggerCaret_16b09_181";
-const styleItem = "_styleItem_16b09_187";
-const styleIcon = "_styleIcon_16b09_193";
-const scriptGlyph = "_scriptGlyph_16b09_203";
-const menu = "_menu_16b09_215";
-const menuItem = "_menuItem_16b09_226";
-const menuItemSelected = "_menuItemSelected_16b09_252";
-const popoverContent$1 = "_popoverContent_16b09_266";
-const mathLayer = "_mathLayer_16b09_270";
-const mathStack = "_mathStack_16b09_275";
-const mathStackBlock = "_mathStackBlock_16b09_282";
-const mathHint = "_mathHint_16b09_287";
-const mathHintBlock = "_mathHintBlock_16b09_299";
-const mathHintIcon = "_mathHintIcon_16b09_305";
-const mathField = "_mathField_16b09_336";
-const mathFieldBlock = "_mathFieldBlock_16b09_348";
-const mathInput = "_mathInput_16b09_355";
-const mathDone = "_mathDone_16b09_373";
-const mathDoneKbd = "_mathDoneKbd_16b09_398";
+function getTableSelectionInfo(state) {
+  if (!isInTable(state)) return null;
+  const rect = selectedRect(state);
+  const rowCount = Math.max(1, rect.bottom - rect.top);
+  const colCount = Math.max(1, rect.right - rect.left);
+  let includesHeaderRow = false;
+  for (let row = rect.top; row < rect.bottom; row++) {
+    if (rowIsHeader(rect.map, rect.table, row)) {
+      includesHeaderRow = true;
+      break;
+    }
+  }
+  return {
+    rowCount,
+    colCount,
+    isMultiCell: rowCount > 1 || colCount > 1,
+    includesHeaderRow,
+    coversAllRows: rect.top === 0 && rect.bottom === rect.map.height,
+    coversAllCols: rect.left === 0 && rect.right === rect.map.width
+  };
+}
+function isPosInCellSelection(selection, pos) {
+  let found = false;
+  selection.forEachCell((node, cellPos) => {
+    if (pos >= cellPos && pos <= cellPos + node.nodeSize) {
+      found = true;
+    }
+  });
+  return found;
+}
+function preserveTableSelectionOnContextMenu(editor, pos) {
+  const { selection } = editor.state;
+  if (selection instanceof CellSelection && isPosInCellSelection(selection, pos)) {
+    editor.view.focus();
+    return;
+  }
+  editor.chain().focus().setTextSelection(pos).run();
+}
+function addRowsBefore(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addRowBefore()) return false;
+  }
+  return true;
+}
+function addRowsAfter(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addRowAfter()) return false;
+  }
+  return true;
+}
+function addColumnsBefore(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addColumnBefore()) return false;
+  }
+  return true;
+}
+function addColumnsAfter(editor, count) {
+  const n = Math.max(1, count);
+  for (let i = 0; i < n; i++) {
+    if (!editor.commands.addColumnAfter()) return false;
+  }
+  return true;
+}
+function deleteSelectedRows(editor) {
+  const info = getTableSelectionInfo(editor.state);
+  if (!info) return false;
+  if (info.coversAllRows) return editor.commands.deleteTable();
+  return editor.commands.deleteRow();
+}
+function deleteSelectedColumns(editor) {
+  const info = getTableSelectionInfo(editor.state);
+  if (!info) return false;
+  if (info.coversAllCols) {
+    if (info.coversAllRows) return editor.commands.deleteTable();
+    return false;
+  }
+  return editor.commands.deleteColumn();
+}
+const toolbar = "_toolbar_1f7fb_2";
+const inner = "_inner_1f7fb_15";
+const btn = "_btn_1f7fb_27";
+const btnActive = "_btnActive_1f7fb_50";
+const tableBubble = "_tableBubble_1f7fb_66";
+const tableMenuItem = "_tableMenuItem_1f7fb_77";
+const tableMenuItemIcon = "_tableMenuItemIcon_1f7fb_103";
+const tableMenuItemLabel = "_tableMenuItemLabel_1f7fb_113";
+const tableMenuDivider = "_tableMenuDivider_1f7fb_118";
+const txtIcon = "_txtIcon_1f7fb_126";
+const colorIcon = "_colorIcon_1f7fb_134";
+const colorIconGlyph = "_colorIconGlyph_1f7fb_142";
+const colorIconBar = "_colorIconBar_1f7fb_148";
+const scriptTrigger = "_scriptTrigger_1f7fb_155";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_1f7fb_175";
+const divider = "_divider_1f7fb_183";
+const styleTrigger = "_styleTrigger_1f7fb_192";
+const styleTriggerLabel = "_styleTriggerLabel_1f7fb_221";
+const styleTriggerCaret = "_styleTriggerCaret_1f7fb_229";
+const styleItem = "_styleItem_1f7fb_235";
+const styleIcon = "_styleIcon_1f7fb_241";
+const scriptGlyph = "_scriptGlyph_1f7fb_251";
+const menu = "_menu_1f7fb_263";
+const menuItem = "_menuItem_1f7fb_274";
+const menuItemSelected = "_menuItemSelected_1f7fb_301";
+const tableInsertCaret = "_tableInsertCaret_1f7fb_314";
+const tableSizePicker = "_tableSizePicker_1f7fb_322";
+const tableSizeGrid = "_tableSizeGrid_1f7fb_332";
+const tableSizeCell = "_tableSizeCell_1f7fb_337";
+const tableSizeCellActive = "_tableSizeCellActive_1f7fb_347";
+const tableSizeLabel = "_tableSizeLabel_1f7fb_352";
+const popoverContent$1 = "_popoverContent_1f7fb_361";
+const mathLayer = "_mathLayer_1f7fb_365";
+const mathStack = "_mathStack_1f7fb_370";
+const mathStackBlock = "_mathStackBlock_1f7fb_377";
+const mathHint = "_mathHint_1f7fb_382";
+const mathHintBlock = "_mathHintBlock_1f7fb_394";
+const mathHintIcon = "_mathHintIcon_1f7fb_400";
+const mathField = "_mathField_1f7fb_431";
+const mathFieldBlock = "_mathFieldBlock_1f7fb_443";
+const mathInput = "_mathInput_1f7fb_450";
+const mathDone = "_mathDone_1f7fb_468";
+const mathDoneKbd = "_mathDoneKbd_1f7fb_493";
 const styles$3 = {
   toolbar,
   inner,
   btn,
   btnActive,
   tableBubble,
+  tableMenuItem,
+  tableMenuItemIcon,
+  tableMenuItemLabel,
+  tableMenuDivider,
   txtIcon,
   colorIcon,
   colorIconGlyph,
@@ -1197,6 +1596,12 @@ const styles$3 = {
   menu,
   menuItem,
   menuItemSelected,
+  tableInsertCaret,
+  tableSizePicker,
+  tableSizeGrid,
+  tableSizeCell,
+  tableSizeCellActive,
+  tableSizeLabel,
   popoverContent: popoverContent$1,
   mathLayer,
   mathStack,
@@ -1539,6 +1944,30 @@ function ToolbarButton({
 function Divider() {
   return /* @__PURE__ */ jsx("span", { className: styles$3.divider, "aria-hidden": true });
 }
+function TableMenuItem({
+  label,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: styles$3.tableMenuItem,
+      onMouseDown: (e2) => e2.preventDefault(),
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles$3.tableMenuItemIcon, "aria-hidden": true, children }),
+        /* @__PURE__ */ jsx("span", { className: styles$3.tableMenuItemLabel, children: label })
+      ]
+    }
+  );
+}
+function TableMenuDivider() {
+  return /* @__PURE__ */ jsx("div", { className: styles$3.tableMenuDivider, "aria-hidden": true });
+}
 const MenuCloseCtx = createContext(() => {
 });
 function MenuPopover({
@@ -1584,6 +2013,92 @@ function MenuItem({
     }
   );
 }
+const TABLE_PICKER_COLS = 10;
+const TABLE_PICKER_ROWS = 8;
+function TableInsertItem({
+  disabled,
+  labels,
+  onInsert
+}) {
+  const closeMenu = useContext(MenuCloseCtx);
+  const [open, setOpen] = useState(false);
+  const [hover, setHover] = useState({ cols: 0, rows: 0 });
+  const resetHover = useCallback(() => setHover({ cols: 0, rows: 0 }), []);
+  return /* @__PURE__ */ jsxs(
+    Popover.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        setOpen(next);
+        if (!next) resetHover();
+      },
+      children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            disabled,
+            className: `${styles$3.menuItem} ${open ? styles$3.menuItemSelected : ""}`,
+            onMouseDown: (e2) => e2.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "⊞" }),
+                labels.tableInsert
+              ] }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.tableInsertCaret })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            className: styles$3.tableSizePicker,
+            side: "right",
+            align: "start",
+            sideOffset: 6,
+            onOpenAutoFocus: (e2) => e2.preventDefault(),
+            onCloseAutoFocus: (e2) => e2.preventDefault(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: styles$3.tableSizeGrid,
+                  style: {
+                    gridTemplateColumns: `repeat(${TABLE_PICKER_COLS}, 1fr)`
+                  },
+                  onMouseLeave: resetHover,
+                  children: Array.from({ length: TABLE_PICKER_ROWS * TABLE_PICKER_COLS }, (_, i) => {
+                    const col = i % TABLE_PICKER_COLS + 1;
+                    const row = Math.floor(i / TABLE_PICKER_COLS) + 1;
+                    const active2 = hover.cols > 0 && col <= hover.cols && row <= hover.rows;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": labels.tableSizeSelected(col, row),
+                        className: `${styles$3.tableSizeCell} ${active2 ? styles$3.tableSizeCellActive : ""}`,
+                        onMouseDown: (e2) => e2.preventDefault(),
+                        onMouseEnter: () => setHover({ cols: col, rows: row }),
+                        onClick: () => {
+                          onInsert(row, col);
+                          setOpen(false);
+                          resetHover();
+                          closeMenu();
+                        }
+                      },
+                      i
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: styles$3.tableSizeLabel, children: hover.cols > 0 ? labels.tableSizeSelected(hover.cols, hover.rows) : labels.tableInsert })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
 function ColorPopover({
   title,
   glyph,
@@ -1669,7 +2184,6 @@ function EditorToolbar({
       superscript: e2.isActive("superscript"),
       subscript: e2.isActive("subscript"),
       inTable: e2.isActive("table"),
-      inTableHeader: e2.isActive("tableHeader"),
       canUndo: e2.can().undo(),
       canRedo: e2.can().redo()
     })
@@ -1709,7 +2223,7 @@ function EditorToolbar({
       }
       if (!inTable) return;
       e2.preventDefault();
-      editor.chain().focus().setTextSelection(coords.pos).run();
+      preserveTableSelectionOnContextMenu(editor, coords.pos);
       setTableMenu({ x: e2.clientX, y: e2.clientY });
     };
     dom.addEventListener("contextmenu", onContextMenu);
@@ -1734,6 +2248,13 @@ function EditorToolbar({
     },
     [closeTableMenu]
   );
+  const tableSel = tableMenu ? getTableSelectionInfo(editor.state) : null;
+  const tableRowN = (tableSel == null ? void 0 : tableSel.rowCount) ?? 1;
+  const tableColN = (tableSel == null ? void 0 : tableSel.colCount) ?? 1;
+  const tableMulti = (tableSel == null ? void 0 : tableSel.isMultiCell) ?? false;
+  const disableAddRowBefore = !!(tableSel == null ? void 0 : tableSel.includesHeaderRow);
+  const disableDeleteRow = !!(tableSel == null ? void 0 : tableSel.includesHeaderRow);
+  const disableDeleteColumn = !!(tableSel == null ? void 0 : tableSel.coversAllCols) && !(tableSel == null ? void 0 : tableSel.coversAllRows);
   const handlePickImage = () => {
     var _a;
     return (_a = fileInputRef.current) == null ? void 0 : _a.click();
@@ -2280,14 +2801,11 @@ function EditorToolbar({
                   t.hr
                 ] }) }),
                 /* @__PURE__ */ jsx(
-                  MenuItem,
+                  TableInsertItem,
                   {
                     disabled: state.inTable,
-                    onSelect: () => chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "⊞" }),
-                      t.tableInsert
-                    ] })
+                    labels: t,
+                    onInsert: (rows, cols) => chain().insertTable({ rows, cols, withHeaderRow: true }).run()
                   }
                 ),
                 extraToolbarItems == null ? void 0 : extraToolbarItems.map((item2) => /* @__PURE__ */ jsx(
@@ -2339,59 +2857,76 @@ function EditorToolbar({
         {
           className: styles$3.tableBubble,
           style: { position: "fixed", left: tableMenu.x, top: tableMenu.y },
+          role: "menu",
           onMouseDown: (e2) => e2.stopPropagation(),
           onContextMenu: (e2) => e2.preventDefault(),
           children: [
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddColumnBefore,
-                onClick: () => runTable(() => chain().addColumnBefore().run()),
+                label: tableMulti ? t.tableAddColumnBeforeN(tableColN) : t.tableAddColumnBefore,
+                onClick: () => runTable(() => addColumnsBefore(editor, tableColN)),
                 children: /* @__PURE__ */ jsx(ColumnBeforeIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddColumnAfter,
-                onClick: () => runTable(() => chain().addColumnAfter().run()),
+                label: tableMulti ? t.tableAddColumnAfterN(tableColN) : t.tableAddColumnAfter,
+                onClick: () => runTable(() => addColumnsAfter(editor, tableColN)),
                 children: /* @__PURE__ */ jsx(ColumnAfterIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableDeleteColumn,
-                onClick: () => runTable(() => chain().deleteColumn().run()),
+                label: tableMulti ? t.tableDeleteColumnN(tableColN) : t.tableDeleteColumn,
+                disabled: disableDeleteColumn,
+                onClick: () => runTable(() => {
+                  deleteSelectedColumns(editor);
+                }),
                 children: /* @__PURE__ */ jsx(ColumnDeleteIcon, {})
               }
             ),
-            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(TableMenuDivider, {}),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddRowBefore,
-                disabled: state.inTableHeader,
-                onClick: () => runTable(() => chain().addRowBefore().run()),
+                label: tableMulti ? t.tableAddRowBeforeN(tableRowN) : t.tableAddRowBefore,
+                disabled: disableAddRowBefore,
+                onClick: () => runTable(() => addRowsBefore(editor, tableRowN)),
                 children: /* @__PURE__ */ jsx(RowBeforeIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableAddRowAfter,
-                onClick: () => runTable(() => chain().addRowAfter().run()),
+                label: tableMulti ? t.tableAddRowAfterN(tableRowN) : t.tableAddRowAfter,
+                onClick: () => runTable(() => addRowsAfter(editor, tableRowN)),
                 children: /* @__PURE__ */ jsx(RowAfterIcon, {})
               }
             ),
             /* @__PURE__ */ jsx(
-              ToolbarButton,
+              TableMenuItem,
               {
-                title: t.tableDeleteRow,
-                disabled: state.inTableHeader,
-                onClick: () => runTable(() => chain().deleteRow().run()),
+                label: tableMulti ? t.tableDeleteRowN(tableRowN) : t.tableDeleteRow,
+                disabled: disableDeleteRow,
+                onClick: () => runTable(() => {
+                  deleteSelectedRows(editor);
+                }),
                 children: /* @__PURE__ */ jsx(RowDeleteIcon, {})
               }
+            ),
+            /* @__PURE__ */ jsx(TableMenuDivider, {}),
+            /* @__PURE__ */ jsx(
+              TableMenuItem,
+              {
+                label: t.tableDeleteTable,
+                onClick: () => runTable(() => {
+                  editor.commands.deleteTable();
+                }),
+                children: /* @__PURE__ */ jsx(TableDeleteIcon, {})
+              }
             )
           ]
         }
@@ -2602,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,
@@ -2630,26 +3166,30 @@ export {
   MarkdownWysiwygEditor,
   MenuIcon,
   RedoIcon,
-  R as ReportContent,
-  R2 as ReportContentInteractive,
+  R2 as ReportContent,
+  R as ReportContentInteractive,
+  b as ReportContentWithCharts,
   RowAfterIcon,
   RowBeforeIcon,
   RowDeleteIcon,
   StrikethroughIcon,
+  TableDeleteIcon,
   TocPanel,
   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,
@@ -2665,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
 };