tiptap-markdown-react 0.6.2 → 0.7.0

package/dist/index.js

@@ -1,16 +1,18 @@
 "use client";
 import { Markdown } from "@tiptap/markdown";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+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, useImperativeHandle, useMemo, useState, useRef, useCallback, useContext, createContext } from "react";
-import { C as CitationRef, e as enrichMarkdownCitations, s as styles$4, b as baseExtensions, l as lowlight, m as makeTocGetId, p as pureCodeBlock, a as pureImage, R as ReportContent } from "./extractToc-CSawxIx-.js";
-import { c, d } from "./extractToc-CSawxIx-.js";
+import { forwardRef, useEffect, useRef, useImperativeHandle, useMemo, useState, useCallback, useContext, createContext } from "react";
+import { C as CitationRef, m as mergeCommentIntervals, a as mapCommentAnchors, e as enrichMarkdownCitations, s as styles$5, b as baseExtensions, c as CommentMark, l as lowlight, d as makeTocGetId, p as pureCodeBlock, f as pureImage, R as ReportContent } from "./extractToc-AUH9u6o-.js";
+import { g, h, i } from "./extractToc-AUH9u6o-.js";
+import { Slice, Fragment } from "@tiptap/pm/model";
 import { Extension } from "@tiptap/core";
-import { FileHandlePlugin } from "@tiptap/extension-file-handler";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
+import { DecorationSet, Decoration } from "@tiptap/pm/view";
+import { FileHandlePlugin } from "@tiptap/extension-file-handler";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Popover from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
@@ -70,6 +72,259 @@ function createCitationRef(options = {}) {
     renderCitation: options.renderCitation
   });
 }
