tiptap-notion-editor 0.7.0 → 0.7.2

package/lib/index.js

@@ -1,8 +1,8 @@
 import { jsx as o, jsxs as m, Fragment as K } from "react/jsx-runtime";
-import He, { useContext as vt, useMemo as F, createContext as yt, useState as z, useEffect as V, useCallback as Re, useRef as P, useLayoutEffect as An, forwardRef as Ee, useImperativeHandle as ze } from "react";
+import He, { useContext as vt, useMemo as F, createContext as yt, useState as E, useEffect as V, useCallback as Re, useRef as P, useLayoutEffect as An, forwardRef as ze, useImperativeHandle as Ee } from "react";
 import { useEditorState as j, findParentNodeClosestToPos as Mn, NodeViewWrapper as me, ReactNodeViewRenderer as fe, Node as xt, mergeAttributes as wt, ReactRenderer as De, useEditor as Tn, EditorContext as Sn, EditorContent as Ln } from "@tiptap/react";
 import Hn from "@tiptap/extension-drag-handle-react";
-import { ChevronRightIcon as Rn, TextAlignStart as kt, TextAlignCenter as Nt, TextAlignEnd as At, AlignVerticalJustifyStart as In, AlignVerticalJustifyCenter as En, AlignVerticalJustifyEnd as zn, PaintBucket as Mt, EllipsisVerticalIcon as Dn, EllipsisIcon as Pn, ArrowUp as Bn, ArrowLeft as $n, ArrowDown as Vn, ArrowRight as On, SquareX as Tt, CopyIcon as Un, Trash as Pe, Plus as Be, GripVertical as Fn, RotateCcw as jn, Copy as _n, Clipboard as Wn, Link as St, Sparkles as qn, Download as Ie, RefreshCcw as Zn, Trash2 as Kn, CornerDownLeft as Gn, ExternalLink as Xn, ListIndentDecrease as Jn, ListIndentIncrease as Yn, EllipsisVertical as Qn, Subscript as eo, Superscript as to, TextAlignJustify as no, ChevronDown as Lt, Type as Ht, Heading1 as Rt, Heading2 as It, Heading3 as Et, TextQuote as zt, List as Dt, ListOrdered as $e, ListTodo as Pt, CodeXmlIcon as Bt, Bold as oo, Italic as ro, Underline as io, Strikethrough as lo, Code as ao, EqualIcon as so, FileText as rt, FileSpreadsheet as co, Presentation as uo, FileArchive as po, File as mo, Paperclip as $t, FileImage as fo, CloudUploadIcon as Vt, XIcon as ho, CheckIcon as go, Table as bo, SmilePlus as Co, Minus as vo, UploadCloud as yo } from "lucide-react";
+import { ChevronRightIcon as Rn, TextAlignStart as kt, TextAlignCenter as Nt, TextAlignEnd as At, AlignVerticalJustifyStart as In, AlignVerticalJustifyCenter as zn, AlignVerticalJustifyEnd as En, PaintBucket as Mt, EllipsisVerticalIcon as Dn, EllipsisIcon as Pn, ArrowUp as Bn, ArrowLeft as $n, ArrowDown as Vn, ArrowRight as On, SquareX as Tt, CopyIcon as Un, Trash as Pe, Plus as Be, GripVertical as Fn, RotateCcw as jn, Copy as _n, Clipboard as Wn, Link as St, Sparkles as qn, Download as Ie, RefreshCcw as Zn, Trash2 as Kn, CornerDownLeft as Gn, ExternalLink as Xn, ListIndentDecrease as Jn, ListIndentIncrease as Yn, EllipsisVertical as Qn, Subscript as eo, Superscript as to, TextAlignJustify as no, ChevronDown as Lt, Type as Ht, Heading1 as Rt, Heading2 as It, Heading3 as zt, TextQuote as Et, List as Dt, ListOrdered as $e, ListTodo as Pt, CodeXmlIcon as Bt, Bold as oo, Italic as ro, Underline as io, Strikethrough as lo, Code as ao, EqualIcon as so, FileText as rt, FileSpreadsheet as co, Presentation as uo, FileArchive as po, File as mo, Paperclip as $t, FileImage as fo, CloudUploadIcon as Vt, XIcon as ho, CheckIcon as go, Table as bo, SmilePlus as Co, Minus as vo, UploadCloud as yo } from "lucide-react";
 import { cva as Ve } from "class-variance-authority";
 import { Slot as xo, Tooltip as oe, DropdownMenu as O, ScrollArea as ue, Separator as wo, Popover as ye } from "radix-ui";
 import { clsx as ko } from "clsx";
