@blocknote/mantine 0.13.5 → 0.14.1

package/src/toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import * as Mantine from "@mantine/core";
+import { Group as MantineGroup } from "@mantine/core";
 
 import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -22,7 +22,7 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
     const combinedRef = mergeRefs(ref, focusRef, trapRef);
 
     return (
-      <Mantine.Group
+      <MantineGroup
         className={className}
         ref={combinedRef}
         role="toolbar"
@@ -30,7 +30,7 @@ export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}>
         {children}
-      </Mantine.Group>
+      </MantineGroup>
     );
   }
 );

package/src/toolbar/ToolbarButton.tsx

@@ -1,4 +1,10 @@
-import * as Mantine from "@mantine/core";
+import {
+  ActionIcon as MantineActionIcon,
+  Button as MantineButton,
+  Stack as MantineStack,
+  Text as MantineText,
+  Tooltip as MantineTooltip,
+} from "@mantine/core";
 
 import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -8,12 +14,12 @@ export const TooltipContent = (props: {
   mainTooltip: string;
   secondaryTooltip?: string;
 }) => (
-  <Mantine.Stack gap={0} className={"bn-tooltip"}>
-    <Mantine.Text size={"sm"}>{props.mainTooltip}</Mantine.Text>
+  <MantineStack gap={0} className={"bn-tooltip"}>
+    <MantineText size={"sm"}>{props.mainTooltip}</MantineText>
     {props.secondaryTooltip && (
-      <Mantine.Text size={"xs"}>{props.secondaryTooltip}</Mantine.Text>
+      <MantineText size={"xs"}>{props.secondaryTooltip}</MantineText>
     )}
-  </Mantine.Stack>
+  </MantineStack>
 );
 
 type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
@@ -42,7 +48,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     assertEmpty(rest, false);
 
     return (
-      <Mantine.Tooltip
+      <MantineTooltip
         withinPortal={false}
         label={
           <TooltipContent
@@ -52,7 +58,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         }>
         {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
         {children ? (
-          <Mantine.Button
+          <MantineButton
             aria-label={label}
             className={className}
             // Needed as Safari doesn't focus button elements on mouse down
@@ -74,9 +80,9 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             ref={ref}
             {...rest}>
             {children}
-          </Mantine.Button>
+          </MantineButton>
         ) : (
-          <Mantine.ActionIcon
+          <MantineActionIcon
             className={className}
             aria-label={label}
             // Needed as Safari doesn't focus button elements on mouse down
@@ -98,9 +104,9 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
             ref={ref}
             {...rest}>
             {icon}
-          </Mantine.ActionIcon>
+          </MantineActionIcon>
         )}
-      </Mantine.Tooltip>
+      </MantineTooltip>
     );
   }
 );

package/src/toolbar/ToolbarSelect.tsx

@@ -1,4 +1,8 @@
-import * as Mantine from "@mantine/core";
+import {
+  Button as MantineButton,
+  CheckIcon as MantineCheckIcon,
+  Menu as MantineMenu,
+} from "@mantine/core";
 
 import { assertEmpty, isSafari } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -21,15 +25,15 @@ export const ToolbarSelect = forwardRef<
   }
 
   return (
-    <Mantine.Menu
+    <MantineMenu
       withinPortal={false}
       transitionProps={{
         exitDuration: 0,
       }}
       disabled={isDisabled}
       middlewares={{ flip: true, shift: true, inline: false, size: true }}>
-      <Mantine.Menu.Target>
-        <Mantine.Button
+      <MantineMenu.Target>
+        <MantineButton
           // Needed as Safari doesn't focus button elements on mouse down
           // unlike other browsers.
           onMouseDown={(e) => {
@@ -43,17 +47,17 @@ export const ToolbarSelect = forwardRef<
           variant={"subtle"}
           disabled={isDisabled}>
           {selectedItem.text}
-        </Mantine.Button>
-      </Mantine.Menu.Target>
-      <Mantine.Menu.Dropdown className={className} ref={ref}>
+        </MantineButton>
+      </MantineMenu.Target>
+      <MantineMenu.Dropdown className={className} ref={ref}>
         {items.map((item) => (
-          <Mantine.Menu.Item
+          <MantineMenu.Item
             key={item.text}
             onClick={item.onClick}
             leftSection={item.icon}
             rightSection={
               item.isSelected ? (
-                <Mantine.CheckIcon size={10} className={"bn-tick-icon"} />
+                <MantineCheckIcon size={10} className={"bn-tick-icon"} />
               ) : (
                 // Ensures space for tick even if item isn't currently selected.
                 <div className={"bn-tick-space"} />
@@ -61,9 +65,9 @@ export const ToolbarSelect = forwardRef<
             }
             disabled={item.isDisabled}>
             {item.text}
-          </Mantine.Menu.Item>
+          </MantineMenu.Item>
         ))}
-      </Mantine.Menu.Dropdown>
-    </Mantine.Menu>
+      </MantineMenu.Dropdown>
+    </MantineMenu>
   );
 });