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

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

import { COLORS_DARK_MODE_DEFAULT as e, COLORS_DEFAULT as t, assertEmpty as n, isSafari as r, mergeCSSClasses as i } from "@blocknote/core";
import { BlockNoteViewRaw as a, ComponentsContext as o, FormattingToolbar as s, FormattingToolbarController as c, elementOverflow as l, getFormattingToolbarItems as u, mergeRefs as d, useBlockNoteContext as f, useDictionary as p, usePrefersColorScheme as m } from "@blocknote/react";
import { ActionIcon as h, Avatar as g, Badge as _, Button as v, Card as y, CheckIcon as b, Chip as ee, Divider as te, FileInput as ne, Flex as re, Group as x, Loader as S, LoadingOverlay as ie, MantineContext as C, MantineProvider as ae, Menu as w, Popover as oe, PopoverDropdown as se, PopoverTarget as ce, Skeleton as T, Stack as E, Tabs as D, Text as O, TextInput as k, Tooltip as A } from "@mantine/core";
import { createContext as le, forwardRef as j, useCallback as ue, useContext as M, useEffect as N, useRef as P, useState as F } from "react";
import { jsx as I, jsxs as L } from "react/jsx-runtime";
import { mergeRefs as R, useFocusTrap as de, useFocusWithin as z, useHover as B } from "@mantine/hooks";
import { HiChevronDown as V } from "react-icons/hi";
//#region src/BlockNoteTheme.ts
var H = (e, t, n = !1) => {
	let r = [];
	function i(e, r = "--bn") {
		for (let a in e) {
			let o = `${r}-${a.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`;
			typeof e[a] == "object" ? i(e[a], o) : (typeof e[a] == "number" && (e[a] = `${e[a]}px`), n ? t.style.removeProperty(o) : t.style.setProperty(o, e[a].toString()));
		}
	}
	return i(e), r;
}, U = (e, t) => H(e, t), fe = {
	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
}, W = (e) => H(fe, e, !0), G = (e) => /* @__PURE__ */ L(E, {
	gap: 0,
	className: "bn-tooltip",
	children: [/* @__PURE__ */ I(O, {
		size: "sm",
		lineClamp: 5,
		children: e.mainTooltip
	}), e.secondaryTooltip && /* @__PURE__ */ I(O, {
		size: "xs",
		lineClamp: 5,
		children: e.secondaryTooltip
	})]
}), K = j((e, t) => {
	let { className: i, children: a, mainTooltip: o, secondaryTooltip: s, icon: c, isSelected: l, isDisabled: u, onClick: d, label: f, variant: p, ...m } = e;
	n(m, !1);
	let [g, _] = F(!1), y = a ? /* @__PURE__ */ I(v, {
		"aria-label": f,
		className: i,
		onMouseDown: (e) => {
			r() && e.currentTarget.focus();
		},
		onClick: (e) => {
			_(!0), d?.(e);
		},
		onPointerLeave: () => _(!1),
		"aria-pressed": l,
		"data-selected": l || void 0,
		"data-test": o ? o.slice(0, 1).toLowerCase() + o.replace(/\s+/g, "").slice(1) : void 0,
		size: p === "compact" ? "compact-xs" : "xs",
		disabled: u || !1,
		ref: t,
		...m,
		children: a
	}) : /* @__PURE__ */ I(h, {
		className: i,
		"aria-label": f,
		onMouseDown: (e) => {
			r() && e.currentTarget.focus();
		},
		onClick: (e) => {
			_(!0), d?.(e);
		},
		onPointerLeave: () => _(!1),
		"aria-pressed": l,
		"data-selected": l || void 0,
		"data-test": o ? o.slice(0, 1).toLowerCase() + o.replace(/\s+/g, "").slice(1) : void 0,
		size: p === "compact" ? 20 : 30,
		disabled: u || !1,
		ref: t,
		...m,
		children: c
	});
	return o ? /* @__PURE__ */ I(A, {
		disabled: g,
		withinPortal: !1,
		label: /* @__PURE__ */ I(G, {
			mainTooltip: o,
			secondaryTooltip: s
		}),
		children: y
	}) : y;
}), pe = j((e, t) => {
	let { className: r, text: i, icon: a, isSelected: o, mainTooltip: s, secondaryTooltip: c, onClick: l, onMouseEnter: u, ...d } = e;
	n(d, !1);
	let [f, p] = F(!1), m = /* @__PURE__ */ L(ee, {
		className: r,
		checked: o === !0,
		wrapperProps: {
			onMouseEnter: u,
			onMouseLeave: () => p(!1),
			onClick: (e) => {
				p(!0), l?.(e);
			}
		},
		variant: "light",
		icon: null,
		ref: t,
		children: [/* @__PURE__ */ I("span", { children: a }), /* @__PURE__ */ I("span", { children: i })]
	});
	return !s || f ? m : /* @__PURE__ */ I(A, {
		refProp: "rootRef",
		withinPortal: !1,
		label: /* @__PURE__ */ I(G, {
			mainTooltip: s,
			secondaryTooltip: c
		}),
		children: m
	});
}), me = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a), /* @__PURE__ */ I(x, {
		className: r,
		ref: t,
		children: i
	});
}), he = j((e, t) => {
	let { className: r, children: a, headerText: o, selected: s, onFocus: c, onBlur: l, tabIndex: u, ...d } = e;
	return n(d, !1), /* @__PURE__ */ L(y, {
		className: i(r, s ? "selected" : ""),
		onFocus: c,
		onBlur: l,
		tabIndex: u,
		ref: t,
		children: [o && /* @__PURE__ */ I(O, {
			className: "bn-header-text",
			children: o
		}), a]
	});
}), ge = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a, !1), /* @__PURE__ */ I(y.Section, {
		className: r,
		ref: t,
		children: i
	});
}), _e = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a, !1), /* @__PURE__ */ I(te, {
		className: r,
		label: /* @__PURE__ */ I(O, { children: i }),
		ref: t
	});
}), ve = j((e, t) => {
	let { authorInfo: r, timeString: i, edited: a, ...o } = e, s = p();
	return n(o, !1), r === "loading" ? /* @__PURE__ */ L(x, { children: [/* @__PURE__ */ I(T, {
		height: 24,
		width: 24
	}), /* @__PURE__ */ I("div", { children: /* @__PURE__ */ I(T, {
		height: 12,
		width: 100
	}) })] }) : /* @__PURE__ */ L(x, { children: [/* @__PURE__ */ I(g, {
		src: r.avatarUrl,
		alt: r.username,
		radius: "xl",
		size: "sm",
		color: "initials"
	}), /* @__PURE__ */ L(O, {
		fz: "sm",
		fw: "bold",
		children: [r.username, /* @__PURE__ */ L(O, {
			fz: "xs",
			c: "dimmed",
			span: !0,
			ml: "xs",
			children: [
				i,
				" ",
				a && `(${s.comments.edited})`
			]
		})]
	})] });
}), ye = j((e, t) => {
	let { className: r, showActions: i, authorInfo: a, timeString: o, edited: s, actions: c, emojiPickerOpen: l, children: u, ...f } = e, { hovered: p, ref: m } = B(), h = d([t, m]);
	return n(f, !1), /* @__PURE__ */ L(x, {
		pos: "relative",
		ref: h,
		className: r,
		children: [
			c && (i === !0 || i === void 0 || i === "hover" && p || l) ? /* @__PURE__ */ I(x, {
				style: {
					position: "absolute",
					right: 0,
					top: 0,
					zIndex: 10
				},
				children: c
			}) : null,
			/* @__PURE__ */ I(ve, { ...e }),
			u
		]
	});
}), be = j((e, t) => {
	let { className: r, autoFocus: i, onFocus: a, onBlur: o, editor: s, editable: l, ...u } = e;
	n(u, !1);
	let d = f();
	return /* @__PURE__ */ I(Z, {
		autoFocus: i,
		className: r,
		editor: e.editor,
		sideMenu: !1,
		slashMenu: !1,
		tableHandles: !1,
		filePanel: !1,
		formattingToolbar: !1,
		editable: l,
		theme: d?.colorSchemePreference,
		ref: t,
		onFocus: a,
		onBlur: o,
		children: /* @__PURE__ */ I(c, { formattingToolbar: xe })
	});
}), xe = () => /* @__PURE__ */ I(s, {
	blockTypeSelectItems: [],
	children: u([]).filter((e) => e.key !== "nestBlockButton" && e.key !== "unnestBlockButton")
}), Se = j((e, t) => {
	let { className: r, name: a, label: o, variant: s, icon: c, value: l, autoFocus: u, placeholder: d, disabled: f, onKeyDown: p, onChange: m, onSubmit: h, autoComplete: g, "aria-activedescendant": _, rightSection: v, ...y } = e;
	return n(y), /* @__PURE__ */ I(k, {
		size: "xs",
		className: i(r || "", s === "large" ? "bn-mt-input-large" : ""),
		ref: t,
		name: a,
		label: o,
		leftSection: c,
		value: l,
		autoFocus: u,
		"data-autofocus": u ? "true" : void 0,
		rightSection: v,
		placeholder: d,
		disabled: f,
		onKeyDown: p,
		onChange: m,
		onSubmit: h,
		autoComplete: g,
		"aria-activedescendant": _
	});
}), Ce = le(void 0), we = (e) => {
	let { children: t, onOpenChange: r, position: i, sub: a, ...o } = e;
	return n(o), a ? /* @__PURE__ */ I(w.Sub, {
		transitionProps: {
			duration: 250,
			exitDelay: 250
		},
		withinPortal: !1,
		middlewares: {
			flip: !0,
			shift: !0,
			inline: !1,
			size: !0
		},
		onChange: r,
		position: i,
		children: t
	}) : /* @__PURE__ */ I(w, {
		withinPortal: !1,
		middlewares: {
			flip: !0,
			shift: !0,
			inline: !1,
			size: !0
		},
		onChange: r,
		position: i,
		returnFocus: !1,
		children: t
	});
}, Te = j((e, t) => {
	let { className: r, children: i, icon: a, checked: o, subTrigger: s, onClick: c, ...l } = e;
	return n(l, !1), I(s ? w.Sub.Item : w.Item, {
		className: r,
		ref: t,
		leftSection: a,
		rightSection: o ? /* @__PURE__ */ I(b, { size: 10 }) : o === !1 ? /* @__PURE__ */ I("div", { className: "bn-tick-space" }) : null,
		onClick: c,
		...l,
		children: i
	});
}), Ee = (e) => {
	let { children: t, sub: r, ...i } = e;
	return n(i), I(r ? w.Sub.Target : w.Target, { children: t });
}, De = j((e, t) => {
	let { className: r, children: i, sub: a, ...o } = e;
	n(o);
	let s = M(Ce);
	return I(a ? w.Sub.Dropdown : w.Dropdown, {
		className: r,
		ref: t,
		onMouseOver: s?.onMenuMouseOver,
		onMouseLeave: s?.onMenuMouseLeave,
		children: i
	});
}), Oe = j((e, t) => {
	let { className: r, ...i } = e;
	return n(i), /* @__PURE__ */ I(w.Divider, {
		className: r,
		ref: t
	});
}), ke = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a), /* @__PURE__ */ I(w.Label, {
		className: r,
		ref: t,
		children: i
	});
}), Ae = j((e, t) => {
	let { className: r, children: i, icon: a, onClick: o, onDragEnd: s, onDragStart: c, draggable: l, label: u, ...d } = e;
	return n(d, !1), a ? /* @__PURE__ */ I(h, {
		size: 24,
		className: r,
		ref: t,
		onClick: o,
		onDragEnd: s,
		onDragStart: c,
		draggable: l,
		"aria-label": u,
		...d,
		children: a
	}) : /* @__PURE__ */ I(v, {
		className: r,
		ref: t,
		onClick: o,
		onDragEnd: s,
		onDragStart: c,
		draggable: l,
		"aria-label": u,
		...d,
		children: i
	});
}), je = j((e, t) => {
	let { className: r, tabs: i, defaultOpenTab: a, openTab: o, setOpenTab: s, loading: c, ...l } = e;
	return n(l), /* @__PURE__ */ I(x, {
		className: r,
		ref: t,
		children: /* @__PURE__ */ L(D, {
			value: o,
			defaultValue: a,
			onChange: s,
			children: [
				c && /* @__PURE__ */ I(ie, { visible: c }),
				/* @__PURE__ */ I(D.List, { children: i.map((e) => /* @__PURE__ */ I(D.Tab, {
					"data-test": `${e.name.toLowerCase()}-tab`,
					value: e.name,
					children: e.name
				}, e.name)) }),
				i.map((e) => /* @__PURE__ */ I(D.Panel, {
					value: e.name,
					children: e.tabPanel
				}, e.name))
			]
		})
	});
}), Me = j((e, t) => {
	let { className: r, children: i, onClick: a, label: o, ...s } = e;
	return n(s), /* @__PURE__ */ I(v, {
		size: "xs",
		"aria-label": o,
		className: r,
		ref: t,
		onClick: a,
		...s,
		children: i
	});
}), Ne = j((e, t) => {
	let { className: r, accept: i, value: a, placeholder: o, onChange: s, ...c } = e;
	return n(c), /* @__PURE__ */ I(ne, {
		size: "xs",
		className: r,
		ref: t,
		accept: i,
		value: a,
		placeholder: o,
		onChange: s,
		...c
	});
}), Pe = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a), /* @__PURE__ */ I("div", {
		className: r,
		ref: t,
		children: i
	});
}), Fe = j((e, t) => {
	let { className: r, value: i, placeholder: a, onKeyDown: o, onChange: s, ...c } = e;
	return n(c), /* @__PURE__ */ I(k, {
		size: "xs",
		"data-test": "embed-input",
		className: r,
		ref: t,
		value: i,
		placeholder: a,
		onKeyDown: o,
		onChange: s
	});
}), Ie = (e) => {
	let { open: t, onOpenChange: r, position: i, portalRoot: a, children: o, ...s } = e;
	return n(s), /* @__PURE__ */ I(oe, {
		middlewares: { size: { padding: 20 } },
		withinPortal: !!a,
		portalProps: a ? { target: a } : void 0,
		opened: t,
		onChange: r,
		position: i,
		children: o
	});
}, Le = (e) => {
	let { children: t, ...r } = e;
	return n(r), /* @__PURE__ */ I(ce, { children: t });
}, Re = j((e, t) => {
	let { className: r, children: i, variant: a, ...o } = e;
	return n(o), /* @__PURE__ */ I(se, {
		className: r,
		ref: t,
		children: i
	});
}), ze = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a, !1), /* @__PURE__ */ I(x, {
		align: "center",
		gap: 0,
		className: r,
		ref: t,
		...a,
		children: i
	});
}), Be = j((e, t) => {
	let { className: r, children: i, icon: a, onClick: o, onDragEnd: s, onDragStart: c, draggable: l, label: u, ...d } = e;
	return n(d, !1), a ? /* @__PURE__ */ I(h, {
		size: 24,
		className: r,
		ref: t,
		onClick: o,
		onDragEnd: s,
		onDragStart: c,
		draggable: l,
		"aria-label": u,
		...d,
		children: a
	}) : /* @__PURE__ */ I(v, {
		className: r,
		ref: t,
		onClick: o,
		onDragEnd: s,
		onDragStart: c,
		draggable: l,
		"aria-label": u,
		...d,
		children: i
	});
}), Ve = j((e, t) => {
	let { className: r, children: i, id: a, ...o } = e;
	return n(o), /* @__PURE__ */ I(E, {
		gap: 0,
		className: r,
		ref: t,
		id: a,
		role: "listbox",
		children: i
	});
}), He = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a), /* @__PURE__ */ I(x, {
		className: r,
		ref: t,
		children: /* @__PURE__ */ I(x, {
			className: "bn-mt-suggestion-menu-item-title",
			children: i
		})
	});
}), Ue = j((e, t) => {
	let { className: r, isSelected: i, onClick: a, item: o, id: s, ...c } = e;
	n(c);
	let u = P(null);
	return N(() => {
		!u.current || !i || l(u.current, u.current.closest(".bn-suggestion-menu, #ai-suggestion-menu")) !== "none" && u.current.scrollIntoView({ block: "nearest" });
	}, [i]), /* @__PURE__ */ L(x, {
		gap: 0,
		className: r,
		ref: R(t, u),
		id: s,
		role: "option",
		onMouseDown: (e) => e.preventDefault(),
		onClick: a,
		"aria-selected": i || void 0,
		children: [
			o.icon && /* @__PURE__ */ I(x, {
				className: "bn-mt-suggestion-menu-item-section",
				"data-position": "left",
				children: o.icon
			}),
			/* @__PURE__ */ L(E, {
				gap: 0,
				className: "bn-mt-suggestion-menu-item-body",
				children: [/* @__PURE__ */ I(O, {
					className: "bn-mt-suggestion-menu-item-title",
					children: o.title
				}), /* @__PURE__ */ I(O, {
					className: "bn-mt-suggestion-menu-item-subtitle",
					children: o.subtext
				})]
			}),
			o.badge && /* @__PURE__ */ I(x, {
				"data-position": "right",
				className: "bn-mt-suggestion-menu-item-section",
				children: /* @__PURE__ */ I(_, {
					size: "xs",
					children: o.badge
				})
			})
		]
	});
}), We = j((e, t) => {
	let { className: r, children: i, ...a } = e;
	return n(a), /* @__PURE__ */ I(x, {
		className: r,
		ref: t,
		children: i
	});
}), Ge = j((e, t) => {
	let { className: r, ...i } = e;
	return n(i), /* @__PURE__ */ I("div", {
		ref: t,
		children: /* @__PURE__ */ I(S, {
			className: r,
			type: "dots",
			size: 16
		})
	});
}), Ke = j((e, t) => {
	let { className: r, children: i, id: a, columns: o, ...s } = e;
	return n(s), /* @__PURE__ */ I("div", {
		className: r,
		style: { gridTemplateColumns: `repeat(${o}, 1fr)` },
		ref: t,
		id: a,
		role: "grid",
		children: i
	});
}), qe = j((e, t) => {
	let { className: r, children: i, columns: a, ...o } = e;
	return n(o), /* @__PURE__ */ I(x, {
		className: r,
		style: { gridColumn: `1 / ${a + 1}` },
		ref: t,
		children: /* @__PURE__ */ I(x, {
			className: "bn-mt-suggestion-menu-item-title",
			children: i
		})
	});
}), q = j((e, t) => {
	let { className: r, isSelected: i, onClick: a, item: o, id: s, ...c } = e;
	n(c);
	let u = P(null);
	return N(() => {
		!u.current || !i || l(u.current, u.current.closest(".bn-grid-suggestion-menu")) !== "none" && u.current.scrollIntoView({ block: "nearest" });
	}, [i]), /* @__PURE__ */ I("div", {
		className: r,
		ref: R(t, u),
		id: s,
		role: "option",
		onClick: a,
		"aria-selected": i || void 0,
		children: o.icon
	});
}), Je = j((e, t) => {
	let { className: r, children: i, columns: a, ...o } = e;
	return n(o), /* @__PURE__ */ I("div", {
		style: { gridColumn: `1 / ${a + 1}` },
		ref: t,
		children: /* @__PURE__ */ I(S, {
			className: r,
			type: "dots"
		})
	});
}), Ye = j((e, t) => {
	let { children: r, className: i, onMouseDown: a, onClick: o, ...s } = e;
	return n(s, !1), /* @__PURE__ */ I(v, {
		className: i,
		ref: t,
		onMouseDown: a,
		onClick: o,
		...s,
		children: r
	});
}), Xe = j((e, t) => {
	let { className: r, children: i, draggable: a, onDragStart: o, onDragEnd: s, style: c, label: l, ...u } = e;
	return n(u, !1), /* @__PURE__ */ I(v, {
		className: r,
		ref: t,
		"aria-label": l,
		draggable: a,
		onDragStart: o,
		onDragEnd: s,
		style: c,
		...u,
		children: i
	});
}), J = j((e, t) => {
	let { className: r, children: i, onMouseEnter: a, onMouseLeave: o, variant: s, ...c } = e;
	n(c);
	let { ref: l, focused: u } = z();
	return /* @__PURE__ */ I(re, {
		className: r,
		ref: R(t, l, de(u)),
		role: "toolbar",
		onMouseEnter: a,
		onMouseLeave: o,
		gap: s === "action-toolbar" ? 2 : void 0,
		children: i
	});
}), Y = j((e, t) => {
	let { className: i, items: a, isDisabled: o, ...s } = e;
	n(s);
	let c = a.filter((e) => e.isSelected)[0];
	return c ? /* @__PURE__ */ L(w, {
		withinPortal: !1,
		transitionProps: { exitDuration: 0 },
		disabled: o,
		middlewares: {
			flip: !0,
			shift: !0,
			inline: !1,
			size: !0
		},
		children: [/* @__PURE__ */ I(w.Target, { children: /* @__PURE__ */ I(v, {
			onMouseDown: (e) => {
				r() && e.currentTarget.focus();
			},
			leftSection: c.icon,
			rightSection: /* @__PURE__ */ I(V, {}),
			size: "xs",
			variant: "subtle",
			disabled: o,
			children: c.text
		}) }), /* @__PURE__ */ I(w.Dropdown, {
			className: i,
			ref: t,
			children: a.map((e) => /* @__PURE__ */ I(w.Item, {
				onClick: e.onClick,
				leftSection: e.icon,
				rightSection: e.isSelected ? /* @__PURE__ */ I(b, {
					size: 10,
					className: "bn-tick-icon"
				}) : /* @__PURE__ */ I("div", { className: "bn-tick-space" }),
				disabled: e.isDisabled,
				children: e.text
			}, e.text))
		})]
	}) : null;
}), X = {
	FormattingToolbar: {
		Root: J,
		Button: K,
		Select: Y
	},
	FilePanel: {
		Root: je,
		Button: Me,
		FileInput: Ne,
		TabPanel: Pe,
		TextInput: Fe
	},
	GridSuggestionMenu: {
		Root: Ke,
		Item: q,
		EmptyItem: qe,
		Loader: Je
	},
	LinkToolbar: {
		Root: J,
		Button: K,
		Select: Y
	},
	SideMenu: {
		Root: ze,
		Button: Be
	},
	SuggestionMenu: {
		Root: Ve,
		Item: Ue,
		EmptyItem: He,
		Label: We,
		Loader: Ge
	},
	TableHandle: {
		Root: Xe,
		ExtendButton: Ye
	},
	Generic: {
		Badge: {
			Root: pe,
			Group: me
		},
		Form: {
			Root: (e) => /* @__PURE__ */ I("div", { children: e.children }),
			TextInput: Se
		},
		Menu: {
			Root: we,
			Trigger: Ee,
			Dropdown: De,
			Divider: Oe,
			Label: ke,
			Item: Te,
			Button: Ae
		},
		Popover: {
			Root: Ie,
			Trigger: Le,
			Content: Re
		},
		Toolbar: {
			Root: J,
			Button: K,
			Select: Y
		}
	},
	Comments: {
		Comment: ye,
		Editor: be,
		Card: he,
		CardSection: ge,
		ExpandSectionsPrompt: _e
	}
}, Z = (e) => {
	let { className: t, theme: n, editor: r, ...s } = e, c = f(), l = m(), u = c?.colorSchemePreference || l, d = typeof n == "string" ? n : u === "no-preference" ? "light" : u, p = ue((e) => {
		if (e && (W(e), typeof n == "object")) {
			if ("light" in n && "dark" in n) {
				U(n[u === "dark" ? "dark" : "light"], e);
				return;
			}
			U(n, e);
			return;
		}
	}, [u, n]);
	N(() => {
		if (!r.portalElement) throw Error("Portal element not found");
		r.portalElement.setAttribute("data-mantine-color-scheme", d), p(r.portalElement);
	}, [
		r,
		p,
		d
	]);
	let h = M(C), g = /* @__PURE__ */ I(o.Provider, {
		value: X,
		children: /* @__PURE__ */ I(a, {
			"data-mantine-color-scheme": d,
			className: i("bn-mantine", t || ""),
			theme: typeof n == "object" ? void 0 : n,
			editor: r,
			...s,
			ref: p
		})
	});
	return h ? g : /* @__PURE__ */ I(ae, {
		withCssVariables: !1,
		getRootElement: () => void 0,
		children: g
	});
}, Q = [
	"#FFFFFF",
	"#EFEFEF",
	"#CFCFCF",
	"#AFAFAF",
	"#7F7F7F",
	"#3F3F3F",
	"#1F1F1F",
	"#161616",
	"#0F0F0F",
	"#000000"
], $ = {
	colors: {
		editor: {
			text: Q[5],
			background: Q[0]
		},
		menu: {
			text: Q[5],
			background: Q[0]
		},
		tooltip: {
			text: Q[5],
			background: Q[1]
		},
		hovered: {
			text: Q[5],
			background: Q[1]
		},
		selected: {
			text: Q[0],
			background: Q[5]
		},
		disabled: {
			text: Q[3],
			background: Q[1]
		},
		shadow: Q[2],
		border: Q[1],
		sideMenu: Q[2],
		highlights: t
	},
	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"
}, Ze = {
	colors: {
		editor: {
			text: Q[2],
			background: Q[6]
		},
		menu: {
			text: Q[2],
			background: Q[6]
		},
		tooltip: {
			text: Q[2],
			background: Q[7]
		},
		hovered: {
			text: Q[2],
			background: Q[7]
		},
		selected: {
			text: Q[2],
			background: Q[8]
		},
		disabled: {
			text: Q[5],
			background: Q[7]
		},
		shadow: Q[8],
		border: Q[7],
		sideMenu: Q[4],
		highlights: e
	},
	borderRadius: $.borderRadius,
	fontFamily: $.fontFamily
};
//#endregion
export { Z as BlockNoteView, U as applyBlockNoteCSSVariablesFromTheme, X as components, Ze as darkDefaultTheme, Q as defaultColorScheme, $ as lightDefaultTheme, W as removeBlockNoteCSSVariables };

//# sourceMappingURL=blocknote-mantine.js.map