@@ -15,8 +15,8 @@ import { BubbleMenu as Kt } from "@tiptap/react/menus";
 import { createPortal as We } from "react-dom";
 import Ro from "@tiptap/extension-blockquote";
 import { Bold as Io } from "@tiptap/extension-bold";
-import { Code as Eo } from "@tiptap/extension-code";
-import zo from "@tiptap/extension-code-block-lowlight";
+import { Code as zo } from "@tiptap/extension-code";
+import Eo from "@tiptap/extension-code-block-lowlight";
 import { Document as Do } from "@tiptap/extension-document";
 import Po, { gitHubEmojis as Bo } from "@tiptap/extension-emoji";
 import $o from "@tiptap/extension-hard-break";
@@ -223,7 +223,7 @@ function Rr({
       "data-slot": "tooltip-content",
       sideOffset: t,
       className: x(
-        "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-(--notion-editor-z-tooltip) inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         e
       ),
       ...r,
@@ -277,7 +277,7 @@ function Xe({
       sideOffset: n,
       align: t,
       className: x(
-        "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-(--notion-editor-z-menu) max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         e
       ),
       ...r
@@ -393,7 +393,7 @@ function Qe({
     {
       "data-slot": "dropdown-menu-sub-content",
       className: x(
-        "z-50 min-w-24 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-(--notion-editor-z-menu) min-w-24 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         e
       ),
       ...t
@@ -452,7 +452,7 @@ function Ir({
     }
   );
 }
-const Er = (e) => /* @__PURE__ */ m(
+const zr = (e) => /* @__PURE__ */ m(
   "svg",
   {
     width: "24",
@@ -480,7 +480,7 @@ const Er = (e) => /* @__PURE__ */ m(
       )
     ]
   }
-), zr = (e) => /* @__PURE__ */ m(
+), Er = (e) => /* @__PURE__ */ m(
   "svg",
   {
     width: "24",
@@ -1243,7 +1243,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
       {
         sideOffset: 8,
         alignOffset: -90,
-        className: "w-50 z-120",
+        className: "w-50 z-(--notion-editor-z-menu)",
         children: [
           /* @__PURE__ */ o(
             $,
@@ -1293,7 +1293,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
           /* @__PURE__ */ o(
             $,
             {
-              icon: En,
+              icon: zn,
               label: t.table.alignMiddle,
               onClick: () => te(e, {
                 vertical: "middle"
@@ -1304,7 +1304,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
           /* @__PURE__ */ o(
             $,
             {
-              icon: zn,
+              icon: En,
               label: t.table.alignBottom,
               onClick: () => te(e, {
                 vertical: "bottom"
@@ -1421,7 +1421,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
 }, nn = ({ editor: e }) => {
   const t = S();
   if (!e) return;
-  const [n, r] = z(() => {
+  const [n, r] = E(() => {
     const l = Ae();
     return l.length > 0 ? [{ title: t.common.recentlyUsed, colors: l }, ...Y(t)] : Y(t);
   });
@@ -1430,7 +1430,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
       /* @__PURE__ */ o(Mt, { className: "size-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ o("span", { children: t.common.color })
     ] }),
-    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(Qe, { sideOffset: 8, className: "w-55 pr-px z-120", children: /* @__PURE__ */ o(se, { className: "h-90 p-0.5 pr-3", children: n.map((l) => /* @__PURE__ */ m(X, { children: [
+    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(Qe, { sideOffset: 8, className: "w-55 pr-px z-(--notion-editor-z-menu)", children: /* @__PURE__ */ o(se, { className: "h-90 p-0.5 pr-3", children: n.map((l) => /* @__PURE__ */ m(X, { children: [
       /* @__PURE__ */ o(Xt, { className: "text-foreground", children: l.title }),
       l.colors.map((i) => /* @__PURE__ */ o(
         en,
@@ -1524,7 +1524,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
   type: t,
   pluginKey: n
 }) => {
-  const r = S(), [l, i] = z(!1), a = t === "row", s = a ? Dn : Pn, d = a ? "w-3 h-full rounded flex items-center justify-center transition-colors" : "w-full h-3 rounded flex items-center justify-center transition-colors", c = (w) => {
+  const r = S(), [l, i] = E(!1), a = t === "row", s = a ? Dn : Pn, d = a ? "w-3 h-full rounded flex items-center justify-center transition-colors" : "w-full h-3 rounded flex items-center justify-center transition-colors", c = (w) => {
     i(w), e.chain().command(({ tr: C }) => (C.setMeta(n, { openedMenu: w }), !0)).run();
   }, { isInsideTable: u, isFirstColumn: p, isLastColumn: h, isFirstRow: f, isLastRow: b } = Yr(e), g = pt(e, "row"), v = pt(e, "column");
   return /* @__PURE__ */ m(Ze, { open: l, onOpenChange: c, children: [
@@ -1574,7 +1574,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
             /* @__PURE__ */ o(
               $,
               {
-                icon: a ? Dr : Er,
+                icon: a ? Dr : zr,
                 label: a ? r.table.insertRowBefore : r.table.insertColumnBefore,
                 onClick: () => a ? e.chain().focus().addRowBefore().run() : e.chain().focus().addColumnBefore().run()
               }
@@ -1582,7 +1582,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
             /* @__PURE__ */ o(
               $,
               {
-                icon: a ? Pr : zr,
+                icon: a ? Pr : Er,
                 label: a ? r.table.insertRowAfter : r.table.insertColumnAfter,
                 onClick: () => a ? e.chain().focus().addRowAfter().run() : e.chain().focus().addColumnAfter().run()
               }
@@ -1629,7 +1629,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
   editor: e,
   setColor: t
 }) => {
-  const n = S(), [r, l] = z(() => {
+  const n = S(), [r, l] = E(() => {
     const i = Ae();
     return i.length > 0 ? [{ title: n.common.recentlyUsed, colors: i }, ...Y(n)] : Y(n);
   });
@@ -1638,7 +1638,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
       /* @__PURE__ */ o(Mt, { className: "size-4 shrink-0 text-muted-foreground" }),
       /* @__PURE__ */ o("span", { children: n.common.color })
     ] }),
-    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(Qe, { sideOffset: 8, className: "w-55 pr-px z-120", children: /* @__PURE__ */ o(se, { className: "h-90 p-0.5 pr-3", children: r.map((i) => /* @__PURE__ */ m(X, { children: [
+    /* @__PURE__ */ o(Ke, { children: /* @__PURE__ */ o(Qe, { sideOffset: 8, className: "w-55 pr-px z-(--notion-editor-z-menu)", children: /* @__PURE__ */ o(se, { className: "h-90 p-0.5 pr-3", children: r.map((i) => /* @__PURE__ */ m(X, { children: [
       /* @__PURE__ */ o(Xt, { className: "text-foreground", children: i.title }),
       i.colors.map((a) => /* @__PURE__ */ o(
         en,
@@ -1654,7 +1654,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
   placement: "left-start",
   strategy: "absolute"
 }, ti = ({ editor: e }) => {
-  const t = S(), [n, r] = z(!1), [l, i] = z(null);
+  const t = S(), [n, r] = E(!1), [l, i] = E(null);
   if (!e)
     return;
   const a = (c) => {
@@ -1814,7 +1814,7 @@ const at = (e, t) => e.chain().focus().command(({ state: n, dispatch: r }) => {
       ]
     }
   );
-}, E = ({
+}, z = ({
   onClick: e,
   isActive: t,
   icon: n,
@@ -1979,7 +1979,7 @@ const oi = (e) => /* @__PURE__ */ m(
       children: [
         /* @__PURE__ */ m("div", { className: " flex items-center gap-1 ", children: [
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: n.align.left,
               icon: /* @__PURE__ */ o(oi, {}),
@@ -1988,7 +1988,7 @@ const oi = (e) => /* @__PURE__ */ m(
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: n.align.center,
               icon: /* @__PURE__ */ o(ii, {}),
@@ -1997,7 +1997,7 @@ const oi = (e) => /* @__PURE__ */ m(
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: n.align.right,
               icon: /* @__PURE__ */ o(ri, {}),
@@ -2009,16 +2009,16 @@ const oi = (e) => /* @__PURE__ */ m(
         /* @__PURE__ */ o(J, { orientation: "vertical" }),
         /* @__PURE__ */ m("div", { className: "flex gap-0.5", children: [
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: n.image.download,
               icon: Ie,
               onClick: () => e.chain().focus().toggleBold().run()
             }
           ),
-          /* @__PURE__ */ o(E, { tooltip: "Replace", icon: Zn, onClick: i }),
+          /* @__PURE__ */ o(z, { tooltip: "Replace", icon: Zn, onClick: i }),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               variant: "destructive",
               tooltip: n.image.delete,
@@ -2054,7 +2054,7 @@ function Se({
       align: t,
       sideOffset: n,
       className: x(
-        "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-(--notion-editor-z-menu) flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         e
       ),
       ...r
@@ -2062,7 +2062,7 @@ function Se({
   ) });
 }
 const ai = ({ editor: e }) => {
-  const t = S(), [n, r] = z(!1), [l, i] = z(""), { isLink: a, activeUrl: s } = j({
+  const t = S(), [n, r] = E(!1), [l, i] = E(""), { isLink: a, activeUrl: s } = j({
     editor: e,
     selector: (p) => ({
       isLink: p.editor.isActive("link"),
@@ -2150,7 +2150,7 @@ const ai = ({ editor: e }) => {
   const t = S(), n = e.getAttributes("paragraph")["data-indent-level"] || e.getAttributes("heading")["data-indent-level"] || 0, r = n <= 0, l = n >= 10;
   return /* @__PURE__ */ m("div", { className: "flex gap-0.5", children: [
     /* @__PURE__ */ o(
-      E,
+      z,
       {
         tooltip: t.bubble.decreaseIndent,
         disabled: r,
@@ -2159,7 +2159,7 @@ const ai = ({ editor: e }) => {
       }
     ),
     /* @__PURE__ */ o(
-      E,
+      z,
       {
         tooltip: t.bubble.increaseIndent,
         disabled: l,
@@ -2169,7 +2169,7 @@ const ai = ({ editor: e }) => {
     )
   ] });
 }, ci = ({ editor: e }) => {
-  const t = S(), [n, r] = z(!1), {
+  const t = S(), [n, r] = E(!1), {
     isSubscript: l,
     isSuperscript: i,
     isAlignLeft: a,
@@ -2199,7 +2199,7 @@ const ai = ({ editor: e }) => {
         children: /* @__PURE__ */ m("div", { className: "flex gap-0.5", children: [
           /* @__PURE__ */ m("div", { className: "flex gap-0.5", children: [
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: "Subscript",
                 isActive: l,
@@ -2208,7 +2208,7 @@ const ai = ({ editor: e }) => {
               }
             ),
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: "Superscript",
                 isActive: i,
@@ -2220,7 +2220,7 @@ const ai = ({ editor: e }) => {
           /* @__PURE__ */ o(J, { orientation: "vertical" }),
           /* @__PURE__ */ m("div", { className: "flex gap-0.5", children: [
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: t.align.left,
                 isActive: a,
@@ -2229,7 +2229,7 @@ const ai = ({ editor: e }) => {
               }
             ),
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: t.align.center,
                 isActive: d,
@@ -2238,7 +2238,7 @@ const ai = ({ editor: e }) => {
               }
             ),
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: t.align.right,
                 isActive: s,
@@ -2247,7 +2247,7 @@ const ai = ({ editor: e }) => {
               }
             ),
             /* @__PURE__ */ o(
-              E,
+              z,
               {
                 tooltip: t.align.justify,
                 isActive: c,
@@ -2324,7 +2324,7 @@ const ai = ({ editor: e }) => {
     }
   ) }) });
 }, pi = ({ editor: e }) => {
-  const t = S(), [n, r] = z(() => {
+  const t = S(), [n, r] = E(() => {
     const a = Ae();
     return a.length > 0 ? [{ title: t.common.recentlyUsed, colors: a }, ...Y(t)] : Y(t);
   }), { textColor: l, highlightColor: i } = j({
@@ -2366,7 +2366,7 @@ const ai = ({ editor: e }) => {
   Se,
   {
     onOpenAutoFocus: (r) => r.preventDefault(),
-    className: "w-47 rounded-2xl p-0 pr-px bg-popover shadow-2xl  z-50 overflow-hidden",
+    className: "w-47 rounded-2xl p-0 pr-px bg-popover shadow-2xl  z-(--notion-editor-z-menu) overflow-hidden",
     children: /* @__PURE__ */ o(se, { className: "h-66.25 p-1.5 pr-2.5", children: e.map((r, l) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { className: "min-w-max flex relative flex-col justify-center align-middle", children: [
       /* @__PURE__ */ o("div", { className: "capitalize pt-3 pb-1 px-1.5 leading-normal font-medium text-xs text-muted-foreground", children: r.title }),
       /* @__PURE__ */ o("div", { className: "grid grid-cols-5 gap-0.5 pl-1", children: r.colors.map(
@@ -2424,7 +2424,7 @@ const ai = ({ editor: e }) => {
   title: "Heading 3",
   description: "Small heading.",
   searchTerms: ["h3", "subtitle", "small"],
-  icon: /* @__PURE__ */ o(Et, {}),
+  icon: /* @__PURE__ */ o(zt, {}),
   command: ({ editor: e, range: t }) => {
     e.chain().focus().deleteRange(t).setNode("heading", { level: 3 }).run();
   }
@@ -2432,7 +2432,7 @@ const ai = ({ editor: e }) => {
   title: "Blockquote",
   description: "Add blockquote.",
   searchTerms: ["quote", "blockquote"],
-  icon: /* @__PURE__ */ o(zt, {}),
+  icon: /* @__PURE__ */ o(Et, {}),
   command: ({ editor: e, range: t }) => {
     e.chain().focus().deleteRange(t).toggleBlockquote().run();
   }
@@ -2485,7 +2485,7 @@ const ai = ({ editor: e }) => {
 ], gi = (e) => [
   { title: e.blocks.heading1.title, icon: Rt, level: 1 },
   { title: e.blocks.heading2.title, icon: It, level: 2 },
-  { title: e.blocks.heading3.title, icon: Et, level: 3 }
+  { title: e.blocks.heading3.title, icon: zt, level: 3 }
 ], bi = ({ editor: e }) => {
   const t = S(), n = gi(t), r = hi(t), {
     activeBlock: l,
@@ -2520,7 +2520,7 @@ const ai = ({ editor: e }) => {
       " ",
       /* @__PURE__ */ o(Lt, {})
     ] }) }),
-    /* @__PURE__ */ o(Se, { className: "w-48 rounded-2xl p-0 pr-px bg-popover shadow-2xl  z-50 overflow-hidden", children: /* @__PURE__ */ o(se, { className: "h-66.25 p-1.5 pr-2.5", children: r.map((f, b) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { className: "min-w-max flex relative flex-col justify-center align-middle", children: [
+    /* @__PURE__ */ o(Se, { className: "w-48 rounded-2xl p-0 pr-px bg-popover shadow-2xl  z-(--notion-editor-z-menu) overflow-hidden", children: /* @__PURE__ */ o(se, { className: "h-66.25 p-1.5 pr-2.5", children: r.map((f, b) => /* @__PURE__ */ o("div", { children: /* @__PURE__ */ m("div", { className: "min-w-max flex relative flex-col justify-center align-middle", children: [
       /* @__PURE__ */ o("div", { className: "capitalize pt-3 pb-1 px-1.5 leading-normal font-medium text-xs text-muted-foreground", children: f.title }),
       /* @__PURE__ */ m("div", { className: "flex flex-col", children: [
         /* @__PURE__ */ m(
@@ -2584,7 +2584,7 @@ const ai = ({ editor: e }) => {
             className: "w-full justify-start",
             onClick: () => e.chain().focus().toggleBlockquote().run(),
             children: [
-              /* @__PURE__ */ o(zt, {}),
+              /* @__PURE__ */ o(Et, {}),
               " ",
               t.blocks.blockquote.title
             ]
@@ -2653,7 +2653,7 @@ const ai = ({ editor: e }) => {
         /* @__PURE__ */ o(J, { orientation: "vertical" }),
         /* @__PURE__ */ m("div", { className: " flex items-center gap-1 ", children: [
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: t.marks.bold,
               icon: oo,
@@ -2663,7 +2663,7 @@ const ai = ({ editor: e }) => {
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: t.marks.italic,
               icon: ro,
@@ -2673,7 +2673,7 @@ const ai = ({ editor: e }) => {
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: t.marks.underline,
               icon: io,
@@ -2683,7 +2683,7 @@ const ai = ({ editor: e }) => {
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: "Strikethrough",
               icon: lo,
@@ -2693,7 +2693,7 @@ const ai = ({ editor: e }) => {
             }
           ),
           /* @__PURE__ */ o(
-            E,
+            z,
             {
               tooltip: t.marks.code,
               icon: ao,
@@ -2946,7 +2946,7 @@ const ai = ({ editor: e }) => {
     };
   }, [n]), We(/* @__PURE__ */ o(K, { children: t }), r.current);
 }, xi = ({ editor: e }) => {
-  const t = S(), [n, r] = z(!1), { canMergeCell: l, canSplitCell: i, canClearContents: a } = j({
+  const t = S(), [n, r] = E(!1), { canMergeCell: l, canSplitCell: i, canClearContents: a } = j({
     editor: e,
     equalityFn: (s, d) => s.canMergeCell === d?.canMergeCell && s.canSplitCell === d.canSplitCell && s.canClearContents === d.canClearContents,
     selector: (s) => {
@@ -3360,7 +3360,7 @@ const ht = ({
       });
     };
   }, [n]), We(/* @__PURE__ */ o(K, { children: t }), l.current);
-}, Ii = 12, Ei = 4, zi = Ii + Ei;
+}, Ii = 12, zi = 4, Ei = Ii + zi;
 function Di({
   editor: e,
   element: t,
@@ -3370,7 +3370,7 @@ function Di({
     t.style.transition = "opacity 0.2s ease", t.style.opacity = a;
   }, l = (a, s) => {
     const d = a.getBoundingClientRect(), c = s.getBoundingClientRect();
-    t.style.position = "absolute", t.style.top = `${c.top - d.top + a.scrollTop}px`, t.style.left = `${c.right - d.left + a.scrollLeft}px`, t.style.width = `${zi}px`, t.style.height = `${c.height}px`;
+    t.style.position = "absolute", t.style.top = `${c.top - d.top + a.scrollTop}px`, t.style.left = `${c.right - d.left + a.scrollLeft}px`, t.style.width = `${Ei}px`, t.style.height = `${c.height}px`;
   }, i = () => {
     const a = t.closest(".table-wrapper"), s = a?.querySelector("table");
     a && s && l(a, s);
@@ -3542,7 +3542,7 @@ const Pi = ({ editor: e }) => {
   scrollOver: n = !1
 }) => {
   if (!e) return null;
-  const [r, l] = z(null), i = j({
+  const [r, l] = E(null), i = j({
     editor: e,
     selector: (a) => a.editor.storage.tableOfContents?.content || []
   });
@@ -3601,7 +3601,7 @@ function Wi({
     alignment: a,
     width: s,
     height: d
-  } = e.attrs, [c, u] = z(!1), p = P(null), h = P(null), f = P(null), b = Ui(
+  } = e.attrs, [c, u] = E(!1), p = P(null), h = P(null), f = P(null), b = Ui(
     (v) => {
       if (!f.current || !h.current) return;
       v.preventDefault(), v.stopPropagation();
@@ -3843,7 +3843,7 @@ const Yi = Gt.create({
   }
 }), Qi = (e) => typeof e == "number" && e >= 0;
 function el(e) {
-  const t = S(), n = P(null), [r, l] = z(!1), i = e.extension.options, a = i.maxSize ?? 25 * 1024 * 1024, s = async (d) => {
+  const t = S(), n = P(null), [r, l] = E(!1), i = e.extension.options, a = i.maxSize ?? 25 * 1024 * 1024, s = async (d) => {
     if (!i.upload) {
       i.onError?.(
         new Error("[notion-editor] chưa cấu hình `uploadAttachment`.")
@@ -3983,7 +3983,7 @@ const rl = ({
   onFile: e,
   children: t
 }) => {
-  const [n, r] = z(!1), [l, i] = z(!1);
+  const [n, r] = E(!1), [l, i] = E(!1);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -4052,7 +4052,7 @@ const rl = ({
   ] });
 };
 function al(e) {
-  const [t, n] = z([]), r = async (s) => {
+  const [t, n] = E([]), r = async (s) => {
     if (s.size > e.maxSize) {
       const p = new Error(
         `File size exceeds maximum allowed (${e.maxSize / 1024 / 1024}MB)`
@@ -4294,12 +4294,14 @@ const sl = (e) => {
       {
         class: x("table-wrapper overflow-x-auto overflow-y-hidden p-4 -ml-4 relative")
       },
-      "table",
-      qe(this.options.HTMLAttributes, t, {
-        style: r ? `width: ${r}` : `min-width: ${l}`
-      }),
-      n,
-      ["table", 0]
+      [
+        "table",
+        qe(this.options.HTMLAttributes, t, {
+          style: r ? `width: ${r}` : `min-width: ${l}`
+        }),
+        n,
+        ["tbody", 0]
+      ]
     ];
   },
   addNodeView() {
@@ -4647,8 +4649,8 @@ const gl = Ne.create({
       )
     }
   );
-}, hn = Ee((e, t) => {
-  const n = S(), { items: r } = e, [l, i] = z(0), a = (s) => {
+}, hn = ze((e, t) => {
+  const n = S(), { items: r } = e, [l, i] = E(0), a = (s) => {
     const d = e.items[s];
     d && e.command({ name: d.name });
   };
@@ -4816,9 +4818,9 @@ function yn({
     }
   );
 }
-const xn = Ee(
+const xn = ze(
   (e, t) => {
-    const n = S(), [r, l] = z(0), i = (c) => {
+    const n = S(), [r, l] = E(0), i = (c) => {
       const u = e.items[c];
       u && e.command(u);
     }, a = () => {
@@ -4832,9 +4834,9 @@ const xn = Ee(
     };
     return V(() => {
       l(0);
-    }, [e.items]), ze(t, () => ({
+    }, [e.items]), Ee(t, () => ({
       onKeyDown: ({ event: c }) => c.key === "ArrowUp" ? (a(), !0) : c.key === "ArrowDown" ? (s(), !0) : c.key === "Enter" ? (d(), !0) : !1
-    })), /* @__PURE__ */ o(gn, { className: "border shadow-2xl w-55 z-[120]", loop: !0, children: /* @__PURE__ */ o(bn, { children: e.loading ? /* @__PURE__ */ m("div", { className: "item loading p-2 text-sm text-muted-foreground flex items-center gap-2", children: [
+    })), /* @__PURE__ */ o(gn, { className: "border shadow-2xl w-55 z-(--notion-editor-z-menu)", loop: !0, children: /* @__PURE__ */ o(bn, { children: e.loading ? /* @__PURE__ */ m("div", { className: "item loading p-2 text-sm text-muted-foreground flex items-center gap-2", children: [
       /* @__PURE__ */ o("span", { className: "loading-dot h-2 w-2 animate-pulse rounded-full bg-foreground" }),
       "Loading…"
     ] }) : e.items.length > 0 ? /* @__PURE__ */ o(vn, { children: e.items.map((c, u) => /* @__PURE__ */ o(
@@ -5053,8 +5055,8 @@ const xl = Ne.create({
       r.title
     );
   }) });
-}, kn = Ee((e, t) => {
-  const n = S(), { items: r, command: l, query: i } = e, [a, s] = z(0), d = F(
+}, kn = ze((e, t) => {
+  const n = S(), { items: r, command: l, query: i } = e, [a, s] = E(0), d = F(
     () => r.flatMap((f) => f.commands),
     [r]
   ), c = Rl(d, i);
@@ -5072,7 +5074,7 @@ const xl = Ne.create({
     const b = d.length;
     b && s((g) => (g + f + b) % b);
   };
-  return ze(t, () => ({
+  return Ee(t, () => ({
     onKeyDown: ({ event: f }) => {
       if (!d.length) return !1;
       switch (f.key) {
@@ -5090,7 +5092,7 @@ const xl = Ne.create({
   })), /* @__PURE__ */ o(
     gn,
     {
-      className: "border shadow-2xl w-55 z-120",
+      className: "border shadow-2xl w-55 z-(--notion-editor-z-menu)",
       shouldFilter: !1,
       value: String(a),
       onValueChange: (f) => s(Number(f)),
@@ -5108,7 +5110,7 @@ const xl = Ne.create({
   );
 });
 kn.displayName = "SlashMenu";
-const El = (e) => ({
+const zl = (e) => ({
   // Phần trang trí bọc dấu "/": chữ gợi ý đi qua data-decoration-content
   // rồi được CSS đọc bằng attr(), nên nó dịch được mà không cần sửa CSS.
   decorationTag: "SlashFilter",
@@ -5154,7 +5156,7 @@ const El = (e) => ({
       onExit: l
     };
   }
-}), zl = dr(ur), Dl = (e) => {
+}), El = dr(ur), Dl = (e) => {
   if (!e.isEmpty) return !1;
   let t = !0;
   return e.state.doc.forEach((n) => {
@@ -5206,7 +5208,7 @@ function Bl(e = {}) {
     Fo,
     Go,
     rr,
-    Eo,
+    zo,
     // Bộ gốc nạp cả CodeBlock "trần" lẫn CodeBlockLowlight ở dưới. Hai
     // extension cùng đăng ký node "codeBlock" nên ProseMirror nhận hai plugin
     // trùng key và ném RangeError ngay lúc dựng editor view.
@@ -5221,7 +5223,7 @@ function Bl(e = {}) {
     tr,
     nr,
     or,
-    xl.configure({ suggestion: El(c) }),
+    xl.configure({ suggestion: zl(c) }),
     Ko.configure({
       placeholder: typeof n == "function" ? n : Pl(
         n ? { ...c, placeholder: { ...c.placeholder, emptyDocument: n } } : c
@@ -5255,7 +5257,7 @@ function Bl(e = {}) {
       HTMLAttributes: { class: "my-custom-divider" }
     }),
     bl.configure({ types: ["paragraph", "heading"], indentSize: 24 }),
-    zo.configure({ lowlight: zl }),
+    Eo.configure({ lowlight: El }),
     hl({ uploadImage: r, uploadAttachment: i })
   ];
   return s && u.push(
@@ -5326,7 +5328,7 @@ function Ba({
   });
   return V(() => {
     T && T.isEditable !== r && T.setEditable(r);
-  }, [T, r]), ze(
+  }, [T, r]), Ee(
     h,
     () => ({
       editor: T,