@blocknote/mantine/dist/blocknote-mantine.js

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.

import { jsx as s, jsxs as v } from "react/jsx-runtime";
import { assertEmpty as u, isSafari as R, mergeCSSClasses as B, COLORS_DEFAULT as re, COLORS_DARK_MODE_DEFAULT as se } from "@blocknote/core";
import { mergeRefs as ie, useDictionary as ae, useBlockNoteContext as H, FormattingToolbarController as le, getFormattingToolbarItems as ce, FormattingToolbar as de, elementOverflow as K, usePrefersColorScheme as ue, ComponentsContext as me, BlockNoteViewRaw as ge } from "@blocknote/react";
import { Button as T, ActionIcon as E, Tooltip as U, Stack as L, Text as C, Group as b, Chip as fe, Divider as he, Card as W, Skeleton as $, Avatar as be, TextInput as Z, Menu as p, CheckIcon as z, Tabs as k, LoadingOverlay as pe, FileInput as ve, PopoverDropdown as Se, PopoverTarget as ye, Popover as we, Badge as xe, Loader as q, Flex as Ce, MantineContext as Ne, MantineProvider as Te } from "@mantine/core";
import N, { forwardRef as m, useState as J, useContext as Q, createContext as Pe, useRef as X, useEffect as Y, useCallback as ke } from "react";
import { useHover as Fe, mergeRefs as j, useFocusWithin as Me, useFocusTrap as Oe } from "@mantine/hooks";
const ee = (e, n, t = !1) => {
  const o = [];
  function r(i, a = "--bn") {
    for (const l in i) {
      const c = l.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), d = `${a}-${c}`;
      typeof i[l] != "object" ? (typeof i[l] == "number" && (i[l] = `${i[l]}px`), t ? n.style.removeProperty(d) : n.style.setProperty(d, i[l].toString())) : r(i[l], d);
    }
  }
  return r(e), o;
}, A = (e, n) => ee(e, n), De = {
  colors: {
    editor: {
      text: void 0,
      background: void 0
    },
    menu: {
      text: void 0,
      background: void 0
    },
    tooltip: {
      text: void 0,
      background: void 0
    },
    hovered: {
      text: void 0,
      background: void 0
    },
    selected: {
      text: void 0,
      background: void 0
    },
    disabled: {
      text: void 0,
      background: void 0
    },
    shadow: void 0,
    border: void 0,
    sideMenu: void 0,
    highlights: {
      gray: {
        text: void 0,
        background: void 0
      },
      brown: {
        text: void 0,
        background: void 0
      },
      red: {
        text: void 0,
        background: void 0
      },
      orange: {
        text: void 0,
        background: void 0
      },
      yellow: {
        text: void 0,
        background: void 0
      },
      green: {
        text: void 0,
        background: void 0
      },
      blue: {
        text: void 0,
        background: void 0
      },
      purple: {
        text: void 0,
        background: void 0
      },
      pink: {
        text: void 0,
        background: void 0
      }
    }
  },
  borderRadius: void 0,
  fontFamily: void 0
}, Ie = (e) => ee(De, e, !0), te = (e) => /* @__PURE__ */ v(L, { gap: 0, className: "bn-tooltip", children: [
  /* @__PURE__ */ s(C, { size: "sm", lineClamp: 5, children: e.mainTooltip }),
  e.secondaryTooltip && /* @__PURE__ */ s(C, { size: "xs", lineClamp: 5, children: e.secondaryTooltip })
] }), O = m(
  (e, n) => {
    const {
      className: t,
      children: o,
      mainTooltip: r,
      secondaryTooltip: i,
      icon: a,
      isSelected: l,
      isDisabled: c,
      onClick: d,
      label: f,
      variant: h,
      ...S
    } = e;
    u(S, !1);
    const [x, y] = J(!1), P = o ? /* @__PURE__ */ s(
      T,
      {
        "aria-label": f,
        className: t,
        onMouseDown: (w) => {
          R() && w.currentTarget.focus();
        },
        onClick: (w) => {
          y(!0), d == null || d(w);
        },
        onPointerLeave: () => y(!1),
        "aria-pressed": l,
        "data-selected": l || void 0,
        "data-test": r ? r.slice(0, 1).toLowerCase() + r.replace(/\s+/g, "").slice(1) : void 0,
        size: h === "compact" ? "compact-xs" : "xs",
        disabled: c || !1,
        ref: n,
        ...S,
        children: o
      }
    ) : /* @__PURE__ */ s(
      E,
      {
        className: t,
        "aria-label": f,
        onMouseDown: (w) => {
          R() && w.currentTarget.focus();
        },
        onClick: (w) => {
          y(!0), d == null || d(w);
        },
        onPointerLeave: () => y(!1),
        "aria-pressed": l,
        "data-selected": l || void 0,
        "data-test": r ? r.slice(0, 1).toLowerCase() + r.replace(/\s+/g, "").slice(1) : void 0,
        size: h === "compact" ? 20 : 30,
        disabled: c || !1,
        ref: n,
        ...S,
        children: a
      }
    );
    return r ? /* @__PURE__ */ s(
      U,
      {
        disabled: x,
        withinPortal: !1,
        label: /* @__PURE__ */ s(
          te,
          {
            mainTooltip: r,
            secondaryTooltip: i
          }
        ),
        children: P
      }
    ) : P;
  }
), Re = m((e, n) => {
  const {
    className: t,
    text: o,
    icon: r,
    isSelected: i,
    mainTooltip: a,
    secondaryTooltip: l,
    onClick: c,
    onMouseEnter: d,
    ...f
  } = e;
  u(f, !1);
  const [h, S] = J(!1), x = /* @__PURE__ */ v(
    fe,
    {
      className: t,
      checked: i === !0,
      wrapperProps: {
        onMouseEnter: d,
        onMouseLeave: () => S(!1),
        onClick: (y) => {
          S(!0), c == null || c(y);
        }
      },
      variant: "light",
      icon: null,
      ref: n,
      children: [
        /* @__PURE__ */ s("span", { children: r }),
        /* @__PURE__ */ s("span", { children: o })
      ]
    }
  );
  return !a || h ? x : /* @__PURE__ */ s(
    U,
    {
      refProp: "rootRef",
      withinPortal: !1,
      label: /* @__PURE__ */ s(
        te,
        {
          mainTooltip: a,
          secondaryTooltip: l
        }
      ),
      children: x
    }
  );
}), ze = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: o });
}), Be = m((e, n) => {
  const {
    className: t,
    children: o,
    headerText: r,
    selected: i,
    onFocus: a,
    onBlur: l,
    tabIndex: c,
    ...d
  } = e;
  return u(d, !1), /* @__PURE__ */ v(
    W,
    {
      className: B(t, i ? "selected" : ""),
      onFocus: a,
      onBlur: l,
      tabIndex: c,
      ref: n,
      children: [
        r && /* @__PURE__ */ s(C, { className: "bn-header-text", children: r }),
        o
      ]
    }
  );
}), Ee = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r, !1), /* @__PURE__ */ s(W.Section, { className: t, ref: n, children: o });
}), Le = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r, !1), /* @__PURE__ */ s(
    he,
    {
      className: t,
      label: /* @__PURE__ */ s(C, { children: o }),
      ref: n
    }
  );
}), je = m((e, n) => {
  const { authorInfo: t, timeString: o, edited: r, ...i } = e, a = ae();
  return u(i, !1), t === "loading" ? /* @__PURE__ */ v(b, { children: [
    /* @__PURE__ */ s($, { height: 24, width: 24 }),
    /* @__PURE__ */ s("div", { children: /* @__PURE__ */ s($, { height: 12, width: 100 }) })
  ] }) : /* @__PURE__ */ v(b, { children: [
    /* @__PURE__ */ s(
      be,
      {
        src: t.avatarUrl,
        alt: t.username,
        radius: "xl",
        size: "sm",
        color: "initials"
      }
    ),
    /* @__PURE__ */ v(C, { fz: "sm", fw: "bold", children: [
      t.username,
      /* @__PURE__ */ v(C, { fz: "xs", c: "dimmed", span: !0, ml: "xs", children: [
        o,
        " ",
        r && `(${a.comments.edited})`
      ] })
    ] })
  ] });
}), $e = m((e, n) => {
  const {
    className: t,
    showActions: o,
    authorInfo: r,
    timeString: i,
    edited: a,
    actions: l,
    emojiPickerOpen: c,
    children: d,
    ...f
  } = e, { hovered: h, ref: S } = Fe(), x = ie([n, S]);
  return u(f, !1), /* @__PURE__ */ v(b, { pos: "relative", ref: x, className: t, children: [
    l && (o === !0 || o === void 0 || o === "hover" && h || c) ? /* @__PURE__ */ s(
      b,
      {
        style: {
          position: "absolute",
          right: 0,
          top: 0,
          zIndex: 10
        },
        children: l
      }
    ) : null,
    /* @__PURE__ */ s(je, { ...e }),
    d
  ] });
}), Ae = m((e, n) => {
  const { className: t, autoFocus: o, onFocus: r, onBlur: i, editor: a, editable: l, ...c } = e;
  u(c, !1);
  const d = H();
  return /* @__PURE__ */ s(
    Ft,
    {
      autoFocus: o,
      className: t,
      editor: e.editor,
      sideMenu: !1,
      slashMenu: !1,
      tableHandles: !1,
      filePanel: !1,
      formattingToolbar: !1,
      editable: l,
      theme: d == null ? void 0 : d.colorSchemePreference,
      ref: n,
      onFocus: r,
      onBlur: i,
      children: /* @__PURE__ */ s(
        le,
        {
          formattingToolbar: _e
        }
      )
    }
  );
}), _e = () => {
  const e = ce([]).filter(
    (n) => n.key !== "nestBlockButton" && n.key !== "unnestBlockButton"
  );
  return /* @__PURE__ */ s(de, { blockTypeSelectItems: [], children: e });
}, Ve = m((e, n) => {
  const {
    className: t,
    name: o,
    label: r,
    variant: i,
    icon: a,
    value: l,
    autoFocus: c,
    placeholder: d,
    disabled: f,
    onKeyDown: h,
    onChange: S,
    onSubmit: x,
    autoComplete: y,
    rightSection: P,
    ...w
  } = e;
  return u(w), /* @__PURE__ */ s(
    Z,
    {
      size: "xs",
      className: B(
        t || "",
        i === "large" ? "bn-mt-input-large" : ""
      ),
      ref: n,
      name: o,
      label: r,
      leftSection: a,
      value: l,
      autoFocus: c,
      "data-autofocus": c ? "true" : void 0,
      rightSection: P,
      placeholder: d,
      disabled: f,
      onKeyDown: h,
      onChange: S,
      onSubmit: x,
      autoComplete: y
    }
  );
}), Ge = Pe(void 0), He = (e) => {
  const { children: n, onOpenChange: t, position: o, sub: r, ...i } = e;
  return u(i), r ? /* @__PURE__ */ s(
    p.Sub,
    {
      transitionProps: { duration: 250, exitDelay: 250 },
      withinPortal: !1,
      middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
      onChange: t,
      position: o,
      children: n
    }
  ) : /* @__PURE__ */ s(
    p,
    {
      withinPortal: !1,
      middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
      onChange: t,
      position: o,
      children: n
    }
  );
}, Ke = m((e, n) => {
  const { className: t, children: o, icon: r, checked: i, subTrigger: a, onClick: l, ...c } = e;
  return u(c, !1), a ? /* @__PURE__ */ s(
    p.Sub.Item,
    {
      className: t,
      ref: n,
      leftSection: r,
      rightSection: i ? /* @__PURE__ */ s(z, { size: 10 }) : i === !1 ? /* @__PURE__ */ s("div", { className: "bn-tick-space" }) : null,
      onClick: l,
      ...c,
      children: o
    }
  ) : /* @__PURE__ */ s(
    p.Item,
    {
      className: t,
      ref: n,
      leftSection: r,
      rightSection: i ? /* @__PURE__ */ s(z, { size: 10 }) : i === !1 ? /* @__PURE__ */ s("div", { className: "bn-tick-space" }) : null,
      onClick: l,
      ...c,
      children: o
    }
  );
}), Ue = (e) => {
  const {
    children: n,
    sub: t,
    // unused
    ...o
  } = e;
  return u(o), t ? /* @__PURE__ */ s(p.Sub.Target, { children: n }) : /* @__PURE__ */ s(p.Target, { children: n });
}, We = m((e, n) => {
  const {
    className: t,
    children: o,
    sub: r,
    //unused
    ...i
  } = e;
  u(i);
  const a = Q(Ge);
  return r ? /* @__PURE__ */ s(
    p.Sub.Dropdown,
    {
      className: t,
      ref: n,
      onMouseOver: a == null ? void 0 : a.onMenuMouseOver,
      onMouseLeave: a == null ? void 0 : a.onMenuMouseLeave,
      children: o
    }
  ) : /* @__PURE__ */ s(
    p.Dropdown,
    {
      className: t,
      ref: n,
      onMouseOver: a == null ? void 0 : a.onMenuMouseOver,
      onMouseLeave: a == null ? void 0 : a.onMenuMouseLeave,
      children: o
    }
  );
}), Ze = m((e, n) => {
  const { className: t, ...o } = e;
  return u(o), /* @__PURE__ */ s(p.Divider, { className: t, ref: n });
}), qe = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r), /* @__PURE__ */ s(p.Label, { className: t, ref: n, children: o });
}), Je = m((e, n) => {
  const {
    className: t,
    children: o,
    icon: r,
    onClick: i,
    onDragEnd: a,
    onDragStart: l,
    draggable: c,
    label: d,
    ...f
  } = e;
  return u(f, !1), r ? /* @__PURE__ */ s(
    E,
    {
      size: 24,
      className: t,
      ref: n,
      onClick: i,
      onDragEnd: a,
      onDragStart: l,
      draggable: c,
      "aria-label": d,
      ...f,
      children: r
    }
  ) : /* @__PURE__ */ s(
    T,
    {
      className: t,
      ref: n,
      onClick: i,
      onDragEnd: a,
      onDragStart: l,
      draggable: c,
      "aria-label": d,
      ...f,
      children: o
    }
  );
}), Qe = m((e, n) => {
  const {
    className: t,
    tabs: o,
    defaultOpenTab: r,
    openTab: i,
    setOpenTab: a,
    loading: l,
    ...c
  } = e;
  return u(c), /* @__PURE__ */ s(b, { className: t, ref: n, children: /* @__PURE__ */ v(
    k,
    {
      value: i,
      defaultValue: r,
      onChange: a,
      children: [
        l && /* @__PURE__ */ s(pe, { visible: l }),
        /* @__PURE__ */ s(k.List, { children: o.map((d) => /* @__PURE__ */ s(
          k.Tab,
          {
            "data-test": `${d.name.toLowerCase()}-tab`,
            value: d.name,
            children: d.name
          },
          d.name
        )) }),
        o.map((d) => /* @__PURE__ */ s(k.Panel, { value: d.name, children: d.tabPanel }, d.name))
      ]
    }
  ) });
}), Xe = m((e, n) => {
  const { className: t, children: o, onClick: r, label: i, ...a } = e;
  return u(a), /* @__PURE__ */ s(
    T,
    {
      size: "xs",
      "aria-label": i,
      className: t,
      ref: n,
      onClick: r,
      ...a,
      children: o
    }
  );
}), Ye = m((e, n) => {
  const { className: t, accept: o, value: r, placeholder: i, onChange: a, ...l } = e;
  return u(l), /* @__PURE__ */ s(
    ve,
    {
      size: "xs",
      className: t,
      ref: n,
      accept: o,
      value: r,
      placeholder: i,
      onChange: a,
      ...l
    }
  );
}), et = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r), /* @__PURE__ */ s("div", { className: t, ref: n, children: o });
}), tt = m((e, n) => {
  const { className: t, value: o, placeholder: r, onKeyDown: i, onChange: a, ...l } = e;
  return u(l), /* @__PURE__ */ s(
    Z,
    {
      size: "xs",
      "data-test": "embed-input",
      className: t,
      ref: n,
      value: o,
      placeholder: r,
      onKeyDown: i,
      onChange: a
    }
  );
}), nt = (e) => {
  const { open: n, onOpenChange: t, position: o, children: r, ...i } = e;
  return u(i), /* @__PURE__ */ s(
    we,
    {
      middlewares: { size: { padding: 20 } },
      withinPortal: !1,
      opened: n,
      onChange: t,
      position: o,
      zIndex: 1e4,
      children: r
    }
  );
}, ot = (e) => {
  const { children: n, ...t } = e;
  return u(t), /* @__PURE__ */ s(ye, { children: n });
}, rt = m((e, n) => {
  const {
    className: t,
    children: o,
    variant: r,
    // unused
    ...i
  } = e;
  return u(i), /* @__PURE__ */ s(Se, { className: t, ref: n, children: o });
}), st = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r, !1), /* @__PURE__ */ s(
    b,
    {
      align: "center",
      gap: 0,
      className: t,
      ref: n,
      ...r,
      children: o
    }
  );
}), it = m((e, n) => {
  const {
    className: t,
    children: o,
    icon: r,
    onClick: i,
    onDragEnd: a,
    onDragStart: l,
    draggable: c,
    label: d,
    ...f
  } = e;
  return u(f, !1), r ? /* @__PURE__ */ s(
    E,
    {
      size: 24,
      className: t,
      ref: n,
      onClick: i,
      onDragEnd: a,
      onDragStart: l,
      draggable: c,
      "aria-label": d,
      ...f,
      children: r
    }
  ) : /* @__PURE__ */ s(
    T,
    {
      className: t,
      ref: n,
      onClick: i,
      onDragEnd: a,
      onDragStart: l,
      draggable: c,
      "aria-label": d,
      ...f,
      children: o
    }
  );
}), at = m((e, n) => {
  const { className: t, children: o, id: r, ...i } = e;
  return u(i), /* @__PURE__ */ s(
    L,
    {
      gap: 0,
      className: t,
      ref: n,
      id: r,
      role: "listbox",
      children: o
    }
  );
}), lt = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: /* @__PURE__ */ s(b, { className: "bn-mt-suggestion-menu-item-title", children: o }) });
}), ct = m((e, n) => {
  const { className: t, isSelected: o, onClick: r, item: i, id: a, ...l } = e;
  u(l);
  const c = X(null);
  return Y(() => {
    if (!c.current || !o)
      return;
    const d = K(c.current, c.current.closest(
      ".bn-suggestion-menu, #ai-suggestion-menu"
    ));
    d === "top" ? c.current.scrollIntoView(!0) : d === "bottom" && c.current.scrollIntoView(!1);
  }, [o]), /* @__PURE__ */ v(
    b,
    {
      gap: 0,
      className: t,
      ref: j(n, c),
      id: a,
      role: "option",
      onMouseDown: (d) => d.preventDefault(),
      onClick: r,
      "aria-selected": o || void 0,
      children: [
        i.icon && /* @__PURE__ */ s(
          b,
          {
            className: "bn-mt-suggestion-menu-item-section",
            "data-position": "left",
            children: i.icon
          }
        ),
        /* @__PURE__ */ v(L, { gap: 0, className: "bn-mt-suggestion-menu-item-body", children: [
          /* @__PURE__ */ s(C, { className: "bn-mt-suggestion-menu-item-title", children: i.title }),
          /* @__PURE__ */ s(C, { className: "bn-mt-suggestion-menu-item-subtitle", children: i.subtext })
        ] }),
        i.badge && /* @__PURE__ */ s(
          b,
          {
            "data-position": "right",
            className: "bn-mt-suggestion-menu-item-section",
            children: /* @__PURE__ */ s(xe, { size: "xs", children: i.badge })
          }
        )
      ]
    }
  );
}), dt = m((e, n) => {
  const { className: t, children: o, ...r } = e;
  return u(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: o });
}), ut = m((e, n) => {
  const { className: t, ...o } = e;
  return u(o), /* @__PURE__ */ s(q, { className: t, type: "dots", size: 16, ref: n });
}), mt = m((e, n) => {
  const { className: t, children: o, id: r, columns: i, ...a } = e;
  return u(a), /* @__PURE__ */ s(
    "div",
    {
      className: t,
      style: { gridTemplateColumns: `repeat(${i}, 1fr)` },
      ref: n,
      id: r,
      role: "grid",
      children: o
    }
  );
}), gt = m((e, n) => {
  const { className: t, children: o, columns: r, ...i } = e;
  return u(i), /* @__PURE__ */ s(
    b,
    {
      className: t,
      style: { gridColumn: `1 / ${r + 1}` },
      ref: n,
      children: /* @__PURE__ */ s(b, { className: "bn-mt-suggestion-menu-item-title", children: o })
    }
  );
}), ft = m((e, n) => {
  const { className: t, isSelected: o, onClick: r, item: i, id: a, ...l } = e;
  u(l);
  const c = X(null);
  return Y(() => {
    if (!c.current || !o)
      return;
    const d = K(
      c.current,
      c.current.closest(".bn-grid-suggestion-menu")
    );
    d === "top" ? c.current.scrollIntoView(!0) : d === "bottom" && c.current.scrollIntoView(!1);
  }, [o]), /* @__PURE__ */ s(
    "div",
    {
      className: t,
      ref: j(n, c),
      id: a,
      role: "option",
      onClick: r,
      "aria-selected": o || void 0,
      children: i.icon
    }
  );
}), ht = m((e, n) => {
  const {
    className: t,
    children: o,
    // unused, using "dots" instead
    columns: r,
    ...i
  } = e;
  return u(i), /* @__PURE__ */ s(
    q,
    {
      className: t,
      style: { gridColumn: `1 / ${r + 1}` },
      type: "dots",
      ref: n
    }
  );
}), bt = m((e, n) => {
  const { children: t, className: o, onMouseDown: r, onClick: i, ...a } = e;
  return u(a, !1), /* @__PURE__ */ s(
    T,
    {
      className: o,
      ref: n,
      onMouseDown: r,
      onClick: i,
      ...a,
      children: t
    }
  );
}), pt = m((e, n) => {
  const {
    className: t,
    children: o,
    draggable: r,
    onDragStart: i,
    onDragEnd: a,
    style: l,
    label: c,
    ...d
  } = e;
  return u(d, !1), /* @__PURE__ */ s(
    T,
    {
      className: t,
      ref: n,
      "aria-label": c,
      draggable: r,
      onDragStart: i,
      onDragEnd: a,
      style: l,
      ...d,
      children: o
    }
  );
}), D = m(
  (e, n) => {
    const {
      className: t,
      children: o,
      onMouseEnter: r,
      onMouseLeave: i,
      variant: a,
      ...l
    } = e;
    u(l);
    const { ref: c, focused: d } = Me(), f = Oe(d), h = j(n, c, f);
    return /* @__PURE__ */ s(
      Ce,
      {
        className: t,
        ref: h,
        role: "toolbar",
        onMouseEnter: r,
        onMouseLeave: i,
        gap: a === "action-toolbar" ? 2 : void 0,
        children: o
      }
    );
  }
);
var ne = {
  color: void 0,
  size: void 0,
  className: void 0,
  style: void 0,
  attr: void 0
}, _ = N.createContext && /* @__PURE__ */ N.createContext(ne), vt = ["attr", "size", "title"];
function St(e, n) {
  if (e == null) return {};
  var t = yt(e, n), o, r;
  if (Object.getOwnPropertySymbols) {
    var i = Object.getOwnPropertySymbols(e);
    for (r = 0; r < i.length; r++)
      o = i[r], !(n.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(e, o) && (t[o] = e[o]);
  }
  return t;
}
function yt(e, n) {
  if (e == null) return {};
  var t = {};
  for (var o in e)
    if (Object.prototype.hasOwnProperty.call(e, o)) {
      if (n.indexOf(o) >= 0) continue;
      t[o] = e[o];
    }
  return t;
}
function F() {
  return F = Object.assign ? Object.assign.bind() : function(e) {
    for (var n = 1; n < arguments.length; n++) {
      var t = arguments[n];
      for (var o in t)
        Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
    }
    return e;
  }, F.apply(this, arguments);
}
function V(e, n) {
  var t = Object.keys(e);
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    n && (o = o.filter(function(r) {
      return Object.getOwnPropertyDescriptor(e, r).enumerable;
    })), t.push.apply(t, o);
  }
  return t;
}
function M(e) {
  for (var n = 1; n < arguments.length; n++) {
    var t = arguments[n] != null ? arguments[n] : {};
    n % 2 ? V(Object(t), !0).forEach(function(o) {
      wt(e, o, t[o]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : V(Object(t)).forEach(function(o) {
      Object.defineProperty(e, o, Object.getOwnPropertyDescriptor(t, o));
    });
  }
  return e;
}
function wt(e, n, t) {
  return n = xt(n), n in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
}
function xt(e) {
  var n = Ct(e, "string");
  return typeof n == "symbol" ? n : n + "";
}
function Ct(e, n) {
  if (typeof e != "object" || !e) return e;
  var t = e[Symbol.toPrimitive];
  if (t !== void 0) {
    var o = t.call(e, n);
    if (typeof o != "object") return o;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return (n === "string" ? String : Number)(e);
}
function oe(e) {
  return e && e.map((n, t) => /* @__PURE__ */ N.createElement(n.tag, M({
    key: t
  }, n.attr), oe(n.child)));
}
function Nt(e) {
  return (n) => /* @__PURE__ */ N.createElement(Tt, F({
    attr: M({}, e.attr)
  }, n), oe(e.child));
}
function Tt(e) {
  var n = (t) => {
    var {
      attr: o,
      size: r,
      title: i
    } = e, a = St(e, vt), l = r || t.size || "1em", c;
    return t.className && (c = t.className), e.className && (c = (c ? c + " " : "") + e.className), /* @__PURE__ */ N.createElement("svg", F({
      stroke: "currentColor",
      fill: "currentColor",
      strokeWidth: "0"
    }, t.attr, o, a, {
      className: c,
      style: M(M({
        color: e.color || t.color
      }, t.style), e.style),
      height: l,
      width: l,
      xmlns: "http://www.w3.org/2000/svg"
    }), i && /* @__PURE__ */ N.createElement("title", null, i), e.children);
  };
  return _ !== void 0 ? /* @__PURE__ */ N.createElement(_.Consumer, null, (t) => n(t)) : n(ne);
}
function Pt(e) {
  return Nt({ 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);
}
const I = m((e, n) => {
  const { className: t, items: o, isDisabled: r, ...i } = e;
  u(i);
  const a = o.filter((l) => l.isSelected)[0];
  return a ? /* @__PURE__ */ v(
    p,
    {
      withinPortal: !1,
      transitionProps: {
        exitDuration: 0
      },
      disabled: r,
      middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
      children: [
        /* @__PURE__ */ s(p.Target, { children: /* @__PURE__ */ s(
          T,
          {
            onMouseDown: (l) => {
              R() && l.currentTarget.focus();
            },
            leftSection: a.icon,
            rightSection: /* @__PURE__ */ s(Pt, {}),
            size: "xs",
            variant: "subtle",
            disabled: r,
            children: a.text
          }
        ) }),
        /* @__PURE__ */ s(p.Dropdown, { className: t, ref: n, children: o.map((l) => /* @__PURE__ */ s(
          p.Item,
          {
            onClick: l.onClick,
            leftSection: l.icon,
            rightSection: l.isSelected ? /* @__PURE__ */ s(z, { size: 10, className: "bn-tick-icon" }) : (
              // Ensures space for tick even if item isn't currently selected.
              /* @__PURE__ */ s("div", { className: "bn-tick-space" })
            ),
            disabled: l.isDisabled,
            children: l.text
          },
          l.text
        )) })
      ]
    }
  ) : null;
}), kt = {
  FormattingToolbar: {
    Root: D,
    Button: O,
    Select: I
  },
  FilePanel: {
    Root: Qe,
    Button: Xe,
    FileInput: Ye,
    TabPanel: et,
    TextInput: tt
  },
  GridSuggestionMenu: {
    Root: mt,
    Item: ft,
    EmptyItem: gt,
    Loader: ht
  },
  LinkToolbar: {
    Root: D,
    Button: O,
    Select: I
  },
  SideMenu: {
    Root: st,
    Button: it
  },
  SuggestionMenu: {
    Root: at,
    Item: ct,
    EmptyItem: lt,
    Label: dt,
    Loader: ut
  },
  TableHandle: {
    Root: pt,
    ExtendButton: bt
  },
  Generic: {
    Badge: {
      Root: Re,
      Group: ze
    },
    Form: {
      Root: (e) => /* @__PURE__ */ s("div", { children: e.children }),
      TextInput: Ve
    },
    Menu: {
      Root: He,
      Trigger: Ue,
      Dropdown: We,
      Divider: Ze,
      Label: qe,
      Item: Ke,
      Button: Je
    },
    Popover: {
      Root: nt,
      Trigger: ot,
      Content: rt
    },
    Toolbar: {
      Root: D,
      Button: O,
      Select: I
    }
  },
  Comments: {
    Comment: $e,
    Editor: Ae,
    Card: Be,
    CardSection: Ee,
    ExpandSectionsPrompt: Le
  }
}, Ft = (e) => {
  const { className: n, theme: t, ...o } = e, r = H(), i = ue(), a = (r == null ? void 0 : r.colorSchemePreference) || i, l = ke(
    (h) => {
      if (h && (Ie(h), typeof t == "object")) {
        if ("light" in t && "dark" in t) {
          A(
            t[a === "dark" ? "dark" : "light"],
            h
          );
          return;
        }
        A(t, h);
        return;
      }
    },
    [a, t]
  ), c = Q(Ne), d = typeof t == "string" ? t : a !== "no-preference" ? a : "light", f = /* @__PURE__ */ s(me.Provider, { value: kt, children: /* @__PURE__ */ s(
    ge,
    {
      "data-mantine-color-scheme": d,
      className: B("bn-mantine", n || ""),
      theme: typeof t == "object" ? void 0 : t,
      ...o,
      ref: l
    }
  ) });
  return c ? f : /* @__PURE__ */ s(
    Te,
    {
      withCssVariables: !1,
      getRootElement: () => {
      },
      children: f
    }
  );
}, g = [
  "#FFFFFF",
  "#EFEFEF",
  "#CFCFCF",
  "#AFAFAF",
  "#7F7F7F",
  "#3F3F3F",
  "#1F1F1F",
  "#161616",
  "#0F0F0F",
  "#000000"
], G = {
  colors: {
    editor: {
      text: g[5],
      background: g[0]
    },
    menu: {
      text: g[5],
      background: g[0]
    },
    tooltip: {
      text: g[5],
      background: g[1]
    },
    hovered: {
      text: g[5],
      background: g[1]
    },
    selected: {
      text: g[0],
      background: g[5]
    },
    disabled: {
      text: g[3],
      background: g[1]
    },
    shadow: g[2],
    border: g[1],
    sideMenu: g[2],
    highlights: re
  },
  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'
}, Bt = {
  colors: {
    editor: {
      text: g[2],
      background: g[6]
    },
    menu: {
      text: g[2],
      background: g[6]
    },
    tooltip: {
      text: g[2],
      background: g[7]
    },
    hovered: {
      text: g[2],
      background: g[7]
    },
    selected: {
      text: g[2],
      background: g[8]
    },
    disabled: {
      text: g[5],
      background: g[7]
    },
    shadow: g[8],
    border: g[7],
    sideMenu: g[4],
    highlights: se
  },
  borderRadius: G.borderRadius,
  fontFamily: G.fontFamily
};
export {
  Ft as BlockNoteView,
  A as applyBlockNoteCSSVariablesFromTheme,
  kt as components,
  Bt as darkDefaultTheme,
  g as defaultColorScheme,
  G as lightDefaultTheme,
  Ie as removeBlockNoteCSSVariables
};
//# sourceMappingURL=blocknote-mantine.js.map