@elia-ori/editor 0.1.27 → 0.1.29

package/dist/index.cjs

@@ -30,17 +30,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Callout: () => Callout,
   EliaEditor: () => EliaEditor,
+  EliaEditorProvider: () => EliaEditorProvider,
   SimpleEditor: () => EliaEditor,
+  TocSidebar: () => TocSidebar,
   contentExtensions: () => contentExtensions,
-  generateEditorHTML: () => generateEditorHTML
+  generateEditorHTML: () => generateEditorHTML,
+  useEliaEditor: () => useEliaEditor
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/tiptap-templates/simple/simple-editor.tsx
-var import_react86 = require("react");
-var import_react87 = require("@tiptap/react");
+var import_react101 = require("react");
+var import_react102 = require("@tiptap/react");
 var import_starter_kit = require("@tiptap/starter-kit");
 var import_extension_list = require("@tiptap/extension-list");
 var import_extension_text_align = require("@tiptap/extension-text-align");
@@ -56,72 +58,9 @@ var import_extension_table = require("@tiptap/extension-table");
 var import_extension_table_row = require("@tiptap/extension-table-row");
 var import_extension_table_header = require("@tiptap/extension-table-header");
 var import_extension_table_cell = require("@tiptap/extension-table-cell");
+var import_extension_unique_id = require("@tiptap/extension-unique-id");
 var import_tiptap_extension_resize_image = __toESM(require("tiptap-extension-resize-image"), 1);
 
-// src/extensions/callout.ts
-var import_core = require("@tiptap/core");
-var CALLOUT_ARIA_LABELS = {
-  success: "\u6210\u529F\u63D0\u793A",
-  warning: "\u8B66\u544A\u63D0\u793A",
-  error: "\u932F\u8AA4\u63D0\u793A",
-  info: "\u8CC7\u8A0A\u63D0\u793A"
-};
-var Callout = import_core.Node.create({
-  name: "callout",
-  group: "block",
-  content: "block+",
-  defining: true,
-  addOptions() {
-    return {
-      HTMLAttributes: {}
-    };
-  },
-  addAttributes() {
-    return {
-      type: {
-        default: "info",
-        parseHTML: (element) => element.getAttribute("data-type"),
-        renderHTML: (attributes) => ({
-          "data-type": attributes.type
-        })
-      }
-    };
-  },
-  parseHTML() {
-    return [
-      {
-        tag: "div[data-callout]"
-      }
-    ];
-  },
-  renderHTML({ node, HTMLAttributes }) {
-    const type = node.attrs.type || "info";
-    return [
-      "div",
-      (0, import_core.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, {
-        "data-callout": "",
-        "class": `callout callout-${type}`,
-        "role": "note",
-        "aria-label": CALLOUT_ARIA_LABELS[type]
-      }),
-      0
-    ];
-  },
-  addCommands() {
-    return {
-      setCallout: (attributes) => ({ commands }) => {
-        return commands.wrapIn(this.name, attributes);
-      },
-      toggleCallout: (attributes) => ({ commands }) => {
-        return commands.toggleWrap(this.name, attributes);
-      },
-      unsetCallout: () => ({ commands }) => {
-        return commands.lift(this.name);
-      }
-    };
-  }
-});
-
 // src/components/tiptap-ui-primitive/button/button.tsx
 var import_react4 = require("react");
 
@@ -232,7 +171,6 @@ var TooltipTrigger = (0, import_react.forwardRef)(
       "button",
       {
         ref,
-        type: "button",
         "data-tooltip-state": context.open ? "open" : "closed",
         ...context.getReferenceProps(props),
         children
@@ -437,36 +375,22 @@ function selectionWithinConvertibleTypes(editor, types = []) {
   return false;
 }
 var handleImageUpload = async (file, onProgress, abortSignal) => {
-  if (!file) throw new Error("No file provided");
-  const formData = new FormData();
-  formData.append("file", file);
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    if (onProgress) {
-      xhr.upload.onprogress = (e) => {
-        if (e.lengthComputable) {
-          onProgress({ progress: Math.round(e.loaded / e.total * 100) });
-        }
-      };
+  if (!file) {
+    throw new Error("No file provided");
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    throw new Error(
+      `File size exceeds maximum allowed (${MAX_FILE_SIZE / (1024 * 1024)}MB)`
+    );
+  }
+  for (let progress = 0; progress <= 100; progress += 10) {
+    if (abortSignal?.aborted) {
+      throw new Error("Upload cancelled");
     }
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        try {
-          const { data } = JSON.parse(xhr.responseText);
-          resolve(data.url);
-        } catch {
-          reject(new Error("Invalid response format"));
-        }
-      } else {
-        reject(new Error(`Upload failed: ${xhr.status}`));
-      }
-    };
-    xhr.onerror = () => reject(new Error("Network error"));
-    xhr.onabort = () => reject(new Error("Upload cancelled"));
-    abortSignal?.addEventListener("abort", () => xhr.abort());
-    xhr.open("POST", "/api/upload");
-    xhr.send(formData);
-  });
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    onProgress?.({ progress });
+  }
+  return "/images/tiptap-ui-placeholder-image.jpg";
 };
 var ATTR_WHITESPACE = (
   // eslint-disable-next-line no-control-regex
@@ -511,6 +435,34 @@ function sanitizeUrl(inputUrl, baseUrl, protocols) {
   }
   return "#";
 }