+const COMMENT_ACTIVE_META = "tmr:comment:active";
+const COMMENT_CLICK_META = "tmr:comment:click";
+const COMMENT_GUTTER_META = "tmr:comment:gutter";
+const commentAnchorPluginKey = new PluginKey(
+  "tmrCommentAnchor"
+);
+function stripCommentAnchorMarks(slice, markType) {
+  const strip = (fragment) => {
+    const children = [];
+    fragment.forEach((child) => {
+      if (child.isText && child.marks.some((m) => m.type === markType)) {
+        children.push(
+          child.mark(child.marks.filter((m) => m.type !== markType))
+        );
+      } else if (child.content.size > 0) {
+        children.push(child.copy(strip(child.content)));
+      } else {
+        children.push(child);
+      }
+    });
+    return Fragment.fromArray(children);
+  };
+  return new Slice(strip(slice.content), slice.openStart, slice.openEnd);
+}
+function sliceHasCommentMarks(slice, markType) {
+  let found = false;
+  slice.content.descendants((node) => {
+    if (node.isText && node.marks.some((m) => m.type === markType)) {
+      found = true;
+      return false;
+    }
+    return true;
+  });
+  return found;
+}
+function blockBounds(doc) {
+  const bounds = [];
+  doc.forEach((child, offset) => {
+    bounds.push({ start: offset, end: offset + child.nodeSize });
+  });
+  return bounds;
+}
+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 id of ids) {
+        const arr = byId.get(id) ?? [];
+        arr.push({ from: pos, to: pos + node.nodeSize });
+        byId.set(id, arr);
+      }
+    }
+    return true;
+  });
+  return byId;
+}
+function rangesIntersectBlock(ranges, start, end) {
+  return ranges.some((r) => r.from < end && r.to > start);
+}
+function gutterDom(commentIds, view, blockPos) {
+  const el = document.createElement("span");
+  el.className = "tmr-comment-gutter";
+  el.setAttribute("data-comment-ids", commentIds.join(" "));
+  el.textContent = String(commentIds.length);
+  el.title = `${commentIds.length}`;
+  el.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  el.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    view.dispatch(
+      view.state.tr.setMeta(COMMENT_ACTIVE_META, commentIds[0] ?? null).setMeta(COMMENT_GUTTER_META, {
+        commentIds,
+        pos: blockPos
+      })
+    );
+  });
+  return el;
+}
+function commentAnchorPlugin(options = {}) {
+  const showGutter = options.showGutter !== false;
+  return new Plugin({
+    key: commentAnchorPluginKey,
+    state: {
+      init: () => ({ activeCommentId: null }),
+      apply: (tr, value) => {
+        const active2 = tr.getMeta(COMMENT_ACTIVE_META);
+        return active2 !== void 0 ? { activeCommentId: active2 } : value;
+      }
+    },
+    props: {
+      decorations(state) {
+        var _a;
+        const byId = collectCommentRanges(state.doc);
+        if (byId.size === 0) return DecorationSet.empty;
+        const decos = [];
+        const bounds = blockBounds(state.doc);
+        if (showGutter) {
+          for (const b of bounds) {
+            const idsInBlock = [];
+            for (const [id, ranges] of byId) {
+              if (rangesIntersectBlock(ranges, b.start, b.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}` }
+                )
+              );
+            }
+          }
+        }
+        const activeId = ((_a = commentAnchorPluginKey.getState(state)) == null ? void 0 : _a.activeCommentId) ?? null;
+        if (activeId) {
+          const ranges = byId.get(activeId) ?? [];
+          for (const r of ranges) {
+            decos.push(
+              Decoration.inline(r.from, r.to, { class: "tmr-comment-active" })
+            );
+          }
+          for (const b of bounds) {
+            if (rangesIntersectBlock(ranges, b.start, b.end)) {
+              decos.push(
+                Decoration.node(b.start, b.end, {
+                  class: "tmr-comment-block-active"
+                })
+              );
+            }
+          }
+        }
+        return DecorationSet.create(state.doc, decos);
+      },
+      handleClick(view, pos, event) {
+        var _a;
+        const target = event.target;
+        const el = (_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(
+          target,
+          "mark.tmr-comment[data-comment-ids]"
+        );
+        if (!el) return false;
+        const commentIds = (el.getAttribute("data-comment-ids") ?? "").split(" ").filter(Boolean);
+        if (commentIds.length === 0) return false;
+        view.dispatch(
+          view.state.tr.setMeta(COMMENT_ACTIVE_META, commentIds[0] ?? null).setMeta(COMMENT_CLICK_META, {
+            commentIds,
+            anchorEl: el,
+            pos
+          })
+        );
+        return true;
+      },
+      // 粘贴 / 拖拽 / 编辑器内拖动的 slice 统一走这里：剥离评论 mark，
+      // 防止复制粘贴产生幽灵高亮。正文内容不变，只是丢掉会话级元数据。
+      transformPasted(slice, view) {
+        const markType = view.state.schema.marks.commentAnchor;
+        if (!markType || !sliceHasCommentMarks(slice, markType)) return slice;
+        return stripCommentAnchorMarks(slice, markType);
+      }
+    }
+  });
+}
+function commentAnchorExtension(options = {}) {
+  return Extension.create({
+    name: "tmrCommentAnchor",
+    addProseMirrorPlugins() {
+      return [commentAnchorPlugin(options)];
+    }
+  });
+}
+function applyCommentAnchorsToEditor(editor, comments) {
+  if (!editor.isEditable) return;
+  const intervals = comments.length > 0 ? mergeCommentIntervals(
+    mapCommentAnchors(
+      editor.state.doc,
+      comments.map((c) => ({ commentId: c.commentId, segments: c.segments }))
+    ).map((r) => ({ commentId: r.commentId, ranges: r.ranges }))
+  ) : [];
+  const chain = editor.chain().clearCommentAnchors();
+  if (intervals.length > 0) chain.applyCommentAnchors(intervals);
+  chain.run();
+}
+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 ?? []) {
+        if (!ids.includes(id)) ids.push(id);
+      }
+    }
+    return true;
+  });
+  return ids;
+}
+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 ?? [];
+      if (ids.includes(commentId)) {
+        ranges.push({ from: pos, to: pos + node.nodeSize });
+      }
+    }
+    return true;
+  });
+  return ranges;
+}
+function setActive(editor, commentId) {
+  editor.view.dispatch(
+    editor.state.tr.setMeta(COMMENT_ACTIVE_META, commentId)
+  );
+}
+function getActive(editor) {
+  var _a;
+  return ((_a = commentAnchorPluginKey.getState(editor.state)) == null ? void 0 : _a.activeCommentId) ?? null;
+}
+function focusComment(editor, commentId) {
+  var _a;
+  const ranges = commentRangesById(editor, commentId);
+  if (ranges.length === 0) {
+    setActive(editor, null);
+    return false;
+  }
+  setActive(editor, commentId);
+  const markEl = editor.view.dom.querySelector(
+    `mark.tmr-comment[data-comment-ids~="${CSS.escape(commentId)}"]`
+  );
+  (_a = markEl == null ? void 0 : markEl.scrollIntoView) == null ? void 0 : _a.call(markEl, { block: "center", behavior: "smooth" });
+  editor.chain().setTextSelection(ranges[0].from).run();
+  return true;
+}
+function nextComment(editor, dir = "next") {
+  const ids = collectCommentIds(editor);
+  if (ids.length === 0) return null;
+  const active2 = getActive(editor);
+  const current = active2 ? ids.indexOf(active2) : -1;
+  const nextIdx = dir === "next" ? (current + 1) % ids.length : (current - 1 + ids.length) % ids.length;
+  const target = ids[nextIdx];
+  focusComment(editor, target);
+  return target;
+}
 const MD_FILE_RE = /\.(md|markdown)$/i;
 const MD_MIME_TYPES = ["text/markdown", "text/x-markdown", ""];
 async function insertMarkdownFiles(editor, files, pos) {
@@ -343,21 +598,32 @@ const defaultCodeBlockLabels = {
   autoDetect: "Auto-detect",
   delete: "Delete code block"
 };
-const wrapper = "_wrapper_2dv2g_2";
-const header$1 = "_header_2dv2g_18";
-const langTrigger = "_langTrigger_2dv2g_28";
-const langChevron = "_langChevron_2dv2g_50";
-const langMenu = "_langMenu_2dv2g_56";
-const langItem = "_langItem_2dv2g_69";
-const langItemSelected = "_langItemSelected_2dv2g_88";
-const langItemCheck = "_langItemCheck_2dv2g_93";
-const deleteBtn = "_deleteBtn_2dv2g_101";
-const pre = "_pre_2dv2g_121";
-const styles$3 = {
+const defaultCommentLabels = {
+  open: "Open",
+  resolved: "Resolved",
+  dismissed: "Dismissed",
+  outdated: "Outdated",
+  ambiguous: "Ambiguous",
+  partial: "Partially matched",
+  gutterTitle: "Comment"
+};
+const wrapper = "_wrapper_5i2vi_2";
+const header$1 = "_header_5i2vi_18";
+const langTrigger = "_langTrigger_5i2vi_28";
+const langChevron = "_langChevron_5i2vi_50";
+const langBadge = "_langBadge_5i2vi_56";
+const langMenu = "_langMenu_5i2vi_71";
+const langItem = "_langItem_5i2vi_84";
+const langItemSelected = "_langItemSelected_5i2vi_103";
+const langItemCheck = "_langItemCheck_5i2vi_108";
+const deleteBtn = "_deleteBtn_5i2vi_116";
+const pre = "_pre_5i2vi_136";
+const styles$4 = {
   wrapper,
   header: header$1,
   langTrigger,
   langChevron,
+  langBadge,
   langMenu,
   langItem,
   langItemSelected,
@@ -389,7 +655,8 @@ function CodeBlockView({
   node,
   updateAttributes,
   deleteNode,
-  extension
+  extension,
+  editor
 }) {
   var _a;
   const labels = {
@@ -399,25 +666,26 @@ function CodeBlockView({
   const language = node.attrs.language || "";
   const current = LANGUAGES.find((l) => l.value === language);
   const currentLabel = current ? current.value === "" ? labels.autoDetect : current.label : labels.autoDetect;
-  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: styles$3.wrapper, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles$3.header, contentEditable: false, children: [
+  const editable = editor.isEditable;
+  return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: styles$4.wrapper, children: [
+    editable ? /* @__PURE__ */ jsxs("div", { className: styles$4.header, contentEditable: false, children: [
       /* @__PURE__ */ jsxs(DropdownMenu.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
-            className: styles$3.langTrigger,
+            className: styles$4.langTrigger,
             "aria-label": "Code language",
             children: [
               /* @__PURE__ */ jsx("span", { children: currentLabel }),
-              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: styles$3.langChevron })
+              /* @__PURE__ */ jsx(ChevronDownIcon, { size: 14, className: styles$4.langChevron })
             ]
           }
         ) }),
         /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
           DropdownMenu.Content,
           {
-            className: styles$3.langMenu,
+            className: styles$4.langMenu,
             sideOffset: 4,
             align: "end",
             children: LANGUAGES.map((l) => {
@@ -426,10 +694,10 @@ function CodeBlockView({
               return /* @__PURE__ */ jsxs(
                 DropdownMenu.Item,
                 {
-                  className: `${styles$3.langItem}${selected ? ` ${styles$3.langItemSelected}` : ""}`,
+                  className: `${styles$4.langItem}${selected ? ` ${styles$4.langItemSelected}` : ""}`,
                   onSelect: () => updateAttributes({ language: l.value }),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$3.langItemCheck, children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : null }),
+                    /* @__PURE__ */ jsx("span", { className: styles$4.langItemCheck, children: selected ? /* @__PURE__ */ jsx(CheckIcon, { size: 14 }) : null }),
                     optionLabel
                   ]
                 },
@@ -443,15 +711,18 @@ function CodeBlockView({
         "button",
         {
           type: "button",
-          className: styles$3.deleteBtn,
+          className: styles$4.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" }) })
+    ] }) : (
+      // 只读：只展示语言标签，无下拉 / 删除等交互件
+      /* @__PURE__ */ jsx("div", { className: styles$4.langBadge, contentEditable: false, children: currentLabel })
+    ),
+    /* @__PURE__ */ jsx("pre", { className: styles$4.pre, children: /* @__PURE__ */ jsx(NodeViewContent, { as: "code" }) })
   ] });
 }
 const CodeBlock = CodeBlockLowlight.extend({
@@ -510,6 +781,7 @@ const ImageWithConfirmDelete = Image.extend({
 });
 const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   initialMarkdown = "",
+  editable = true,
   sources,
   renderCitation,
   placeholder,
@@ -519,7 +791,12 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   markdownFileDrop = true,
   extraExtensions,
   codeBlockLabels,
-  className
+  className,
+  comments,
+  activeCommentId,
+  onCommentClick,
+  onActiveCommentChange,
+  showCommentGutter = true
 }, ref) {
   const preparedInitial = enrichMarkdownCitations(
     initialMarkdown,
@@ -531,6 +808,8 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       CodeBlock.configure({ lowlight, codeBlockLabels }),
       ImageWithConfirmDelete.configure({ inline: false }),
       createCitationRef({ renderCitation }),
+      CommentMark,
+      commentAnchorExtension({ showGutter: showCommentGutter }),
       Markdown,
       TableOfContents.configure({
         getId: makeTocGetId(),
@@ -546,11 +825,12 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     ],
     content: preparedInitial,
     contentType: "markdown",
+    editable,
     // Next.js SSR：服务端不立即渲染，避免 hydration 不一致
     immediatelyRender: false,
     editorProps: {
       attributes: {
-        class: styles$4.editorContent,
+        class: styles$5.editorContent,
         "data-placeholder": placeholder ?? ""
       }
     }
@@ -559,6 +839,56 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     onEditorReady == null ? void 0 : onEditorReady(editor);
     return () => onEditorReady == null ? void 0 : onEditorReady(null);
   }, [editor, onEditorReady]);
+  useEffect(() => {
+    editor == null ? void 0 : editor.setEditable(editable);
+  }, [editor, editable]);
+  const commentsSignatureRef = useRef("");
+  useEffect(() => {
+    if (!editor || !editable) return;
+    const signature = (comments ?? []).map((c) => `${c.commentId}:${c.segments.length}`).join("|");
+    if (signature === commentsSignatureRef.current) return;
+    commentsSignatureRef.current = signature;
+    applyCommentAnchorsToEditor(editor, comments ?? []);
+  }, [editor, editable, comments]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.view.dispatch(
+      editor.state.tr.setMeta(
+        COMMENT_ACTIVE_META,
+        activeCommentId ?? null
+      )
+    );
+  }, [editor, activeCommentId]);
+  const onCommentClickRef = useRef(onCommentClick);
+  const onActiveCommentChangeRef = useRef(onActiveCommentChange);
+  onCommentClickRef.current = onCommentClick;
+  onActiveCommentChangeRef.current = onActiveCommentChange;
+  useEffect(() => {
+    if (!editor) return;
+    const onTransaction = ({
+      transaction
+    }) => {
+      var _a, _b, _c, _d;
+      const click = transaction.getMeta(COMMENT_CLICK_META);
+      if (click) {
+        (_a = onCommentClickRef.current) == null ? void 0 : _a.call(onCommentClickRef, click);
+        (_b = onActiveCommentChangeRef.current) == null ? void 0 : _b.call(onActiveCommentChangeRef, click.commentIds[0] ?? null);
+      }
+      const gutter = transaction.getMeta(COMMENT_GUTTER_META);
+      if (gutter) {
+        (_c = onCommentClickRef.current) == null ? void 0 : _c.call(onCommentClickRef, {
+          commentIds: gutter.commentIds,
+          anchorEl: null,
+          pos: gutter.pos
+        });
+        (_d = onActiveCommentChangeRef.current) == null ? void 0 : _d.call(onActiveCommentChangeRef, gutter.commentIds[0] ?? null);
+      }
+    };
+    editor.on("transaction", onTransaction);
+    return () => {
+      editor.off("transaction", onTransaction);
+    };
+  }, [editor]);
   useImperativeHandle(
     ref,
     () => ({
@@ -574,7 +904,10 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
         var _a;
         return ((_a = editor == null ? void 0 : editor.getJSON) == null ? void 0 : _a.call(editor)) ?? {};
       },
-      getEditor: () => editor ?? null
+      getEditor: () => editor ?? null,
+      focusComment: (commentId) => editor ? focusComment(editor, commentId) : false,
+      nextComment: (dir) => editor ? nextComment(editor, dir ?? "next") : null,
+      getCommentIds: () => editor ? collectCommentIds(editor) : []
     }),
     [editor]
   );
@@ -582,7 +915,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     EditorContent,
     {
       editor,
-      className: className ? `${styles$4.editorScroll} ${className}` : styles$4.editorScroll
+      className: className ? `${styles$5.editorScroll} ${className}` : styles$5.editorScroll
     }
   );
 });
@@ -614,7 +947,7 @@ function MarkdownPreview({
       editable: false,
       immediatelyRender: false,
       editorProps: {
-        attributes: { class: styles$4.editorContent }
+        attributes: { class: styles$5.editorContent }
       }
     },
     [extensions]
@@ -627,7 +960,7 @@ function MarkdownPreview({
     EditorContent,
     {
       editor,
-      className: className ?? styles$4.editorScroll
+      className: className ?? styles$5.editorScroll
     }
   );
 }
@@ -656,8 +989,8 @@ 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 = {
+const popoverContent$1 = "_popoverContent_i2emf_266";
+const styles$3 = {
   toolbar,
   inner,
   btn,
@@ -679,7 +1012,7 @@ const styles$2 = {
   menu,
   menuItem,
   menuItemSelected,
-  popoverContent
+  popoverContent: popoverContent$1
 };
 const palette = "_palette_x5lrq_2";
 const noneRow = "_noneRow_x5lrq_11";
@@ -690,7 +1023,7 @@ const swatch = "_swatch_x5lrq_54";
 const swatchActive = "_swatchActive_x5lrq_70";
 const themeLabel = "_themeLabel_x5lrq_76";
 const themeRow = "_themeRow_x5lrq_84";
-const styles$1 = {
+const styles$2 = {
   palette,
   noneRow,
   noneIcon,
@@ -713,46 +1046,46 @@ 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: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$2.palette, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        className: styles$1.noneRow,
+        className: styles$2.noneRow,
         onMouseDown: (e) => e.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("span", { className: styles$2.noneIcon, "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: styles$2.noneLabel, children: t.none })
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: styles$1.grid, children: PALETTE.flat().map((c2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$2.grid, children: PALETTE.flat().map((c) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `${styles$1.swatch} ${current === c2.toLowerCase() ? styles$1.swatchActive : ""}`,
-        style: { background: c2 },
-        title: c2,
-        "aria-label": c2,
+        className: `${styles$2.swatch} ${current === c.toLowerCase() ? styles$2.swatchActive : ""}`,
+        style: { background: c },
+        title: c,
+        "aria-label": c,
         onMouseDown: (e) => e.preventDefault(),
-        onClick: () => onPick(c2)
+        onClick: () => onPick(c)
       },
-      c2
+      c
     )) }),
-    /* @__PURE__ */ jsx("div", { className: styles$1.themeLabel, children: t.theme }),
-    /* @__PURE__ */ jsx("div", { className: styles$1.themeRow, children: THEME_COLORS.map((c2) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$2.themeLabel, children: t.theme }),
+    /* @__PURE__ */ jsx("div", { className: styles$2.themeRow, children: THEME_COLORS.map((c) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        className: `${styles$1.swatch} ${current === c2.toLowerCase() ? styles$1.swatchActive : ""}`,
-        style: { background: c2 },
-        title: c2,
-        "aria-label": c2,
+        className: `${styles$2.swatch} ${current === c.toLowerCase() ? styles$2.swatchActive : ""}`,
+        style: { background: c },
+        title: c,
+        "aria-label": c,
         onMouseDown: (e) => e.preventDefault(),
-        onClick: () => onPick(c2)
+        onClick: () => onPick(c)
       },
-      c2
+      c
     )) })
   ] });
 }
@@ -771,7 +1104,7 @@ function ToolbarButton({
       "aria-label": title,
       "aria-pressed": active2,
       disabled,
-      className: `${styles$2.btn} ${active2 ? styles$2.btnActive : ""}`,
+      className: `${styles$3.btn} ${active2 ? styles$3.btnActive : ""}`,
       onMouseDown: (e) => e.preventDefault(),
       onClick,
       children
@@ -779,7 +1112,7 @@ function ToolbarButton({
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx("span", { className: styles$2.divider, "aria-hidden": true });
+  return /* @__PURE__ */ jsx("span", { className: styles$3.divider, "aria-hidden": true });
 }
 const MenuCloseCtx = createContext(() => {
 });
@@ -794,7 +1127,7 @@ function MenuPopover({
     /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        className: styles$2.menu,
+        className: styles$3.menu,
         sideOffset: 4,
         align: "start",
         onOpenAutoFocus: (e) => e.preventDefault(),
@@ -816,7 +1149,7 @@ function MenuItem({
     {
       type: "button",
       disabled,
-      className: `${styles$2.menuItem} ${selected ? styles$2.menuItemSelected : ""}`,
+      className: `${styles$3.menuItem} ${selected ? styles$3.menuItemSelected : ""}`,
       onMouseDown: (e) => e.preventDefault(),
       onClick: () => {
         onSelect();
@@ -840,20 +1173,20 @@ function ColorPopover({
       "button",
       {
         type: "button",
-        className: styles$2.btn,
+        className: styles$3.btn,
         title,
         "aria-label": title,
         onMouseDown: (e) => e.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 } })
+        children: /* @__PURE__ */ jsxs("span", { className: styles$3.colorIcon, children: [
+          /* @__PURE__ */ jsx("span", { className: styles$3.colorIconGlyph, children: glyph }),
+          /* @__PURE__ */ jsx("span", { className: styles$3.colorIconBar, style: { background: bar } })
         ] })
       }
     ) }),
     /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
       Popover.Content,
       {
-        className: styles$2.popoverContent,
+        className: styles$3.popoverContent,
         sideOffset: 4,
         align: "start",
         onOpenAutoFocus: (e) => e.preventDefault(),
@@ -862,8 +1195,8 @@ function ColorPopover({
           ColorPalette,
           {
             value,
-            onPick: (c2) => {
-              onPick(c2);
+            onPick: (c) => {
+              onPick(c);
               setOpen(false);
             },
             labels: paletteLabels
@@ -939,8 +1272,8 @@ function EditorToolbar({
       if (!coords) return;
       const $pos = editor.state.doc.resolve(coords.pos);
       let inTable = false;
-      for (let d2 = $pos.depth; d2 > 0; d2--) {
-        if ($pos.node(d2).type.name === "table") {
+      for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === "table") {
           inTable = true;
           break;
         }
@@ -1031,12 +1364,12 @@ function EditorToolbar({
   };
   const canEditFontSize = editorFocused && state.isParagraph;
   const scriptActive = state.superscript ? "superscript" : state.subscript ? "subscript" : "normal";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: className ? `${styles$2.toolbar} ${className}` : styles$2.toolbar,
-        children: /* @__PURE__ */ jsxs("div", { className: styles$2.inner, children: [
+        className: className ? `${styles$3.toolbar} ${className}` : styles$3.toolbar,
+        children: /* @__PURE__ */ jsxs("div", { className: styles$3.inner, children: [
           /* @__PURE__ */ jsx(
             ToolbarButton,
             {
@@ -1063,12 +1396,12 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$2.styleTrigger,
+                  className: styles$3.styleTrigger,
                   title: t.style,
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.style }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$3.styleTriggerLabel, children: t.style }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.styleTriggerCaret })
                   ]
                 }
               ),
@@ -1078,8 +1411,8 @@ function EditorToolbar({
                   {
                     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: "¶" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "¶" }),
                       t.normalText
                     ] })
                   }
@@ -1089,8 +1422,8 @@ function EditorToolbar({
                   {
                     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}` }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: `H${lv}` }),
                       t.headingLabel(lv)
                     ] })
                   },
@@ -1106,14 +1439,14 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$2.styleTrigger,
+                  className: styles$3.styleTrigger,
                   title: t.fontSize,
                   "aria-label": t.fontSize,
                   disabled: !canEditFontSize,
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: state.fontSize || t.fontSize }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$3.styleTriggerLabel, children: state.fontSize || t.fontSize }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.styleTriggerCaret })
                   ]
                 }
               ),
