@kedataindo/docflow-plugins 0.0.4 → 0.0.5

package/dist/index.js

@@ -1,3 +1,18 @@
+import {
+  BibliographyNode,
+  CSL_LOCALE_EN_US,
+  CSL_STYLES,
+  CitationEngineExtension,
+  CitationNode,
+  CiteEngine,
+  DEFAULT_CSL_STYLE,
+  buildCitationNodes,
+  citationPlugin,
+  getCitationEngine,
+  nextCitationId,
+  sanitizeCiteprocHtml
+} from "./chunk-MZZTJIFJ.js";
+
 // src/formatting.ts
 import { definePlugin } from "@kedataindo/docflow-core";
 import Underline from "@tiptap/extension-underline";
@@ -94,7 +109,7 @@ import { definePlugin as definePlugin5 } from "@kedataindo/docflow-core";
 import Link from "@tiptap/extension-link";
 var linkPlugin = definePlugin5({
   id: "link",
-  tiptapExtensions: [Link.configure({ openOnClick: false })],
+  tiptapExtensions: [Link.configure({ openOnClick: true })],
   toolbar: [
     { id: "set-link", label: "Link", action: "setLink", iconComponent: "Link" }
   ],
@@ -117,7 +132,26 @@ var linkPlugin = definePlugin5({
 // src/image.ts
 import { definePlugin as definePlugin6 } from "@kedataindo/docflow-core";
 import Image from "@tiptap/extension-image";
-var DEFAULT_IMAGE_SRC = "https://via.placeholder.com/300x200";
+function pickImageFile() {
+  if (typeof document === "undefined") return Promise.resolve(null);
+  return new Promise((resolve) => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    const cleanup = () => input.remove();
+    input.onchange = () => {
+      const file = input.files?.[0] ?? null;
+      cleanup();
+      resolve(file);
+    };
+    input.oncancel = () => {
+      cleanup();
+      resolve(null);
+    };
+    document.body.appendChild(input);
+    input.click();
+  });
+}
 var imagePlugin = definePlugin6({
   id: "image",
   tiptapExtensions: [Image],
@@ -126,26 +160,172 @@ var imagePlugin = definePlugin6({
   commands: {
     insertImage: (editor, ...args) => {
       const options = args[0];
-      const src = options?.src ?? (typeof window !== "undefined" && typeof window.prompt === "function" ? window.prompt("Enter image URL:", "https://") : null) ?? DEFAULT_IMAGE_SRC;
-      if (!src) return false;
-      return editor.commands.setImage({ src });
+      if (options?.src) {
+        return editor.commands.setImage({ src: options.src, alt: options.alt, title: options.title });
+      }
+      const context = editor.storage.editorContext;
+      const upload = context?.onImageUpload;
+      if (upload) {
+        void pickImageFile().then(async (file) => {
+          if (!file) return;
+          try {
+            const result = await upload(file);
+            if (result?.src) {
+              editor.commands.setImage({ src: result.src, alt: result.alt, title: result.title });
+            }
+          } catch (err) {
+            console.error("[image] upload failed:", err);
+          }
+        });
+        return true;
+      }
+      if (typeof window !== "undefined" && typeof window.prompt === "function") {
+        const src = window.prompt("Enter image URL:", "https://");
+        if (!src) return false;
+        return editor.commands.setImage({ src });
+      }
+      return false;
     }
   }
 });
 
 // src/table.ts
 import { definePlugin as definePlugin7 } from "@kedataindo/docflow-core";
+import { mergeAttributes } from "@tiptap/core";
 import Table from "@tiptap/extension-table";
 import TableRow from "@tiptap/extension-table-row";
 import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
+var CustomTable = Table.extend({
+  renderHTML({ node, HTMLAttributes }) {
+    let colCount = 0;
+    const firstRow = node.firstChild;
+    if (firstRow) {
+      firstRow.forEach((cell) => {
+        colCount += cell.attrs.colspan || 1;
+      });
+    }
+    const cols = [];
+    let totalWidth = 0;
+    let hasExplicitWidths = false;
+    if (colCount > 0) {
+      for (let i = 0; i < colCount; i++) {
+        let width = null;
+        if (firstRow) {
+          let currentColIdx = 0;
+          firstRow.forEach((cell) => {
+            const colspan = cell.attrs.colspan || 1;
+            if (i >= currentColIdx && i < currentColIdx + colspan) {
+              const colwidth = cell.attrs.colwidth;
+              if (colwidth && Array.isArray(colwidth)) {
+                const indexInCell = i - currentColIdx;
+                const w = colwidth[indexInCell];
+                if (typeof w === "number" && w > 0) {
+                  width = w;
+                }
+              }
+            }
+            currentColIdx += colspan;
+          });
+        }
+        if (width) {
+          totalWidth += width;
+          hasExplicitWidths = true;
+        }
+        cols.push([
+          "col",
+          width ? { style: `width: ${width}px !important`, width: String(width) } : {}
+        ]);
+      }
+    }
+    const tableAttrs = mergeAttributes(HTMLAttributes);
+    if (hasExplicitWidths && totalWidth > 0) {
+      const existingStyle = tableAttrs.style || "";
+      tableAttrs.style = existingStyle ? `${existingStyle}; width: ${totalWidth}px !important` : `width: ${totalWidth}px !important`;
+    }
+    return [
+      "table",
+      tableAttrs,
+      ["colgroup", ...cols],
+      ["tbody", 0]
+    ];
+  }
+});
+var CustomTableCell = TableCell.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const width = element.getAttribute("width") || element.style.width;
+          if (width) {
+            const parsed = parseInt(width, 10);
+            return isNaN(parsed) || parsed <= 0 ? null : [parsed];
+          }
+          const colwidth = element.getAttribute("colwidth");
+          return colwidth ? colwidth.split(",").map((w) => parseInt(w, 10)).filter((w) => !isNaN(w) && w > 0) : null;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.colwidth || !Array.isArray(attributes.colwidth) || attributes.colwidth.length === 0) {
+            return {};
+          }
+          const validWidths = attributes.colwidth.filter((w2) => typeof w2 === "number" && w2 > 0);
+          if (validWidths.length === 0) {
+            return {};
+          }
+          const w = validWidths[0];
+          return {
+            colwidth: validWidths.join(","),
+            style: `width: ${w}px !important`,
+            width: String(w)
+          };
+        }
+      }
+    };
+  }
+});
+var CustomTableHeader = TableHeader.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      colwidth: {
+        default: null,
+        parseHTML: (element) => {
+          const width = element.getAttribute("width") || element.style.width;
+          if (width) {
+            const parsed = parseInt(width, 10);
+            return isNaN(parsed) || parsed <= 0 ? null : [parsed];
+          }
+          const colwidth = element.getAttribute("colwidth");
+          return colwidth ? colwidth.split(",").map((w) => parseInt(w, 10)).filter((w) => !isNaN(w) && w > 0) : null;
+        },
+        renderHTML: (attributes) => {
+          if (!attributes.colwidth || !Array.isArray(attributes.colwidth) || attributes.colwidth.length === 0) {
+            return {};
+          }
+          const validWidths = attributes.colwidth.filter((w2) => typeof w2 === "number" && w2 > 0);
+          if (validWidths.length === 0) {
+            return {};
+          }
+          const w = validWidths[0];
+          return {
+            colwidth: validWidths.join(","),
+            style: `width: ${w}px !important`,
+            width: String(w)
+          };
+        }
+      }
+    };
+  }
+});
 var tablePlugin = definePlugin7({
   id: "table",
   tiptapExtensions: [
-    Table.configure({ resizable: true }),
+    CustomTable.configure({ resizable: false }),
     TableRow,
-    TableCell,
-    TableHeader
+    CustomTableCell,
+    CustomTableHeader
   ],
   toolbar: [
     { id: "insert-table", label: "Insert Table", action: "insertTable", args: [{ rows: 3, cols: 3, withHeaderRow: true }], iconComponent: "Table" }
@@ -185,9 +365,9 @@ function createPlaceholderPlugin(options = {}) {
 var placeholderPlugin = createPlaceholderPlugin();
 
 // src/pageBreak.ts
-import { Node, mergeAttributes } from "@tiptap/core";
+import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import { definePlugin as definePlugin11 } from "@kedataindo/docflow-core";
-var PageBreak = Node.create({
+var PageBreak = Node2.create({
   name: "pageBreak",
   group: "block",
   selectable: false,
@@ -198,7 +378,7 @@ var PageBreak = Node.create({
   renderHTML({ HTMLAttributes }) {
     return [
       "div",
-      mergeAttributes(HTMLAttributes, {
+      mergeAttributes2(HTMLAttributes, {
         "data-page-break": "true",
         "data-node-type": "pageBreak",
         class: "docs-editor-page-break"
@@ -243,9 +423,9 @@ var pageBreakPlugin = definePlugin11({
 });
 
 // src/footnote.ts
-import { Node as Node2, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
+import { Node as Node3, mergeAttributes as mergeAttributes3 } from "@tiptap/core";
 import { definePlugin as definePlugin12 } from "@kedataindo/docflow-core";
-var FootnoteNode = Node2.create({
+var FootnoteNode = Node3.create({
   name: "footnote",
   group: "inline",
   inline: true,
@@ -258,6 +438,25 @@ var FootnoteNode = Node2.create({
         default: "",
         parseHTML: (el) => el.getAttribute("data-footnote-content") ?? "",
         renderHTML: (attrs) => ({ "data-footnote-content": attrs.content })
+      },
+      // Phase 6: when sourceId is set, the footnote body is citeproc-rendered
+      // from the source (never typed, never stored as text). The `content`
+      // attr stays authoritative for free-text footnotes — existing documents
+      // render byte-identically (backward compatible).
+      citationId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-citation-id"),
+        renderHTML: (attrs) => attrs.citationId ? { "data-citation-id": attrs.citationId } : {}
+      },
+      sourceId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-footnote-source-id"),
+        renderHTML: (attrs) => attrs.sourceId ? { "data-footnote-source-id": attrs.sourceId } : {}
+      },
+      locator: {
+        default: "",
+        parseHTML: (el) => el.getAttribute("data-footnote-locator") ?? "",
+        renderHTML: (attrs) => attrs.locator ? { "data-footnote-locator": attrs.locator } : {}
       }
     };
   },
@@ -265,7 +464,7 @@ var FootnoteNode = Node2.create({
     return [{ tag: 'span[data-node-type="footnote"]' }];
   },
   renderHTML({ HTMLAttributes }) {
-    return ["span", mergeAttributes2(HTMLAttributes, {
+    return ["span", mergeAttributes3(HTMLAttributes, {
       "data-node-type": "footnote",
       class: "docs-footnote-ref"
     }), "1"];
@@ -281,6 +480,11 @@ var FootnoteNode = Node2.create({
       dom.className = "docs-footnote-ref";
       dom.setAttribute("data-node-type", "footnote");
       dom.setAttribute("data-footnote-content", String(attrs.content ?? ""));
+      if (attrs.sourceId) {
+        dom.setAttribute("data-footnote-source-id", String(attrs.sourceId));
+        dom.setAttribute("data-citation-id", String(attrs.citationId ?? ""));
+        if (attrs.locator) dom.setAttribute("data-footnote-locator", String(attrs.locator));
+      }
       dom.textContent = "1";
       return {
         dom,
@@ -289,6 +493,15 @@ var FootnoteNode = Node2.create({
           try {
             const updatedAttrs = updatedNode?.attrs ?? {};
             dom.setAttribute("data-footnote-content", String(updatedAttrs.content ?? ""));
+            if (updatedAttrs.sourceId) {
+              dom.setAttribute("data-footnote-source-id", String(updatedAttrs.sourceId));
+              dom.setAttribute("data-citation-id", String(updatedAttrs.citationId ?? ""));
+              if (updatedAttrs.locator) dom.setAttribute("data-footnote-locator", String(updatedAttrs.locator));
+            } else {
+              dom.removeAttribute("data-footnote-source-id");
+              dom.removeAttribute("data-citation-id");
+              dom.removeAttribute("data-footnote-locator");
+            }
           } catch {
           }
           return true;
@@ -312,9 +525,249 @@ var footnotePlugin = definePlugin12({
   }
 });
 
+// src/toc.ts
+import { Extension, Node as Node4, mergeAttributes as mergeAttributes4 } from "@tiptap/core";
+import { definePlugin as definePlugin13 } from "@kedataindo/docflow-core";
+function collectHeadingsFromDoc(doc) {
+  const headings = [];
+  doc.descendants((node, pos) => {
+    if (node.type.name === "heading") {
+      const level = node.attrs.level;
+      if (level === 1 || level === 2 || level === 3) {
+        headings.push({ level, text: node.textContent.trim(), pos });
+      }
+    }
+    return true;
+  });
+  return headings;
+}
+function collectHeadings(editor) {
+  return collectHeadingsFromDoc(editor.state.doc);
+}
+function createPageResolver(editor) {
+  let breakers = [];
+  try {
+    const pagination = editor.view.dom.querySelector("[data-rm-pagination]");
+    if (pagination) {
+      breakers = Array.from(pagination.querySelectorAll(".rm-page-break .breaker")).filter((el) => el instanceof HTMLElement);
+    }
+  } catch {
+  }
+  if (breakers.length === 0) return () => null;
+  const editorDom = editor.view.dom;
+  return (pos) => {
+    try {
+      const coords = editor.view.coordsAtPos(pos);
+      const top = coords.top - editorDom.getBoundingClientRect().top + editorDom.scrollTop;
+      let page = 1;
+      for (const breaker of breakers) {
+        if (top < breaker.offsetTop) return page;
+        page++;
+      }
+      return page;
+    } catch {
+      return null;
+    }
+  };
+}
+function buildTocEntryNodes(schema, headings, pageFor) {
+  const entryType = schema.nodes.tocEntry;
+  if (headings.length === 0) {
+    return [entryType.create({ level: 1, pos: 0 })];
+  }
+  return headings.map((h) => {
+    const content = [];
+    if (h.text) content.push(schema.text(h.text));
+    const page = pageFor(h.pos);
+    if (page !== null) content.push(schema.nodes.tocPageNum.create({ page }));
+    return entryType.create({ level: h.level, pos: h.pos }, content);
+  });
+}
+function buildTocContentJSON(editor) {
+  const headings = collectHeadings(editor);
+  if (headings.length === 0) {
+    return [{ type: "tocEntry", attrs: { level: 1, pos: 0 } }];
+  }
+  const pageFor = createPageResolver(editor);
+  return headings.map((h) => {
+    const content = [];
+    if (h.text) content.push({ type: "text", text: h.text });
+    const page = pageFor(h.pos);
+    if (page !== null) content.push({ type: "tocPageNum", attrs: { page } });
+    return {
+      type: "tocEntry",
+      attrs: { level: h.level, pos: h.pos },
+      ...content.length > 0 ? { content } : {}
+    };
+  });
+}
+function applyTocRegeneration(editor, tr) {
+  const tocType = editor.schema.nodes.toc;
+  if (!tocType) return false;
+  const targets = [];
+  tr.doc.descendants((node, pos) => {
+    if (node.type.name === "toc") {
+      targets.push({ pos, nodeSize: node.nodeSize });
+      return false;
+    }
+    return true;
+  });
+  if (targets.length === 0) return false;
+  const entries = buildTocEntryNodes(editor.schema, collectHeadingsFromDoc(tr.doc), createPageResolver(editor));
+  for (const target of targets.reverse()) {
+    tr.replaceWith(target.pos, target.pos + target.nodeSize, tocType.create(null, entries));
+  }
+  return true;
+}
+function regenerateToc(editor) {
+  const tr = editor.state.tr;
+  if (!applyTocRegeneration(editor, tr)) return false;
+  editor.view.dispatch(tr);
+  return true;
+}
+var TocCommandsExtension = Extension.create({
+  name: "tocCommands",
+  addCommands() {
+    return {
+      insertToc: () => ({ editor, chain }) => chain().focus().insertContent({ type: "toc", content: buildTocContentJSON(editor) }).run(),
+      refreshToc: () => ({ editor, tr }) => applyTocRegeneration(editor, tr)
+    };
+  }
+});
+var TocPageNumNode = Node4.create({
+  name: "tocPageNum",
+  inline: true,
+  group: "inline",
+  atom: true,
+  selectable: false,
+  addAttributes() {
+    return {
+      page: {
+        default: null,
+        parseHTML: (el) => Number(el.textContent) || null,
+        renderHTML: (attrs) => attrs.page ? { "data-page": attrs.page } : {}
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-toc-page]" }];
+  },
+  renderHTML({ node, HTMLAttributes }) {
+    return ["span", mergeAttributes4(HTMLAttributes, {
+      "data-toc-page": "",
+      class: "docs-toc__page"
+    }), String(node.attrs.page ?? "")];
+  }
+});
+var TocEntryNode = Node4.create({
+  name: "tocEntry",
+  content: "inline*",
+  defining: true,
+  addAttributes() {
+    return {
+      level: {
+        default: 1,
+        parseHTML: (el) => Number(el.getAttribute("data-level") ?? 1),
+        renderHTML: (attrs) => ({ "data-level": attrs.level })
+      },
+      pos: {
+        default: 0,
+        parseHTML: (el) => Number(el.getAttribute("data-pos") ?? 0),
+        renderHTML: (attrs) => ({ "data-pos": attrs.pos })
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "p[data-toc-entry]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["p", mergeAttributes4(HTMLAttributes, {
+      "data-toc-entry": "",
+      class: "docs-toc__entry"
+    }), 0];
+  }
+});
+var TocNode = Node4.create({
+  name: "toc",
+  group: "block",
+  content: "tocEntry+",
+  defining: true,
+  parseHTML() {
+    return [{ tag: "div[data-toc]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["div", mergeAttributes4(HTMLAttributes, {
+      "data-toc": "",
+      class: "docs-toc"
+    }), 0];
+  },
+  // Return type cast to `any` to bypass TipTap's strict NodeViewRenderer typing
+  // (same pattern as FootnoteNode / BibliographyNode).
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  addNodeView() {
+    return (props) => {
+      const editor = props.editor;
+      const dom = document.createElement("div");
+      dom.className = "docs-toc";
+      dom.setAttribute("data-toc", "");
+      const chrome = document.createElement("div");
+      chrome.className = "docs-toc__chrome";
+      chrome.contentEditable = "false";
+      const caption = document.createElement("span");
+      caption.className = "docs-toc__caption";
+      caption.textContent = "Table of contents";
+      const refresh = document.createElement("button");
+      refresh.type = "button";
+      refresh.className = "docs-toc__refresh";
+      refresh.title = "Refresh table of contents";
+      refresh.textContent = "\u27F3";
+      chrome.appendChild(caption);
+      chrome.appendChild(refresh);
+      const contentDOM = document.createElement("div");
+      contentDOM.className = "docs-toc__entries";
+      dom.appendChild(chrome);
+      dom.appendChild(contentDOM);
+      const onRefresh = (event) => {
+        event.preventDefault();
+        regenerateToc(editor);
+      };
+      const onEntryClick = (event) => {
+        const entry = event.target?.closest?.("[data-toc-entry]");
+        if (!entry) return;
+        const pos = Number(entry.getAttribute("data-pos") ?? 0);
+        const clamped = Math.min(Math.max(0, pos), editor.state.doc.content.size);
+        editor.chain().focus().setTextSelection(clamped).scrollIntoView().run();
+      };
+      refresh.addEventListener("click", onRefresh);
+      dom.addEventListener("click", onEntryClick);
+      return {
+        dom,
+        contentDOM,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        update(updatedNode) {
+          return updatedNode?.type?.name === "toc";
+        },
+        destroy() {
+          refresh.removeEventListener("click", onRefresh);
+          dom.removeEventListener("click", onEntryClick);
+        }
+      };
+    };
+  }
+});
+var tocPlugin = definePlugin13({
+  id: "toc",
+  tiptapExtensions: [TocPageNumNode, TocEntryNode, TocNode, TocCommandsExtension],
+  slashCommands: [{ name: "Table of contents", description: "Daftar isi", command: "insertToc" }],
+  commands: {
+    insertToc: (editor) => editor.commands.insertToc(),
+    refreshToc: (editor) => regenerateToc(editor)
+  }
+});
+
 // src/fontSize.ts
-import { definePlugin as definePlugin13, FontSizeExtension } from "@kedataindo/docflow-core";
-var fontSizePlugin = definePlugin13({
+import { definePlugin as definePlugin14, FontSizeExtension } from "@kedataindo/docflow-core";
+var fontSizePlugin = definePlugin14({
   id: "font-size",
   tiptapExtensions: [FontSizeExtension],
   commands: {
@@ -331,6 +784,625 @@ var fontSizePlugin = definePlugin13({
   }
 });
 
+// src/textColor.ts
+import { definePlugin as definePlugin15 } from "@kedataindo/docflow-core";
+import Color from "@tiptap/extension-color";
+var textColorPlugin = definePlugin15({
+  id: "text-color",
+  tiptapExtensions: [Color],
+  toolbar: [
+    { id: "text-color", label: "Text Color", action: "setTextColor", iconComponent: "Palette" }
+  ],
+  commands: {
+    setTextColor: (editor, ...args) => {
+      const color = args[0];
+      if (!color) return false;
+      if (color === "default") {
+        return editor.chain().focus().unsetColor().run();
+      }
+      return editor.chain().focus().setColor(color).run();
+    }
+  }
+});
+
+// src/highlight.ts
+import { definePlugin as definePlugin16 } from "@kedataindo/docflow-core";
+import Highlight from "@tiptap/extension-highlight";
+import { mergeAttributes as mergeAttributes5 } from "@tiptap/core";
+var GoogleDocsHighlight = Highlight.extend({
+  parseHTML() {
+    return [
+      // Standard <mark> tag (default TipTap behavior)
+      { tag: "mark" },
+      // Google Docs pastes background-color as inline span style
+      { tag: "span", style: "background-color" }
+    ];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["mark", mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes), 0];
+  }
+});
+var highlightPlugin = definePlugin16({
+  id: "highlight",
+  tiptapExtensions: [
+    GoogleDocsHighlight.configure({
+      multicolor: true
+    })
+  ],
+  toolbar: [
+    { id: "highlight", label: "Highlight", action: "setHighlight", iconComponent: "Highlighter" }
+  ],
+  commands: {
+    setHighlight: (editor, ...args) => {
+      const color = args[0];
+      if (!color) {
+        return editor.chain().focus().toggleHighlight().run();
+      }
+      if (color === "default") {
+        return editor.chain().focus().unsetHighlight().run();
+      }
+      return editor.chain().focus().toggleHighlight({ color }).run();
+    }
+  }
+});
+
+// src/ai.ts
+import { Extension as Extension2 } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { definePlugin as definePlugin17 } from "@kedataindo/docflow-core";
+var aiPluginKey = new PluginKey("docflow-ai");
+var CONTEXT_CHARS = 1500;
+function getAIPreview(editor) {
+  return editor.storage.ai ? editor.storage.ai.preview ?? null : null;
+}
+function getAIStreamPort(editor) {
+  return editor.storage.editorContext?.aiStream;
+}
+function boundedContext(state, from, to) {
+  return {
+    before: state.doc.textBetween(Math.max(0, from - CONTEXT_CHARS), from, "\n", " "),
+    after: state.doc.textBetween(to, Math.min(state.doc.content.size, to + CONTEXT_CHARS), "\n", " ")
+  };
+}
+function runAIStream(editor, req, abort) {
+  const aiStream = getAIStreamPort(editor);
+  if (!aiStream) return;
+  void (async () => {
+    const push = (meta) => {
+      if (abort.signal.aborted || editor.isDestroyed) return;
+      editor.view.dispatch(editor.state.tr.setMeta(aiPluginKey, meta));
+    };
+    try {
+      for await (const chunk of aiStream(req, abort.signal)) {
+        if (abort.signal.aborted || editor.isDestroyed) return;
+        push({ type: "chunk", text: chunk });
+      }
+      push({ type: "done" });
+    } catch (err) {
+      push({
+        type: "error",
+        message: err instanceof Error ? err.message : "AI request failed"
+      });
+    }
+  })();
+}
+function stopStream(editor) {
+  const storage = editor.storage.ai;
+  storage.abort?.abort();
+  storage.abort = null;
+}
+var AIExtension = Extension2.create({
+  name: "ai",
+  addStorage() {
+    return {
+      preview: null,
+      abort: null
+    };
+  },
+  addCommands() {
+    return {
+      aiTransform: (options) => ({ editor, state, dispatch }) => {
+        if (aiPluginKey.getState(state)) return false;
+        if (!getAIStreamPort(editor)) {
+          console.warn("[ai] no aiStream port injected \u2014 AI actions are inert");
+          return false;
+        }
+        const { from, to, empty } = state.selection;
+        if (empty) return false;
+        const originalText = state.doc.textBetween(from, to, "\n", " ");
+        if (!originalText.trim()) return false;
+        const abort = new AbortController();
+        editor.storage.ai.abort = abort;
+        dispatch?.(
+          state.tr.setMeta(aiPluginKey, {
+            type: "start",
+            mode: "transform",
+            status: "streaming",
+            from,
+            to,
+            originalText,
+            action: options.action
+          })
+        );
+        const req = {
+          action: options.action,
+          selection: originalText,
+          context: boundedContext(state, from, to),
+          ...options.prompt ? { prompt: options.prompt } : {}
+        };
+        runAIStream(editor, req, abort);
+        return true;
+      },
+      aiGenerate: () => ({ editor, state, dispatch }) => {
+        if (aiPluginKey.getState(state)) return false;
+        if (!getAIStreamPort(editor)) {
+          console.warn("[ai] no aiStream port injected \u2014 AI actions are inert");
+          return false;
+        }
+        const pos = state.selection.to;
+        dispatch?.(
+          state.tr.setMeta(aiPluginKey, {
+            type: "start",
+            mode: "generate",
+            status: "prompt",
+            from: pos,
+            to: pos,
+            originalText: "",
+            action: "generate"
+          })
+        );
+        return true;
+      },
+      aiPromptSubmit: (options) => ({ editor, state, dispatch }) => {
+        const preview = aiPluginKey.getState(state);
+        if (!preview || preview.mode !== "generate" || preview.status !== "prompt") return false;
+        const prompt = options.prompt?.trim();
+        if (!prompt) return false;
+        const abort = new AbortController();
+        editor.storage.ai.abort = abort;
+        dispatch?.(
+          state.tr.setMeta(aiPluginKey, {
+            type: "start",
+            mode: "generate",
+            status: "streaming",
+            from: preview.from,
+            to: preview.to,
+            originalText: "",
+            action: "generate"
+          })
+        );
+        const req = {
+          action: "generate",
+          prompt,
+          context: boundedContext(state, preview.from, preview.to)
+        };
+        runAIStream(editor, req, abort);
+        editor.commands.focus();
+        return true;
+      },
+      aiAccept: () => ({ editor, state, dispatch }) => {
+        const preview = aiPluginKey.getState(state);
+        if (!preview || preview.status === "prompt") return false;
+        stopStream(editor);
+        if (!dispatch) return true;
+        const tr = state.tr;
+        if (preview.text.trim()) {
+          tr.replaceWith(preview.from, preview.to, state.schema.text(preview.text));
+        }
+        tr.setMeta(aiPluginKey, { type: "clear" });
+        dispatch(tr);
+        return true;
+      },
+      aiReject: () => ({ editor, state, dispatch }) => {
+        const preview = aiPluginKey.getState(state);
+        if (!preview) return false;
+        stopStream(editor);
+        dispatch?.(state.tr.setMeta(aiPluginKey, { type: "clear" }));
+        return true;
+      }
+    };
+  },
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    let promptWidget = null;
+    function getPromptWidget() {
+      if (promptWidget) return promptWidget;
+      const wrap = document.createElement("span");
+      wrap.className = "docs-ai-prompt";
+      const input = document.createElement("input");
+      input.type = "text";
+      input.className = "docs-ai-prompt__input";
+      input.placeholder = "Ask AI to write\u2026  (Enter \u23CE \xB7 Esc cancel)";
+      input.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          editor.commands.aiPromptSubmit({ prompt: input.value });
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          editor.commands.aiReject();
+        }
+      });
+      input.addEventListener("blur", () => {
+        const preview = aiPluginKey.getState(editor.state);
+        if (preview?.status === "prompt") editor.commands.aiReject();
+      });
+      wrap.appendChild(input);
+      setTimeout(() => input.focus(), 0);
+      promptWidget = { dom: wrap, stopEvent: (e) => e.target instanceof Node && wrap.contains(e.target) };
+      return promptWidget;
+    }
+    function buildGhostWidget(preview) {
+      const ghost = document.createElement("span");
+      let actions = null;
+      if (preview.status === "error") {
+        ghost.className = "docs-ai-ghost docs-ai-ghost--error";
+        ghost.textContent = ` ${preview.error ?? "AI error"} \u2014 press Esc`;
+      } else {
+        ghost.className = "docs-ai-ghost";
+        const textSpan = document.createElement("span");
+        if (!preview.text && preview.status === "streaming") {
+          textSpan.textContent = "AI writing\u2026";
+          textSpan.className = "docs-ai-ghost-placeholder";
+        } else {
+          textSpan.textContent = preview.text + (preview.status === "streaming" ? "\u258C" : "");
+        }
+        ghost.appendChild(textSpan);
+        if (preview.status === "done") {
+          actions = document.createElement("span");
+          actions.className = "docs-ai-ghost-actions";
+          const acceptBtn = document.createElement("button");
+          acceptBtn.type = "button";
+          acceptBtn.className = "docs-ai-ghost-btn docs-ai-ghost-btn--accept";
+          acceptBtn.textContent = "\u2713 Accept";
+          acceptBtn.title = "Accept (Enter)";
+          acceptBtn.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            editor.commands.aiAccept();
+          });
+          const rejectBtn = document.createElement("button");
+          rejectBtn.type = "button";
+          rejectBtn.className = "docs-ai-ghost-btn docs-ai-ghost-btn--reject";
+          rejectBtn.textContent = "\u2717 Reject";
+          rejectBtn.title = "Reject (Esc)";
+          rejectBtn.addEventListener("mousedown", (e) => {
+            e.preventDefault();
+            editor.commands.aiReject();
+          });
+          actions.appendChild(acceptBtn);
+          actions.appendChild(rejectBtn);
+          ghost.appendChild(actions);
+        }
+      }
+      return {
+        dom: ghost,
+        // Keep button clicks away from ProseMirror (it would move the
+        // selection and swallow the mousedown before our handler).
+        stopEvent: (e) => actions !== null && e.target instanceof Node && actions.contains(e.target)
+      };
+    }
+    return [
+      new Plugin({
+        key: aiPluginKey,
+        state: {
+          init: () => null,
+          apply(tr, prev) {
+            const meta = tr.getMeta(aiPluginKey);
+            if (meta) {
+              switch (meta.type) {
+                case "start":
+                  return {
+                    mode: meta.mode,
+                    status: meta.status,
+                    from: meta.from,
+                    to: meta.to,
+                    originalText: meta.originalText,
+                    text: "",
+                    action: meta.action
+                  };
+                case "chunk":
+                  return prev ? { ...prev, text: prev.text + meta.text } : prev;
+                case "done":
+                  return prev ? { ...prev, status: "done" } : prev;
+                case "error":
+                  return prev ? { ...prev, status: "error", error: meta.message } : prev;
+                case "clear":
+                  return null;
+              }
+            }
+            if (!prev) return prev;
+            if (prev.status === "prompt" && tr.selectionSet) return null;
+            if (tr.docChanged) {
+              if (prev.mode === "generate") {
+                const pos = tr.mapping.map(prev.from, 1);
+                return { ...prev, from: pos, to: pos };
+              }
+              const from = tr.mapping.map(prev.from, -1);
+              const to = tr.mapping.map(prev.to, 1);
+              if (to <= from || tr.doc.textBetween(from, to, "\n", " ") !== prev.originalText) {
+                return null;
+              }
+              return { ...prev, from, to };
+            }
+            return prev;
+          }
+        },
+        props: {
+          decorations(state) {
+            const preview = aiPluginKey.getState(state);
+            if (!preview) {
+              promptWidget = null;
+              return DecorationSet.empty;
+            }
+            const decorations = [];
+            if (preview.mode === "transform" && preview.to > preview.from) {
+              decorations.push(
+                Decoration.inline(preview.from, preview.to, { class: "docs-ai-selection" })
+              );
+            }
+            if (preview.status === "prompt") {
+              const widget = getPromptWidget();
+              decorations.push(
+                Decoration.widget(preview.to, widget.dom, {
+                  key: "docs-ai-prompt",
+                  side: 1,
+                  stopEvent: widget.stopEvent
+                })
+              );
+            } else {
+              promptWidget = null;
+              const ghost = buildGhostWidget(preview);
+              decorations.push(
+                Decoration.widget(preview.to, ghost.dom, {
+                  // The key MUST track the rendered content: prosemirror-view's
+                  // WidgetType.eq treats same-key widgets as identical and skips
+                  // the redraw — a constant key freezes the ghost at its first
+                  // paint (the "AI writing…" bug).
+                  key: `docs-ai-ghost-${preview.status}-${preview.text.length}-${(preview.error ?? "").length}`,
+                  side: 1,
+                  stopEvent: ghost.stopEvent
+                })
+              );
+            }
+            return DecorationSet.create(state.doc, decorations);
+          },
+          handleKeyDown(_view, event) {
+            const preview = aiPluginKey.getState(editor.state);
+            if (!preview) return false;
+            if (event.key === "Escape") {
+              editor.commands.aiReject();
+              return true;
+            }
+            if (preview.status === "prompt") return false;
+            if ((event.key === "Enter" || event.key === "Tab") && preview.status !== "error") {
+              event.preventDefault();
+              editor.commands.aiAccept();
+              return true;
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  },
+  // Mirror the PM plugin state into extension storage so Vue components
+  // (BubbleMenu) can read it without importing the plugin key.
+  onTransaction() {
+    const storage = this.editor.storage.ai;
+    storage.preview = aiPluginKey.getState(this.editor.state) ?? null;
+  },
+  onDestroy() {
+    const storage = this.editor.storage.ai;
+    storage.abort?.abort();
+    storage.abort = null;
+    storage.preview = null;
+  }
+});
+var aiPlugin = definePlugin17({
+  id: "ai",
+  tiptapExtensions: [AIExtension],
+  slashCommands: [{ name: "AI", description: "Generate text with AI", command: "aiGenerate" }]
+});
+
+// src/comment.ts
+import { Mark } from "@tiptap/core";
+var CommentMark = Mark.create({
+  name: "comment",
+  // Comments are inclusive (typing inside an existing comment extends
+  // the mark range — that's the typical inline-comment UX). Excluding
+  // would split the mark on every keystroke.
+  inclusive: true,
+  addAttributes() {
+    return {
+      threadId: {
+        default: null,
+        parseHTML: (el) => el.getAttribute("data-comment-thread"),
+        renderHTML: (attrs) => {
+          if (!attrs.threadId) return {};
+          return { "data-comment-thread": attrs.threadId, class: "docs-comment" };
+        }
+      },
+      pos: {
+        default: null,
+        // No HTML render — position is server-side state.
+        renderHTML: () => ({})
+      }
+    };
+  },
+  parseHTML() {
+    return [{ tag: "span[data-comment-thread]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ["span", HTMLAttributes, 0];
+  }
+});
+var commentPlugin = {
+  id: "comment",
+  tiptapExtensions: [CommentMark],
+  toolbar: [],
+  slashCommands: [],
+  commands: {}
+};
+
+// src/slashMenu.ts
+import { Extension as Extension3 } from "@tiptap/core";
+import { Plugin as Plugin2, PluginKey as PluginKey2 } from "@tiptap/pm/state";
+import { definePlugin as definePlugin18 } from "@kedataindo/docflow-core";
+var slashState = {
+  open: false,
+  query: "",
+  position: { top: 0, left: 0 },
+  commands: [],
+  selectedIndex: 0
+};
+var listeners = [];
+function onSlashStateChange(fn) {
+  listeners.push(fn);
+  return () => {
+    listeners = listeners.filter((l) => l !== fn);
+  };
+}
+function notifyListeners() {
+  listeners.forEach((fn) => fn());
+}
+function closeSlashMenu() {
+  slashState = { ...slashState, open: false, query: "" };
+  notifyListeners();
+}
+function openSlashMenu(view, query) {
+  const { selection } = view.state;
+  const pos = selection.head;
+  const coords = view.coordsAtPos(pos);
+  const allCommands = getRegisteredCommands();
+  const filtered = query ? allCommands.filter((c) => c.name.toLowerCase().includes(query.toLowerCase())) : allCommands;
+  slashState = {
+    open: true,
+    query,
+    position: { top: coords.bottom + 4, left: coords.left },
+    commands: filtered.map((c) => ({ ...c, action: null })),
+    selectedIndex: 0
+  };
+  notifyListeners();
+}
+var registeredCommands = /* @__PURE__ */ new Map();
+function registerSlashCommands(editorId, commands) {
+  const existing = registeredCommands.get(editorId) || [];
+  registeredCommands.set(editorId, [...existing, ...commands]);
+}
+function getRegisteredCommands() {
+  const all = [];
+  registeredCommands.forEach((cmds) => {
+    all.push(...cmds);
+  });
+  const seen = /* @__PURE__ */ new Set();
+  return all.filter((c) => {
+    if (seen.has(c.name)) return false;
+    seen.add(c.name);
+    return true;
+  });
+}
+var SlashMenuExtension = Extension3.create({
+  name: "slashMenu",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin2({
+        key: new PluginKey2("slashMenu"),
+        props: {
+          handleTextInput(view, from, _to, text) {
+            if (text === "/") {
+              const $pos = view.state.doc.resolve(from);
+              const textBefore = $pos.parent.textContent.slice(0, $pos.parentOffset);
+              if (textBefore === "" || textBefore.endsWith(" ")) {
+                setTimeout(() => openSlashMenu(view, ""), 10);
+                return false;
+              }
+            }
+            if (slashState.open && text.length === 1 && /[a-zA-Z]/.test(text)) {
+              const newQuery = slashState.query + text;
+              openSlashMenu(view, newQuery);
+              return false;
+            }
+            return false;
+          },
+          handleKeyDown(view, event) {
+            if (!slashState.open) return false;
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              slashState.selectedIndex = Math.min(slashState.selectedIndex + 1, slashState.commands.length - 1);
+              notifyListeners();
+              return true;
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              slashState.selectedIndex = Math.max(slashState.selectedIndex - 1, 0);
+              notifyListeners();
+              return true;
+            }
+            if (event.key === "Enter") {
+              event.preventDefault();
+              const cmd = slashState.commands[slashState.selectedIndex];
+              if (cmd) {
+                const $pos = view.state.doc.resolve(view.state.selection.head);
+                const lineStart = $pos.start();
+                const slashPos = lineStart + $pos.parent.textContent.lastIndexOf("/");
+                if (slashPos >= lineStart) {
+                  const tr = view.state.tr.delete(slashPos, view.state.selection.head);
+                  view.dispatch(tr);
+                }
+                const editor = view._tiptapEditor;
+                if (editor) {
+                  const actionMap = editor;
+                  if (typeof actionMap[cmd.command] === "function") {
+                    actionMap[cmd.command]();
+                  }
+                }
+              }
+              closeSlashMenu();
+              return true;
+            }
+            if (event.key === "Escape") {
+              closeSlashMenu();
+              return true;
+            }
+            if (event.key === "Backspace") {
+              if (slashState.query.length > 0) {
+                const newQuery = slashState.query.slice(0, -1);
+                if (newQuery) {
+                  openSlashMenu(view, newQuery);
+                } else {
+                  openSlashMenu(view, "");
+                }
+                return false;
+              } else {
+                const $pos = view.state.doc.resolve(view.state.selection.head);
+                const lineStart = $pos.start();
+                const slashPos = $pos.parent.textContent.lastIndexOf("/");
+                if (slashPos >= 0) {
+                  const tr = view.state.tr.delete(lineStart + slashPos, view.state.selection.head);
+                  view.dispatch(tr);
+                }
+                closeSlashMenu();
+                return true;
+              }
+            }
+            return false;
+          }
+        }
+      })
+    ];
+  }
+});
+var slashMenuPlugin = definePlugin18({
+  id: "slash-menu",
+  tiptapExtensions: [SlashMenuExtension],
+  hooks: {
+    onInit(_editor) {
+      const commands = [];
+      registerSlashCommands("default", commands);
+    }
+  }
+});
+
 // src/index.ts
 var defaultPlugins = [
   formattingPlugin,
@@ -345,25 +1417,62 @@ var defaultPlugins = [
   placeholderPlugin,
   pageBreakPlugin,
   footnotePlugin,
-  fontSizePlugin
+  tocPlugin,
+  fontSizePlugin,
+  textColorPlugin,
+  highlightPlugin,
+  citationPlugin,
+  aiPlugin,
+  commentPlugin
 ];
 export {
+  AIExtension,
+  BibliographyNode,
+  CSL_LOCALE_EN_US,
+  CSL_STYLES,
+  CitationEngineExtension,
+  CitationNode,
+  CiteEngine,
+  CommentMark as CommentMarkExtension,
+  DEFAULT_CSL_STYLE,
   FontSizeExtension,
   FootnoteNode,
   PageBreak,
+  SlashMenuExtension,
+  TocEntryNode,
+  TocNode,
+  TocPageNumNode,
+  aiPlugin,
+  aiPluginKey,
   alignmentPlugin,
   blockquotePlugin,
+  buildCitationNodes,
+  citationPlugin,
   codeBlockPlugin,
+  collectHeadings,
+  commentPlugin,
   createPlaceholderPlugin,
   defaultPlugins,
   fontSizePlugin,
   footnotePlugin,
   formattingPlugin,
+  getAIPreview,
+  getCitationEngine,
   headingsPlugin,
+  highlightPlugin,
   imagePlugin,
   linkPlugin,
   listsPlugin,
+  nextCitationId,
+  onSlashStateChange,
   pageBreakPlugin,
   placeholderPlugin,
-  tablePlugin
+  regenerateToc,
+  registerSlashCommands,
+  sanitizeCiteprocHtml,
+  slashMenuPlugin,
+  slashState,
+  tablePlugin,
+  textColorPlugin,
+  tocPlugin
 };