+function selectCurrentBlockContent(editor) {
+  const { selection, doc } = editor.state;
+  if (!selection.empty) return;
+  const $pos = selection.$from;
+  let blockNode = null;
+  let blockPos = -1;
+  for (let depth = $pos.depth; depth >= 0; depth--) {
+    const node = $pos.node(depth);
+    const pos = $pos.start(depth);
+    if (node.isBlock && node.textContent.trim()) {
+      blockNode = node;
+      blockPos = pos;
+      break;
+    }
+  }
+  if (blockNode && blockPos >= 0) {
+    const from = blockPos;
+    const to = blockPos + blockNode.nodeSize - 2;
+    if (from < to) {
+      const $from = doc.resolve(from);
+      const $to = doc.resolve(to);
+      const newSelection = import_state.TextSelection.between($from, $to, 1);
+      if (newSelection && !selection.eq(newSelection)) {
+        editor.view.dispatch(editor.state.tr.setSelection(newSelection));
+      }
+    }
+  }
+}
 function getSelectedBlockNodes(editor) {
   const { doc } = editor.state;
   const { from, to } = editor.state.selection;
@@ -1996,7 +1948,7 @@ function useHeading(config) {
     isActive,
     handleToggle,
     canToggle: canToggleState,
-    label: `\u6A19\u984C ${level}`,
+    label: `Heading ${level}`,
     shortcutKeys: HEADING_SHORTCUT_KEYS[level],
     Icon: headingIcons[level]
   };
@@ -2031,7 +1983,7 @@ var DropdownMenuSubContent = (0, import_react27.forwardRef)(({ className, portal
   return portal ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuPortal, { ...typeof portal === "object" ? portal : {}, children: content }) : content;
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = (0, import_react27.forwardRef)(({ className, sideOffset = 4, portal = true, ...props }, ref) => {
+var DropdownMenuContent = (0, import_react27.forwardRef)(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
   const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     DropdownMenuPrimitive.Content,
     {
@@ -2755,9 +2707,9 @@ var listIcons = {
   taskList: ListTodoIcon
 };
 var listLabels = {
-  bulletList: "\u9805\u76EE\u6E05\u55AE",
-  orderedList: "\u7DE8\u865F\u6E05\u55AE",
-  taskList: "\u5F85\u8FA6\u6E05\u55AE"
+  bulletList: "Bullet List",
+  orderedList: "Ordered List",
+  taskList: "Task List"
 };
 var LIST_SHORTCUT_KEYS = {
   bulletList: "mod+shift+8",
@@ -3126,7 +3078,7 @@ var BlockquoteButton = (0, import_react43.forwardRef)(
         "data-disabled": !canToggle3,
         "aria-label": label,
         "aria-pressed": isActive,
-        tooltip: "\u5F15\u7528",
+        tooltip: "Blockquote",
         onClick: handleClick,
         ...buttonProps,
         ref,
@@ -3312,7 +3264,7 @@ function useBlockquote(config) {
     isActive,
     handleToggle,
     canToggle: canToggle3,
-    label: "\u5F15\u7528",
+    label: "Blockquote",
     shortcutKeys: BLOCKQUOTE_SHORTCUT_KEY,
     Icon: BlockquoteIcon
   };
@@ -3374,7 +3326,7 @@ var CodeBlockButton = (0, import_react46.forwardRef)(
         tabIndex: -1,
         "aria-label": label,
         "aria-pressed": isActive,
-        tooltip: "\u7A0B\u5F0F\u78BC",
+        tooltip: "Code Block",
         onClick: handleClick,
         ...buttonProps,
         ref,
@@ -3551,7 +3503,7 @@ function useCodeBlock(config) {
     isActive,
     handleToggle,
     canToggle: canToggleState,
-    label: "\u7A0B\u5F0F\u78BC",
+    label: "Code Block",
     shortcutKeys: CODE_BLOCK_SHORTCUT_KEY,
     Icon: CodeBlockIcon
   };
@@ -3742,52 +3694,52 @@ var import_react_hotkeys_hook2 = require("react-hotkeys-hook");
 var COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
 var HIGHLIGHT_COLORS = [
   {
-    label: "\u9810\u8A2D\u80CC\u666F",
+    label: "Default background",
     value: "var(--tt-bg-color)",
     border: "var(--tt-bg-color-contrast)"
   },
   {
-    label: "\u7070\u8272\u80CC\u666F",
+    label: "Gray background",
     value: "var(--tt-color-highlight-gray)",
     border: "var(--tt-color-highlight-gray-contrast)"
   },
   {
-    label: "\u68D5\u8272\u80CC\u666F",
+    label: "Brown background",
     value: "var(--tt-color-highlight-brown)",
     border: "var(--tt-color-highlight-brown-contrast)"
   },
   {
-    label: "\u6A58\u8272\u80CC\u666F",
+    label: "Orange background",
     value: "var(--tt-color-highlight-orange)",
     border: "var(--tt-color-highlight-orange-contrast)"
   },
   {
-    label: "\u9EC3\u8272\u80CC\u666F",
+    label: "Yellow background",
     value: "var(--tt-color-highlight-yellow)",
     border: "var(--tt-color-highlight-yellow-contrast)"
   },
   {
-    label: "\u7DA0\u8272\u80CC\u666F",
+    label: "Green background",
     value: "var(--tt-color-highlight-green)",
     border: "var(--tt-color-highlight-green-contrast)"
   },
   {
-    label: "\u85CD\u8272\u80CC\u666F",
+    label: "Blue background",
     value: "var(--tt-color-highlight-blue)",
     border: "var(--tt-color-highlight-blue-contrast)"
   },
   {
-    label: "\u7D2B\u8272\u80CC\u666F",
+    label: "Purple background",
     value: "var(--tt-color-highlight-purple)",
     border: "var(--tt-color-highlight-purple-contrast)"
   },
   {
-    label: "\u7C89\u7D05\u80CC\u666F",
+    label: "Pink background",
     value: "var(--tt-color-highlight-pink)",
     border: "var(--tt-color-highlight-pink-contrast)"
   },
   {
-    label: "\u7D05\u8272\u80CC\u666F",
+    label: "Red background",
     value: "var(--tt-color-highlight-red)",
     border: "var(--tt-color-highlight-red-contrast)"
   }
@@ -3913,7 +3865,7 @@ function useColorHighlight(config) {
   const handleRemoveHighlight = (0, import_react52.useCallback)(() => {
     const success = removeHighlight(editor, mode);
     if (success) {
-      onApplied?.({ color: "", label: "\u79FB\u9664\u87A2\u5149\u6A19\u8A18", mode });
+      onApplied?.({ color: "", label: "Remove highlight", mode });
     }
     return success;
   }, [editor, onApplied, mode]);
@@ -3935,7 +3887,7 @@ function useColorHighlight(config) {
     handleColorHighlight,
     handleRemoveHighlight,
     canColorHighlight: canColorHighlightState,
-    label: label || `\u87A2\u5149\u6A19\u8A18`,
+    label: label || `Highlight`,
     shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
     Icon: HighlighterIcon,
     mode
@@ -5538,300 +5490,42 @@ function useUndoRedo(config) {
   };
 }
 
-// src/components/tiptap-ui/callout-button/callout-button.tsx
-var React = __toESM(require("react"), 1);
+// src/components/tiptap-node/table-node/ui/table-trigger-button/table-grid-selector.tsx
+var import_react81 = require("react");
+
+// src/components/tiptap-icons/table-column-icon.tsx
+var import_react79 = require("react");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var CALLOUT_OPTIONS = [
-  { type: "success", label: "\u6210\u529F\u63D0\u793A", className: "callout-option--success" },
-  { type: "warning", label: "\u8B66\u544A\u63D0\u793A", className: "callout-option--warning" },
-  { type: "error", label: "\u932F\u8AA4\u63D0\u793A", className: "callout-option--error" },
-  { type: "info", label: "\u8CC7\u8A0A\u63D0\u793A", className: "callout-option--info" }
-];
-function CalloutButton({ portal = true }) {
-  const { editor } = useTiptapEditor();
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [isVisible, setIsVisible] = React.useState(true);
-  React.useEffect(() => {
-    if (!editor) return;
-    setIsVisible(editor.isEditable);
-  }, [editor]);
-  const handleSelect = React.useCallback(
-    (type) => {
-      if (!editor) return;
-      editor.chain().focus().setCallout({ type }).run();
-      setIsOpen(false);
-    },
-    [editor]
-  );
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
-      Button,
-      {
-        "data-style": "ghost",
-        "data-active-state": isOpen ? "on" : "off",
-        disabled: !editor,
-        tooltip: "\u63D0\u793A\u6846",
-        "aria-label": "\u63D0\u793A\u6846",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CalloutIcon, { className: "tiptap-button-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChevronDownIcon, { className: "tiptap-button-icon" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DropdownMenuContent, { portal, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "callout-options", children: CALLOUT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-      "button",
-      {
-        type: "button",
-        className: `callout-option ${option.className}`,
-        onClick: () => handleSelect(option.type),
-        title: option.label,
-        "aria-label": option.label
-      },
-      option.type
-    )) }) }) }) })
-  ] });
-}
-function CalloutIcon({ className }) {
+var TableColumnIcon = (0, import_react79.memo)(({ className, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "svg",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
+      width: "24",
+      height: "24",
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
-    }
-  );
-}
-
-// src/components/tiptap-ui/table-button/table-button.tsx
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var GRID_SIZE = 6;
-var TOTAL_CELLS = GRID_SIZE * GRID_SIZE;
-function TableButton({ portal = true }) {
-  const { editor } = useTiptapEditor();
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const [isVisible, setIsVisible] = React2.useState(true);
-  const [hoveredCell, setHoveredCell] = React2.useState(null);
-  React2.useEffect(() => {
-    if (!editor) return;
-    setIsVisible(editor.isEditable);
-  }, [editor]);
-  const isInTable = editor?.isActive("table") ?? false;
-  const insertTable = React2.useCallback((rows, cols) => {
-    if (!editor) return;
-    editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
-    setIsOpen(false);
-    setHoveredCell(null);
-  }, [editor]);
-  const addRowBefore = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().addRowBefore().run();
-    setIsOpen(false);
-  }, [editor]);
-  const addRowAfter = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().addRowAfter().run();
-    setIsOpen(false);
-  }, [editor]);
-  const addColumnBefore = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().addColumnBefore().run();
-    setIsOpen(false);
-  }, [editor]);
-  const addColumnAfter = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().addColumnAfter().run();
-    setIsOpen(false);
-  }, [editor]);
-  const deleteRow = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().deleteRow().run();
-    setIsOpen(false);
-  }, [editor]);
-  const deleteColumn = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().deleteColumn().run();
-    setIsOpen(false);
-  }, [editor]);
-  const deleteTable = React2.useCallback(() => {
-    if (!editor) return;
-    editor.chain().focus().deleteTable().run();
-    setIsOpen(false);
-  }, [editor]);
-  const handleOpenChange = React2.useCallback((open) => {
-    setIsOpen(open);
-    if (!open) {
-      setHoveredCell(null);
-    }
-  }, []);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-      Button,
-      {
-        "data-style": "ghost",
-        "data-active-state": isOpen || isInTable ? "on" : "off",
-        disabled: !editor,
-        tooltip: "\u8868\u683C",
-        "aria-label": "\u8868\u683C",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TableIcon, { className: "tiptap-button-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ChevronDownIcon, { className: "tiptap-button-icon" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuContent, { portal, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CardBody, { children: !isInTable ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "table-grid-picker", onMouseLeave: () => setHoveredCell(null), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "table-grid", children: Array.from({ length: TOTAL_CELLS }).map((_, index) => {
-        const row = Math.floor(index / GRID_SIZE);
-        const col = index % GRID_SIZE;
-        const isSelected = hoveredCell && row <= hoveredCell.row && col <= hoveredCell.col;
-        return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          "div",
-          {
-            className: `table-grid-cell ${isSelected ? "is-selected" : ""}`,
-            onMouseEnter: () => setHoveredCell({ row, col }),
-            onClick: () => insertTable(row + 1, col + 1)
-          },
-          index
-        );
-      }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "table-grid-size", children: hoveredCell ? `${hoveredCell.row + 1} x ${hoveredCell.col + 1}` : "" })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: addRowBefore, children: "\u4E0A\u65B9\u63D2\u5165\u5217" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: addRowAfter, children: "\u4E0B\u65B9\u63D2\u5165\u5217" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: addColumnBefore, children: "\u5DE6\u65B9\u63D2\u5165\u6B04" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: addColumnAfter, children: "\u53F3\u65B9\u63D2\u5165\u6B04" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: deleteRow, children: "\u522A\u9664\u5217" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: deleteColumn, children: "\u522A\u9664\u6B04" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DropdownMenuItem, { onSelect: deleteTable, children: "\u522A\u9664\u8868\u683C" })
-    ] }) }) }) })
-  ] });
-}
-TableButton.displayName = "TableButton";
-function TableIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
       viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: "M12 3v18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: "M3 9h18" }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { d: "M3 15h18" })