@@ -1123,8 +1456,8 @@ function EditorToolbar({
                   {
                     selected: !state.fontSize,
                     onSelect: () => applyFontSize(""),
-                    children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
-                      /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "A" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "A" }),
                       t.fontSizeDefault
                     ] })
                   }
@@ -1134,8 +1467,8 @@ function EditorToolbar({
                   {
                     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) }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: parseInt(size, 10) }),
                       size
                     ] })
                   },
@@ -1219,13 +1552,13 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: `${styles$2.scriptTrigger} ${scriptActive !== "normal" ? styles$2.btnActive : ""}`,
+                  className: `${styles$3.scriptTrigger} ${scriptActive !== "normal" ? styles$3.btnActive : ""}`,
                   title: t.scriptMenu,
                   "aria-label": t.scriptMenu,
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$2.scriptTriggerGlyph, children: "A" }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$3.scriptTriggerGlyph, children: "A" }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.styleTriggerCaret })
                   ]
                 }
               ),
@@ -1235,8 +1568,8 @@ function EditorToolbar({
                   {
                     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" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "A" }),
                       t.scriptNormal
                     ] })
                   }
@@ -1246,8 +1579,8 @@ function EditorToolbar({
                   {
                     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: [
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$3.styleIcon} ${styles$3.scriptGlyph}`, children: [
                         "x",
                         /* @__PURE__ */ jsx("sup", { children: "2" })
                       ] }),
@@ -1260,8 +1593,8 @@ function EditorToolbar({
                   {
                     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: [
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsxs("span", { className: `${styles$3.styleIcon} ${styles$3.scriptGlyph}`, children: [
                         "x",
                         /* @__PURE__ */ jsx("sub", { children: "2" })
                       ] }),
@@ -1274,7 +1607,7 @@ function EditorToolbar({
           ),
           /* @__PURE__ */ jsx(Divider, {}),
           /* @__PURE__ */ jsx(ToolbarButton, { title: t.link, active: state.link, onClick: toggleLink, children: /* @__PURE__ */ jsx(LinkIcon, {}) }),
-          onImageUpload ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          onImageUpload ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx(ToolbarButton, { title: t.image, onClick: handlePickImage, children: /* @__PURE__ */ jsx(ImageIcon, {}) }),
             /* @__PURE__ */ jsx(
               "input",
@@ -1293,7 +1626,7 @@ function EditorToolbar({
               title: t.blockquote,
               active: state.blockquote,
               onClick: () => chain().toggleBlockquote().run(),
-              children: /* @__PURE__ */ jsx("span", { className: styles$2.txtIcon, children: "❝" })
+              children: /* @__PURE__ */ jsx("span", { className: styles$3.txtIcon, children: "❝" })
             }
           ),
           /* @__PURE__ */ jsx(Divider, {}),
@@ -1332,22 +1665,22 @@ function EditorToolbar({
                 "button",
                 {
                   type: "button",
-                  className: styles$2.styleTrigger,
+                  className: styles$3.styleTrigger,
                   title: t.more,
                   onMouseDown: (e) => e.preventDefault(),
                   children: [
-                    /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.more }),
-                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
+                    /* @__PURE__ */ jsx("span", { className: styles$3.styleTriggerLabel, children: t.more }),
+                    /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$3.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: "{ }" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().toggleCodeBlock().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$3.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: "—" }),
+                /* @__PURE__ */ jsx(MenuItem, { onSelect: () => chain().setHorizontalRule().run(), children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "—" }),
                   t.hr
                 ] }) }),
                 /* @__PURE__ */ jsx(
@@ -1355,8 +1688,8 @@ function EditorToolbar({
                   {
                     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: "⊞" }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "⊞" }),
                       t.tableInsert
                     ] })
                   }
@@ -1364,8 +1697,8 @@ function EditorToolbar({
                 /* @__PURE__ */ jsx(MenuItem, { onSelect: () => {
                   var _a;
                   return (_a = mdFileInputRef.current) == null ? void 0 : _a.click();
-                }, children: /* @__PURE__ */ jsxs("span", { className: styles$2.styleItem, children: [
-                  /* @__PURE__ */ jsx("span", { className: styles$2.styleIcon, children: "M↓" }),
+                }, children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: "M↓" }),
                   t.importMarkdown
                 ] }) }),
                 extraToolbarItems == null ? void 0 : extraToolbarItems.map((item2) => /* @__PURE__ */ jsx(
@@ -1373,8 +1706,8 @@ function EditorToolbar({
                   {
                     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 }),
+                    children: /* @__PURE__ */ jsxs("span", { className: styles$3.styleItem, children: [
+                      /* @__PURE__ */ jsx("span", { className: styles$3.styleIcon, children: item2.icon }),
                       item2.label
                     ] })
                   },
@@ -1400,7 +1733,7 @@ function EditorToolbar({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$2.tableBubble,
+          className: styles$3.tableBubble,
           style: { position: "fixed", left: tableMenu.x, top: tableMenu.y },
           onMouseDown: (e) => e.stopPropagation(),
           onContextMenu: (e) => e.preventDefault(),
@@ -1492,7 +1825,7 @@ const chevron = "_chevron_euqdt_159";
 const chevronUp = "_chevronUp_euqdt_166";
 const mobilePanel = "_mobilePanel_euqdt_170";
 const mobilePanelOpen = "_mobilePanelOpen_euqdt_176";
-const styles = {
+const styles$1 = {
   desktop,
   header,
   headerTitle,
@@ -1534,17 +1867,17 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
     });
   }, [activeId]);
   if (!items.length) return null;
-  const minLevel = Math.min(...items.map((i) => i.level));
+  const minLevel = Math.min(...items.map((i2) => i2.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(
+  const list2 = /* @__PURE__ */ jsx("ul", { className: styles$1.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 : ""}`,
+      className: `${styles$1.item} ${item2.id === activeId ? styles$1.active : ""} ${item2.locked ? styles$1.locked : ""}`,
       style: { paddingLeft: `${(item2.level - minLevel) * 12 + 12}px` },
       "aria-current": item2.id === activeId ? "true" : void 0,
       "aria-disabled": item2.locked ? "true" : void 0,
@@ -1553,27 +1886,27 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
         handleClick(item2);
       },
       children: [
-        /* @__PURE__ */ jsx("span", { className: styles.itemText, children: item2.text }),
-        item2.locked ? /* @__PURE__ */ jsx(LockIcon, { className: styles.lockIcon, "aria-hidden": true }) : null
+        /* @__PURE__ */ jsx("span", { className: styles$1.itemText, children: item2.text }),
+        item2.locked ? /* @__PURE__ */ jsx(LockIcon, { className: styles$1.lockIcon, "aria-hidden": true }) : null
       ]
     }
   ) }, item2.id)) });
   if (isMobile) {
-    return /* @__PURE__ */ jsxs("nav", { className: styles.mobile, "aria-label": t.title, children: [
+    return /* @__PURE__ */ jsxs("nav", { className: styles$1.mobile, "aria-label": t.title, children: [
       /* @__PURE__ */ jsxs(
         "button",
         {
           type: "button",
-          className: styles.mobileBar,
+          className: styles$1.mobileBar,
           "aria-expanded": mobileOpen,
           onClick: () => setMobileOpen((v) => !v),
           children: [
-            /* @__PURE__ */ jsx(MenuIcon, { className: styles.mobileBarIcon, "aria-hidden": true }),
+            /* @__PURE__ */ jsx(MenuIcon, { className: styles$1.mobileBarIcon, "aria-hidden": true }),
             /* @__PURE__ */ jsx("span", { children: t.title }),
             /* @__PURE__ */ jsx(
               "span",
               {
-                className: `${styles.chevron} ${mobileOpen ? styles.chevronUp : ""}`,
+                className: `${styles$1.chevron} ${mobileOpen ? styles$1.chevronUp : ""}`,
                 "aria-hidden": true,
                 children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16 })
               }
@@ -1585,7 +1918,7 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
         "div",
         {
           ref: mobilePanelRef,
-          className: `${styles.mobilePanel} ${mobileOpen ? styles.mobilePanelOpen : ""}`,
+          className: `${styles$1.mobilePanel} ${mobileOpen ? styles$1.mobilePanelOpen : ""}`,
           children: list2
         }
       )
@@ -1596,7 +1929,7 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
       "button",
       {
         type: "button",
-        className: styles.collapsedRail,
+        className: styles$1.collapsedRail,
         "aria-label": t.expand,
         title: t.expand,
         onClick: () => setCollapsed(false),
@@ -1604,14 +1937,14 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
       }
     );
   }
-  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 }),
+  return /* @__PURE__ */ jsxs("nav", { className: styles$1.desktop, "aria-label": t.title, ref: desktopNavRef, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles$1.header, children: [
+      /* @__PURE__ */ jsx("span", { className: styles$1.headerTitle, children: t.title }),
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: styles.collapseBtn,
+          className: styles$1.collapseBtn,
           "aria-label": t.collapse,
           title: t.collapse,
           onClick: () => setCollapsed(true),
@@ -1736,8 +2069,49 @@ function scrollToTocHeading(headingId, scrollContainer, options) {
   };
   requestAnimationFrame(animate);
 }
+const popoverAnchor = "_popoverAnchor_ztxwe_57";
+const popoverContent = "_popoverContent_ztxwe_64";
+const styles = {
+  popoverAnchor,
+  popoverContent
+};
+function CommentPopover({
+  open,
+  onOpenChange,
+  anchorEl,
+  children,
+  side = "top",
+  align = "start",
+  sideOffset = 6
+}) {
+  const rect = open && anchorEl ? anchorEl.getBoundingClientRect() : null;
+  return /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange, children: [
+    rect && /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: styles.popoverAnchor,
+        style: { left: rect.left, top: rect.top }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        className: styles.popoverContent,
+        side,
+        align,
+        sideOffset,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        children
+      }
+    ) })
+  ] });
+}
 export {
   BoldIcon,
+  COMMENT_ACTIVE_META,
+  COMMENT_CLICK_META,
+  COMMENT_GUTTER_META,
   CheckIcon,
   ChevronDownIcon,
   CitationInteractive,
@@ -1748,6 +2122,8 @@ export {
   ColumnAfterIcon,
   ColumnBeforeIcon,
   ColumnDeleteIcon,
+  CommentMark,
+  CommentPopover,
   EditorToolbar,
   ImageIcon,
   ItalicIcon,
@@ -1772,24 +2148,37 @@ export {
   TrashIcon,
   UnderlineIcon,
   UndoIcon,
-  c as applyCitationSources,
+  g as applyCitationSources,
+  applyCommentAnchorsToEditor,
   baseExtensions,
+  h as blockTextHash,
+  collectCommentIds,
+  commentAnchorExtension,
+  commentAnchorPlugin,
+  commentAnchorPluginKey,
+  commentRangesById,
   createCitationRef,
   defaultCodeBlockLabels,
   defaultColorPaletteLabels,
+  defaultCommentLabels,
   defaultTocLabels,
   defaultToolbarLabels,
   enrichMarkdownCitations,
-  d as extractToc,
+  i as extractToc,
   findCitationRefElement,
+  focusComment,
   insertMarkdown,
   looksLikeMarkdown,
   lowlight,
   makeTocGetId,
+  mapCommentAnchors,
+  mergeCommentIntervals,
+  nextComment,
   pureCodeBlock,
   pureImage,
   readCitationAttrs,
   scrollToTocHeading,
+  stripCommentAnchorMarks,
   useIsMobile
 };
 //# sourceMappingURL=index.js.map