tiptap-markdown-react 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,19 +1,75 @@
 "use client";
 import { Markdown } from "@tiptap/markdown";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs, 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 { 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 { 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-DW6HOiGt.js";
+import { c, d } from "./extractToc-DW6HOiGt.js";
 import { Extension } from "@tiptap/core";
 import { FileHandlePlugin } from "@tiptap/extension-file-handler";
 import { PluginKey, Plugin } from "@tiptap/pm/state";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as Popover from "@radix-ui/react-popover";
 import { createPortal } from "react-dom";
+function CitationRefView({ node, extension }) {
+  const index = String(node.attrs.index ?? "");
+  const url = node.attrs.url || null;
+  const title = node.attrs.title || "";
+  const renderCitation = extension.options.renderCitation;
+  const pill = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "citation-ref",
+      "data-index": index,
+      ...url ? { "data-url": url } : {},
+      ...title ? { "data-title": title } : {},
+      children: !renderCitation && url ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: url,
+          title,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          children: index
+        }
+      ) : index
+    }
+  );
+  const content = renderCitation ? renderCitation({
+    index,
+    attrs: { index, url, title: title || null },
+    defaultDom: pill
+  }) : pill;
+  return /* @__PURE__ */ jsx(
+    NodeViewWrapper,
+    {
+      as: "span",
+      "data-citation-ref": "",
+      style: { display: "inline" },
+      children: content
+    }
+  );
+}
+function createCitationRef(options = {}) {
+  return CitationRef.extend({
+    addOptions() {
+      var _a;
+      return {
+        HTMLAttributes: {},
+        ...(_a = this.parent) == null ? void 0 : _a.call(this),
+        renderCitation: options.renderCitation
+      };
+    },
+    addNodeView() {
+      return ReactNodeViewRenderer(CitationRefView);
+    }
+  }).configure({
+    renderCitation: options.renderCitation
+  });
+}
 const MD_FILE_RE = /\.(md|markdown)$/i;
 const MD_MIME_TYPES = ["text/markdown", "text/x-markdown", ""];
 async function insertMarkdownFiles(editor, files, pos) {
@@ -454,6 +510,8 @@ const ImageWithConfirmDelete = Image.extend({
 });
 const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   initialMarkdown = "",
+  sources,
+  renderCitation,
   placeholder,
   onEditorReady,
   onTocChange,
@@ -463,11 +521,16 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
   codeBlockLabels,
   className
 }, ref) {
+  const preparedInitial = enrichMarkdownCitations(
+    initialMarkdown,
+    sources ?? []
+  );
   const editor = useEditor({
     extensions: [
       ...baseExtensions,
       CodeBlock.configure({ lowlight, codeBlockLabels }),
       ImageWithConfirmDelete.configure({ inline: false }),
+      createCitationRef({ renderCitation }),
       Markdown,
       TableOfContents.configure({
         getId: makeTocGetId(),
@@ -481,7 +544,7 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
       ...markdownFileDrop ? [MarkdownFileDrop] : [],
       ...extraExtensions ?? []
     ],
-    content: initialMarkdown,
+    content: preparedInitial,
     contentType: "markdown",
     // Next.js SSR：服务端不立即渲染，避免 hydration 不一致
     immediatelyRender: false,
@@ -523,23 +586,43 @@ const MarkdownWysiwygEditor = forwardRef(function MarkdownWysiwygEditor2({
     }
   );
 });
-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 }
-    }
-  });
+function MarkdownPreview({
+  markdown,
+  sources,
+  renderCitation,
+  className
+}) {
+  const prepared = useMemo(
+    () => enrichMarkdownCitations(markdown, sources ?? []),
+    [markdown, sources]
+  );
+  const extensions = useMemo(
+    () => [
+      ...baseExtensions,
+      pureCodeBlock,
+      pureImage,
+      createCitationRef({ renderCitation }),
+      Markdown
+    ],
+    [renderCitation]
+  );
+  const editor = useEditor(
+    {
+      extensions,
+      content: prepared,
+      contentType: "markdown",
+      editable: false,
+      immediatelyRender: false,
+      editorProps: {
+        attributes: { class: styles$4.editorContent }
+      }
+    },
+    [extensions]
+  );
   useEffect(() => {
     if (!editor) return;
-    editor.commands.setContent(markdown, { contentType: "markdown" });
-  }, [editor, markdown]);
+    editor.commands.setContent(prepared, { contentType: "markdown" });
+  }, [editor, prepared]);
   return /* @__PURE__ */ jsx(
     EditorContent,
     {
@@ -548,8 +631,9 @@ function MarkdownPreview({ markdown, className }) {
     }
   );
 }
