@blocknote/mantine 0.13.0

package/src/menu/Menu.tsx

@@ -0,0 +1,252 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { HiChevronRight } from "react-icons/hi";
+
+const SubMenuContext = createContext<
+  | {
+      onMenuMouseOver: () => void;
+      onMenuMouseLeave: () => void;
+    }
+  | undefined
+>(undefined);
+
+// https://github.com/orgs/mantinedev/discussions/2307
+// Mantine does not officially support sub menus, so we have to use a workaround
+// which uses an unconventional nesting structure:
+//
+//  Conventional nesting structure (used by Ariakit/ShadCN):
+// <Menu>
+//   <MenuTrigger>
+//     <MenuItem>Find</MenuItem>
+//   </MenuTrigger>
+//   <MenuDropdown>
+//     <MenuItem>Undo</MenuItem>
+//     <MenuItem>Redo</MenuItem>
+//     <Menu>
+//       <MenuTrigger>
+//         <MenuItem>Find</MenuItem>
+//       </MenuTrigger>
+//       <MenuDropdown>
+//         <MenuItem>Find Next</MenuItem>
+//         <MenuItem>Find Previous</MenuItem>
+//       </MenuDropdown>
+//     </Menu>
+//   </MenuDropdown>
+// </Menu>
+//
+//  Required structure for Mantine:
+// <Menu>
+//   <MenuTrigger>
+//       <MenuItem>Find</MenuItem>
+//   </MenuTrigger>
+//   <MenuDropdown>
+//     <MenuItem>Undo</MenuItem>
+//     <MenuItem>Redo</MenuItem>
+//     <MenuItem>
+//       <Menu>
+//         <MenuTrigger>
+//             <div>Find</div>
+//         </MenuTrigger>
+//         <MenuDropdown>
+//           <MenuItem>Find Next</MenuItem>
+//           <MenuItem>Find Previous</MenuItem>
+//         </MenuDropdown>
+//       </Menu>
+//     </MenuItem>
+//   </MenuDropdown>
+// </Menu>
+const SubMenu = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Generic"]["Menu"]["Root"]
+>((props, ref) => {
+  const {
+    children,
+    onOpenChange,
+    position,
+    sub, // not used
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  const [opened, setOpened] = useState(false);
+
+  const menuCloseTimer = useRef<ReturnType<typeof setTimeout> | undefined>();
+
+  const mouseLeave = useCallback(() => {
+    if (menuCloseTimer.current) {
+      clearTimeout(menuCloseTimer.current);
+    }
+    menuCloseTimer.current = setTimeout(() => {
+      setOpened(false);
+    }, 250);
+  }, []);
+
+  const mouseOver = useCallback(() => {
+    if (menuCloseTimer.current) {
+      clearTimeout(menuCloseTimer.current);
+    }
+    setOpened(true);
+  }, []);
+
+  return (
+    <SubMenuContext.Provider
+      value={{
+        onMenuMouseOver: mouseOver,
+        onMenuMouseLeave: mouseLeave,
+      }}>
+      <Mantine.Menu.Item
+        className="bn-menu-item bn-mt-sub-menu-item"
+        ref={ref}
+        onMouseOver={mouseOver}
+        onMouseLeave={mouseLeave}>
+        <Mantine.Menu
+          withinPortal={false}
+          middlewares={{ flip: true, shift: true, inline: false, size: true }}
+          trigger={"hover"}
+          opened={opened}
+          onClose={() => onOpenChange?.(false)}
+          onOpen={() => onOpenChange?.(true)}
+          position={position}>
+          {children}
+        </Mantine.Menu>
+      </Mantine.Menu.Item>
+    </SubMenuContext.Provider>
+  );
+});
+
+export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
+  const { children, onOpenChange, position, sub, ...rest } = props;
+
+  assertEmpty(rest);
+
+  if (sub) {
+    return <SubMenu {...props} />;
+  }
+
+  return (
+    <Mantine.Menu
+      withinPortal={false}
+      middlewares={{ flip: true, shift: true, inline: false, size: true }}
+      onClose={() => onOpenChange?.(false)}
+      onOpen={() => onOpenChange?.(true)}
+      position={position}>
+      {children}
+    </Mantine.Menu>
+  );
+};
+
+export const MenuItem = forwardRef<
+  HTMLButtonElement & HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Item"]
+>((props, ref) => {
+  const { className, children, icon, checked, subTrigger, onClick, ...rest } =
+    props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  if (subTrigger) {
+    return (
+      <div ref={ref} {...rest}>
+        {children}
+        <HiChevronRight size={15} />
+      </div>
+    );
+  }
+
+  return (
+    <Mantine.Menu.Item
+      className={className}
+      ref={ref}
+      leftSection={icon}
+      rightSection={
+        checked ? (
+          <Mantine.CheckIcon size={10} />
+        ) : checked === false ? (
+          <div className={"bn-tick-space"} />
+        ) : null
+      }
+      onClick={onClick}
+      {...rest}>
+      {children}
+    </Mantine.Menu.Item>
+  );
+});
+
+export const MenuTrigger = (
+  props: ComponentProps["Generic"]["Menu"]["Trigger"]
+) => {
+  const {
+    children,
+    sub, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return <Mantine.Menu.Target>{children}</Mantine.Menu.Target>;
+};
+
+export const MenuDropdown = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Dropdown"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    sub, //unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  const ctx = useContext(SubMenuContext);
+
+  return (
+    <Mantine.Menu.Dropdown
+      className={className}
+      ref={ref}
+      onMouseOver={ctx?.onMenuMouseOver}
+      onMouseLeave={ctx?.onMenuMouseLeave}>
+      {children}
+    </Mantine.Menu.Dropdown>
+  );
+});
+
+export const MenuDivider = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Divider"]
+>((props, ref) => {
+  const { className, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return <Mantine.Menu.Divider className={className} ref={ref} />;
+});
+
+export const MenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Menu"]["Label"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.Menu.Label className={className} ref={ref}>
+      {children}
+    </Mantine.Menu.Label>
+  );
+});