-      ]
-    }
-  );
-}
-
-// src/components/tiptap-ui/text-color-button/text-color-button.tsx
-var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var TEXT_COLORS = [
-  { color: "inherit", label: "\u9810\u8A2D", className: "text-color--default" },
-  { color: "var(--tt-color-text-gray)", label: "\u7070\u8272", className: "text-color--gray" },
-  { color: "var(--tt-color-text-brown)", label: "\u68D5\u8272", className: "text-color--brown" },
-  { color: "var(--tt-color-text-orange)", label: "\u6A58\u8272", className: "text-color--orange" },
-  { color: "var(--tt-color-text-yellow)", label: "\u9EC3\u8272", className: "text-color--yellow" },
-  { color: "var(--tt-color-text-green)", label: "\u7DA0\u8272", className: "text-color--green" },
-  { color: "var(--tt-color-text-blue)", label: "\u85CD\u8272", className: "text-color--blue" },
-  { color: "var(--tt-color-text-purple)", label: "\u7D2B\u8272", className: "text-color--purple" },
-  { color: "var(--tt-color-text-pink)", label: "\u7C89\u7D05", className: "text-color--pink" },
-  { color: "var(--tt-color-text-red)", label: "\u7D05\u8272", className: "text-color--red" }
-];
-function TextColorButton({ portal = true }) {
-  const { editor } = useTiptapEditor();
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [isVisible, setIsVisible] = React3.useState(true);
-  React3.useEffect(() => {
-    if (!editor) return;
-    setIsVisible(editor.isEditable);
-  }, [editor]);
-  const handleSelect = React3.useCallback(
-    (color) => {
-      if (!editor) return;
-      if (color === "inherit") {
-        editor.chain().focus().unsetColor().run();
-      } else {
-        editor.chain().focus().setColor(color).run();
-      }
-      setIsOpen(false);
-    },
-    [editor]
-  );
-  if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(DropdownMenu, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
-      Button,
-      {
-        "data-style": "ghost",
-        "data-active-state": isOpen ? "on" : "off",
-        disabled: !editor,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextColorIcon, { className: "tiptap-button-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ChevronDownIcon, { className: "tiptap-button-icon" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DropdownMenuContent, { portal, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-color-options", children: TEXT_COLORS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-      "button",
-      {
-        type: "button",
-        className: `text-color-option ${option.className}`,
-        onClick: () => handleSelect(option.color),
-        title: option.label,
-        "aria-label": option.label,
-        children: "A"
-      },
-      option.color
-    )) }) }) }) })
-  ] });
-}
-function TextColorIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
-    "svg",
-    {
+      fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
-      width: "18",
-      height: "18",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      className,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: "M4 20h16" }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: "m6 16 6-12 6 12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("path", { d: "M8 12h8" })
-      ]
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M4 5C4 4.44772 4.44772 4 5 4H8V20H5C4.44772 20 4 19.5523 4 19V5ZM9 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2H9H15H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H15H9ZM14 20H10V4H14V20ZM16 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H16V20Z",
+          fill: "currentColor"
+        }
+      )
     }
   );
-}
+});
+TableColumnIcon.displayName = "TableColumnIcon";
 
-// src/components/tiptap-icons/arrow-left-icon.tsx
-var import_react79 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var ArrowLeftIcon = (0, import_react79.memo)(({ className, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+// src/components/tiptap-icons/table-row-icon.tsx
+var import_react80 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var TableRowIcon = (0, import_react80.memo)(({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "svg",
     {
       width: "24",
@@ -5841,69 +5535,1322 @@ var ArrowLeftIcon = (0, import_react79.memo)(({ className, ...props }) => {
       fill: "currentColor",
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         "path",
         {
-          d: "M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L12.7071 5.70711Z",
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M5 4C4.44772 4 4 4.44772 4 5V8H20V5C20 4.44772 19.5523 4 19 4H5ZM2 5V9V15V19C2 20.6569 3.34315 22 5 22H19C20.6569 22 22 20.6569 22 19V15V9V5C22 3.34315 20.6569 2 19 2H5C3.34315 2 2 3.34315 2 5ZM20 14V10H4V14H20ZM4 16H20V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V16Z",
           fill: "currentColor"
         }
       )
     }
   );
 });
-ArrowLeftIcon.displayName = "ArrowLeftIcon";
-
-// src/hooks/use-window-size.ts
-var import_react82 = require("react");
+TableRowIcon.displayName = "TableRowIcon";
 
-// src/hooks/use-throttled-callback.ts
-var import_lodash = __toESM(require("lodash.throttle"), 1);
-
-// src/hooks/use-unmount.ts
-var import_react80 = require("react");
-var useUnmount = (callback) => {
-  const ref = (0, import_react80.useRef)(callback);
-  ref.current = callback;
-  (0, import_react80.useEffect)(
-    () => () => {
-      ref.current();
-    },
-    []
-  );
+// src/components/tiptap-node/table-node/ui/table-trigger-button/table-grid-selector.tsx
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var isCellSelected = (cell, hoveredCell) => {
+  if (!hoveredCell) return false;
+  return cell.row <= hoveredCell.row && cell.col <= hoveredCell.col;
 };
-
-// src/hooks/use-throttled-callback.ts
-var import_react81 = require("react");
-var defaultOptions = {
-  leading: false,
-  trailing: true
+var generateGridCells = (rows, cols) => {
+  const totalCells = rows * cols;
+  return Array.from({ length: totalCells }, (_, index) => ({
+    row: Math.floor(index / cols),
+    col: index % cols
+  }));
 };
-function useThrottledCallback(fn, wait = 250, dependencies = [], options = defaultOptions) {
-  const handler = (0, import_react81.useMemo)(
-    () => (0, import_lodash.default)(fn, wait, options),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    dependencies
-  );
-  useUnmount(() => {
-    handler.cancel();
-  });
-  return handler;
-}
+var GridCell = ({
+  row,
+  col,
+  isSelected,
+  disabled,
+  onMouseEnter,
+  onClick
+}) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  Button,
+  {
+    "data-size": "small",
+    type: "button",
+    className: cn("tiptap-table-grid-cell", isSelected && "selected"),
+    disabled,
+    onMouseEnter,
+    onClick,
+    "aria-label": `Select ${row + 1}x${col + 1} table`
+  }
+);
+var SizeIndicator = ({
+  hoveredCell
+}) => {
+  const columns = hoveredCell ? hoveredCell.col + 1 : 1;
+  const rows = hoveredCell ? hoveredCell.row + 1 : 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "tiptap-table-size-indicator", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "tiptap-table-size-indicator-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableColumnIcon, { className: "tiptap-table-column-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "tiptap-table-size-indicator-text", children: columns })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "tiptap-table-size-indicator-delimiter", children: "x" }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "tiptap-table-size-indicator-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TableRowIcon, { className: "tiptap-table-row-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "tiptap-table-size-indicator-text", children: rows })
+    ] })
+  ] });
+};
+var TableGridSelector = (0, import_react81.forwardRef)(
+  ({
+    maxRows = 8,
+    maxCols = 8,
+    hoveredCell,
+    onCellHover,
+    onCellClick,
+    onMouseLeave,
+    disabled = false,
+    className,
+    showSizeIndicator = true
+  }, ref) => {
+    const gridCells = (0, import_react81.useMemo)(
+      () => generateGridCells(maxRows, maxCols),
+      [maxRows, maxCols]
+    );
+    const gridStyle = (0, import_react81.useMemo)(
+      () => ({
+        "--tt-table-columns": maxCols,
+        "--tt-table-rows": maxRows
+      }),
+      [maxCols, maxRows]
+    );
+    const handleCellHover = (0, import_react81.useCallback)(
+      (row, col) => () => onCellHover(row, col),
+      [onCellHover]
+    );
+    const handleCellClick = (0, import_react81.useCallback)(
+      (row, col) => () => onCellClick(row, col),
+      [onCellClick]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        "div",
+        {
+          ref,
+          className: cn("tiptap-table-grid", className),
+          onMouseLeave,
+          style: gridStyle,
+          children: gridCells.map((cell, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            GridCell,
+            {
+              row: cell.row,
+              col: cell.col,
+              isSelected: isCellSelected(cell, hoveredCell),
+              disabled,
+              onMouseEnter: handleCellHover(cell.row, cell.col),
+              onClick: handleCellClick(cell.row, cell.col)
+            },
+            index
+          ))
+        }
+      ),
+      showSizeIndicator && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SizeIndicator, { hoveredCell })
+    ] });
+  }
+);
+TableGridSelector.displayName = "TableGridSelector";
 
