@blocknote/mantine
Version:
A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
1,257 lines (1,256 loc) • 30.7 kB
JavaScript
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) => {
const o = [];
function r(i, l = "--bn") {
for (const a in i) {
const u = a.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), c = `${l}-${u}`;
typeof i[a] != "object" ? (typeof i[a] == "number" && (i[a] = `${i[a]}px`), t ? n.style.removeProperty(c) : n.style.setProperty(c, i[a].toString())) : r(i[a], c);
}
}
return r(e), o;
}, G = (e, n) => te(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) => te(De, e, !0), ne = (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(
(e, n) => {
const {
className: t,
children: o,
mainTooltip: r,
secondaryTooltip: i,
icon: l,
isSelected: a,
isDisabled: u,
onClick: c,
label: g,
variant: h,
...p
} = e;
d(p, !1);
const [C, y] = A(!1), k = o ? /* @__PURE__ */ s(
N,
{
"aria-label": g,
className: t,
onMouseDown: (x) => {
B() && x.currentTarget.focus();
},
onClick: (x) => {
y(!0), c == null || c(x);
},
onPointerLeave: () => y(!1),
"aria-pressed": a,
"data-selected": a || 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: u || !1,
ref: n,
...p,
children: o
}
) : /* @__PURE__ */ s(
j,
{
className: t,
"aria-label": g,
onMouseDown: (x) => {
B() && x.currentTarget.focus();
},
onClick: (x) => {
y(!0), c == null || c(x);
},
onPointerLeave: () => y(!1),
"aria-pressed": a,
"data-selected": a || void 0,
"data-test": r ? r.slice(0, 1).toLowerCase() + r.replace(/\s+/g, "").slice(1) : void 0,
size: h === "compact" ? 20 : 30,
disabled: u || !1,
ref: n,
...p,
children: l
}
);
return r ? /* @__PURE__ */ s(
Z,
{
disabled: C,
withinPortal: !1,
label: /* @__PURE__ */ s(
ne,
{
mainTooltip: r,
secondaryTooltip: i
}
),
children: k
}
) : k;
}
), Le = m((e, n) => {
const {
className: t,
text: o,
icon: r,
isSelected: i,
mainTooltip: l,
secondaryTooltip: a,
onClick: u,
onMouseEnter: c,
...g
} = e;
d(g, !1);
const [h, p] = A(!1), C = /* @__PURE__ */ v(
pe,
{
className: t,
checked: i === !0,
wrapperProps: {
onMouseEnter: c,
onMouseLeave: () => p(!1),
onClick: (y) => {
p(!0), u == null || u(y);
}
},
variant: "light",
icon: null,
ref: n,
children: [
/* @__PURE__ */ s("span", { children: r }),
/* @__PURE__ */ s("span", { children: o })
]
}
);
return !l || h ? C : /* @__PURE__ */ s(
Z,
{
refProp: "rootRef",
withinPortal: !1,
label: /* @__PURE__ */ s(
ne,
{
mainTooltip: l,
secondaryTooltip: a
}
),
children: C
}
);
}), Be = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: o });
}), Ee = m((e, n) => {
const {
className: t,
children: o,
headerText: r,
selected: i,
onFocus: l,
onBlur: a,
tabIndex: u,
...c
} = e;
d(c, !1);
const g = P(null);
return _(() => {
var h;
i && ((h = g.current) == null || h.scrollIntoView({
behavior: "smooth",
block: "center"
}));
}, [i]), /* @__PURE__ */ v(
J,
{
className: z(t, i ? "selected" : ""),
onFocus: l,
onBlur: a,
tabIndex: u,
ref: W([n, g]),
children: [
r && /* @__PURE__ */ s(w, { className: "bn-header-text", children: r }),
o
]
}
);
}), 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 });
}), je = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r, !1), /* @__PURE__ */ s(
ve,
{
className: t,
label: /* @__PURE__ */ s(w, { children: o }),
ref: n
}
);
}), $e = m((e, n) => {
const { authorInfo: t, timeString: o, edited: r, ...i } = e, l = ce();
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 }) })
] }) : /* @__PURE__ */ v(b, { children: [
/* @__PURE__ */ s(
Se,
{
src: t.avatarUrl,
alt: t.username,
radius: "xl",
size: "sm",
color: "initials"
}
),
/* @__PURE__ */ v(w, { fz: "sm", fw: "bold", children: [
t.username,
/* @__PURE__ */ v(w, { fz: "xs", c: "dimmed", span: !0, ml: "xs", children: [
o,
" ",
r && `(${l.comments.edited})`
] })
] })
] });
}), Ae = m((e, n) => {
const {
className: t,
showActions: o,
authorInfo: r,
timeString: i,
edited: l,
actions: a,
children: u,
...c
} = e, { hovered: g, ref: h } = Oe(), { focused: p, ref: C } = ee(), 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,
{
ref: C,
style: {
position: "absolute",
right: 0,
top: 0,
zIndex: 10
},
children: a
}
) : null,
/* @__PURE__ */ s($e, { ...e }),
u
] });
}), _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(
Ot,
{
autoFocus: o,
className: t,
editor: e.editor,
sideMenu: !1,
slashMenu: !1,
tableHandles: !1,
filePanel: !1,
formattingToolbar: !1,
editable: a,
ref: n,
onFocus: r,
onBlur: i,
children: /* @__PURE__ */ s(
ue,
{
formattingToolbar: Ve
}
)
}
);
}), Ve = () => {
const e = de([]).filter(
(n) => n.key !== "nestBlockButton" && n.key !== "unnestBlockButton"
);
return /* @__PURE__ */ s(me, { blockTypeSelectItems: [], children: e });
}, Ge = m((e, n) => {
const {
className: t,
name: o,
label: r,
variant: i,
icon: l,
value: a,
autoFocus: u,
placeholder: c,
disabled: g,
onKeyDown: h,
onChange: p,
onSubmit: C,
autoComplete: y,
rightSection: k,
...x
} = e;
return d(x), /* @__PURE__ */ s(
Q,
{
size: "xs",
className: z(
t || "",
i === "large" ? "bn-mt-input-large" : ""
),
ref: n,
name: o,
label: r,
leftSection: l,
value: a,
autoFocus: u,
"data-autofocus": u ? "true" : void 0,
rightSection: k,
placeholder: c,
disabled: g,
onKeyDown: h,
onChange: p,
onSubmit: C,
autoComplete: y
}
);
});
var oe = {
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"];
function Ke(e, n) {
if (e == null) return {};
var t = Ue(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 Ue(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 K(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 O(e) {
for (var n = 1; n < arguments.length; n++) {
var t = arguments[n] != null ? arguments[n] : {};
n % 2 ? K(Object(t), !0).forEach(function(o) {
We(e, o, t[o]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : K(Object(t)).forEach(function(o) {
Object.defineProperty(e, o, Object.getOwnPropertyDescriptor(t, o));
});
}
return e;
}
function We(e, n, t) {
return n = qe(n), n in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
}
function qe(e) {
var n = Ze(e, "string");
return typeof n == "symbol" ? n : n + "";
}
function Ze(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 re(e) {
return e && e.map((n, t) => /* @__PURE__ */ T.createElement(n.tag, O({
key: t
}, n.attr), re(n.child)));
}
function se(e) {
return (n) => /* @__PURE__ */ T.createElement(Je, F({
attr: O({}, e.attr)
}, n), re(e.child));
}
function Je(e) {
var n = (t) => {
var {
attr: o,
size: r,
title: i
} = e, l = Ke(e, He), a = r || t.size || "1em", u;
return t.className && (u = t.className), e.className && (u = (u ? u + " " : "") + e.className), /* @__PURE__ */ T.createElement("svg", F({
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0"
}, t.attr, o, l, {
className: u,
style: O(O({
color: e.color || t.color
}, t.style), e.style),
height: a,
width: a,
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);
}
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);
}
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);
}
const ie = Fe(void 0), Ye = m((e, n) => {
const {
children: t,
onOpenChange: o,
position: r,
sub: i,
// not used
...l
} = e;
d(l);
const [a, u] = A(!1), c = P(null), g = P(
void 0
), h = E(() => {
g.current && clearTimeout(g.current), g.current = setTimeout(() => {
u(!1);
}, 250);
}, []), p = E(() => {
g.current && clearTimeout(g.current), u(!0);
}, []);
return /* @__PURE__ */ s(
ie.Provider,
{
value: {
onMenuMouseOver: p,
onMenuMouseLeave: h
},
children: /* @__PURE__ */ s(
S.Item,
{
className: "bn-menu-item bn-mt-sub-menu-item",
ref: R(n, c),
onMouseOver: p,
onMouseLeave: h,
children: /* @__PURE__ */ s(
S,
{
portalProps: {
target: c.current ? c.current.parentElement : void 0
},
middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
trigger: "hover",
opened: a,
onChange: o,
position: r,
children: t
}
)
}
)
}
);
}), et = (e) => {
const { children: n, onOpenChange: t, position: o, sub: r, ...i } = e;
return d(i), r ? /* @__PURE__ */ s(Ye, { ...e }) : /* @__PURE__ */ s(
S,
{
withinPortal: !1,
middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
onChange: t,
position: o,
children: n
}
);
}, tt = m((e, n) => {
const { className: t, children: o, icon: r, checked: i, subTrigger: l, onClick: a, ...u } = e;
return d(u, !1), l ? /* @__PURE__ */ v(
"div",
{
onClick: (c) => {
c.preventDefault(), c.stopPropagation();
},
ref: n,
...u,
children: [
o,
/* @__PURE__ */ s(Xe, { size: 15 })
]
}
) : /* @__PURE__ */ s(
S.Item,
{
className: t,
ref: n,
leftSection: r,
rightSection: i ? /* @__PURE__ */ s(X, { size: 10 }) : i === !1 ? /* @__PURE__ */ s("div", { className: "bn-tick-space" }) : null,
onClick: a,
...u,
children: o
}
);
}), nt = (e) => {
const {
children: n,
sub: t,
// unused
...o
} = e;
return d(o), /* @__PURE__ */ s(S.Target, { children: n });
}, ot = m((e, n) => {
const {
className: t,
children: o,
sub: r,
//unused
...i
} = e;
d(i);
const l = Me(ie);
return /* @__PURE__ */ s(
S.Dropdown,
{
className: t,
ref: n,
onMouseOver: l == null ? void 0 : l.onMenuMouseOver,
onMouseLeave: l == null ? void 0 : l.onMenuMouseLeave,
children: o
}
);
}), rt = m((e, n) => {
const { className: t, ...o } = e;
return d(o), /* @__PURE__ */ s(S.Divider, { className: t, ref: n });
}), st = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r), /* @__PURE__ */ s(S.Label, { className: t, ref: n, children: o });
}), it = m((e, n) => {
const {
className: t,
children: o,
icon: r,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
label: c,
...g
} = e;
return d(g, !1), r ? /* @__PURE__ */ s(
j,
{
size: 24,
className: t,
ref: n,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
"aria-label": c,
...g,
children: r
}
) : /* @__PURE__ */ s(
N,
{
className: t,
ref: n,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
"aria-label": c,
...g,
children: o
}
);
}), at = m((e, n) => {
const {
className: t,
tabs: o,
defaultOpenTab: r,
openTab: i,
setOpenTab: l,
loading: a,
...u
} = e;
return d(u), /* @__PURE__ */ s(b, { className: t, ref: n, children: /* @__PURE__ */ v(
M,
{
value: i,
defaultValue: r,
onChange: l,
children: [
a && /* @__PURE__ */ s(ye, { visible: a }),
/* @__PURE__ */ s(M.List, { children: o.map((c) => /* @__PURE__ */ s(
M.Tab,
{
"data-test": `${c.name.toLowerCase()}-tab`,
value: c.name,
children: c.name
},
c.name
)) }),
o.map((c) => /* @__PURE__ */ s(M.Panel, { value: c.name, children: c.tabPanel }, c.name))
]
}
) });
}), lt = m((e, n) => {
const { className: t, children: o, onClick: r, label: i, ...l } = e;
return d(l), /* @__PURE__ */ s(
N,
{
size: "xs",
"aria-label": i,
className: t,
ref: n,
onClick: r,
...l,
children: o
}
);
}), ct = m((e, n) => {
const { className: t, accept: o, value: r, placeholder: i, onChange: l, ...a } = e;
return d(a), /* @__PURE__ */ s(
xe,
{
size: "xs",
className: t,
ref: n,
accept: o,
value: r,
placeholder: i,
onChange: l,
...a
}
);
}), ut = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r), /* @__PURE__ */ s("div", { className: t, ref: n, children: o });
}), dt = m((e, n) => {
const { className: t, value: o, placeholder: r, onKeyDown: i, onChange: l, ...a } = e;
return d(a), /* @__PURE__ */ s(
Q,
{
size: "xs",
"data-test": "embed-input",
className: t,
ref: n,
value: o,
placeholder: r,
onKeyDown: i,
onChange: l
}
);
}), mt = (e) => {
const { opened: n, position: t, children: o, ...r } = e;
return d(r), /* @__PURE__ */ s(Te, { withinPortal: !1, opened: n, position: t, children: o });
}, ft = (e) => {
const { children: n, ...t } = e;
return d(t), /* @__PURE__ */ s(we, { children: n });
}, gt = m((e, n) => {
const {
className: t,
children: o,
variant: r,
// unused
...i
} = e;
return d(i), /* @__PURE__ */ s(Ce, { className: t, ref: n, children: o });
}), ht = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r, !1), /* @__PURE__ */ s(
b,
{
align: "center",
gap: 0,
className: t,
ref: n,
...r,
children: o
}
);
}), bt = m((e, n) => {
const {
className: t,
children: o,
icon: r,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
label: c,
...g
} = e;
return d(g, !1), r ? /* @__PURE__ */ s(
j,
{
size: 24,
className: t,
ref: n,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
"aria-label": c,
...g,
children: r
}
) : /* @__PURE__ */ s(
N,
{
className: t,
ref: n,
onClick: i,
onDragEnd: l,
onDragStart: a,
draggable: u,
"aria-label": c,
...g,
children: o
}
);
}), pt = m((e, n) => {
const { className: t, children: o, id: r, ...i } = e;
return d(i), /* @__PURE__ */ s(
$,
{
gap: 0,
className: t,
ref: n,
id: r,
role: "listbox",
children: o
}
);
}), vt = m((e, n) => {
const { className: t, children: o, ...r } = e;
return d(r), /* @__PURE__ */ s(b, { className: t, ref: n, children: /* @__PURE__ */ s(b, { className: "bn-mt-suggestion-menu-item-title", children: o }) });
}), St = m((e, n) => {
const { className: t, isSelected: o, onClick: r, item: i, id: l, ...a } = e;
d(a);
const u = P(null);
return _(() => {
if (!u.current || !o)
return;
const c = q(
u.current,
document.querySelector(".bn-suggestion-menu, #ai-suggestion-menu")
// TODO
);
c === "top" ? u.current.scrollIntoView(!0) : c === "bottom" && u.current.scrollIntoView(!1);
}, [o]), /* @__PURE__ */ v(
b,
{
gap: 0,
className: t,
ref: R(n, u),
id: l,
role: "option",
onMouseDown: (c) => c.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($, { gap: 0, className: "bn-mt-suggestion-menu-item-body", children: [
/* @__PURE__ */ s(w, { className: "bn-mt-suggestion-menu-item-title", children: i.title }),
/* @__PURE__ */ s(w, { 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(Ne, { size: "xs", children: i.badge })
}
)
]
}
);
}), yt = m((e, n) => {
const { className: t, children: o, ...r } = e;
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 });
}), Ct = m((e, n) => {
const { className: t, children: o, id: r, columns: i, ...l } = e;
return d(l), /* @__PURE__ */ s(
"div",
{
className: t,
style: { gridTemplateColumns: `repeat(${i}, 1fr)` },
ref: n,
id: r,
role: "grid",
children: o
}
);
}), wt = m((e, n) => {
const { className: t, children: o, columns: r, ...i } = e;
return d(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 })
}
);
}), Tt = m((e, n) => {
const { className: t, isSelected: o, onClick: r, item: i, id: l, ...a } = e;
d(a);
const u = P(null);
return _(() => {
if (!u.current || !o)
return;
const c = q(
u.current,
document.querySelector(".bn-grid-suggestion-menu")
);
c === "top" ? u.current.scrollIntoView(!0) : c === "bottom" && u.current.scrollIntoView(!1);
}, [o]), /* @__PURE__ */ s(
"div",
{
className: t,
ref: R(n, u),
id: l,
role: "option",
onClick: r,
"aria-selected": o || void 0,
children: i.icon
}
);
}), Nt = m((e, n) => {
const {
className: t,
children: o,
// unused, using "dots" instead
columns: r,
...i
} = e;
return d(i), /* @__PURE__ */ s(
Y,
{
className: t,
style: { gridColumn: `1 / ${r + 1}` },
type: "dots",
ref: n
}
);
}), kt = m((e, n) => {
const { children: t, className: o, onMouseDown: r, onClick: i, ...l } = e;
return d(l, !1), /* @__PURE__ */ s(
N,
{
className: o,
ref: n,
onMouseDown: r,
onClick: i,
...l,
children: t
}
);
}), Pt = m((e, n) => {
const {
className: t,
children: o,
draggable: r,
onDragStart: i,
onDragEnd: l,
style: a,
label: u,
...c
} = e;
return d(c, !1), /* @__PURE__ */ s(
N,
{
className: t,
ref: n,
"aria-label": u,
draggable: r,
onDragStart: i,
onDragEnd: l,
style: a,
...c,
children: o
}
);
}), I = m(
(e, n) => {
const {
className: t,
children: o,
onMouseEnter: r,
onMouseLeave: i,
variant: l,
...a
} = e;
d(a);
const { ref: u, focused: c } = ee(), g = Re(c), h = R(n, u, g);
return /* @__PURE__ */ s(
ke,
{
className: t,
ref: h,
role: "toolbar",
onMouseEnter: r,
onMouseLeave: i,
gap: l === "action-toolbar" ? 2 : void 0,
children: o
}
);
}
), L = m((e, n) => {
const { className: t, items: o, isDisabled: r, ...i } = e;
d(i);
const l = o.filter((a) => a.isSelected)[0];
return l ? /* @__PURE__ */ v(
S,
{
withinPortal: !1,
transitionProps: {
exitDuration: 0
},
disabled: r,
middlewares: { flip: !0, shift: !0, inline: !1, size: !0 },
children: [
/* @__PURE__ */ s(S.Target, { children: /* @__PURE__ */ s(
N,
{
onMouseDown: (a) => {
B() && a.currentTarget.focus();
},
leftSection: l.icon,
rightSection: /* @__PURE__ */ s(Qe, {}),
size: "xs",
variant: "subtle",
disabled: r,
children: l.text
}
) }),
/* @__PURE__ */ s(S.Dropdown, { className: t, ref: n, children: o.map((a) => /* @__PURE__ */ s(
S.Item,
{
onClick: a.onClick,
leftSection: a.icon,
rightSection: a.isSelected ? /* @__PURE__ */ s(X, { 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: a.isDisabled,
children: a.text
},
a.text
)) })
]
}
) : null;
}), Mt = {
FormattingToolbar: {
Root: I,
Button: D,
Select: L
},
FilePanel: {
Root: at,
Button: lt,
FileInput: ct,
TabPanel: ut,
TextInput: dt
},
GridSuggestionMenu: {
Root: Ct,
Item: Tt,
EmptyItem: wt,
Loader: Nt
},
LinkToolbar: {
Root: I,
Button: D,
Select: L
},
SideMenu: {
Root: ht,
Button: bt
},
SuggestionMenu: {
Root: pt,
Item: St,
EmptyItem: vt,
Label: yt,
Loader: xt
},
TableHandle: {
Root: Pt,
ExtendButton: kt
},
Generic: {
Badge: {
Root: Le,
Group: Be
},
Form: {
Root: (e) => /* @__PURE__ */ s("div", { children: e.children }),
TextInput: Ge
},
Menu: {
Root: et,
Trigger: nt,
Dropdown: ot,
Divider: rt,
Label: st,
Item: tt,
Button: it
},
Popover: {
Root: mt,
Trigger: ft,
Content: gt
},
Toolbar: {
Root: I,
Button: D,
Select: L
}
},
Comments: {
Comment: Ae,
Editor: _e,
Card: Ee,
CardSection: ze,
ExpandSectionsPrompt: je
}
}, Ft = {
// 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(
(c) => {
if (c && (Ie(c), typeof t == "object")) {
if ("light" in t && "dark" in t) {
G(
t[l === "dark" ? "dark" : "light"],
c
);
return;
}
G(t, c);
return;
}
},
[l, t]
), u = typeof t == "string" ? t : l !== "no-preference" ? l : "light";
return /* @__PURE__ */ s(he.Provider, { value: Mt, children: /* @__PURE__ */ s(
Pe,
{
theme: Ft,
cssVariablesSelector: ".bn-mantine",
getRootElement: () => {
},
children: /* @__PURE__ */ s(
be,
{
"data-mantine-color-scheme": u,
className: z("bn-mantine", n || ""),
theme: typeof t == "object" ? void 0 : t,
...o,
ref: a
}
)
}
) });
}, f = [
"#FFFFFF",
"#EFEFEF",
"#CFCFCF",
"#AFAFAF",
"#7F7F7F",
"#3F3F3F",
"#1F1F1F",
"#161616",
"#0F0F0F",
"#000000"
], U = {
colors: {
editor: {
text: f[5],
background: f[0]
},
menu: {
text: f[5],
background: f[0]
},
tooltip: {
text: f[5],
background: f[1]
},
hovered: {
text: f[5],
background: f[1]
},
selected: {
text: f[0],
background: f[5]
},
disabled: {
text: f[3],
background: f[1]
},
shadow: f[2],
border: f[1],
sideMenu: f[2],
highlights: ae
},
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'
}, zt = {
colors: {
editor: {
text: f[2],
background: f[6]
},
menu: {
text: f[2],
background: f[6]
},
tooltip: {
text: f[2],
background: f[7]
},
hovered: {
text: f[2],
background: f[7]
},
selected: {
text: f[2],
background: f[8]
},
disabled: {
text: f[5],
background: f[7]
},
shadow: f[8],
border: f[7],
sideMenu: f[4],
highlights: le
},
borderRadius: U.borderRadius,
fontFamily: U.fontFamily
};
export {
Ot as BlockNoteView,
G as applyBlockNoteCSSVariablesFromTheme,
Mt as components,
zt as darkDefaultTheme,
f as defaultColorScheme,
U as lightDefaultTheme,
Ie as removeBlockNoteCSSVariables
};
//# sourceMappingURL=blocknote-mantine.js.map