@blocknote/mantine 0.34.0 → 0.36.0

package/dist/blocknote-mantine.js

@@ -1,10 +1,10 @@
 import { jsx as s, jsxs as v } from "react/jsx-runtime";
-import { assertEmpty as d, isSafari as B, mergeCSSClasses as z, COLORS_DEFAULT as ae, COLORS_DARK_MODE_DEFAULT as le } from "@blocknote/core";
-import { mergeRefs as W, useDictionary as ce, FormattingToolbarController as ue, getFormattingToolbarItems as de, FormattingToolbar as me, elementOverflow as q, useBlockNoteContext as fe, usePrefersColorScheme as ge, ComponentsContext as he, BlockNoteViewRaw as be } from "@blocknote/react";
-import { Button as N, ActionIcon as j, Tooltip as Z, Stack as $, Text as w, Group as b, Chip as pe, Divider as ve, Card as J, Skeleton as V, Avatar as Se, TextInput as Q, Menu as S, CheckIcon as X, Tabs as M, LoadingOverlay as ye, FileInput as xe, PopoverDropdown as Ce, PopoverTarget as we, Popover as Te, Badge as Ne, Loader as Y, Flex as ke, MantineProvider as Pe } from "@mantine/core";
-import T, { forwardRef as m, useState as A, useRef as P, useEffect as _, useContext as Me, createContext as Fe, useCallback as E } from "react";
-import { useHover as Oe, useFocusWithin as ee, mergeRefs as R, useFocusTrap as Re } from "@mantine/hooks";
-const te = (e, n, t = !1) => {
+import { assertEmpty as d, isSafari as B, mergeCSSClasses as z, COLORS_DEFAULT as le, COLORS_DARK_MODE_DEFAULT as ce } from "@blocknote/core";
+import { mergeRefs as W, useDictionary as ue, useBlockNoteContext as q, FormattingToolbarController as de, getFormattingToolbarItems as me, FormattingToolbar as fe, elementOverflow as Z, usePrefersColorScheme as ge, ComponentsContext as he, BlockNoteViewRaw as be } from "@blocknote/react";
+import { Button as N, ActionIcon as j, Tooltip as J, Stack as $, Text as w, Group as b, Chip as pe, Divider as ve, Card as Q, Skeleton as V, Avatar as Se, TextInput as X, Menu as S, CheckIcon as Y, Tabs as M, LoadingOverlay as ye, FileInput as xe, PopoverDropdown as Ce, PopoverTarget as we, Popover as Te, Badge as Ne, Loader as ee, Flex as Pe, MantineProvider as ke } from "@mantine/core";
+import T, { forwardRef as m, useState as A, useRef as k, useEffect as _, useContext as Me, createContext as Fe, useCallback as E } from "react";
+import { useHover as Oe, useFocusWithin as te, mergeRefs as R, useFocusTrap as Re } from "@mantine/hooks";
+const ne = (e, n, t = !1) => {
   const o = [];
   function r(i, l = "--bn") {
     for (const a in i) {
@@ -13,7 +13,7 @@ const te = (e, n, t = !1) => {
     }
   }
   return r(e), o;
-}, G = (e, n) => te(e, n), De = {
+}, G = (e, n) => ne(e, n), De = {
   colors: {
     editor: {
       text: void 0,
@@ -83,7 +83,7 @@ const te = (e, n, t = !1) => {
   },
   borderRadius: void 0,
   fontFamily: void 0
-}, Ie = (e) => te(De, e, !0), ne = (e) => /* @__PURE__ */ v($, { gap: 0, className: "bn-tooltip", children: [
+}, Ie = (e) => ne(De, e, !0), oe = (e) => /* @__PURE__ */ v($, { gap: 0, className: "bn-tooltip", children: [
   /* @__PURE__ */ s(w, { size: "sm", lineClamp: 5, children: e.mainTooltip }),
   e.secondaryTooltip && /* @__PURE__ */ s(w, { size: "xs", lineClamp: 5, children: e.secondaryTooltip })
 ] }), D = m(
@@ -102,7 +102,7 @@ const te = (e, n, t = !1) => {
       ...p
     } = e;
     d(p, !1);
-    const [C, y] = A(!1), k = o ? /* @__PURE__ */ s(
+    const [C, y] = A(!1), P = o ? /* @__PURE__ */ s(
       N,
       {
         "aria-label": g,
@@ -146,20 +146,20 @@ const te = (e, n, t = !1) => {
       }
     );
     return r ? /* @__PURE__ */ s(
-      Z,
+      J,
       {
         disabled: C,
         withinPortal: !1,
         label: /* @__PURE__ */ s(
-          ne,
+          oe,
           {
             mainTooltip: r,
             secondaryTooltip: i
           }
         ),
-        children: k
+        children: P
       }
-    ) : k;
+    ) : P;
   }
 ), Le = m((e, n) => {
   const {
@@ -196,12 +196,12 @@ const te = (e, n, t = !1) => {
     }
   );
   return !l || h ? C : /* @__PURE__ */ s(
-    Z,
+    J,
     {
       refProp: "rootRef",
       withinPortal: !1,
       label: /* @__PURE__ */ s(
-        ne,
+        oe,
         {
           mainTooltip: l,
           secondaryTooltip: a
@@ -225,7 +225,7 @@ const te = (e, n, t = !1) => {
     ...c
   } = e;
   d(c, !1);
-  const g = P(null);
+  const g = k(null);
   return _(() => {
     var h;
     i && ((h = g.current) == null || h.scrollIntoView({
@@ -233,7 +233,7 @@ const te = (e, n, t = !1) => {
       block: "center"
     }));
   }, [i]), /* @__PURE__ */ v(
-    J,
+    Q,
     {
       className: z(t, i ? "selected" : ""),
       onFocus: l,
@@ -248,7 +248,7 @@ const te = (e, n, t = !1) => {
   );
 }), ze = m((e, n) => {
   const { className: t, children: o, ...r } = e;
-  return d(r, !1), /* @__PURE__ */ s(J.Section, { className: t, ref: n, children: o });
+  return d(r, !1), /* @__PURE__ */ s(Q.Section, { className: t, ref: n, children: o });
 }), je = m((e, n) => {
   const { className: t, children: o, ...r } = e;
   return d(r, !1), /* @__PURE__ */ s(
@@ -260,7 +260,7 @@ const te = (e, n, t = !1) => {
     }
   );
 }), $e = m((e, n) => {
-  const { authorInfo: t, timeString: o, edited: r, ...i } = e, l = ce();
+  const { authorInfo: t, timeString: o, edited: r, ...i } = e, l = ue();
   return d(i, !1), t === "loading" ? /* @__PURE__ */ v(b, { children: [
     /* @__PURE__ */ s(V, { height: 24, width: 24 }),
     /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s(V, { height: 12, width: 100 }) })
@@ -294,7 +294,7 @@ const te = (e, n, t = !1) => {
     actions: a,
     children: u,
     ...c
-  } = e, { hovered: g, ref: h } = Oe(), { focused: p, ref: C } = ee(), y = W([n, h]);
+  } = e, { hovered: g, ref: h } = Oe(), { focused: p, ref: C } = te(), y = W([n, h]);
   return d(c, !1), /* @__PURE__ */ v(b, { pos: "relative", ref: y, className: t, children: [
     a && (o === !0 || o === void 0 || o === "hover" && g || p) ? /* @__PURE__ */ s(
       b,
@@ -314,7 +314,9 @@ const te = (e, n, t = !1) => {
   ] });
 }), _e = m((e, n) => {
   const { className: t, autoFocus: o, onFocus: r, onBlur: i, editor: l, editable: a, ...u } = e;
-  return d(u, !1), /* @__PURE__ */ s(
+  d(u, !1);
+  const c = q();
+  return /* @__PURE__ */ s(
     Ot,
     {
       autoFocus: o,
@@ -326,11 +328,12 @@ const te = (e, n, t = !1) => {
       filePanel: !1,
       formattingToolbar: !1,
       editable: a,
+      theme: c == null ? void 0 : c.colorSchemePreference,
       ref: n,
       onFocus: r,
       onBlur: i,
       children: /* @__PURE__ */ s(
-        ue,
+        de,
         {
           formattingToolbar: Ve
         }
@@ -338,10 +341,10 @@ const te = (e, n, t = !1) => {
     }
   );
 }), Ve = () => {
-  const e = de([]).filter(
+  const e = me([]).filter(
     (n) => n.key !== "nestBlockButton" && n.key !== "unnestBlockButton"
   );
-  return /* @__PURE__ */ s(me, { blockTypeSelectItems: [], children: e });
+  return /* @__PURE__ */ s(fe, { blockTypeSelectItems: [], children: e });
 }, Ge = m((e, n) => {
   const {
     className: t,
@@ -357,11 +360,11 @@ const te = (e, n, t = !1) => {
     onChange: p,
     onSubmit: C,
     autoComplete: y,
-    rightSection: k,
+    rightSection: P,
     ...x
   } = e;
   return d(x), /* @__PURE__ */ s(
-    Q,
+    X,
     {
       size: "xs",
       className: z(
@@ -375,7 +378,7 @@ const te = (e, n, t = !1) => {
       value: a,
       autoFocus: u,
       "data-autofocus": u ? "true" : void 0,
-      rightSection: k,
+      rightSection: P,
       placeholder: c,
       disabled: g,
       onKeyDown: h,
@@ -385,13 +388,13 @@ const te = (e, n, t = !1) => {
     }
   );
 });
-var oe = {
+var re = {
   color: void 0,
   size: void 0,
   className: void 0,
   style: void 0,
   attr: void 0
-}, H = T.createContext && /* @__PURE__ */ T.createContext(oe), He = ["attr", "size", "title"];
+}, H = T.createContext && /* @__PURE__ */ T.createContext(re), He = ["attr", "size", "title"];
 function Ke(e, n) {
   if (e == null) return {};
   var t = Ue(e, n), o, r;
@@ -460,15 +463,15 @@ function Ze(e, n) {
   }
   return (n === "string" ? String : Number)(e);
 }
-function re(e) {
+function se(e) {
   return e && e.map((n, t) => /* @__PURE__ */ T.createElement(n.tag, O({
     key: t
-  }, n.attr), re(n.child)));
+  }, n.attr), se(n.child)));
 }
-function se(e) {
+function ie(e) {
   return (n) => /* @__PURE__ */ T.createElement(Je, F({
     attr: O({}, e.attr)
-  }, n), re(e.child));
+  }, n), se(e.child));
 }
 function Je(e) {
   var n = (t) => {
@@ -491,15 +494,15 @@ function Je(e) {
       xmlns: "http://www.w3.org/2000/svg"
     }), i && /* @__PURE__ */ T.createElement("title", null, i), e.children);
   };
-  return H !== void 0 ? /* @__PURE__ */ T.createElement(H.Consumer, null, (t) => n(t)) : n(oe);
+  return H !== void 0 ? /* @__PURE__ */ T.createElement(H.Consumer, null, (t) => n(t)) : n(re);
 }
 function Qe(e) {
-  return se({ attr: { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }, child: [] }] })(e);
+  return ie({ attr: { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }, child: [] }] })(e);
 }
 function Xe(e) {
-  return se({ attr: { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }, child: [] }] })(e);
+  return ie({ attr: { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }, child: [] }] })(e);
 }
-const ie = Fe(void 0), Ye = m((e, n) => {
+const ae = Fe(void 0), Ye = m((e, n) => {
   const {
     children: t,
     onOpenChange: o,
@@ -509,7 +512,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     ...l
   } = e;
   d(l);
-  const [a, u] = A(!1), c = P(null), g = P(
+  const [a, u] = A(!1), c = k(null), g = k(
     void 0
   ), h = E(() => {
     g.current && clearTimeout(g.current), g.current = setTimeout(() => {
@@ -519,7 +522,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     g.current && clearTimeout(g.current), u(!0);
   }, []);
   return /* @__PURE__ */ s(
-    ie.Provider,
+    ae.Provider,
     {
       value: {
         onMenuMouseOver: p,
@@ -583,7 +586,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
       className: t,
       ref: n,
       leftSection: r,
-      rightSection: i ? /* @__PURE__ */ s(X, { size: 10 }) : i === !1 ? /* @__PURE__ */ s("div", { className: "bn-tick-space" }) : null,
+      rightSection: i ? /* @__PURE__ */ s(Y, { size: 10 }) : i === !1 ? /* @__PURE__ */ s("div", { className: "bn-tick-space" }) : null,
       onClick: a,
       ...u,
       children: o
@@ -606,7 +609,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     ...i
   } = e;
   d(i);
-  const l = Me(ie);
+  const l = Me(ae);
   return /* @__PURE__ */ s(
     S.Dropdown,
     {
@@ -729,7 +732,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
 }), dt = m((e, n) => {
   const { className: t, value: o, placeholder: r, onKeyDown: i, onChange: l, ...a } = e;
   return d(a), /* @__PURE__ */ s(
-    Q,
+    X,
     {
       size: "xs",
       "data-test": "embed-input",
@@ -828,11 +831,11 @@ const ie = Fe(void 0), Ye = m((e, n) => {
 }), St = m((e, n) => {
   const { className: t, isSelected: o, onClick: r, item: i, id: l, ...a } = e;
   d(a);
-  const u = P(null);
+  const u = k(null);
   return _(() => {
     if (!u.current || !o)
       return;
-    const c = q(
+    const c = Z(
       u.current,
       document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")
       // TODO
@@ -878,7 +881,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
   return d(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: o });
 }), xt = m((e, n) => {
   const { className: t, ...o } = e;
-  return d(o), /* @__PURE__ */ s(Y, { className: t, type: "dots", size: 16, ref: n });
+  return d(o), /* @__PURE__ */ s(ee, { className: t, type: "dots", size: 16, ref: n });
 }), Ct = m((e, n) => {
   const { className: t, children: o, id: r, columns: i, ...l } = e;
   return d(l), /* @__PURE__ */ s(
@@ -906,11 +909,11 @@ const ie = Fe(void 0), Ye = m((e, n) => {
 }), Tt = m((e, n) => {
   const { className: t, isSelected: o, onClick: r, item: i, id: l, ...a } = e;
   d(a);
-  const u = P(null);
+  const u = k(null);
   return _(() => {
     if (!u.current || !o)
       return;
-    const c = q(
+    const c = Z(
       u.current,
       document.querySelector(".bn-grid-suggestion-menu")
     );
@@ -936,7 +939,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     ...i
   } = e;
   return d(i), /* @__PURE__ */ s(
-    Y,
+    ee,
     {
       className: t,
       style: { gridColumn: `1 / ${r + 1}` },
@@ -944,7 +947,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
       ref: n
     }
   );
-}), kt = m((e, n) => {
+}), Pt = m((e, n) => {
   const { children: t, className: o, onMouseDown: r, onClick: i, ...l } = e;
   return d(l, !1), /* @__PURE__ */ s(
     N,
@@ -957,7 +960,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
       children: t
     }
   );
-}), Pt = m((e, n) => {
+}), kt = m((e, n) => {
   const {
     className: t,
     children: o,
@@ -993,9 +996,9 @@ const ie = Fe(void 0), Ye = m((e, n) => {
       ...a
     } = e;
     d(a);
-    const { ref: u, focused: c } = ee(), g = Re(c), h = R(n, u, g);
+    const { ref: u, focused: c } = te(), g = Re(c), h = R(n, u, g);
     return /* @__PURE__ */ s(
-      ke,
+      Pe,
       {
         className: t,
         ref: h,
@@ -1040,7 +1043,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
           {
             onClick: a.onClick,
             leftSection: a.icon,
-            rightSection: a.isSelected ? /* @__PURE__ */ s(X, { size: 10, className: "bn-tick-icon" }) : (
+            rightSection: a.isSelected ? /* @__PURE__ */ s(Y, { size: 10, className: "bn-tick-icon" }) : (
               // Ensures space for tick even if item isn't currently selected.
               /* @__PURE__ */ s("div", { className: "bn-tick-space" })
             ),
@@ -1088,8 +1091,8 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     Loader: xt
   },
   TableHandle: {
-    Root: Pt,
-    ExtendButton: kt
+    Root: kt,
+    ExtendButton: Pt
   },
   Generic: {
     Badge: {
@@ -1131,7 +1134,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
   // Removes button press effect
   activeClassName: ""
 }, Ot = (e) => {
-  const { className: n, theme: t, ...o } = e, r = fe(), i = ge(), l = (r == null ? void 0 : r.colorSchemePreference) || i, a = E(
+  const { className: n, theme: t, ...o } = e, r = q(), i = ge(), l = (r == null ? void 0 : r.colorSchemePreference) || i, a = E(
     (c) => {
       if (c && (Ie(c), typeof t == "object")) {
         if ("light" in t && "dark" in t) {
@@ -1148,7 +1151,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     [l, t]
   ), u = typeof t == "string" ? t : l !== "no-preference" ? l : "light";
   return /* @__PURE__ */ s(he.Provider, { value: Mt, children: /* @__PURE__ */ s(
-    Pe,
+    ke,
     {
       theme: Ft,
       cssVariablesSelector: ".bn-mantine",
@@ -1206,7 +1209,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     shadow: f[2],
     border: f[1],
     sideMenu: f[2],
-    highlights: ae
+    highlights: le
   },
   borderRadius: 6,
   fontFamily: '"Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
@@ -1239,7 +1242,7 @@ const ie = Fe(void 0), Ye = m((e, n) => {
     shadow: f[8],
     border: f[7],
     sideMenu: f[4],
-    highlights: le
+    highlights: ce
   },
   borderRadius: U.borderRadius,
   fontFamily: U.fontFamily