-function insertMarkdown(editor, markdown) {
-  editor.chain().focus().insertContent(markdown, { contentType: "markdown" }).run();
+function insertMarkdown(editor, markdown, sources = []) {
+  const prepared = enrichMarkdownCitations(markdown, sources);
+  editor.chain().focus().insertContent(prepared, { contentType: "markdown" }).run();
 }
 const toolbar = "_toolbar_i2emf_2";
 const inner = "_inner_i2emf_15";
@@ -635,7 +719,7 @@ function ColorPalette({ value, onPick, labels }) {
       {
         type: "button",
         className: styles$1.noneRow,
-        onMouseDown: (e2) => e2.preventDefault(),
+        onMouseDown: (e) => e.preventDefault(),
         onClick: () => onPick(null),
         children: [
           /* @__PURE__ */ jsx("span", { className: styles$1.noneIcon, "aria-hidden": true }),
@@ -643,32 +727,32 @@ function ColorPalette({ value, onPick, labels }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: styles$1.grid, children: PALETTE.flat().map((c) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$1.grid, children: PALETTE.flat().map((c2) => /* @__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)
+        className: `${styles$1.swatch} ${current === c2.toLowerCase() ? styles$1.swatchActive : ""}`,
+        style: { background: c2 },
+        title: c2,
+        "aria-label": c2,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onPick(c2)
       },
-      c
+      c2
     )) }),
     /* @__PURE__ */ jsx("div", { className: styles$1.themeLabel, children: t.theme }),
-    /* @__PURE__ */ jsx("div", { className: styles$1.themeRow, children: THEME_COLORS.map((c) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$1.themeRow, children: THEME_COLORS.map((c2) => /* @__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)
+        className: `${styles$1.swatch} ${current === c2.toLowerCase() ? styles$1.swatchActive : ""}`,
+        style: { background: c2 },
+        title: c2,
+        "aria-label": c2,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onPick(c2)
       },
-      c
+      c2
     )) })
   ] });
 }
@@ -688,7 +772,7 @@ function ToolbarButton({
       "aria-pressed": active2,
       disabled,
       className: `${styles$2.btn} ${active2 ? styles$2.btnActive : ""}`,
-      onMouseDown: (e2) => e2.preventDefault(),
+      onMouseDown: (e) => e.preventDefault(),
       onClick,
       children
     }
@@ -713,8 +797,8 @@ function MenuPopover({
         className: styles$2.menu,
         sideOffset: 4,
         align: "start",
-        onOpenAutoFocus: (e2) => e2.preventDefault(),
-        onCloseAutoFocus: (e2) => e2.preventDefault(),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
         children: /* @__PURE__ */ jsx(MenuCloseCtx.Provider, { value: close, children })
       }
     ) })
@@ -733,7 +817,7 @@ function MenuItem({
       type: "button",
       disabled,
       className: `${styles$2.menuItem} ${selected ? styles$2.menuItemSelected : ""}`,
-      onMouseDown: (e2) => e2.preventDefault(),
+      onMouseDown: (e) => e.preventDefault(),
       onClick: () => {
         onSelect();
         close();
@@ -759,7 +843,7 @@ function ColorPopover({
         className: styles$2.btn,
         title,
         "aria-label": title,
-        onMouseDown: (e2) => e2.preventDefault(),
+        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 } })
@@ -772,14 +856,14 @@ function ColorPopover({
         className: styles$2.popoverContent,
         sideOffset: 4,
         align: "start",
-        onOpenAutoFocus: (e2) => e2.preventDefault(),
-        onCloseAutoFocus: (e2) => e2.preventDefault(),
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
         children: /* @__PURE__ */ jsx(
           ColorPalette,
           {
             value,
-            onPick: (c) => {
-              onPick(c);
+            onPick: (c2) => {
+              onPick(c2);
               setOpen(false);
             },
             labels: paletteLabels
@@ -802,30 +886,30 @@ function EditorToolbar({
   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"),
+    selector: ({ editor: e }) => ({
+      bold: e.isActive("bold"),
+      italic: e.isActive("italic"),
+      underline: e.isActive("underline"),
+      strike: e.isActive("strike"),
+      code: e.isActive("code"),
+      link: e.isActive("link"),
+      taskList: e.isActive("taskList"),
       headingLevel: [1, 2, 3, 4, 5, 6].find(
-        (lv) => e2.isActive("heading", { level: lv })
+        (lv) => e.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()
+      fontSize: e.getAttributes("textStyle").fontSize || void 0,
+      isParagraph: e.isActive("paragraph"),
+      bulletList: e.isActive("bulletList"),
+      orderedList: e.isActive("orderedList"),
+      blockquote: e.isActive("blockquote"),
+      textColor: e.getAttributes("textStyle").color || void 0,
+      highlightColor: e.getAttributes("highlight").color || void 0,
+      superscript: e.isActive("superscript"),
+      subscript: e.isActive("subscript"),
+      inTable: e.isActive("table"),
+      inTableHeader: e.isActive("tableHeader"),
+      canUndo: e.can().undo(),
+      canRedo: e.can().redo()
     })
   });
   const [editorFocused, setEditorFocused] = useState(() => editor.isFocused);
@@ -847,32 +931,32 @@ function EditorToolbar({
   const closeTableMenu = useCallback(() => setTableMenu(null), []);
   useEffect(() => {
     const dom = editor.view.dom;
-    const onContextMenu = (e2) => {
+    const onContextMenu = (e) => {
       const coords = editor.view.posAtCoords({
-        left: e2.clientX,
-        top: e2.clientY
+        left: e.clientX,
+        top: e.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") {
+      for (let d2 = $pos.depth; d2 > 0; d2--) {
+        if ($pos.node(d2).type.name === "table") {
           inTable = true;
           break;
         }
       }
       if (!inTable) return;
-      e2.preventDefault();
+      e.preventDefault();
       editor.chain().focus().setTextSelection(coords.pos).run();
-      setTableMenu({ x: e2.clientX, y: e2.clientY });
+      setTableMenu({ x: e.clientX, y: e.clientY });
     };
     dom.addEventListener("contextmenu", onContextMenu);
     return () => dom.removeEventListener("contextmenu", onContextMenu);
   }, [editor]);
   useEffect(() => {
     if (!tableMenu) return;
-    const onKey = (e2) => {
-      if (e2.key === "Escape") closeTableMenu();
+    const onKey = (e) => {
+      if (e.key === "Escape") closeTableMenu();
     };
     document.addEventListener("mousedown", closeTableMenu);
     document.addEventListener("keydown", onKey, true);
@@ -892,10 +976,10 @@ function EditorToolbar({
     var _a;
     return (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  const handleImageChange = async (e2) => {
+  const handleImageChange = async (e) => {
     var _a;
-    const file = (_a = e2.target.files) == null ? void 0 : _a[0];
-    e2.target.value = "";
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    e.target.value = "";
     if (!file || !onImageUpload) return;
     try {
       const url = await onImageUpload(file);
@@ -907,10 +991,10 @@ function EditorToolbar({
     }
   };
   const mdFileInputRef = useRef(null);
-  const handleMdFileChange = async (e2) => {
+  const handleMdFileChange = async (e) => {
     var _a;
-    const file = (_a = e2.target.files) == null ? void 0 : _a[0];
-    e2.target.value = "";
+    const file = (_a = e.target.files) == null ? void 0 : _a[0];
+    e.target.value = "";
     if (!file) return;
     try {
       const text = await file.text();
@@ -981,7 +1065,7 @@ function EditorToolbar({
                   type: "button",
                   className: styles$2.styleTrigger,
                   title: t.style,
-                  onMouseDown: (e2) => e2.preventDefault(),
+                  onMouseDown: (e) => e.preventDefault(),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.style }),
                     /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
@@ -1026,7 +1110,7 @@ function EditorToolbar({
                   title: t.fontSize,
                   "aria-label": t.fontSize,
                   disabled: !canEditFontSize,
-                  onMouseDown: (e2) => e2.preventDefault(),
+                  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 })
@@ -1138,7 +1222,7 @@ function EditorToolbar({
                   className: `${styles$2.scriptTrigger} ${scriptActive !== "normal" ? styles$2.btnActive : ""}`,
                   title: t.scriptMenu,
                   "aria-label": t.scriptMenu,
-                  onMouseDown: (e2) => e2.preventDefault(),
+                  onMouseDown: (e) => e.preventDefault(),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: styles$2.scriptTriggerGlyph, children: "A" }),
                     /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
@@ -1250,7 +1334,7 @@ function EditorToolbar({
                   type: "button",
                   className: styles$2.styleTrigger,
                   title: t.more,
-                  onMouseDown: (e2) => e2.preventDefault(),
+                  onMouseDown: (e) => e.preventDefault(),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: styles$2.styleTriggerLabel, children: t.more }),
                     /* @__PURE__ */ jsx(ChevronDownIcon, { size: 12, className: styles$2.styleTriggerCaret })
@@ -1318,8 +1402,8 @@ function EditorToolbar({
         {
           className: styles$2.tableBubble,
           style: { position: "fixed", left: tableMenu.x, top: tableMenu.y },
-          onMouseDown: (e2) => e2.stopPropagation(),
-          onContextMenu: (e2) => e2.preventDefault(),
+          onMouseDown: (e) => e.stopPropagation(),
+          onContextMenu: (e) => e.preventDefault(),
           children: [
             /* @__PURE__ */ jsx(
               ToolbarButton,
@@ -1464,8 +1548,8 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
       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();
+      onClick: (e) => {
+        e.preventDefault();
         handleClick(item2);
       },
       children: [
@@ -1538,6 +1622,94 @@ function TocPanel({ items, activeId, onItemClick, labels }) {
     list2
   ] });
 }
+function findCitationRefElement(target, root) {
+  if (!(target instanceof Element)) return null;
+  const el = target.closest(".citation-ref");
+  if (!(el instanceof HTMLElement)) return null;
+  if (!root.contains(el)) return null;
+  return el;
+}
+function readCitationAttrs(el) {
+  var _a;
+  return {
+    index: el.getAttribute("data-index") || ((_a = el.textContent) == null ? void 0 : _a.trim()) || "",
+    url: el.getAttribute("data-url"),
+    title: el.getAttribute("data-title")
+  };
+}
+function CitationInteractive({
+  containerRef,
+  renderCitation,
+  trigger = "click"
+}) {
+  const [active2, setActive] = useState(null);
+  useEffect(() => {
+    const root = containerRef.current;
+    if (!root) return;
+    const activate = (el, e) => {
+      e == null ? void 0 : e.preventDefault();
+      e == null ? void 0 : e.stopPropagation();
+      const attrs = readCitationAttrs(el);
+      setActive({ index: attrs.index, attrs, anchorEl: el });
+    };
+    const onClick = (e) => {
+      const el = findCitationRefElement(e.target, root);
+      if (el) {
+        activate(el, e);
+        return;
+      }
+      setActive(null);
+    };
+    const onMouseOver = (e) => {
+      const el = findCitationRefElement(e.target, root);
+      if (el) activate(el, e);
+    };
+    const onMouseLeave = () => setActive(null);
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setActive(null);
+    };
+    if (trigger === "hover") {
+      root.addEventListener("mouseover", onMouseOver);
+      root.addEventListener("mouseleave", onMouseLeave);
+    } else {
+      root.addEventListener("click", onClick);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      root.removeEventListener("mouseover", onMouseOver);
+      root.removeEventListener("mouseleave", onMouseLeave);
+      root.removeEventListener("click", onClick);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [containerRef, trigger]);
+  if (!active2) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: renderCitation({
+    index: active2.index,
+    attrs: active2.attrs,
+    anchorEl: active2.anchorEl,
+    close: () => setActive(null)
+  }) });
+}
+function ReportContentInteractive({
+  renderCitation,
+  trigger,
+  className,
+  html,
+  ...rest
+}) {
+  const ref = useRef(null);
+  return /* @__PURE__ */ jsxs("div", { ref, className, children: [
+    /* @__PURE__ */ jsx(ReportContent, { html, ...rest }),
+    /* @__PURE__ */ jsx(
+      CitationInteractive,
+      {
+        containerRef: ref,
+        renderCitation,
+        trigger
+      }
+    )
+  ] });
+}
 function easeOutCubic(t) {
   return 1 - (1 - t) * (1 - t) * (1 - t);
 }
@@ -1567,6 +1739,8 @@ export {
   BoldIcon,
   CheckIcon,
   ChevronDownIcon,
+  CitationInteractive,
+  CitationRef,
   CodeBlockView,
   CodeIcon,
   ColorPalette,
@@ -1587,7 +1761,8 @@ export {
   MarkdownWysiwygEditor,
   MenuIcon,
   RedoIcon,
-  R as ReportContent,
+  ReportContent,
+  ReportContentInteractive,
   RowAfterIcon,
   RowBeforeIcon,
   RowDeleteIcon,
@@ -1596,18 +1771,23 @@ export {
   TrashIcon,
   UnderlineIcon,
   UndoIcon,
+  c as applyCitationSources,
   baseExtensions,
+  createCitationRef,
   defaultCodeBlockLabels,
   defaultColorPaletteLabels,
   defaultTocLabels,
   defaultToolbarLabels,
-  e as extractToc,
+  enrichMarkdownCitations,
+  d as extractToc,
+  findCitationRefElement,
   insertMarkdown,
   looksLikeMarkdown,
   lowlight,
   makeTocGetId,
   pureCodeBlock,
   pureImage,
+  readCitationAttrs,
   scrollToTocHeading,
   useIsMobile
 };