tiptap-editor-custom-stg 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1292 @@
+// src/TiptapEditor.tsx
+import React, { useRef, useCallback, useEffect } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+
+// src/extensions.ts
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import Link from "@tiptap/extension-link";
+import Underline from "@tiptap/extension-underline";
+import { TextStyle } from "@tiptap/extension-text-style";
+import FontFamily from "@tiptap/extension-font-family";
+import { Color } from "@tiptap/extension-color";
+import Superscript from "@tiptap/extension-superscript";
+import Subscript from "@tiptap/extension-subscript";
+import TextAlign from "@tiptap/extension-text-align";
+import Placeholder from "@tiptap/extension-placeholder";
+import { Table } from "@tiptap/extension-table";
+import { TableRow } from "@tiptap/extension-table-row";
+import TableHeader from "@tiptap/extension-table-header";
+import { TableCell } from "@tiptap/extension-table-cell";
+
+// src/fontSize.ts
+import { Extension } from "@tiptap/core";
+import "@tiptap/extension-text-style";
+var FontSize = Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => {
+        const mapping = {
+          "tiny": "0.7em",
+          "small": "0.85em",
+          "big": "1.4em",
+          "huge": "1.8em"
+        };
+        const value = mapping[fontSize] || fontSize;
+        return chain().setMark("textStyle", { fontSize: value }).run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/backgroundColor.ts
+import { Extension as Extension2 } from "@tiptap/core";
+import "@tiptap/extension-text-style";
+var BackgroundColor = Extension2.create({
+  name: "backgroundColor",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          backgroundColor: {
+            default: null,
+            parseHTML: (element) => element.style.backgroundColor.replace(/['"]+/g, ""),
+            renderHTML: (attributes) => {
+              if (!attributes.backgroundColor) {
+                return {};
+              }
+              return {
+                style: `background-color: ${attributes.backgroundColor}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setBackgroundColor: (backgroundColor) => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor }).run();
+      },
+      unsetBackgroundColor: () => ({ chain }) => {
+        return chain().setMark("textStyle", { backgroundColor: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+
+// src/extensions.ts
+var createTiptapExtensions = (placeholder = "Enter content here...") => [
+  StarterKit.configure({
+    heading: { levels: [1, 2, 3, 4, 5, 6] }
+  }),
+  Link.configure({
+    openOnClick: false,
+    autolink: true,
+    HTMLAttributes: { rel: "noopener noreferrer" }
+  }),
+  Underline,
+  Image.configure({ inline: false, allowBase64: false }),
+  TextStyle,
+  FontSize,
+  BackgroundColor,
+  FontFamily,
+  Color,
+  Superscript,
+  Subscript,
+  TextAlign.configure({ types: ["heading", "paragraph"] }),
+  Placeholder.configure({ placeholder }),
+  Table.configure({
+    resizable: true,
+    HTMLAttributes: {
+      class: "tiptap-table"
+    }
+  }),
+  TableRow,
+  TableHeader,
+  TableCell
+];
+
+// src/utils.ts
+async function uploadFileToCOS(file, docNum, onUploadFile, receiveStatus, elementId, onLoadingChange, suppressStatusChange = false, maxFileSizeMB = 50) {
+  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
+  if (file.size > maxFileSizeBytes) {
+    throw new Error(`${file.name} attachment too large (Max ${maxFileSizeMB}M)`);
+  }
+  receiveStatus && elementId && receiveStatus(elementId, true);
+  if (!suppressStatusChange) onLoadingChange == null ? void 0 : onLoadingChange(true);
+  try {
+    const url = await onUploadFile(file, docNum);
+    if (!url) throw new Error("Upload failed: no URL returned");
+    return url;
+  } finally {
+    if (!suppressStatusChange) onLoadingChange == null ? void 0 : onLoadingChange(false);
+    receiveStatus && elementId && receiveStatus(elementId, false);
+  }
+}
+
+// src/constants.ts
+var TIPTAP_COLORS = [
+  "#000000",
+  "#4d4d4d",
+  "#999999",
+  "#e6e6e6",
+  "#ffffff",
+  "#e64d3d",
+  "#eb9120",
+  "#f3da35",
+  "#7ed822",
+  "#00d924",
+  "#1abc9c",
+  "#32dada",
+  "#3498db",
+  "#2980b9",
+  "#a290e4"
+];
+var FONT_FAMILIES = [
+  { label: "Default", value: "" },
+  { label: "Arial", value: "Arial" },
+  { label: "Courier New", value: "Courier New" },
+  { label: "Georgia", value: "Georgia" },
+  { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
+  { label: "Tahoma", value: "Tahoma" },
+  { label: "Times New Roman", value: "Times New Roman" },
+  { label: "Trebuchet MS", value: "Trebuchet MS" },
+  { label: "Verdana", value: "Verdana" }
+];
+var FONT_SIZES = [
+  { label: "Tiny", value: "tiny" },
+  { label: "Small", value: "small" },
+  { label: "Default", value: "" },
+  { label: "Big", value: "big" },
+  { label: "Huge", value: "huge" }
+];
+var IMAGE_MIME_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/jpg",
+  "image/gif",
+  "image/webp",
+  "image/bmp"
+];
+
+// src/Icons.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LucideSvg = ({ children }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children });
+var UndoIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 7v6h6" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" })
+] });
+var RedoIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M21 7v6h-6" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" })
+] });
+var BulletListIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+] });
+var OrderedListIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "10", y1: "6", x2: "21", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", y1: "12", x2: "21", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", y1: "18", x2: "21", y2: "18" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 6h1v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 10h2" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1" })
+] });
+var BlockquoteIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 6H3" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 12H8" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 18H8" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 12v6" })
+] });
+var BoldIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 0 0-8H6v8" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 20a4 4 0 0 0 0-8H6v8Z" })
+] });
+var ItalicIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+  /* @__PURE__ */ jsx("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+  /* @__PURE__ */ jsx("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+] });
+var StrikeIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M16 4H9a3 3 0 0 0-2.83 4" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 12a4 4 0 0 1 0 8H6" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "12", x2: "20", y2: "12" })
+] });
+var UnderlineIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 4v6a6 6 0 0 0 12 0V4" }),
+  /* @__PURE__ */ jsx("line", { x1: "4", y1: "20", x2: "20", y2: "20" })
+] });
+var CodeIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+  /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+] });
+var HighlightIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "m9 11-6 6v3h9l3-3" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+] });
+var LinkIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var ImageIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+var AlignLeftIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "15", y1: "12", x2: "3", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "17", y1: "18", x2: "3", y2: "18" })
+] });
+var AlignCenterIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "3", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "18", x2: "3", y2: "18" }),
+  /* @__PURE__ */ jsx("line", { x1: "17", y1: "12", x2: "7", y2: "12" })
+] });
+var AlignRightIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "6", x2: "3", y2: "6" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "12", x2: "9", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "21", y1: "18", x2: "7", y2: "18" })
+] });
+var TableIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3h18v18H3z" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
+] });
+var AddRowBeforeIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 13v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 2v8" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 5 3-3 3 3" })
+] });
+var AddRowAfterIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 11V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 22v-8" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 19 3 3 3-3" })
+] });
+var DeleteRowIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 11V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "20", x2: "12", y2: "20" })
+] });
+var AddColBeforeIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M13 3h5a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M2 12h8" }),
+  /* @__PURE__ */ jsx("path", { d: "m5 9-3 3 3 3" })
+] });
+var AddColAfterIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M22 12h-8" }),
+  /* @__PURE__ */ jsx("path", { d: "m19 9 3 3-3 3" })
+] });
+var DeleteColIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" }),
+  /* @__PURE__ */ jsx("line", { x1: "20", y1: "18", x2: "20", y2: "12" })
+] });
+var MergeCellsIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" })
+] });
+var SplitCellIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3h18v18H3z" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" })
+] });
+var DeleteTableIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M3 3h18v18H3z" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 15h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M9 3v18" }),
+  /* @__PURE__ */ jsx("path", { d: "M15 3v18" }),
+  /* @__PURE__ */ jsx("line", { x1: "18", y1: "18", x2: "12", y2: "12" })
+] });
+var ClearIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6L6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "M6 6l12 12" })
+] });
+var SubmitIcon = () => /* @__PURE__ */ jsx(LucideSvg, { children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var AttachIcon = () => /* @__PURE__ */ jsx(LucideSvg, { children: /* @__PURE__ */ jsx("path", { d: "m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.49-8.48" }) });
+var FontSizeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("path", { d: "m3 7 5-5 5 5" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 2v10" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 17-5 5-5-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 12v10" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 13h18" })
+] });
+var FontFamilyIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
+] });
+var TextColorIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "M4 20h16" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 16 6-12 6 12" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 12h8" })
+] });
+var EraserIcon = () => /* @__PURE__ */ jsxs(LucideSvg, { children: [
+  /* @__PURE__ */ jsx("path", { d: "m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.9-9.9c1-1 2.5-1 3.4 0l4.4 4.4c1 1 1 2.5 0 3.4L10.8 21z" }),
+  /* @__PURE__ */ jsx("path", { d: "m22 21h-8" }),
+  /* @__PURE__ */ jsx("path", { d: "m5 11 9 9" })
+] });
+
+// src/ToolbarGroups.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var HistoryGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Undo",
+      onClick: () => editor.chain().focus().undo().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly || !editor.can().undo(),
+      "aria-label": "Undo",
+      children: /* @__PURE__ */ jsx2(UndoIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Redo",
+      onClick: () => editor.chain().focus().redo().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly || !editor.can().redo(),
+      "aria-label": "Redo",
+      children: /* @__PURE__ */ jsx2(RedoIcon, {})
+    }
+  )
+] });
+var FontGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      title: "Font family",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${showMenu ? "is-active" : ""}`,
+      "aria-label": "Font family selection",
+      children: [
+        /* @__PURE__ */ jsx2(FontFamilyIcon, {}),
+        /* @__PURE__ */ jsx2("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ jsx2("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsx2("div", { className: "tiptap-font-menu", children: FONT_FAMILIES.map((font) => {
+    const isActive = editor.getAttributes("textStyle").fontFamily === font.value;
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: `font-option ${isActive ? "is-active" : ""}`,
+        style: { fontFamily: font.value || "inherit" },
+        onClick: () => {
+          if (font.value) {
+            editor.chain().focus().setFontFamily(font.value).run();
+          } else {
+            editor.chain().focus().unsetFontFamily().run();
+          }
+          onClose();
+        },
+        children: font.label
+      },
+      font.label
+    );
+  }) })
+] });
+var FontSizeGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      title: "Font size",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${showMenu ? "is-active" : ""}`,
+      "aria-label": "Font size selection",
+      children: [
+        /* @__PURE__ */ jsx2(FontSizeIcon, {}),
+        /* @__PURE__ */ jsx2("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ jsx2("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsx2("div", { className: "tiptap-font-menu", children: FONT_SIZES.map((size) => {
+    const currentSize = editor.getAttributes("textStyle").fontSize;
+    const mapping = {
+      "tiny": "0.7em",
+      "small": "0.85em",
+      "big": "1.4em",
+      "huge": "1.8em"
+    };
+    const targetValue = mapping[size.value] || size.value || null;
+    const isActive = !currentSize && !size.value || currentSize === targetValue;
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: `font-option ${isActive ? "is-active" : ""}`,
+        onClick: () => {
+          if (size.value) {
+            editor.chain().focus().setFontSize(size.value).run();
+          } else {
+            editor.chain().focus().unsetFontSize().run();
+          }
+          onClose();
+        },
+        children: size.label
+      },
+      size.label
+    );
+  }) })
+] });
+var TextColorGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      title: "Text color",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${showMenu ? "is-active" : ""}`,
+      "aria-label": "Text color picker",
+      children: [
+        /* @__PURE__ */ jsx2(TextColorIcon, {}),
+        /* @__PURE__ */ jsx2("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ jsx2("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsxs2("div", { className: "tiptap-color-picker", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        className: "color-remove-btn",
+        onClick: () => {
+          editor.chain().focus().unsetColor().run();
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx2(EraserIcon, {}),
+          " Remove color"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "color-grid", children: TIPTAP_COLORS.map((color) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: `color-swatch ${editor.isActive("textStyle", { color }) ? "is-active" : ""}`,
+        style: { backgroundColor: color },
+        onClick: () => {
+          editor.chain().focus().setColor(color).run();
+          onClose();
+        }
+      },
+      color
+    )) })
+  ] })
+] });
+var HighlightGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      title: "Highlight",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${showMenu ? "is-active" : ""}`,
+      "aria-label": "Background color picker",
+      children: [
+        /* @__PURE__ */ jsx2(HighlightIcon, {}),
+        /* @__PURE__ */ jsx2("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ jsx2("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsxs2("div", { className: "tiptap-color-picker", children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        className: "color-remove-btn",
+        onClick: () => {
+          editor.chain().focus().unsetBackgroundColor().run();
+          onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsx2(EraserIcon, {}),
+          " Remove color"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "color-grid", children: TIPTAP_COLORS.map((color) => /* @__PURE__ */ jsx2(
+      "button",
+      {
+        className: `color-swatch ${editor.isActive("textStyle", { backgroundColor: color }) ? "is-active" : ""}`,
+        style: { backgroundColor: color },
+        onClick: () => {
+          editor.chain().focus().setBackgroundColor(color).run();
+          onClose();
+        }
+      },
+      color
+    )) })
+  ] })
+] });
+var ListGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Bullet list",
+      onClick: () => editor.chain().focus().toggleBulletList().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("bulletList") ? "is-active" : "",
+      "aria-label": "Bullet list",
+      children: /* @__PURE__ */ jsx2(BulletListIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Ordered list",
+      onClick: () => editor.chain().focus().toggleOrderedList().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("orderedList") ? "is-active" : "",
+      "aria-label": "Ordered list",
+      children: /* @__PURE__ */ jsx2(OrderedListIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Blockquote",
+      onClick: () => editor.chain().focus().toggleBlockquote().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("blockquote") ? "is-active" : "",
+      "aria-label": "Blockquote",
+      children: /* @__PURE__ */ jsx2(BlockquoteIcon, {})
+    }
+  )
+] });
+var InlineGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Bold",
+      onClick: () => editor.chain().focus().toggleBold().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("bold") ? "is-active" : "",
+      "aria-label": "Bold",
+      children: /* @__PURE__ */ jsx2(BoldIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Italic",
+      onClick: () => editor.chain().focus().toggleItalic().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("italic") ? "is-active" : "",
+      "aria-label": "Italic",
+      children: /* @__PURE__ */ jsx2(ItalicIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Strikethrough",
+      onClick: () => editor.chain().focus().toggleStrike().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("strike") ? "is-active" : "",
+      "aria-label": "Strikethrough",
+      children: /* @__PURE__ */ jsx2(StrikeIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Underline",
+      onClick: () => editor.chain().focus().toggleUnderline().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("underline") ? "is-active" : "",
+      "aria-label": "Underline",
+      children: /* @__PURE__ */ jsx2(UnderlineIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Code",
+      onClick: () => editor.chain().focus().toggleCode().run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("code") ? "is-active" : "",
+      "aria-label": "Inline code",
+      children: /* @__PURE__ */ jsx2(CodeIcon, {})
+    }
+  )
+] });
+var LinkGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose, linkUrl, onLinkUrlChange, onSubmit }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Insert link",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive("link") ? "is-active" : "",
+      "aria-label": "Insert link",
+      children: /* @__PURE__ */ jsx2(LinkIcon, {})
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsxs2("div", { className: "tiptap-link-menu", children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "url",
+        placeholder: "Paste a link...",
+        value: linkUrl,
+        onChange: (e) => onLinkUrlChange(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") onSubmit();
+          if (e.key === "Escape") onClose();
+        },
+        autoFocus: true
+      }
+    ),
+    /* @__PURE__ */ jsx2("button", { onClick: onSubmit, title: "Apply", className: "link-submit-btn", children: /* @__PURE__ */ jsx2(SubmitIcon, {}) }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        onClick: () => {
+          editor.chain().focus().extendMarkRange("link").unsetLink().run();
+          onClose();
+        },
+        title: "Unlink",
+        className: "link-clear-btn",
+        children: /* @__PURE__ */ jsx2(ClearIcon, {})
+      }
+    )
+  ] })
+] });
+var AlignmentGroup = ({ editor, isReadOnly }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Align left",
+      onClick: () => editor.chain().focus().setTextAlign("left").run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive({ textAlign: "left" }) ? "is-active" : "",
+      "aria-label": "Align left",
+      children: /* @__PURE__ */ jsx2(AlignLeftIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Align center",
+      onClick: () => editor.chain().focus().setTextAlign("center").run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive({ textAlign: "center" }) ? "is-active" : "",
+      "aria-label": "Align center",
+      children: /* @__PURE__ */ jsx2(AlignCenterIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Align right",
+      onClick: () => editor.chain().focus().setTextAlign("right").run(),
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: editor.isActive({ textAlign: "right" }) ? "is-active" : "",
+      "aria-label": "Align right",
+      children: /* @__PURE__ */ jsx2(AlignRightIcon, {})
+    }
+  )
+] });
+var TableGroup = ({ editor, isReadOnly, showMenu, onToggle, onClose, tableHoverSize, onGridHover }) => /* @__PURE__ */ jsxs2("div", { style: { position: "relative", display: "inline-flex" }, children: [
+  /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      title: "Table",
+      onClick: onToggle,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      className: `toolbar-button-dropdown ${editor.isActive("table") ? "is-active" : ""}`,
+      "aria-label": "Table options",
+      children: [
+        /* @__PURE__ */ jsx2(TableIcon, {}),
+        /* @__PURE__ */ jsx2("svg", { className: "dropdown-arrow", viewBox: "0 0 24 24", width: "10", height: "10", children: /* @__PURE__ */ jsx2("path", { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })
+      ]
+    }
+  ),
+  showMenu && !isReadOnly && /* @__PURE__ */ jsx2("div", { className: "tiptap-table-menu", children: !editor.isActive("table") ? /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "table-grid-picker-wrapper",
+      onMouseLeave: () => onGridHover(0, 0),
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "table-grid-picker", children: [...Array(10)].map((_, r) => /* @__PURE__ */ jsx2("div", { className: "grid-row", children: [...Array(10)].map((_2, c) => /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: `grid-cell ${r + 1 <= tableHoverSize.rows && c + 1 <= tableHoverSize.cols ? "is-active" : ""}`,
+            onMouseEnter: () => onGridHover(r + 1, c + 1),
+            onClick: () => {
+              editor.chain().focus().insertTable({ rows: r + 1, cols: c + 1, withHeaderRow: true }).run();
+              onClose();
+              onGridHover(0, 0);
+            }
+          },
+          c
+        )) }, r)) }),
+        /* @__PURE__ */ jsx2("div", { className: "table-grid-label", children: tableHoverSize.rows > 0 ? `${tableHoverSize.rows} x ${tableHoverSize.cols}` : "Square Grid" })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs2("div", { className: "table-menu-grid", children: [
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().addColumnBefore().run(), title: "Add column before", children: /* @__PURE__ */ jsx2(AddColBeforeIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().addColumnAfter().run(), title: "Add column after", children: /* @__PURE__ */ jsx2(AddColAfterIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().deleteColumn().run(), title: "Delete column", children: /* @__PURE__ */ jsx2(DeleteColIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().addRowBefore().run(), title: "Add row before", children: /* @__PURE__ */ jsx2(AddRowBeforeIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().addRowAfter().run(), title: "Add row after", children: /* @__PURE__ */ jsx2(AddRowAfterIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().deleteRow().run(), title: "Delete row", children: /* @__PURE__ */ jsx2(DeleteRowIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().mergeCells().run(), title: "Merge cells", children: /* @__PURE__ */ jsx2(MergeCellsIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => editor.chain().focus().splitCell().run(), title: "Split cell", children: /* @__PURE__ */ jsx2(SplitCellIcon, {}) }),
+    /* @__PURE__ */ jsx2("button", { onClick: () => {
+      editor.chain().focus().deleteTable().run();
+      onClose();
+    }, className: "danger", title: "Delete table", children: /* @__PURE__ */ jsx2(DeleteTableIcon, {}) })
+  ] }) })
+] });
+var InsertGroup = ({ isReadOnly, onImageClick, onAttachClick }) => /* @__PURE__ */ jsxs2(Fragment, { children: [
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Insert image",
+      onClick: onImageClick,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      "aria-label": "Insert image",
+      children: /* @__PURE__ */ jsx2(ImageIcon, {})
+    }
+  ),
+  /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title: "Attach file",
+      onClick: onAttachClick,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: isReadOnly,
+      "aria-label": "Attach file",
+      children: /* @__PURE__ */ jsx2(AttachIcon, {})
+    }
+  )
+] });
+
+// src/TiptapEditor.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var TiptapEditor = ({
+  elementId,
+  content,
+  editMode,
+  docNum,
+  receiveData,
+  receiveStatus,
+  onUploadFile,
+  onAlert,
+  onLoadingChange,
+  onRegisterReset,
+  maxFileSizeMB = 50,
+  placeholder = "Enter content here...",
+  toolbarConfig
+}) => {
+  const alertFn = onAlert || ((msg) => window.alert(msg));
+  const loadingChangeFn = onLoadingChange || (() => {
+  });
+  const isReadOnly = !editMode;
+  const containerRef = useRef(null);
+  const imageInputRef = useRef(null);
+  const attachInputRef = useRef(null);
+  const [showHighlightMenu, setShowHighlightMenu] = React.useState(false);
+  const [showTextColorMenu, setShowTextColorMenu] = React.useState(false);
+  const [showFontMenu, setShowFontMenu] = React.useState(false);
+  const [showFontSizeMenu, setShowFontSizeMenu] = React.useState(false);
+  const [showLinkMenu, setShowLinkMenu] = React.useState(false);
+  const [showTableMenu, setShowTableMenu] = React.useState(false);
+  const [tableHoverSize, setTableHoverSize] = React.useState({ rows: 0, cols: 0 });
+  const [linkUrl, setLinkUrl] = React.useState("");
+  const initializedRef = useRef(false);
+  const lastEmittedContentRef = useRef(content || "");
+  const lastUpdateTimestampRef = useRef(0);
+  const activeUploadsRef = useRef(0);
+  const closeAllMenus = React.useCallback(() => {
+    setShowHighlightMenu(false);
+    setShowTextColorMenu(false);
+    setShowFontMenu(false);
+    setShowFontSizeMenu(false);
+    setShowLinkMenu(false);
+    setShowTableMenu(false);
+  }, []);
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        closeAllMenus();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [closeAllMenus]);
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: createTiptapExtensions(placeholder),
+    content: content || "",
+    editable: editMode,
+    onFocus: () => {
+      closeAllMenus();
+    },
+    onSelectionUpdate: () => {
+      closeAllMenus();
+    },
+    editorProps: {
+      // Handle clipboard paste - support pasting images (e.g. screenshots)
+      handlePaste: (view, event) => {
+        if (!editMode) return false;
+        const clipboardData = event.clipboardData;
+        if (!clipboardData) return false;
+        const items = Array.from(clipboardData.items);
+        const imageItems = items.filter((item) => item.kind === "file" && IMAGE_MIME_TYPES.includes(item.type));
+        if (imageItems.length > 0) {
+          event.preventDefault();
+          if (!onUploadFile) {
+            alertFn("Upload function not provided");
+            return true;
+          }
+          activeUploadsRef.current += 1;
+          loadingChangeFn(true);
+          Promise.all(
+            imageItems.map((item) => {
+              const file = item.getAsFile();
+              if (!file) return Promise.resolve();
+              return uploadFileToCOS(
+                file,
+                docNum,
+                onUploadFile,
+                receiveStatus,
+                elementId,
+                loadingChangeFn,
+                true,
+                maxFileSizeMB
+              ).then((url) => {
+                view.dispatch(
+                  view.state.tr.replaceSelectionWith(
+                    view.state.schema.nodes.image.create({ src: url, alt: file.name })
+                  )
+                );
+              }).catch((err) => {
+                alertFn(err.message || "Image upload failed");
+              });
+            })
+          ).finally(() => {
+            activeUploadsRef.current -= 1;
+            loadingChangeFn(false);
+            if (activeUploadsRef.current === 0) {
+              const html = editor == null ? void 0 : editor.getHTML();
+              if (html) {
+                lastEmittedContentRef.current = html;
+                receiveData && receiveData(elementId, html);
+              }
+            }
+          });
+          return true;
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const html = editor2.getHTML();
+      lastEmittedContentRef.current = html;
+      lastUpdateTimestampRef.current = Date.now();
+      if (activeUploadsRef.current === 0) {
+        receiveData && receiveData(elementId, html);
+      }
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+      if (content && content !== editor.getHTML()) {
+        editor.commands.setContent(content || "", false);
+        lastEmittedContentRef.current = content;
+      }
+      return;
+    }
+    if (Date.now() - lastUpdateTimestampRef.current < 150) {
+      return;
+    }
+    if (editor.isFocused) {
+      return;
+    }
+    if (content === lastEmittedContentRef.current) {
+      return;
+    }
+    if (content !== editor.getHTML()) {
+      editor.commands.setContent(content || "", false);
+      lastEmittedContentRef.current = content || "";
+    }
+  }, [content, editor]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(editMode);
+  }, [editMode, editor]);
+  useEffect(() => {
+    if (!editor || !onRegisterReset) return;
+    const handleReset = (newContent) => {
+      editor.commands.setContent(newContent || "", false);
+    };
+    const unregister = onRegisterReset(handleReset);
+    return () => {
+      unregister && unregister();
+    };
+  }, [editor, onRegisterReset]);
+  const handleImageFileChange = useCallback(
+    async (e) => {
+      const files = Array.from(e.target.files || []);
+      if (files.length === 0 || !editor) return;
+      e.target.value = "";
+      if (!onUploadFile) {
+        alertFn("Upload function not provided");
+        return;
+      }
+      activeUploadsRef.current += 1;
+      loadingChangeFn(true);
+      try {
+        await Promise.all(
+          files.map(async (file) => {
+            const url = await uploadFileToCOS(
+              file,
+              docNum,
+              onUploadFile,
+              receiveStatus,
+              elementId,
+              loadingChangeFn,
+              true,
+              maxFileSizeMB
+            );
+            editor.chain().focus().setImage({ src: url, alt: file.name }).run();
+          })
+        );
+      } catch (err) {
+        alertFn(err.message || "Image upload failed");
+      } finally {
+        activeUploadsRef.current -= 1;
+        loadingChangeFn(false);
+        if (activeUploadsRef.current === 0) {
+          const html = editor.getHTML();
+          lastEmittedContentRef.current = html;
+          receiveData && receiveData(elementId, html);
+        }
+      }
+    },
+    [editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn, maxFileSizeMB]
+  );
+  const handleAttachFileChange = useCallback(
+    async (e) => {
+      const files = Array.from(e.target.files || []);
+      if (files.length === 0 || !editor) return;
+      e.target.value = "";
+      if (!onUploadFile) {
+        alertFn("Upload function not provided");
+        return;
+      }
+      activeUploadsRef.current += 1;
+      loadingChangeFn(true);
+      try {
+        await Promise.all(
+          files.map(async (file) => {
+            const url = await uploadFileToCOS(
+              file,
+              docNum,
+              onUploadFile,
+              receiveStatus,
+              elementId,
+              loadingChangeFn,
+              true,
+              maxFileSizeMB
+            );
+            editor.chain().focus().insertContent(
+              `<a href="${url}" target="_blank" rel="noopener noreferrer" data-attachment="true">${file.name}</a>&nbsp;`
+            ).run();
+          })
+        );
+      } catch (err) {
+        alertFn(err.message || "Attachment upload failed");
+      } finally {
+        activeUploadsRef.current -= 1;
+        loadingChangeFn(false);
+        if (activeUploadsRef.current === 0) {
+          const html = editor.getHTML();
+          lastEmittedContentRef.current = html;
+          receiveData && receiveData(elementId, html);
+        }
+      }
+    },
+    [editor, docNum, receiveStatus, elementId, receiveData, onUploadFile, alertFn, loadingChangeFn, maxFileSizeMB]
+  );
+  const handleLinkClick = useCallback(() => {
+    if (!editor || isReadOnly) return;
+    const nextState = !showLinkMenu;
+    closeAllMenus();
+    if (nextState) {
+      const previousUrl = editor.getAttributes("link").href;
+      setLinkUrl(previousUrl || "");
+    }
+    setShowLinkMenu(nextState);
+  }, [editor, isReadOnly, showLinkMenu, closeAllMenus]);
+  const submitLink = useCallback(() => {
+    if (!editor) return;
+    if (linkUrl === null || linkUrl.trim() === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      const formattedUrl = /^https?:\/\//.test(linkUrl) ? linkUrl : `https://${linkUrl}`;
+      editor.chain().focus().extendMarkRange("link").setLink({ href: formattedUrl }).run();
+    }
+    setShowLinkMenu(false);
+  }, [editor, linkUrl]);
+  if (!editor) return null;
+  const getHiddenInputs = () => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref: imageInputRef,
+        type: "file",
+        accept: "image/*",
+        multiple: true,
+        className: "tiptap-hidden-input",
+        onChange: handleImageFileChange
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref: attachInputRef,
+        type: "file",
+        accept: "*/*",
+        multiple: true,
+        className: "tiptap-hidden-input",
+        onChange: handleAttachFileChange
+      }
+    )
+  ] });
+  const defaultGroups = [
+    "history",
+    "font",
+    "fontSize",
+    "textColor",
+    "highlight",
+    "list",
+    "alignment",
+    "table",
+    "inline",
+    "link",
+    "insert"
+  ];
+  const toolbarGroups = (toolbarConfig == null ? void 0 : toolbarConfig.groups) || defaultGroups;
+  const showDividers = (toolbarConfig == null ? void 0 : toolbarConfig.showDividers) !== void 0 ? toolbarConfig.showDividers : true;
+  const getToolbar = () => {
+    const toolbarComponents = {
+      history: /* @__PURE__ */ jsx3(HistoryGroup, { editor, isReadOnly }),
+      font: /* @__PURE__ */ jsx3(
+        FontGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showFontMenu,
+          onToggle: () => {
+            const nextState = !showFontMenu;
+            closeAllMenus();
+            setShowFontMenu(nextState);
+          },
+          onClose: () => setShowFontMenu(false)
+        }
+      ),
+      fontSize: /* @__PURE__ */ jsx3(
+        FontSizeGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showFontSizeMenu,
+          onToggle: () => {
+            const nextState = !showFontSizeMenu;
+            closeAllMenus();
+            setShowFontSizeMenu(nextState);
+          },
+          onClose: () => setShowFontSizeMenu(false)
+        }
+      ),
+      textColor: /* @__PURE__ */ jsx3(
+        TextColorGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showTextColorMenu,
+          onToggle: () => {
+            const nextState = !showTextColorMenu;
+            closeAllMenus();
+            setShowTextColorMenu(nextState);
+          },
+          onClose: () => setShowTextColorMenu(false)
+        }
+      ),
+      highlight: /* @__PURE__ */ jsx3(
+        HighlightGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showHighlightMenu,
+          onToggle: () => {
+            const nextState = !showHighlightMenu;
+            closeAllMenus();
+            setShowHighlightMenu(nextState);
+          },
+          onClose: () => setShowHighlightMenu(false)
+        }
+      ),
+      list: /* @__PURE__ */ jsx3(ListGroup, { editor, isReadOnly }),
+      alignment: /* @__PURE__ */ jsx3(AlignmentGroup, { editor, isReadOnly }),
+      table: /* @__PURE__ */ jsx3(
+        TableGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showTableMenu,
+          onToggle: () => !isReadOnly && setShowTableMenu(!showTableMenu),
+          onClose: () => setShowTableMenu(false),
+          tableHoverSize,
+          onGridHover: (rows, cols) => setTableHoverSize({ rows, cols })
+        }
+      ),
+      inline: /* @__PURE__ */ jsx3(InlineGroup, { editor, isReadOnly }),
+      link: /* @__PURE__ */ jsx3(
+        LinkGroup,
+        {
+          editor,
+          isReadOnly,
+          showMenu: showLinkMenu,
+          onToggle: handleLinkClick,
+          onClose: () => setShowLinkMenu(false),
+          linkUrl,
+          onLinkUrlChange: setLinkUrl,
+          onSubmit: submitLink
+        }
+      ),
+      insert: /* @__PURE__ */ jsx3(
+        InsertGroup,
+        {
+          editor,
+          isReadOnly,
+          onImageClick: () => {
+            var _a;
+            return !isReadOnly && ((_a = imageInputRef.current) == null ? void 0 : _a.click());
+          },
+          onAttachClick: () => {
+            var _a;
+            return !isReadOnly && ((_a = attachInputRef.current) == null ? void 0 : _a.click());
+          }
+        }
+      )
+    };
+    const toolbarItems = toolbarGroups.map((group, index) => {
+      const component = toolbarComponents[group];
+      if (!component) return null;
+      const divider = showDividers && index > 0 ? /* @__PURE__ */ jsx3("span", { className: "toolbar-divider" }) : null;
+      return /* @__PURE__ */ jsxs3(React.Fragment, { children: [
+        divider,
+        component
+      ] }, group);
+    }).filter(Boolean);
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `tiptap-toolbar${isReadOnly ? " toolbar-disabled" : ""}`,
+        role: "toolbar",
+        "aria-label": "Editor toolbar",
+        children: toolbarItems
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs3("div", { id: elementId, className: `tiptap-editor-wrapper${isReadOnly ? " read-only" : ""}`, ref: containerRef, children: [
+    getHiddenInputs(),
+    getToolbar(),
+    /* @__PURE__ */ jsx3("div", { onMouseDown: closeAllMenus, children: /* @__PURE__ */ jsx3(EditorContent, { editor }) })
+  ] });
+};
+var TiptapEditor_default = TiptapEditor;
+export {
+  BackgroundColor,
+  FONT_FAMILIES,
+  FONT_SIZES,
+  FontSize,
+  IMAGE_MIME_TYPES,
+  TIPTAP_COLORS,
+  TiptapEditor_default as TiptapEditor,
+  createTiptapExtensions
+};
+//# sourceMappingURL=index.mjs.map