-// src/hooks/use-window-size.ts
-function useWindowSize() {
-  const [windowSize, setWindowSize] = (0, import_react82.useState)({
-    width: 0,
-    height: 0,
-    offsetTop: 0,
-    offsetLeft: 0,
-    scale: 0
-  });
-  const handleViewportChange = useThrottledCallback(() => {
-    if (typeof window === "undefined") return;
-    const vp = window.visualViewport;
-    if (!vp) return;
-    const {
+// src/components/tiptap-node/table-node/ui/table-trigger-button/table-trigger-button.tsx
+var import_react82 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var TableTriggerButton = (0, import_react82.forwardRef)(
+  ({
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    maxRows = 8,
+    maxCols = 8,
+    onInserted,
+    text,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const {
+      isVisible,
+      canInsert,
+      isOpen,
+      setIsOpen,
+      hoveredCell,
+      handleCellHover,
+      handleCellClick,
+      resetHoveredCell,
+      label,
+      Icon
+    } = useTableTriggerButton({
+      editor,
+      hideWhenUnavailable,
+      maxRows,
+      maxCols,
+      onInserted
+    });
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        Button,
+        {
+          ref,
+          type: "button",
+          "data-style": "ghost",
+          disabled: !canInsert,
+          "data-disabled": !canInsert,
+          "aria-label": label,
+          tooltip: label,
+          ...buttonProps,
+          children: children ?? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { className: "tiptap-button-icon" }),
+            text && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "tiptap-button-text", children: text })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PopoverContent, { align: "start", side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CardBody, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        TableGridSelector,
+        {
+          maxRows,
+          maxCols,
+          hoveredCell,
+          onCellHover: handleCellHover,
+          onCellClick: handleCellClick,
+          onMouseLeave: resetHoveredCell,
+          disabled: !canInsert
+        }
+      ) }) }) })
+    ] });
+  }
+);
+TableTriggerButton.displayName = "TableTriggerButton";
+
+// src/components/tiptap-node/table-node/ui/table-trigger-button/use-table-trigger.ts
+var import_react84 = require("react");
+
+// src/components/tiptap-icons/table-icon.tsx
+var import_react83 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var TableIcon = (0, import_react83.memo)(({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM4 5C4 4.44772 4.44772 4 5 4H11V8H4V5ZM4 10H11V14H4V10ZM20 14V10H13V14H20ZM13 16H20V19C20 19.5523 19.5523 20 19 20H13V16ZM11 16V20H5C4.44772 20 4 19.5523 4 19V16H11ZM13 8H20V5C20 4.44772 19.5523 4 19 4H13V8Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+});
+TableIcon.displayName = "TableIcon";
+
+// src/components/tiptap-node/table-node/ui/table-trigger-button/use-table-trigger.ts
+var REQUIRED_EXTENSIONS = ["table"];
+function canInsertTable(editor) {
+  if (!editor || !editor.isEditable) return false;
+  return isExtensionAvailable(editor, REQUIRED_EXTENSIONS);
+}
+function insertTable(editor, rows, cols) {
+  if (!editor || !canInsertTable(editor)) return false;
+  try {
+    return editor.chain().focus().insertTable({
+      rows,
+      cols,
+      withHeaderRow: false
+    }).run();
+  } catch (error) {
+    console.error("Error inserting table:", error);
+    return false;
+  }
+}
+function shouldShowButton10(editor, hideWhenUnavailable) {
+  if (!editor || !editor.isEditable) return false;
+  const hasExtension = isExtensionAvailable(editor, REQUIRED_EXTENSIONS);
+  if (!hasExtension) return false;
+  return !hideWhenUnavailable || canInsertTable(editor);
+}
+function useTableTriggerButton(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onInserted
+  } = config || {};
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
+  const [hoveredCell, setHoveredCell] = (0, import_react84.useState)(null);
+  const isVisible = shouldShowButton10(editor, hideWhenUnavailable);
+  const canInsert = canInsertTable(editor);
+  const handleCellHover = (0, import_react84.useCallback)((row, col) => {
+    setHoveredCell({ row, col });
+  }, []);
+  const handleCellClick = (0, import_react84.useCallback)(
+    (row, col) => {
+      const success = insertTable(editor, row + 1, col + 1);
+      if (success) {
+        setIsOpen(false);
+        onInserted?.(row + 1, col + 1);
+      }
+    },
+    [editor, onInserted]
+  );
+  const resetHoveredCell = (0, import_react84.useCallback)(() => {
+    setHoveredCell(null);
+  }, []);
+  return {
+    isVisible,
+    canInsert,
+    isOpen,
+    setIsOpen,
+    hoveredCell,
+    handleCellHover,
+    handleCellClick,
+    resetHoveredCell,
+    label: "Insert table",
+    Icon: TableIcon
+  };
+}
+
+// src/components/tiptap-ui/color-text-popover/color-text-popover.tsx
+var import_react88 = require("react");
+
+// src/components/tiptap-ui/color-text-button/color-text-button.tsx
+var import_react85 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function ColorTextShortcutBadge({
+  shortcutKeys = COLOR_TEXT_SHORTCUT_KEY
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Badge, { children: parseShortcutKeys({ shortcutKeys }) });
+}
+var ColorTextButton = (0, import_react85.forwardRef)(
+  ({
+    editor: providedEditor,
+    textColor,
+    text,
+    hideWhenUnavailable = false,
+    onApplied,
+    showShortcut = false,
+    onClick,
+    children,
+    style,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const {
+      isVisible,
+      canColorText: canColorText2,
+      isActive,
+      handleColorText,
+      label,
+      shortcutKeys,
+      Icon
+    } = useColorText({
+      editor,
+      textColor,
+      label: text || `Color text to ${textColor}`,
+      hideWhenUnavailable,
+      onApplied
+    });
+    const handleClick = (0, import_react85.useCallback)(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleColorText();
+      },
+      [handleColorText, onClick]
+    );
+    const buttonStyle = (0, import_react85.useMemo)(
+      () => ({
+        ...style,
+        "--color-text-button-color": textColor
+      }),
+      [textColor, style]
+    );
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      Button,
+      {
+        type: "button",
+        "data-style": "ghost",
+        "data-active-state": isActive ? "on" : "off",
+        role: "button",
+        tabIndex: -1,
+        disabled: !canColorText2,
+        "data-disabled": !canColorText2,
+        "aria-label": label,
+        "aria-pressed": isActive,
+        tooltip: label,
+        onClick: handleClick,
+        style: buttonStyle,
+        ...buttonProps,
+        ref,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+            "span",
+            {
+              className: "tiptap-button-color-text",
+              style: { color: textColor },
+              children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+                Icon,
+                {
+                  className: "tiptap-button-icon",
+                  style: { color: textColor, flexGrow: 1 }
+                }
+              )
+            }
+          ),
+          text && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "tiptap-button-text", children: text }),
+          showShortcut && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ColorTextShortcutBadge, { shortcutKeys })
+        ] })
+      }
+    );
+  }
+);
+ColorTextButton.displayName = "ColorTextButton";
+
+// src/components/tiptap-ui/color-text-button/use-color-text.ts
+var import_react87 = require("react");
+var import_react_hotkeys_hook3 = require("react-hotkeys-hook");
+
+// src/components/tiptap-icons/text-color-small-icon.tsx
+var import_react86 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var TextColorSmallIcon = (0, import_react86.memo)(({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M12.8944 5.55279C12.725 5.214 12.3787 5 12 5C11.6212 5 11.2749 5.214 11.1055 5.55279L5.10555 17.5528C4.85856 18.0468 5.05878 18.6474 5.55276 18.8944C6.04674 19.1414 6.64741 18.9412 6.8944 18.4472L8.64957 14.9369C8.75862 14.9777 8.87671 15 9 15H15C15.1233 15 15.2413 14.9777 15.3504 14.9369L17.1055 18.4472C17.3525 18.9412 17.9532 19.1414 18.4472 18.8944C18.9412 18.6474 19.1414 18.0468 18.8944 17.5528L12.8944 5.55279ZM14.3819 13L12 8.23607L9.61801 13H14.3819Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+});
+TextColorSmallIcon.displayName = "TextColorSmallIcon";
+
+// src/components/tiptap-ui/color-text-button/use-color-text.ts
+var COLOR_TEXT_SHORTCUT_KEY = "mod+shift+t";
+var TEXT_COLORS = [
+  {
+    label: "Default text",
+    value: "var(--tt-color-text)",
+    border: "var(--tt-color-text-contrast)"
+  },
+  {
+    label: "Gray text",
+    value: "var(--tt-color-text-gray)",
+    border: "var(--tt-color-text-gray-contrast)"
+  },
+  {
+    label: "Brown text",
+    value: "var(--tt-color-text-brown)",
+    border: "var(--tt-color-text-brown-contrast)"
+  },
+  {
+    label: "Orange text",
+    value: "var(--tt-color-text-orange)",
+    border: "var(--tt-color-text-orange-contrast)"
+  },
+  {
+    label: "Yellow text",
+    value: "var(--tt-color-text-yellow)",
+    border: "var(--tt-color-text-yellow-contrast)"
+  },
+  {
+    label: "Green text",
+    value: "var(--tt-color-text-green)",
+    border: "var(--tt-color-text-green-contrast)"
+  },
+  {
+    label: "Blue text",
+    value: "var(--tt-color-text-blue)",
+    border: "var(--tt-color-text-blue-contrast)"
+  },
+  {
+    label: "Purple text",
+    value: "var(--tt-color-text-purple)",
+    border: "var(--tt-color-text-purple-contrast)"
+  },
+  {
+    label: "Pink text",
+    value: "var(--tt-color-text-pink)",
+    border: "var(--tt-color-text-pink-contrast)"
+  },
+  {
+    label: "Red text",
+    value: "var(--tt-color-text-red)",
+    border: "var(--tt-color-text-red-contrast)"
+  }
+];
+function canColorText(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema("textStyle", editor) || isNodeTypeSelected(editor, ["image"]))
+    return false;
+  try {
+    return editor.can().setMark("textStyle", { color: "currentColor" });
+  } catch {
+    return false;
+  }
+}
+function isColorTextActive(editor, textColor) {
+  if (!editor || !editor.isEditable) return false;
+  return editor.isActive("textStyle", { color: textColor });
+}
+function shouldShowButton11(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema("textStyle", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorText(editor);
+  }
+  return true;
+}
+function useColorText(config) {
+  const {
+    editor: providedEditor,
+    label,
+    textColor,
+    hideWhenUnavailable = false,
+    onApplied
+  } = config;
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = (0, import_react87.useState)(true);
+  const canColorTextState = canColorText(editor);
+  const isActive = isColorTextActive(editor, textColor);
+  (0, import_react87.useEffect)(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton11({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleColorText = (0, import_react87.useCallback)(() => {
+    if (!editor || !canColorTextState) return false;
+    if (editor.state.storedMarks) {
+      const textStyleMarkType = editor.schema.marks.textStyle;
+      if (textStyleMarkType) {
+        editor.view.dispatch(
+          editor.state.tr.removeStoredMark(textStyleMarkType)
+        );
+      }
+    }
+    setTimeout(() => {
+      selectCurrentBlockContent(editor);
+      const success = editor.chain().focus().toggleMark("textStyle", { color: textColor }).run();
+      if (success) {
+        onApplied?.({ color: textColor, label });
+      }
+      return success;
+    }, 0);
+  }, [editor, canColorTextState, textColor, onApplied, label]);
+  (0, import_react_hotkeys_hook3.useHotkeys)(
+    COLOR_TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorText();
+    },
+    {
+      enabled: isVisible && canColorTextState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleColorText,
+    canColorText: canColorTextState,
+    label: label || `Color text to ${textColor}`,
+    shortcutKeys: COLOR_TEXT_SHORTCUT_KEY,
+    Icon: TextColorSmallIcon
+  };
+}
+
+// src/lib/tiptap-advanced-utils.ts
+var import_state6 = require("@tiptap/pm/state");
+function chunkArray(array, size) {
+  return Array.from(
+    { length: Math.ceil(array.length / size) },
+    (_, index) => array.slice(index * size, index * size + size)
+  );
+}
+function getActiveMarkAttrs(editor, markName) {
+  if (!editor) return null;
+  const { state } = editor;
+  const { from, to, empty, $from } = state.selection;
+  if (empty) {
+    const mark = $from.marks().find((m) => m.type.name === markName);
+    return mark?.attrs ?? null;
+  }
+  const seen = /* @__PURE__ */ new Set();
+  let foundAttrs = null;
+  state.doc.nodesBetween(from, to, (node) => {
+    if (!node.isText) return;
+    for (const mark of node.marks) {
+      if (mark.type.name === markName && !seen.has(mark.type.name)) {
+        seen.add(mark.type.name);
+        foundAttrs = mark.attrs;
+      }
+    }
+  });
+  return foundAttrs;
+}
+
+// src/components/tiptap-ui/color-text-popover/color-text-popover.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var RecentColorButton = ({
+  colorObj,
+  withLabel = false,
+  onColorChanged,
+  ...props
+}) => {
+  const colorSet = colorObj.type === "text" ? TEXT_COLORS : HIGHLIGHT_COLORS;
+  const color = getColorByValue(colorObj.value, colorSet);
+  const commonProps = {
+    tooltip: color.label,
+    text: withLabel ? color.label : void 0,
+    onApplied: () => onColorChanged?.({
+      type: colorObj.type,
+      label: color.label,
+      value: color.value
+    }),
+    ...props
+  };
+  return colorObj.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    ColorTextButton,
+    {
+      textColor: color.value,
+      label: color.label,
+      ...commonProps
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ColorHighlightButton, { highlightColor: color.value, ...commonProps });
+};
+var ColorGroup = ({
+  type,
+  colors,
+  onColorSelected,
+  selectedIndex,
+  startIndexOffset
+}) => {
+  return colors.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ButtonGroup, { orientation: "horizontal", children: group.map((color, colorIndex) => {
+    const itemIndex = startIndexOffset + colors.slice(0, groupIndex).reduce((acc, g) => acc + g.length, 0) + colorIndex;
+    const isHighlighted = selectedIndex === itemIndex;
+    const commonProps = {
+      tooltip: color.label,
+      onApplied: () => onColorSelected({ type, label: color.label, value: color.value }),
+      tabIndex: isHighlighted ? 0 : -1,
+      "data-highlighted": isHighlighted,
+      "aria-label": `${color.label} ${type === "text" ? "text" : "highlight"} color`
+    };
+    return type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      ColorTextButton,
+      {
+        textColor: color.value,
+        label: color.label,
+        ...commonProps
+      },
+      `${type}-${color.value}-${colorIndex}`
+    ) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      ColorHighlightButton,
+      {
+        highlightColor: color.value,
+        ...commonProps
+      },
+      `${type}-${color.value}-${colorIndex}`
+    );
+  }) }, `${type}-group-${groupIndex}`));
+};
+var RecentColorsSection = ({
+  recentColors,
+  onColorSelected,
+  selectedIndex
+}) => {
+  if (recentColors.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CardItemGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CardGroupLabel, { children: "Recently used" }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ButtonGroup, { orientation: "horizontal", children: recentColors.map((colorObj, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      RecentColorButton,
+      {
+        colorObj,
+        onColorChanged: onColorSelected,
+        tabIndex: selectedIndex === index ? 0 : -1,
+        "data-highlighted": selectedIndex === index
+      },
+      `recent-${colorObj.type}-${colorObj.value}`
+    )) })
+  ] });
+};
+var TextStyleColorPanel = ({
+  maxColorsPerGroup = 5,
+  maxRecentColors = 3,
+  onColorChanged
+}) => {
+  const { recentColors, addRecentColor, isInitialized } = useRecentColors(maxRecentColors);
+  const containerRef = (0, import_react88.useRef)(null);
+  const textColorGroups = (0, import_react88.useMemo)(
+    () => chunkArray(TEXT_COLORS, maxColorsPerGroup),
+    [maxColorsPerGroup]
+  );
+  const highlightColorGroups = (0, import_react88.useMemo)(
+    () => chunkArray(HIGHLIGHT_COLORS, maxColorsPerGroup),
+    [maxColorsPerGroup]
+  );
+  const allTextColors = (0, import_react88.useMemo)(() => textColorGroups.flat(), [textColorGroups]);
+  const allHighlightColors = (0, import_react88.useMemo)(
+    () => highlightColorGroups.flat(),
+    [highlightColorGroups]
+  );
+  const textColorStartIndex = (0, import_react88.useMemo)(
+    () => isInitialized ? recentColors.length : 0,
+    [isInitialized, recentColors.length]
+  );
+  const highlightColorStartIndex = (0, import_react88.useMemo)(
+    () => textColorStartIndex + allTextColors.length,
+    [textColorStartIndex, allTextColors.length]
+  );
+  const menuItems = (0, import_react88.useMemo)(() => {
+    const items = [];
+    if (isInitialized && recentColors.length > 0) {
+      items.push(
+        ...recentColors.map((color) => ({
+          type: color.type,
+          value: color.value,
+          label: `Recent ${color.type === "text" ? "text" : "highlight"} color`,
+          group: "recent"
+        }))
+      );
+    }
+    items.push(
+      ...allTextColors.map((color) => ({
+        type: "text",
+        value: color.value,
+        label: color.label,
+        group: "text"
+      }))
+    );
+    items.push(
+      ...allHighlightColors.map((color) => ({
+        type: "highlight",
+        value: color.value,
+        label: color.label,
+        group: "highlight"
+      }))
+    );
+    return items;
+  }, [isInitialized, recentColors, allTextColors, allHighlightColors]);
+  const handleColorSelected = (0, import_react88.useCallback)(
+    ({
+      type,
+      label,
+      value
+    }) => {
+      if (!containerRef.current) return false;
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      );
+      if (highlightedElement) {
+        highlightedElement.click();
+      }
+      addRecentColor({ type, label, value });
+      onColorChanged?.({ type, label, value });
+    },
+    [addRecentColor, onColorChanged]
+  );
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    onSelect: (item) => {
+      if (item) {
+        handleColorSelected({
+          type: item.type,
+          label: item.label,
+          value: item.value
+        });
+      }
+    },
+    orientation: "both",
+    autoSelectFirstItem: false
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card, { ref: containerRef, tabIndex: 0, role: "menu", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CardBody, { children: [
+    isInitialized && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      RecentColorsSection,
+      {
+        recentColors,
+        onColorSelected: handleColorSelected,
+        selectedIndex
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CardItemGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CardGroupLabel, { children: "Text color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        ColorGroup,
+        {
+          type: "text",
+          colors: textColorGroups,
+          onColorSelected: handleColorSelected,
+          selectedIndex,
+          startIndexOffset: textColorStartIndex
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(CardItemGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CardGroupLabel, { children: "Highlight color" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        ColorGroup,
+        {
+          type: "highlight",
+          colors: highlightColorGroups,
+          onColorSelected: handleColorSelected,
+          selectedIndex,
+          startIndexOffset: highlightColorStartIndex
+        }
+      )
+    ] })
+  ] }) });
+};
+var ColorTextPopover = (0, import_react88.forwardRef)(
+  ({
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onColorChanged,
+    onClick,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const [isOpen, setIsOpen] = (0, import_react88.useState)(false);
+    const {
+      isVisible,
+      canToggle: canToggle3,
+      activeTextStyle,
+      activeHighlight,
+      handleColorChanged,
+      label,
+      Icon
+    } = useColorTextPopover({
+      editor,
+      hideWhenUnavailable,
+      onColorChanged
+    });
+    const handleClick = (0, import_react88.useCallback)(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        setIsOpen(!isOpen);
+      },
+      [onClick, isOpen, setIsOpen]
+    );
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        Button,
+        {
+          type: "button",
+          "data-style": "ghost",
+          "data-appearance": "default",
+          role: "button",
+          "aria-label": label,
+          tooltip: label,
+          disabled: !canToggle3,
+          "data-disabled": !canToggle3,
+          onClick: handleClick,
+          ...buttonProps,
+          ref,
+          children: children ?? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              "span",
+              {
+                className: "tiptap-button-color-text-popover",
+                style: activeHighlight.color ? {
+                  "--active-highlight-color": activeHighlight.color
+                } : {},
+                children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  Icon,
+                  {
+                    className: "tiptap-button-icon",
+                    style: {
+                      color: activeTextStyle.color || void 0
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ChevronDownIcon, { className: "tiptap-button-dropdown-small" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        PopoverContent,
+        {
+          "aria-label": "Text color options",
+          side: "bottom",
+          align: "start",
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextStyleColorPanel, { onColorChanged: handleColorChanged })
+        }
+      )
+    ] });
+  }
+);
+ColorTextPopover.displayName = "ColorTextPopover";
+
+// src/components/tiptap-ui/color-text-popover/use-color-text-popover.ts
+var import_react89 = require("react");
+function getColorByValue(value, colorArray) {
+  return colorArray.find((color) => color.value === value) ?? {
+    value,
+    label: value
+  };
+}
+function shouldShowColorTextPopover(params) {
+  const { editor, hideWhenUnavailable } = params;
+  if (!editor || !editor.isEditable) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorText(editor) || canColorHighlight(editor);
+  }
+  return true;
+}
+function useRecentColors(maxColors = 3) {
+  const [recentColors, setRecentColors] = (0, import_react89.useState)([]);
+  const [isInitialized, setIsInitialized] = (0, import_react89.useState)(false);
+  (0, import_react89.useEffect)(() => {
+    try {
+      const storedColors = localStorage.getItem("tiptapRecentlyUsedColors");
+      if (storedColors) {
+        const colors = JSON.parse(storedColors);
+        setRecentColors(colors.slice(0, maxColors));
+      }
+    } catch (e) {
+      console.error("Failed to load stored colors:", e);
+    } finally {
+      setIsInitialized(true);
+    }
+  }, [maxColors]);
+  const addRecentColor = (0, import_react89.useCallback)(
+    ({
+      type,
+      label,
+      value
+    }) => {
+      setRecentColors((prevColors) => {
+        const filtered = prevColors.filter(
+          (c) => !(c.type === type && c.value === value)
+        );
+        const updated = [{ type, label, value }, ...filtered].slice(
+          0,
+          maxColors
+        );
+        try {
+          localStorage.setItem(
+            "tiptapRecentlyUsedColors",
+            JSON.stringify(updated)
+          );
+        } catch (e) {
+          console.error("Failed to store colors:", e);
+        }
+        return updated;
+      });
+    },
+    [maxColors]
+  );
+  return { recentColors, addRecentColor, isInitialized };
+}
+function useColorTextPopover(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onColorChanged
+  } = config || {};
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isVisible, setIsVisible] = (0, import_react89.useState)(true);
+  const textStyleInSchema = isMarkInSchema("textStyle", editor);
+  const highlightInSchema = isMarkInSchema("highlight", editor);
+  const activeTextStyle = getActiveMarkAttrs(editor, "textStyle") || {};
+  const activeHighlight = getActiveMarkAttrs(editor, "highlight") || {};
+  const canToggle3 = canColorText(editor) || canColorHighlight(editor);
+  (0, import_react89.useEffect)(() => {
+    if (!editor) return;
+    const updateVisibility = () => {
+      setIsVisible(
+        shouldShowColorTextPopover({
+          editor,
+          hideWhenUnavailable
+        })
+      );
+    };
+    updateVisibility();
+    editor.on("selectionUpdate", updateVisibility);
+    return () => {
+      editor.off("selectionUpdate", updateVisibility);
+    };
+  }, [editor, hideWhenUnavailable, highlightInSchema, textStyleInSchema]);
+  const handleColorChanged = (0, import_react89.useCallback)(
+    ({
+      type,
+      label,
+      value
+    }) => {
+      onColorChanged?.({ type, label, value });
+    },
+    [onColorChanged]
+  );
+  return {
+    isVisible,
+    canToggle: canToggle3,
+    activeTextStyle,
+    activeHighlight,
+    handleColorChanged,
+    label: "Text color",
+    Icon: TextColorSmallIcon
+  };
+}
+
+// src/components/tiptap-ui/text-button/text-button.tsx
+var import_react90 = require("react");
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function TextShortcutBadge({
+  shortcutKeys = TEXT_SHORTCUT_KEY
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Badge, { children: parseShortcutKeys({ shortcutKeys }) });
+}
+var TextButton = (0, import_react90.forwardRef)(
+  ({
+    editor: providedEditor,
+    text,
+    hideWhenUnavailable = false,
+    onToggled,
+    showShortcut = false,
+    onClick,
+    children,
+    ...buttonProps
+  }, ref) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const {
+      isVisible,
+      canToggle: canToggle3,
+      isActive,
+      handleToggle,
+      label,
+      shortcutKeys,
+      Icon
+    } = useText({
+      editor,
+      hideWhenUnavailable,
+      onToggled
+    });
+    const handleClick = (0, import_react90.useCallback)(
+      (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleToggle();
+      },
+      [handleToggle, onClick]
+    );
+    if (!isVisible) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      Button,
+      {
+        type: "button",
+        "data-style": "ghost",
+        "data-active-state": isActive ? "on" : "off",
+        role: "button",
+        tabIndex: -1,
+        disabled: !canToggle3,
+        "data-disabled": !canToggle3,
+        "aria-label": label,
+        "aria-pressed": isActive,
+        tooltip: "Text",
+        onClick: handleClick,
+        ...buttonProps,
+        ref,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Icon, { className: "tiptap-button-icon" }),
+          text && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "tiptap-button-text", children: text }),
+          showShortcut && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TextShortcutBadge, { shortcutKeys })
+        ] })
+      }
+    );
+  }
+);
+TextButton.displayName = "TextButton";
+
+// src/components/tiptap-ui/text-button/use-text.ts
+var import_react92 = require("react");
+var import_react_hotkeys_hook4 = require("react-hotkeys-hook");
+var import_state7 = require("@tiptap/pm/state");
+
+// src/components/tiptap-icons/type-icon.tsx
+var import_react91 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var TypeIcon = (0, import_react91.memo)(({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        "path",
+        {
+          d: "M3 4C3 3.44772 3.44772 3 4 3H20C20.5523 3 21 3.44772 21 4V7C21 7.55228 20.5523 8 20 8C19.4477 8 19 7.55228 19 7V5H13V19H15C15.5523 19 16 19.4477 16 20C16 20.5523 15.5523 21 15 21H9C8.44772 21 8 20.5523 8 20C8 19.4477 8.44772 19 9 19H11V5H5V7C5 7.55228 4.55228 8 4 8C3.44772 8 3 7.55228 3 7V4Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+});
+TypeIcon.displayName = "TypeIcon";
+
+// src/components/tiptap-ui/text-button/use-text.ts
+var TEXT_SHORTCUT_KEY = "mod+alt+0";
+function canToggleText(editor, turnInto = true) {
+  if (!editor) return false;
+  if (!editor.schema.nodes.paragraph) return false;
+  if (!turnInto) {
+    return editor.can().setNode("paragraph");
+  }
+  if (!selectionWithinConvertibleTypes(editor, [
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "taskList",
+    "blockquote",
+    "codeBlock"
+  ]))
+    return false;
+  return editor.can().setNode("paragraph") || editor.can().clearNodes();
+}
+function isParagraphActive(editor) {
+  if (!editor) return false;
+  return editor.isActive("paragraph");
+}
+function toggleParagraph(editor) {
+  if (!editor || !editor.isEditable) return false;
+  if (!canToggleText(editor)) return false;
+  try {
+    const view = editor.view;
+    let state = view.state;
+    let tr = state.tr;
+    const blocks = getSelectedBlockNodes(editor);
+    const isPossibleToTurnInto = selectionWithinConvertibleTypes(editor, [
+      "paragraph",
+      "heading",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock"
+    ]) && blocks.length === 1;
+    if ((state.selection.empty || state.selection instanceof import_state7.TextSelection) && isPossibleToTurnInto) {
+      const pos = findNodePosition({
+        editor,
+        node: state.selection.$anchor.node(1)
+      })?.pos;
+      if (!isValidPosition(pos)) return false;
+      tr = tr.setSelection(import_state7.NodeSelection.create(state.doc, pos));
+      view.dispatch(tr);
+      state = view.state;
+    }
+    const selection = state.selection;
+    let chain = editor.chain().focus();
+    if (selection instanceof import_state7.NodeSelection) {
+      const firstChild = selection.node.firstChild?.firstChild;
+      const lastChild = selection.node.lastChild?.lastChild;
+      const from = firstChild ? selection.from + firstChild.nodeSize : selection.from + 1;
+      const to = lastChild ? selection.to - lastChild.nodeSize : selection.to - 1;
+      const resolvedFrom = state.doc.resolve(from);
+      const resolvedTo = state.doc.resolve(to);
+      chain = chain.setTextSelection(import_state7.TextSelection.between(resolvedFrom, resolvedTo)).clearNodes();
+    }
+    if (!editor.isActive("paragraph")) {
+      chain.setNode("paragraph").run();
+    }
+    editor.chain().focus().selectTextblockEnd().run();
+    return true;
+  } catch {
+    return false;
+  }
+}
+function shouldShowButton12(props) {
+  const { editor, hideWhenUnavailable } = props;
+  if (!editor || !editor.isEditable) return false;
+  if (!isNodeInSchema("paragraph", editor)) return false;
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canToggleText(editor);
+  }
+  return true;
+}
+function useText(config) {
+  const {
+    editor: providedEditor,
+    hideWhenUnavailable = false,
+    onToggled
+  } = config || {};
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = (0, import_react92.useState)(true);
+  const canToggle3 = canToggleText(editor);
+  const isActive = isParagraphActive(editor);
+  (0, import_react92.useEffect)(() => {
+    if (!editor) return;
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton12({ editor, hideWhenUnavailable }));
+    };
+    handleSelectionUpdate();
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+  const handleToggle = (0, import_react92.useCallback)(() => {
+    if (!editor) return false;
+    const success = toggleParagraph(editor);
+    if (success) {
+      onToggled?.();
+    }
+    return success;
+  }, [editor, onToggled]);
+  (0, import_react_hotkeys_hook4.useHotkeys)(
+    TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleToggle();
+    },
+    {
+      enabled: isVisible && canToggle3,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true
+    }
+  );
+  return {
+    isVisible,
+    isActive,
+    handleToggle,
+    canToggle: canToggle3,
+    label: "Text",
+    shortcutKeys: TEXT_SHORTCUT_KEY,
+    Icon: TypeIcon
+  };
+}
+
+// src/components/tiptap-icons/arrow-left-icon.tsx
+var import_react93 = require("react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var ArrowLeftIcon = (0, import_react93.memo)(({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      className,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        "path",
+        {
+          d: "M12.7071 5.70711C13.0976 5.31658 13.0976 4.68342 12.7071 4.29289C12.3166 3.90237 11.6834 3.90237 11.2929 4.29289L4.29289 11.2929C3.90237 11.6834 3.90237 12.3166 4.29289 12.7071L11.2929 19.7071C11.6834 20.0976 12.3166 20.0976 12.7071 19.7071C13.0976 19.3166 13.0976 18.6834 12.7071 18.2929L7.41421 13L19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11L7.41421 11L12.7071 5.70711Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+});
+ArrowLeftIcon.displayName = "ArrowLeftIcon";
+
+// src/hooks/use-window-size.ts
+var import_react96 = require("react");
+
+// src/hooks/use-throttled-callback.ts
+var import_lodash = __toESM(require("lodash.throttle"), 1);
+
+// src/hooks/use-unmount.ts
+var import_react94 = require("react");
+var useUnmount = (callback) => {
+  const ref = (0, import_react94.useRef)(callback);
+  ref.current = callback;
+  (0, import_react94.useEffect)(
+    () => () => {
+      ref.current();
+    },
+    []
+  );
+};
+
+// src/hooks/use-throttled-callback.ts
+var import_react95 = require("react");
+var defaultOptions = {
+  leading: false,
+  trailing: true
+};
+function useThrottledCallback(fn, wait = 250, dependencies = [], options = defaultOptions) {
+  const handler = (0, import_react95.useMemo)(
+    () => (0, import_lodash.default)(fn, wait, options),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies
+  );
+  useUnmount(() => {
+    handler.cancel();
+  });
+  return handler;
+}
+
+// src/hooks/use-window-size.ts
+function useWindowSize() {
+  const [windowSize, setWindowSize] = (0, import_react96.useState)({
+    width: 0,
+    height: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    scale: 0
+  });
+  const handleViewportChange = useThrottledCallback(() => {
+    if (typeof window === "undefined") return;
+    const vp = window.visualViewport;
+    if (!vp) return;
+    const {
       width = 0,
       height = 0,
       offsetTop = 0,
@@ -5917,7 +6864,7 @@ function useWindowSize() {
       return { width, height, offsetTop, offsetLeft, scale };
     });
   }, 200);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react96.useEffect)(() => {
     const visualViewport = window.visualViewport;
     if (!visualViewport) return;
     visualViewport.addEventListener("resize", handleViewportChange);
@@ -5930,7 +6877,7 @@ function useWindowSize() {
 }
 
 // src/hooks/use-element-rect.ts
-var import_react83 = require("react");
+var import_react97 = require("react");
 var initialRect = {
   x: 0,
   y: 0,
@@ -5950,8 +6897,8 @@ function useElementRect({
   throttleMs = 100,
   useResizeObserver = true
 } = {}) {
-  const [rect, setRect] = (0, import_react83.useState)(initialRect);
-  const getTargetElement = (0, import_react83.useCallback)(() => {
+  const [rect, setRect] = (0, import_react97.useState)(initialRect);
+  const getTargetElement = (0, import_react97.useCallback)(() => {
     if (!enabled || !isClientSide()) return null;
     if (!element) {
       return document.body;
@@ -5988,7 +6935,7 @@ function useElementRect({
     [enabled, getTargetElement],
     { leading: true, trailing: true }
   );
-  (0, import_react83.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (!enabled || !isClientSide()) {
       setRect(initialRect);
       return;
@@ -6026,7 +6973,7 @@ function useBodyRect(options = {}) {
 }
 
 // src/hooks/use-cursor-visibility.ts
-var import_react84 = require("react");
+var import_react98 = require("react");
 function useCursorVisibility({
   editor,
   overlayHeight = 0
@@ -6037,7 +6984,7 @@ function useCursorVisibility({
     throttleMs: 100,
     useResizeObserver: true
   });
-  (0, import_react84.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     const ensureCursorVisibility = () => {
       if (!editor) return;
       const { state, view } = editor;
@@ -6064,11 +7011,11 @@ function useCursorVisibility({
 }
 
 // src/hooks/use-auto-height.ts
-var import_react85 = require("react");
+var import_react99 = require("react");
 function useAutoHeight(containerRef, options) {
   const { enabled, bottomOffset = 24, minHeight = 200 } = options;
-  const [height, setHeight] = (0, import_react85.useState)(void 0);
-  const calculateHeight = (0, import_react85.useCallback)(() => {
+  const [height, setHeight] = (0, import_react99.useState)(void 0);
+  const calculateHeight = (0, import_react99.useCallback)(() => {
     if (!enabled || !containerRef.current) {
       setHeight(void 0);
       return;
@@ -6078,7 +7025,7 @@ function useAutoHeight(containerRef, options) {
     const finalHeight = Math.max(availableHeight, minHeight);
     setHeight(finalHeight);
   }, [enabled, bottomOffset, minHeight, containerRef]);
-  (0, import_react85.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     if (!enabled) {
       setHeight(void 0);
       return;
@@ -6092,15 +7039,32 @@ function useAutoHeight(containerRef, options) {
   return height;
 }
 
+// src/context/elia-editor-context.tsx
+var import_react100 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var EliaEditorContext = (0, import_react100.createContext)(null);
+function EliaEditorProvider({ children }) {
+  const [editor, setEditor] = (0, import_react100.useState)(null);
+  const value = (0, import_react100.useMemo)(() => ({ editor, setEditor }), [editor]);
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(EliaEditorContext.Provider, { value, children });
+}
+function useEliaEditor() {
+  const context = (0, import_react100.useContext)(EliaEditorContext);
+  return context?.editor ?? null;
+}
+function useEliaEditorContext() {
+  return (0, import_react100.useContext)(EliaEditorContext);
+}
+
 // src/components/tiptap-templates/simple/simple-editor.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var DEFAULT_TOOLBAR = [
   "undo-redo",
+  "text",
   "heading",
   "list",
   "blockquote",
   "code-block",
-  "callout",
   "table",
   "format",
   "text-color",
@@ -6118,66 +7082,66 @@ var MainToolbarContent = ({
   toolbar
 }) => {
   const has = (item) => toolbar.includes(item);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Spacer, {}),
-    has("undo-redo") && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToolbarGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(UndoRedoButton, { action: "undo" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(UndoRedoButton, { action: "redo" })
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Spacer, {}),
+    has("undo-redo") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(UndoRedoButton, { action: "undo" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(UndoRedoButton, { action: "redo" })
     ] }),
-    has("undo-redo") && (has("heading") || has("list") || has("blockquote") || has("code-block") || has("callout") || has("table")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-    (has("heading") || has("list") || has("blockquote") || has("code-block") || has("callout") || has("table")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToolbarGroup, { children: [
-      has("heading") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
-      has("list") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    has("undo-redo") && (has("text") || has("heading") || has("list") || has("blockquote") || has("code-block") || has("table")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+    (has("text") || has("heading") || has("list") || has("blockquote") || has("code-block") || has("table")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarGroup, { children: [
+      has("text") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextButton, {}),
+      has("heading") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HeadingDropdownMenu, { levels: [1, 2, 3, 4] }),
+      has("list") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         ListDropdownMenu,
         {
           types: ["bulletList", "orderedList", "taskList"]
         }
       ),
-      has("blockquote") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BlockquoteButton, {}),
-      has("code-block") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CodeBlockButton, {}),
-      has("callout") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CalloutButton, {}),
-      has("table") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TableButton, {})
+      has("blockquote") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(BlockquoteButton, {}),
+      has("code-block") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CodeBlockButton, {}),
+      has("table") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TableTriggerButton, {})
     ] }),
-    (has("heading") || has("list") || has("blockquote") || has("code-block") || has("callout") || has("table")) && (has("format") || has("text-color") || has("highlight") || has("link")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-    (has("format") || has("text-color") || has("highlight") || has("link")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToolbarGroup, { children: [
-      has("format") && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "bold" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "italic" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "strike" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "code" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "underline" })
+    (has("text") || has("heading") || has("list") || has("blockquote") || has("code-block") || has("table")) && (has("format") || has("text-color") || has("highlight") || has("link")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+    (has("format") || has("text-color") || has("highlight") || has("link")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarGroup, { children: [
+      has("format") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "bold" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "italic" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "strike" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "code" }),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "underline" })
       ] }),
-      has("text-color") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextColorButton, {}),
-      has("highlight") && (!isMobile ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ColorHighlightPopover, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ColorHighlightPopoverButton, { onClick: onHighlighterClick })),
-      has("link") && (!isMobile ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LinkPopover, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LinkButton, { onClick: onLinkClick }))
+      has("text-color") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorTextPopover, {}),
+      has("highlight") && (!isMobile ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorHighlightPopover, {}) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorHighlightPopoverButton, { onClick: onHighlighterClick })),
+      has("link") && (!isMobile ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LinkPopover, {}) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LinkButton, { onClick: onLinkClick }))
     ] }),
-    (has("format") || has("text-color") || has("highlight") || has("link")) && (has("superscript") || has("subscript")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-    (has("superscript") || has("subscript")) && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToolbarGroup, { children: [
-      has("superscript") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "superscript" }),
-      has("subscript") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MarkButton, { type: "subscript" })
+    (has("format") || has("text-color") || has("highlight") || has("link")) && (has("superscript") || has("subscript")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+    (has("superscript") || has("subscript")) && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarGroup, { children: [
+      has("superscript") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "superscript" }),
+      has("subscript") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MarkButton, { type: "subscript" })
     ] }),
-    (has("superscript") || has("subscript")) && has("align") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-    has("align") && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(ToolbarGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextAlignButton, { align: "left" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextAlignButton, { align: "center" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextAlignButton, { align: "right" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(TextAlignButton, { align: "justify" })
+    (has("superscript") || has("subscript")) && has("align") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+    has("align") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextAlignButton, { align: "left" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextAlignButton, { align: "center" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextAlignButton, { align: "right" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextAlignButton, { align: "justify" })
     ] }),
-    has("align") && has("image") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-    has("image") && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ImageUploadButton, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Spacer, {})
+    has("align") && has("image") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+    has("image") && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ImageUploadButton, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Spacer, {})
   ] });
 };
 var MobileToolbarContent = ({
   type,
   onBack
-}) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Button, { "data-style": "ghost", onClick: onBack, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ArrowLeftIcon, { className: "tiptap-button-icon" }),
-    type === "highlighter" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(HighlighterIcon, { className: "tiptap-button-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LinkIcon, { className: "tiptap-button-icon" })
+}) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Button, { "data-style": "ghost", onClick: onBack, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowLeftIcon, { className: "tiptap-button-icon" }),
+    type === "highlighter" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(HighlighterIcon, { className: "tiptap-button-icon" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LinkIcon, { className: "tiptap-button-icon" })
   ] }) }),
-  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolbarSeparator, {}),
-  type === "highlighter" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ColorHighlightPopoverContent, {}) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LinkContent, {})
+  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarSeparator, {}),
+  type === "highlighter" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ColorHighlightPopoverContent, {}) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LinkContent, {})
 ] });
 function EliaEditor({
   content = "",
@@ -6197,26 +7161,26 @@ function EliaEditor({
 }) {
   const isMobile = useIsBreakpoint();
   const { height } = useWindowSize();
-  const [mobileView, setMobileView] = (0, import_react86.useState)(
+  const [mobileView, setMobileView] = (0, import_react101.useState)(
     "main"
   );
-  const toolbarRef = (0, import_react86.useRef)(null);
-  const containerRef = (0, import_react86.useRef)(null);
-  const isInternalUpdate = (0, import_react86.useRef)(false);
+  const toolbarRef = (0, import_react101.useRef)(null);
+  const containerRef = (0, import_react101.useRef)(null);
+  const isInternalUpdate = (0, import_react101.useRef)(false);
   const computedHeight = useAutoHeight(containerRef, {
     enabled: embedded && autoHeight,
     bottomOffset,
     minHeight
   });
   const uploadFn = onImageUpload || handleImageUpload;
-  const handleUpdate = (0, import_react86.useCallback)(
+  const handleUpdate = (0, import_react101.useCallback)(
     ({ editor: editor2 }) => {
       isInternalUpdate.current = true;
       onChange?.(editor2.getHTML(), editor2.getJSON());
     },
     [onChange]
   );
-  const editor = (0, import_react87.useEditor)({
+  const editor = (0, import_react102.useEditor)({
     immediatelyRender: false,
     editorProps: {
       attributes: {
@@ -6258,7 +7222,6 @@ function EliaEditor({
       import_tiptap_extension_resize_image.default.configure({
         allowBase64: true
       }),
-      Callout,
       ImageUploadNode2.configure({
         type: "imageResize",
         accept: "image/*",
@@ -6266,6 +7229,10 @@ function EliaEditor({
         limit: 3,
         upload: uploadFn,
         onError: (error) => console.error("Upload failed:", error)
+      }),
+      import_extension_unique_id.UniqueID.configure({
+        types: ["heading"],
+        attributeName: "id"
       })
     ],
     content,
@@ -6273,27 +7240,38 @@ function EliaEditor({
     editable: !readOnly,
     onUpdate: handleUpdate
   });
+  const eliaContext = useEliaEditorContext();
+  (0, import_react101.useEffect)(() => {
+    if (eliaContext && editor) {
+      eliaContext.setEditor(editor);
+    }
+    return () => {
+      if (eliaContext) {
+        eliaContext.setEditor(null);
+      }
+    };
+  }, [editor]);
   const rect = useCursorVisibility({
     editor,
     overlayHeight: toolbarRef.current?.getBoundingClientRect().height ?? 0
   });
-  (0, import_react86.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (!isMobile && mobileView !== "main") {
       setMobileView("main");
     }
   }, [isMobile, mobileView]);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (editor && !isInternalUpdate.current && content !== editor.getHTML()) {
       editor.commands.setContent(content);
     }
     isInternalUpdate.current = false;
   }, [content, editor]);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react101.useEffect)(() => {
     if (editor) {
       editor.setEditable(!readOnly);
     }
   }, [readOnly, editor]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
       ref: containerRef,
@@ -6304,8 +7282,8 @@ function EliaEditor({
         className
       ),
       style: computedHeight ? { height: computedHeight } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react87.EditorContext.Provider, { value: { editor }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react102.EditorContext.Provider, { value: { editor }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           Toolbar,
           {
             ref: toolbarRef,
@@ -6314,7 +7292,7 @@ function EliaEditor({
                 bottom: `calc(100% - ${height - rect.y}px)`
               } : {}
             },
-            children: mobileView === "main" ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            children: mobileView === "main" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               MainToolbarContent,
               {
                 onHighlighterClick: () => setMobileView("highlighter"),
@@ -6322,7 +7300,7 @@ function EliaEditor({
                 isMobile,
                 toolbar
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               MobileToolbarContent,
               {
                 type: mobileView === "highlighter" ? "highlighter" : "link",
@@ -6331,8 +7309,8 @@ function EliaEditor({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          import_react87.EditorContent,
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          import_react102.EditorContent,
           {
             editor,
             role: "presentation",
@@ -6344,8 +7322,123 @@ function EliaEditor({
   );
 }
 
+// src/components/toc-sidebar/toc-sidebar.tsx
+var import_react105 = require("react");
+
+// src/hooks/use-toc-items.ts
+var import_react103 = require("react");
+function useTocItems(editor) {
+  const [items, setItems] = (0, import_react103.useState)([]);
+  const updateToc = (0, import_react103.useCallback)(() => {
+    if (!editor) {
+      setItems([]);
+      return;
+    }
+    const headings = [];
+    const doc = editor.state.doc;
+    doc.descendants((node, pos) => {
+      if (node.type.name === "heading") {
+        const level = node.attrs.level;
+        if (level >= 1 && level <= 4) {
+          const id = node.attrs.id || `heading-${pos}`;
+          headings.push({
+            id,
+            level,
+            text: node.textContent,
+            pos
+          });
+        }
+      }
+    });
+    setItems(headings);
+  }, [editor]);
+  (0, import_react103.useEffect)(() => {
+    if (!editor) return;
+    updateToc();
+    editor.on("update", updateToc);
+    return () => {
+      editor.off("update", updateToc);
+    };
+  }, [editor, updateToc]);
+  return items;
+}
+
+// src/hooks/use-active-heading.ts
+var import_react104 = require("react");
+function useActiveHeading(items) {
+  const [activeId, setActiveId] = (0, import_react104.useState)(items[0]?.id ?? null);
+  const handleScroll = (0, import_react104.useCallback)(() => {
+    if (items.length === 0) {
+      setActiveId(null);
+      return;
+    }
+    const headingElements = items.map((item) => ({
+      id: item.id,
+      element: document.getElementById(item.id)
+    })).filter((item) => item.element !== null);
+    if (headingElements.length === 0) {
+      setActiveId(items[0]?.id ?? null);
+      return;
+    }
+    const offset2 = 100;
+    let currentId = null;
+    for (const { id, element } of headingElements) {
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        if (rect.top <= offset2) {
+          currentId = id;
+        }
+      }
+    }
+    setActiveId(currentId ?? items[0]?.id ?? null);
+  }, [items]);
+  (0, import_react104.useEffect)(() => {
+    handleScroll();
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+  return activeId;
+}
+
+// src/components/toc-sidebar/toc-sidebar.tsx
+var import_jsx_runtime72 = require("react/jsx-runtime");
+function TocSidebar({ className }) {
+  const editor = useEliaEditor();
+  const items = useTocItems(editor);
+  const activeId = useActiveHeading(items);
+  const handleClick = (0, import_react105.useCallback)((id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("nav", { className: cn("toc-sidebar", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "toc-sidebar-title", children: "\u76EE\u9304" }),
+    items.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("ul", { className: "toc-sidebar-list", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      "li",
+      {
+        className: cn(
+          "toc-sidebar-item",
+          `toc-sidebar-item--level-${item.level}`,
+          activeId === item.id && "toc-sidebar-item--active"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleClick(item.id),
+            className: "toc-sidebar-link",
+            children: item.text
+          }
+        )
+      },
+      item.id
+    )) })
+  ] });
+}
+
 // src/utils/content-renderer.ts
-var import_core2 = require("@tiptap/core");
+var import_core = require("@tiptap/core");
 var import_starter_kit2 = __toESM(require("@tiptap/starter-kit"), 1);
 var import_extension_text_align2 = require("@tiptap/extension-text-align");
 var import_extension_list2 = require("@tiptap/extension-list");
@@ -6378,18 +7471,19 @@ var contentExtensions = [
   import_extension_table_row2.TableRow,
   import_extension_table_header2.TableHeader,
   import_extension_table_cell2.TableCell,
-  import_tiptap_extension_resize_image2.default.configure({ allowBase64: true }),
-  Callout
+  import_tiptap_extension_resize_image2.default.configure({ allowBase64: true })
 ];
 function generateEditorHTML(content) {
-  return (0, import_core2.generateHTML)(content, contentExtensions);
+  return (0, import_core.generateHTML)(content, contentExtensions);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Callout,
   EliaEditor,
+  EliaEditorProvider,
   SimpleEditor,
+  TocSidebar,
   contentExtensions,
-  generateEditorHTML
+  generateEditorHTML,
+  useEliaEditor
 });
 //# sourceMappingURL=index.cjs.map