tiptap-markdown-react 0.1.0

package/dist/index.js

@@ -0,0 +1,1417 @@
+"use client";
+import { jsxs, jsx, Fragment } 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 { Markdown } from "@tiptap/markdown";
+import { NodeViewWrapper, NodeViewContent, useEditor, EditorContent, ReactNodeViewRenderer, useEditorState } from "@tiptap/react";
+import { forwardRef, useEffect, useImperativeHandle, useState, useRef, useCallback, useContext, createContext } from "react";
+import { s as styles$4, b as baseExtensions, l as lowlight, m as makeTocGetId, p as pureCodeBlock, a as pureImage } from "./extractToc-C7e1DuVc.js";
+import { R, e } from "./extractToc-C7e1DuVc.js";
+import * as Popover from "@radix-ui/react-popover";
+import { createPortal } from "react-dom";
+function Svg({ size = "1em", children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...rest,
+      children
+    }
+  );
+}
+const BoldIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+] });
+const ItalicIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("line", { x1: "19", x2: "10", y1: "4", y2: "4" }),
+  /* @__PURE__ */ jsx("line", { x1: "14", x2: "5", y1: "20", y2: "20" }),
+  /* @__PURE__ */ jsx("line", { x1: "15", x2: "9", y1: "4", y2: "20" })
+] });
+const UnderlineIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "20", y2: "20" })
+] });
+const StrikethroughIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" })
+] });
+const CodeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+  /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+] });
+const LinkIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+const ImageIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+const ListUnorderedIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", x2: "21", y1: "18", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", x2: "3.01", y1: "18", y2: "18" })
+] });
+const ListOrderedIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", x2: "21", y1: "18", y2: "18" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 6h1v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 10h2" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+] });
+const ListChecksIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "m3 17 2 2 4-4" }),
+  /* @__PURE__ */ jsx("path", { d: "m3 7 2 2 4-4" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 6h8" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 12h8" }),
+  /* @__PURE__ */ jsx("path", { d: "M13 18h8" })
+] });
+const UndoIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M9 14 4 9l5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5 5.5 5.5 0 0 1-5.5 5.5H11" })
+] });
+const RedoIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "m15 14 5-5-5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5 5.5 5.5 0 0 0 9.5 20H13" })
+] });
+const ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Svg, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+const TrashIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+const LockIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+const MenuIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+] });
+const ColumnBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "10", y: "4", width: "11", height: "16", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 4v16" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 9v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 12h6" })
+] });
+const ColumnAfterIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "11", height: "16", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M10 4v16" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 9v6" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 12h6" })
+] });
+const ColumnDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 4v16" }),
+  /* @__PURE__ */ jsx("path", { d: "m8 9 8 6" }),
+  /* @__PURE__ */ jsx("path", { d: "m16 9-8 6" })
+] });
+const RowBeforeIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "4", y: "10", width: "16", height: "11", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 14h16" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 5h6" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 2v6" })
+] });
+const RowAfterIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "4", y: "3", width: "16", height: "11", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 10h16" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 19h6" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16v6" })
+] });
+const RowDeleteIcon = (p) => /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+  /* @__PURE__ */ jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "1" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 12h16" }),
+  /* @__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",
+  blockquote: "Blockquote",
+  bulletList: "Bullet list",
+  orderedList: "Ordered list",
+  taskList: "Task list",
+  more: "More",
+  codeBlock: "Code block",
+  hr: "Divider",
+  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"
+};
+const defaultColorPaletteLabels = {
+  none: "None",
+  theme: "THEME"
+};
+const defaultTocLabels = {
+  title: "Contents",
+  expand: "Expand",
+  collapse: "Collapse"
+};
+const defaultCodeBlockLabels = {
+  autoDetect: "Auto-detect",
+  delete: "Delete code block"
+};
+const wrapper = "_wrapper_6ikds_2";
+const header$1 = "_header_6ikds_18";
+const langSelect = "_langSelect_6ikds_28";
+const deleteBtn = "_deleteBtn_6ikds_52";
+const pre = "_pre_6ikds_72";
+const styles$3 = {
+  wrapper,
+  header: header$1,
+  langSelect,
+  deleteBtn,
+  pre
+};
+const LANGUAGES = [
+  { value: "", label: "Auto-detect" },
+  { value: "javascript", label: "JavaScript" },
+  { value: "typescript", label: "TypeScript" },
+  { value: "python", label: "Python" },
+  { value: "java", label: "Java" },
+  { value: "go", label: "Go" },
+  { value: "rust", label: "Rust" },
+  { value: "c", label: "C" },
+  { value: "cpp", label: "C++" },
+  { value: "csharp", label: "C#" },
+  { value: "sql", label: "SQL" },
+  { value: "json", label: "JSON" },
+  { value: "yaml", label: "YAML" },
+  { value: "bash", label: "Bash" },
+  { value: "shell", label: "Shell" },
+  { value: "html", label: "HTML" },
+  { value: "css", label: "CSS" },
+  { value: "markdown", label: "Markdown" }
+];
+function CodeBlockView({
+  node,
+  updateAttributes,
+  deleteNode,
+  extension
+}) {
+  var _a;
+  const labels = {
+    ...defaultCodeBlockLabels,
+    ...((_a = extension == null ? void 0 : extension.options) == null ? void 0 : _a.codeBlockLabels) ?? {}
+  };
+  const language = node.attrs.language || "";
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: styles$3.wrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$3.header, contentEditable: false, children: [
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          className: styles$3.langSelect,
+          value: language,
+          onChange: (e2) => updateAttributes({ language: e2.target.value }),
+          onMouseDown: (e2) => e2.stopPropagation(),
+          "aria-label": "Code language",
+          children: LANGUAGES.map((l) => /* @__PURE__ */ jsx("option", { value: l.value, children: l.value === "" ? labels.autoDetect : l.label }, l.value))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles$3.deleteBtn,
+          title: labels.delete,
+          "aria-label": labels.delete,
+          onClick: () => deleteNode(),
+          children: /* @__PURE__ */ jsx(TrashIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: styles$3.pre, children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
+  ] });
+}
+const CodeBlock = CodeBlockLowlight.extend({
+  addOptions() {
+    var _a;
+    return {
+      ...(_a = this.parent) == null ? void 0 : _a.call(this),
+      codeBlockLabels: void 0
+    };
+  },
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockView);
+  },
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const { state } = this.editor;
+        const { selection } = state;
+        const { empty, $anchor } = selection;
+        if (empty && $anchor.parent.type.name === this.name && $anchor.parentOffset === 0 && $anchor.parent.content.size > 0) {
+          return true;
+        }
+        if (empty && $anchor.parentOffset === 0) {
+          const before = $anchor.before($anchor.depth);
+          const prevNode = state.doc.resolve(before).nodeBefore;
+          if ((prevNode == null ? void 0 : prevNode.type.name) === this.name) {
+            const codeBlockPos = before - prevNode.nodeSize;
+            this.editor.chain().setNodeSelection(codeBlockPos).run();
+            return true;
+          }
+        }
+        return false;
+      }
+    };
+  }
+});
+const ImageWithConfirmDelete = Image.extend({
+  addKeyboardShortcuts() {
+    return {
+      Backspace: () => {
+        const { state } = this.editor;
+        const { selection } = state;
+        const { empty, $anchor } = selection;
+        if (empty) {
+          const nodeBefore = $anchor.nodeBefore;
+          if ((nodeBefore == null ? void 0 : nodeBefore.type.name) === this.name) {
+            const imagePos = $anchor.pos - nodeBefore.nodeSize;
+            this.editor.chain().setNodeSelection(imagePos).run();
+            return true;
+          }
+        }
+        return false;
+      }
+    };
+  }
+});
+const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
+  initialMarkdown = "",
+  placeholder,
+  onEditorReady,
+  onTocChange,
+  extraExtensions,
+  codeBlockLabels,
+  className
+}, ref) {
+  const editor = useEditor({
+    extensions: [
+      ...baseExtensions,
+      CodeBlock.configure({ lowlight, codeBlockLabels }),
+      ImageWithConfirmDelete.configure({ inline: false }),
+      Markdown,
+      TableOfContents.configure({
+        getId: makeTocGetId(),
+        onUpdate: (anchors) => {
+          onTocChange == null ? void 0 : onTocChange(
+            anchors.filter((a) => a.level <= 6).map((a) => ({ id: a.id, level: a.level, text: a.textContent }))
+          );
+        }
+      }),
+      ...extraExtensions ?? []
+    ],
+    content: initialMarkdown,
+    contentType: "markdown",
+    // Next.js SSR：服务端不立即渲染，避免 hydration 不一致
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        class: styles$4.editorContent,
+        "data-placeholder": placeholder ?? ""
+      }
+    }
+  });
+  useEffect(() => {
+    onEditorReady == null ? void 0 : onEditorReady(editor);
+    return () => onEditorReady == null ? void 0 : onEditorReady(null);
+  }, [editor, onEditorReady]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      getMarkdown: () => {
+        var _a;
+        return ((_a = editor == null ? void 0 : editor.getMarkdown) == null ? void 0 : _a.call(editor)) ?? "";
+      },
+      getHTML: () => {
+        var _a;
+        return ((_a = editor == null ? void 0 : editor.getHTML) == null ? void 0 : _a.call(editor)) ?? "";
+      },
+      getJSON: () => {
+        var _a;
+        return ((_a = editor == null ? void 0 : editor.getJSON) == null ? void 0 : _a.call(editor)) ?? {};
+      },
+      getEditor: () => editor ?? null
+    }),
+    [editor]
+  );
+  return /* @__PURE__ */ jsx(
+    EditorContent,
+    {
+      editor,
+      className: className ? `${styles$4.editorScroll} ${className}` : styles$4.editorScroll
+    }
+  );
+});
+function MarkdownPreview({ markdown, className }) {
+  const editor = useEditor({
+    extensions: [...baseExtensions, pureCodeBlock, pureImage, Markdown],
+    content: markdown,
+    contentType: "markdown",
+    editable: false,
+    immediatelyRender: false,
+    // 关键：内部 ProseMirror DOM 挂与编辑器一字不差的 editorContent class，
+    // 所有内容样式都作用在该选择器下，预览才能与编辑/插入后逐像素一致。
+    editorProps: {
+      attributes: { class: styles$4.editorContent }
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    editor.commands.setContent(markdown, { contentType: "markdown" });
+  }, [editor, markdown]);
+  return /* @__PURE__ */ jsx(
+    EditorContent,
+    {
+      editor,
+      className: className ?? styles$4.editorScroll
+    }
+  );
+}
+const toolbar = "_toolbar_i2emf_2";
+const inner = "_inner_i2emf_15";
+const btn = "_btn_i2emf_27";
+const btnActive = "_btnActive_i2emf_50";
+const tableBubble = "_tableBubble_i2emf_66";
+const txtIcon = "_txtIcon_i2emf_78";
+const colorIcon = "_colorIcon_i2emf_86";
+const colorIconGlyph = "_colorIconGlyph_i2emf_94";
+const colorIconBar = "_colorIconBar_i2emf_100";
+const scriptTrigger = "_scriptTrigger_i2emf_107";
+const scriptTriggerGlyph = "_scriptTriggerGlyph_i2emf_127";
+const divider = "_divider_i2emf_135";
+const styleTrigger = "_styleTrigger_i2emf_144";
+const styleTriggerLabel = "_styleTriggerLabel_i2emf_173";
+const styleTriggerCaret = "_styleTriggerCaret_i2emf_181";
+const styleItem = "_styleItem_i2emf_187";
+const styleIcon = "_styleIcon_i2emf_193";
+const scriptGlyph = "_scriptGlyph_i2emf_203";
+const menu = "_menu_i2emf_215";
+const menuItem = "_menuItem_i2emf_226";
+const menuItemSelected = "_menuItemSelected_i2emf_252";
+const popoverContent = "_popoverContent_i2emf_266";
+const styles$2 = {
+  toolbar,
+  inner,
+  btn,
+  btnActive,
+  tableBubble,
+  txtIcon,
+  colorIcon,
+  colorIconGlyph,
+  colorIconBar,
+  scriptTrigger,
+  scriptTriggerGlyph,
+  divider,
+  styleTrigger,
+  styleTriggerLabel,
+  styleTriggerCaret,
+  styleItem,
+  styleIcon,
+  scriptGlyph,
+  menu,
+  menuItem,
+  menuItemSelected,
+  popoverContent
+};
+const palette = "_palette_x5lrq_2";
+const noneRow = "_noneRow_x5lrq_11";
+const noneIcon = "_noneIcon_x5lrq_23";
+const noneLabel = "_noneLabel_x5lrq_43";
+const grid = "_grid_x5lrq_48";
+const swatch = "_swatch_x5lrq_54";
+const swatchActive = "_swatchActive_x5lrq_70";
+const themeLabel = "_themeLabel_x5lrq_76";
+const themeRow = "_themeRow_x5lrq_84";
+const styles$1 = {
+  palette,
+  noneRow,
+  noneIcon,
+  noneLabel,
+  grid,
+  swatch,
+  swatchActive,
+  themeLabel,
+  themeRow
+};
+const PALETTE = [
+  ["#8b0000", "#ff0000", "#ff9100", "#ffeb00", "#00e000", "#00e5ff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
+  ["#dba0a0", "#e8b4c0", "#f5d9b8", "#f7f0c0", "#cfe8c4", "#bcd9d4", "#c4d4ec", "#cdd4e8", "#d6c4e0", "#e8c4dc"],
+  ["#d28a8a", "#dd8c9c", "#eec49a", "#f0e29c", "#a9d4a0", "#94c0bc", "#a0bce4", "#a4b0d8", "#bca0d0", "#d49cc0"],
+  ["#cc4444", "#d4506c", "#e89a5c", "#e8d05c", "#7cc06c", "#5ca09c", "#5c90e0", "#6478c8", "#9460c0", "#c45c98"],
+  ["#a02020", "#b01030", "#c87410", "#c8a810", "#449030", "#2c706c", "#3060c0", "#1850a0", "#6428a0", "#a02868"],
+  ["#5c1010", "#700818", "#7c4808", "#7c6808", "#205818", "#10403c", "#183c78", "#0c3060", "#3c1460", "#601838"]
+];
+const THEME_COLORS = ["#ff6719", "#ff5500"];
+function ColorPalette({ value, onPick, labels }) {
+  const t = { ...defaultColorPaletteLabels, ...labels };
+  const current = value == null ? void 0 : value.toLowerCase();
+  return /* @__PURE__ */ jsxs("div", { className: styles$1.palette, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: styles$1.noneRow,
+        onMouseDown: (e2) => e2.preventDefault(),
+        onClick: () => onPick(null),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles$1.noneIcon, "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: styles$1.noneLabel, children: t.none })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: styles$1.grid, children: PALETTE.flat().map((c) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${styles$1.swatch} ${current === c.toLowerCase() ? styles$1.swatchActive : ""}`,
+        style: { background: c },
+        title: c,
+        "aria-label": c,
+        onMouseDown: (e2) => e2.preventDefault(),
+        onClick: () => onPick(c)
+      },
+      c
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: styles$1.themeLabel, children: t.theme }),
+    /* @__PURE__ */ jsx("div", { className: styles$1.themeRow, children: THEME_COLORS.map((c) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${styles$1.swatch} ${current === c.toLowerCase() ? styles$1.swatchActive : ""}`,
+        style: { background: c },
+        title: c,
+        "aria-label": c,
+        onMouseDown: (e2) => e2.preventDefault(),
+        onClick: () => onPick(c)
+      },
+      c
+    )) })
+  ] });
+}
+function ToolbarButton({
+  title,
+  active: active2,
+  disabled,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title,
+      "aria-label": title,
+      "aria-pressed": active2,
+      disabled,
+      className: `${styles$2.btn} ${active2 ? styles$2.btnActive : ""}`,
+      onMouseDown: (e2) => e2.preventDefault(),
+      onClick,
+      children
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("span", { className: styles$2.divider, "aria-hidden": true });
+}
+const MenuCloseCtx = createContext(() => {
+});
+function MenuPopover({
+  trigger,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        className: styles$2.menu,
+        sideOffset: 4,
+        align: "start",
+        onOpenAutoFocus: (e2) => e2.preventDefault(),
+        onCloseAutoFocus: (e2) => e2.preventDefault(),
+        children: /* @__PURE__ */ jsx(MenuCloseCtx.Provider, { value: close, children })
+      }
+    ) })
+  ] });
+}
+function MenuItem({
+  selected,
+  disabled,
+  onSelect,
+  children
+}) {
+  const close = useContext(MenuCloseCtx);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled,
+      className: `${styles$2.menuItem} ${selected ? styles$2.menuItemSelected : ""}`,
+      onMouseDown: (e2) => e2.preventDefault(),
+      onClick: () => {
+        onSelect();
+        close();
+      },
+      children
+    }
+  );
+}
+function ColorPopover({
+  title,
+  glyph,
+  bar,
+  value,
+  onPick,
+  paletteLabels
+}) {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles$2.btn,
+        title,
+        "aria-label": title,
+        onMouseDown: (e2) => e2.preventDefault(),
+        children: /* @__PURE__ */ jsxs("span", { className: styles$2.colorIcon, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$2.colorIconGlyph, children: glyph }),
+          /* @__PURE__ */ jsx("span", { className: styles$2.colorIconBar, style: { background: bar } })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        className: styles$2.popoverContent,
+        sideOffset: 4,
+        align: "start",
+        onOpenAutoFocus: (e2) => e2.preventDefault(),
+        onCloseAutoFocus: (e2) => e2.preventDefault(),
+        children: /* @__PURE__ */ jsx(
+          ColorPalette,
+          {
+            value,
+            onPick: (c) => {
+              onPick(c);
+              setOpen(false);
+            },
+            labels: paletteLabels
+          }
+        )
+      }
+    ) })
+  ] });
+}
+const HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+const FONT_SIZES = ["12px", "14px", "16px", "18px", "20px", "24px", "30px"];
+function EditorToolbar({
+  editor,
+  onImageUpload,
+  onError,
+  labels,
+  extraToolbarItems,
+  className
+}) {
+  const t = { ...defaultToolbarLabels, ...labels };
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: e2 }) => ({
+      bold: e2.isActive("bold"),
+      italic: e2.isActive("italic"),
+      underline: e2.isActive("underline"),
+      strike: e2.isActive("strike"),
+      code: e2.isActive("code"),
+      link: e2.isActive("link"),
+      taskList: e2.isActive("taskList"),
+      headingLevel: [1, 2, 3, 4, 5, 6].find(
+        (lv) => e2.isActive("heading", { level: lv })
+      ),
+      fontSize: e2.getAttributes("textStyle").fontSize || void 0,
+      isParagraph: e2.isActive("paragraph"),
+      bulletList: e2.isActive("bulletList"),
+      orderedList: e2.isActive("orderedList"),
+      blockquote: e2.isActive("blockquote"),
+      textColor: e2.getAttributes("textStyle").color || void 0,
+      highlightColor: e2.getAttributes("highlight").color || void 0,
+      superscript: e2.isActive("superscript"),
+      subscript: e2.isActive("subscript"),
+      inTable: e2.isActive("table"),
+      inTableHeader: e2.isActive("tableHeader"),
+      canUndo: e2.can().undo(),
+      canRedo: e2.can().redo()
+    })
+  });
+  const [editorFocused, setEditorFocused] = useState(() => editor.isFocused);
+  useEffect(() => {
+    const onFocus = () => setEditorFocused(true);
+    const onBlur = () => setEditorFocused(false);
+    editor.on("focus", onFocus);
+    editor.on("blur", onBlur);
+    return () => {
+      editor.off("focus", onFocus);
+      editor.off("blur", onBlur);
+    };
+  }, [editor]);
+  const fileInputRef = useRef(null);
+  const chain = () => editor.chain().focus();
+  const [tableMenu, setTableMenu] = useState(
+    null
+  );
+  const closeTableMenu = useCallback(() => setTableMenu(null), []);
+  useEffect(() => {
+    const dom = editor.view.dom;
+    const onContextMenu = (e2) => {
+      const coords = editor.view.posAtCoords({
+        left: e2.clientX,
+        top: e2.clientY
+      });
+      if (!coords) return;
+      const $pos = editor.state.doc.resolve(coords.pos);
+      let inTable = false;
+      for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === "table") {
+          inTable = true;
+          break;
+        }
+      }
+      if (!inTable) return;
+      e2.preventDefault();
+      editor.chain().focus().setTextSelection(coords.pos).run();
+      setTableMenu({ x: e2.clientX, y: e2.clientY });
+    };
+    dom.addEventListener("contextmenu", onContextMenu);
+    return () => dom.removeEventListener("contextmenu", onContextMenu);
+  }, [editor]);
+  useEffect(() => {
+    if (!tableMenu) return;
+    const onKey = (e2) => {
+      if (e2.key === "Escape") closeTableMenu();
+    };
+    document.addEventListener("mousedown", closeTableMenu);
+    document.addEventListener("keydown", onKey, true);
+    return () => {
+      document.removeEventListener("mousedown", closeTableMenu);
+      document.removeEventListener("keydown", onKey, true);
+    };
+  }, [tableMenu, closeTableMenu]);
+  const runTable = useCallback(
+    (fn) => {
+      fn();
+      closeTableMenu();
+    },
+    [closeTableMenu]
+  );
+  const handlePickImage = () => {
+    var _a;
+    return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+  };
+  const handleImageChange = async (e2) => {
+    var _a;
+    const file = (_a = e2.target.files) == null ? void 0 : _a[0];
+    e2.target.value = "";
+    if (!file || !onImageUpload) return;
+    try {
+      const url = await onImageUpload(file);
+      if (!url) throw new Error("empty url");
+      chain().setImage({ src: url }).run();
+    } catch (err) {
+      console.error("image upload failed:", err);
+      onError == null ? void 0 : onError(err);
+    }
+  };
+  const applyTextColor = (color) => {
+    if (color) chain().setColor(color).run();
+    else chain().unsetColor().run();
+  };
+  const applyHighlight = (color) => {
+    if (color) chain().setHighlight({ color }).run();
+    else chain().unsetHighlight().run();
+  };
+  const toggleLink = () => {
+    if (state.link) {
+      chain().unsetLink().run();
+      return;
+    }
+    const url = window.prompt(t.linkPrompt);
+    if (url) chain().setLink({ href: url }).run();
+  };
+  const setBlockStyle = (level) => {
+    if (level === 0) chain().setParagraph().run();
+    else
+      chain().toggleHeading({ level }).run();
+  };
+  const applyFontSize = (size) => {
+    if (size) chain().setFontSize(size).run();
+    else chain().unsetFontSize().run();
+  };
+  const canEditFontSize = editorFocused && state.isParagraph;
+  const scriptActive = state.superscript ? "superscript" : state.subscript ? "subscript" : "normal";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: className ? `${styles$2.toolbar} ${className}` : styles$2.toolbar,
+        children: /* @__PURE__ */ jsxs("div", { className: styles$2.inner, children: [
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.undo,
+              disabled: !state.canUndo,
+              onClick: () => chain().undo().run(),
+              children: /* @__PURE__ */ jsx(UndoIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.redo,
+              disabled: !state.canRedo,
+              onClick: () => chain().redo().run(),
+              children: /* @__PURE__ */ jsx(RedoIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs(
+            MenuPopover,
+            {
+              trigger: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles$2.styleTrigger,
+                  title: t.style,
+                  onMouseDown: (e2) => e2.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.style }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                  ]
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: (state.headingLevel ?? 0) === 0,
+                    onSelect: () => setBlockStyle(0),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "¶" }),
+                      t.normalText
+                    ] })
+                  }
+                ),
+                HEADING_LEVELS.map((lv) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: state.headingLevel === lv,
+                    onSelect: () => setBlockStyle(lv),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: `H${lv}` }),
+                      t.headingLabel(lv)
+                    ] })
+                  },
+                  lv
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            MenuPopover,
+            {
+              trigger: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles$2.styleTrigger,
+                  title: t.fontSize,
+                  "aria-label": t.fontSize,
+                  disabled: !canEditFontSize,
+                  onMouseDown: (e2) => e2.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: state.fontSize || "Size" }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                  ]
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: !state.fontSize,
+                    onSelect: () => applyFontSize(""),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "A" }),
+                      t.fontSizeDefault
+                    ] })
+                  }
+                ),
+                FONT_SIZES.map((size) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: state.fontSize === size,
+                    onSelect: () => applyFontSize(size),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: parseInt(size, 10) }),
+                      size
+                    ] })
+                  },
+                  size
+                ))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.bold,
+              active: state.bold,
+              onClick: () => chain().toggleBold().run(),
+              children: /* @__PURE__ */ jsx(BoldIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.italic,
+              active: state.italic,
+              onClick: () => chain().toggleItalic().run(),
+              children: /* @__PURE__ */ jsx(ItalicIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.underline,
+              active: state.underline,
+              onClick: () => chain().toggleUnderline().run(),
+              children: /* @__PURE__ */ jsx(UnderlineIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.strike,
+              active: state.strike,
+              onClick: () => chain().toggleStrike().run(),
+              children: /* @__PURE__ */ jsx(StrikethroughIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.code,
+              active: state.code,
+              onClick: () => chain().toggleCode().run(),
+              children: /* @__PURE__ */ jsx(CodeIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorPopover,
+            {
+              title: t.textColor,
+              glyph: "T",
+              bar: state.textColor || "#ff3b30",
+              value: state.textColor,
+              onPick: applyTextColor,
+              paletteLabels: { none: t.colorNone, theme: t.colorTheme }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorPopover,
+            {
+              title: t.highlight,
+              glyph: "✎",
+              bar: state.highlightColor || "#ffd83d",
+              value: state.highlightColor,
+              onPick: applyHighlight,
+              paletteLabels: { none: t.colorNone, theme: t.colorTheme }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            MenuPopover,
+            {
+              trigger: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `${styles$2.scriptTrigger} ${scriptActive !== "normal" ? styles$2.btnActive : ""}`,
+                  title: t.scriptMenu,
+                  "aria-label": t.scriptMenu,
+                  onMouseDown: (e2) => e2.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$2.scriptTriggerGlyph, children: "A" }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                  ]
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: scriptActive === "normal",
+                    onSelect: () => chain().unsetSuperscript().unsetSubscript().run(),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "A" }),
+                      t.scriptNormal
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: scriptActive === "superscript",
+                    onSelect: () => chain().unsetSubscript().toggleSuperscript().run(),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$2.styleIcon} ${styles$2.scriptGlyph}`, children: [
+                        "x",
+                        /* @__PURE__ */ jsx("sup", { children: "2" })
+                      ] }),
+                      t.superscript
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    selected: scriptActive === "subscript",
+                    onSelect: () => chain().unsetSuperscript().toggleSubscript().run(),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$2.styleIcon} ${styles$2.scriptGlyph}`, children: [
+                        "x",
+                        /* @__PURE__ */ jsx("sub", { children: "2" })
+                      ] }),
+                      t.subscript
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(ToolbarButton, { title: t.link, active: state.link, onClick: toggleLink, children: /* @__PURE__ */ jsx(LinkIcon, {}) }),
+          onImageUpload ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ToolbarButton, { title: t.image, onClick: handlePickImage, children: /* @__PURE__ */ jsx(ImageIcon, {}) }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: "image/*",
+                hidden: true,
+                onChange: handleImageChange
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.blockquote,
+              active: state.blockquote,
+              onClick: () => chain().toggleBlockquote().run(),
+              children: /* @__PURE__ */ jsx("span", { className: styles$2.txtIcon, children: "❝" })
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.bulletList,
+              active: state.bulletList,
+              onClick: () => chain().toggleBulletList().run(),
+              children: /* @__PURE__ */ jsx(ListUnorderedIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.orderedList,
+              active: state.orderedList,
+              onClick: () => chain().toggleOrderedList().run(),
+              children: /* @__PURE__ */ jsx(ListOrderedIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToolbarButton,
+            {
+              title: t.taskList,
+              active: state.taskList,
+              onClick: () => chain().toggleTaskList().run(),
+              children: /* @__PURE__ */ jsx(ListChecksIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs(
+            MenuPopover,
+            {
+              trigger: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: styles$2.styleTrigger,
+                  title: t.more,
+                  onMouseDown: (e2) => e2.preventDefault(),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.more }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                  ]
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().toggleCodeBlock().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "{ }" }),
+                  t.codeBlock
+                ] }) }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().setHorizontalRule().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "—" }),
+                  t.hr
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    disabled: state.inTable,
+                    onSelect: () => chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "⊞" }),
+                      t.tableInsert
+                    ] })
+                  }
+                ),
+                extraToolbarItems == null ? void 0 : extraToolbarItems.map((item2) => /* @__PURE__ */ jsx(
+                  MenuItem,
+                  {
+                    disabled: item2.disabled,
+                    onSelect: () => item2.onSelect(editor),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: item2.icon }),
+                      item2.label
+                    ] })
+                  },
+                  item2.key
+                ))
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    tableMenu && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: styles$2.tableBubble,
+          style: { position: "fixed", left: tableMenu.x, top: tableMenu.y },
+          onMouseDown: (e2) => e2.stopPropagation(),
+          onContextMenu: (e2) => e2.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableAddColumnBefore,
+                onClick: () => runTable(() => chain().addColumnBefore().run()),
+                children: /* @__PURE__ */ jsx(ColumnBeforeIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableAddColumnAfter,
+                onClick: () => runTable(() => chain().addColumnAfter().run()),
+                children: /* @__PURE__ */ jsx(ColumnAfterIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableDeleteColumn,
+                onClick: () => runTable(() => chain().deleteColumn().run()),
+                children: /* @__PURE__ */ jsx(ColumnDeleteIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, {}),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableAddRowBefore,
+                disabled: state.inTableHeader,
+                onClick: () => runTable(() => chain().addRowBefore().run()),
+                children: /* @__PURE__ */ jsx(RowBeforeIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableAddRowAfter,
+                onClick: () => runTable(() => chain().addRowAfter().run()),
+                children: /* @__PURE__ */ jsx(RowAfterIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarButton,
+              {
+                title: t.tableDeleteRow,
+                disabled: state.inTableHeader,
+                onClick: () => runTable(() => chain().deleteRow().run()),
+                children: /* @__PURE__ */ jsx(RowDeleteIcon, {})
+              }
+            )
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+    const update = () => setIsMobile(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, [breakpoint]);
+  return isMobile;
+}
+const desktop = "_desktop_euqdt_3";
+const header = "_header_euqdt_19";
+const headerTitle = "_headerTitle_euqdt_27";
+const collapseBtn = "_collapseBtn_euqdt_35";
+const collapsedRail = "_collapsedRail_euqdt_55";
+const list = "_list_euqdt_75";
+const item = "_item_euqdt_81";
+const itemText = "_itemText_euqdt_102";
+const active = "_active_euqdt_109";
+const locked = "_locked_euqdt_116";
+const lockIcon = "_lockIcon_euqdt_126";
+const mobile = "_mobile_euqdt_133";
+const mobileBar = "_mobileBar_euqdt_138";
+const mobileBarIcon = "_mobileBarIcon_euqdt_154";
+const chevron = "_chevron_euqdt_159";
+const chevronUp = "_chevronUp_euqdt_166";
+const mobilePanel = "_mobilePanel_euqdt_170";
+const mobilePanelOpen = "_mobilePanelOpen_euqdt_176";
+const styles = {
+  desktop,
+  header,
+  headerTitle,
+  collapseBtn,
+  collapsedRail,
+  list,
+  item,
+  itemText,
+  active,
+  locked,
+  lockIcon,
+  mobile,
+  mobileBar,
+  mobileBarIcon,
+  chevron,
+  chevronUp,
+  mobilePanel,
+  mobilePanelOpen
+};
+function TocPanel({ items, activeId, onItemClick, labels }) {
+  const t = { ...defaultTocLabels, ...labels };
+  const isMobile = useIsMobile();
+  const [collapsed, setCollapsed] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const desktopNavRef = useRef(null);
+  const mobilePanelRef = useRef(null);
+  useEffect(() => {
+    if (!activeId) return;
+    const reduce = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    const container = desktopNavRef.current || mobilePanelRef.current;
+    if (!container) return;
+    const el = container.querySelector(`a[href="#${CSS.escape(activeId)}"]`);
+    if (!el) return;
+    el.scrollIntoView({
+      block: "nearest",
+      behavior: reduce ? "auto" : "smooth"
+    });
+  }, [activeId]);
+  if (!items.length) return null;
+  const minLevel = Math.min(...items.map((i) => i.level));
+  const handleClick = (item2) => {
+    if (item2.locked) return;
+    onItemClick == null ? void 0 : onItemClick(item2);
+    if (isMobile) setMobileOpen(false);
+  };
+  const list2 = /* @__PURE__ */ jsx("ul", { className: styles.list, children: items.map((item2) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: item2.locked ? void 0 : `#${item2.id}`,
+      className: `${styles.item} ${item2.id === activeId ? styles.active : ""} ${item2.locked ? styles.locked : ""}`,
+      style: { paddingLeft: `${(item2.level - minLevel) * 12 + 12}px` },
+      "aria-current": item2.id === activeId ? "true" : void 0,
+      "aria-disabled": item2.locked ? "true" : void 0,
+      onClick: (e2) => {
+        e2.preventDefault();
+        handleClick(item2);
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.itemText, children: item2.text }),
+        item2.locked ? /* @__PURE__ */ jsx(LockIcon, { className: styles.lockIcon, "aria-hidden": true }) : null
+      ]
+    }
+  ) }, item2.id)) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs("nav", { className: styles.mobile, "aria-label": t.title, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: styles.mobileBar,
+          "aria-expanded": mobileOpen,
+          onClick: () => setMobileOpen((v) => !v),
+          children: [
+            /* @__PURE__ */ jsx(MenuIcon, { className: styles.mobileBarIcon, "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { children: t.title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles.chevron} ${mobileOpen ? styles.chevronUp : ""}`,
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: mobilePanelRef,
+          className: `${styles.mobilePanel} ${mobileOpen ? styles.mobilePanelOpen : ""}`,
+          children: list2
+        }
+      )
+    ] });
+  }
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: styles.collapsedRail,
+        "aria-label": t.expand,
+        title: t.expand,
+        onClick: () => setCollapsed(false),
+        children: /* @__PURE__ */ jsx(ListUnorderedIcon, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("nav", { className: styles.desktop, "aria-label": t.title, ref: desktopNavRef, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.headerTitle, children: t.title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: styles.collapseBtn,
+          "aria-label": t.collapse,
+          title: t.collapse,
+          onClick: () => setCollapsed(true),
+          children: "«"
+        }
+      )
+    ] }),
+    list2
+  ] });
+}
+export {
+  BoldIcon,
+  ChevronDownIcon,
+  CodeBlockView,
+  CodeIcon,
+  ColorPalette,
+  ColumnAfterIcon,
+  ColumnBeforeIcon,
+  ColumnDeleteIcon,
+  EditorToolbar,
+  ImageIcon,
+  ItalicIcon,
+  LinkIcon,
+  ListChecksIcon,
+  ListOrderedIcon,
+  ListUnorderedIcon,
+  LockIcon,
+  MarkdownPreview,
+  MarkdownWysiwygEditor,
+  MenuIcon,
+  RedoIcon,
+  R as ReportContent,
+  RowAfterIcon,
+  RowBeforeIcon,
+  RowDeleteIcon,
+  StrikethroughIcon,
+  TocPanel,
+  TrashIcon,
+  UnderlineIcon,
+  UndoIcon,
+  baseExtensions,
+  defaultCodeBlockLabels,
+  defaultColorPaletteLabels,
+  defaultTocLabels,
+  defaultToolbarLabels,
+  e as extractToc,
+  lowlight,
+  makeTocGetId,
+  pureCodeBlock,
+  pureImage,
+  useIsMobile
+};
+//# sourceMappingURL=index.js.map