package/src/panel/Panel.tsx

@@ -0,0 +1,50 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Panel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    tabs,
+    defaultOpenTab,
+    openTab,
+    setOpenTab,
+    loading,
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.Group className={className} ref={ref}>
+      <Mantine.Tabs
+        value={openTab}
+        defaultValue={defaultOpenTab}
+        onChange={setOpenTab as any}>
+        {loading && <Mantine.LoadingOverlay visible={loading} />}
+
+        <Mantine.Tabs.List>
+          {tabs.map((tab) => (
+            <Mantine.Tabs.Tab
+              data-test={`${tab.name.toLowerCase()}-tab`}
+              value={tab.name}
+              key={tab.name}>
+              {tab.name}
+            </Mantine.Tabs.Tab>
+          ))}
+        </Mantine.Tabs.List>
+
+        {tabs.map((tab) => (
+          <Mantine.Tabs.Panel value={tab.name} key={tab.name}>
+            {tab.tabPanel}
+          </Mantine.Tabs.Panel>
+        ))}
+      </Mantine.Tabs>
+    </Mantine.Group>
+  );
+});

package/src/panel/PanelButton.tsx

@@ -0,0 +1,26 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["ImagePanel"]["Button"]
+>((props, ref) => {
+  const { className, children, onClick, label, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.Button
+      size={"xs"}
+      aria-label={label}
+      className={className}
+      ref={ref}
+      onClick={onClick}
+      {...rest}>
+      {children}
+    </Mantine.Button>
+  );
+});

package/src/panel/PanelFileInput.tsx

@@ -0,0 +1,26 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelFileInput = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["ImagePanel"]["FileInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.FileInput
+      size={"xs"}
+      className={className}
+      ref={ref}
+      value={value}
+      placeholder={placeholder}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+});

package/src/panel/PanelTab.tsx

@@ -0,0 +1,18 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelTab = forwardRef<
+  HTMLDivElement,
+  ComponentProps["ImagePanel"]["TabPanel"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/panel/PanelTextInput.tsx

@@ -0,0 +1,27 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const PanelTextInput = forwardRef<
+  HTMLInputElement,
+  ComponentProps["ImagePanel"]["TextInput"]
+>((props, ref) => {
+  const { className, value, placeholder, onKeyDown, onChange, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.TextInput
+      size={"xs"}
+      data-test={"embed-input"}
+      className={className}
+      ref={ref}
+      value={value}
+      placeholder={placeholder}
+      onKeyDown={onKeyDown}
+      onChange={onChange}
+    />
+  );
+});

package/src/popover/Popover.tsx

@@ -0,0 +1,53 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const Popover = (
+  props: ComponentProps["Generic"]["Popover"]["Root"]
+) => {
+  const { children, opened, position, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.Popover
+      withinPortal={false}
+      zIndex={10000}
+      opened={opened}
+      position={position}>
+      {children}
+    </Mantine.Popover>
+  );
+};
+
+export const PopoverTrigger = (
+  props: ComponentProps["Generic"]["Popover"]["Trigger"]
+) => {
+  const { children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return <Mantine.PopoverTarget>{children}</Mantine.PopoverTarget>;
+};
+
+export const PopoverContent = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Generic"]["Popover"]["Content"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    variant, // unused
+    ...rest
+  } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.PopoverDropdown className={className} ref={ref}>
+      {children}
+    </Mantine.PopoverDropdown>
+  );
+});

package/src/sideMenu/SideMenu.tsx

@@ -0,0 +1,20 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SideMenu = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SideMenu"]["Root"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Mantine.Group align={"center"} gap={0} className={className} ref={ref}>
+      {children}
+    </Mantine.Group>
+  );
+});

package/src/sideMenu/SideMenuButton.tsx

@@ -0,0 +1,57 @@
+import * as Mantine from "@mantine/core";
+
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SideMenuButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["SideMenu"]["Button"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    icon,
+    onClick,
+    onDragEnd,
+    onDragStart,
+    draggable,
+    label,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  if (icon) {
+    return (
+      <Mantine.ActionIcon
+        size={24}
+        className={className}
+        ref={ref}
+        onClick={onClick}
+        onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
+        draggable={draggable}
+        aria-label={label}
+        {...rest}>
+        {icon}
+      </Mantine.ActionIcon>
+    );
+  }
+
+  return (
+    <Mantine.Button
+      className={className}
+      ref={ref}
+      onClick={onClick}
+      onDragEnd={onDragEnd}
+      onDragStart={onDragStart}
+      draggable={draggable}
+      aria-label={label}
+      {...rest}>
+      {children}
+    </Mantine.Button>
+  );
+});