fix: Safari toolbar buttons & dropdowns

packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -3,8 +3,8 @@ import { EditorState, Plugin, PluginKey } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
+import { BlockSchema, InlineContentSchema, StyleSchema } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
 export type FormattingToolbarState = UiElementPosition;

packages/core/src/util/browser.ts

@@ -1,8 +1,8 @@
 export const isAppleOS = () =>
-    typeof navigator !== "undefined" &&
-    (/Mac/.test(navigator.platform) ||
-        (/AppleWebKit/.test(navigator.userAgent) &&
-            /Mobile\/\w+/.test(navigator.userAgent)));
+  typeof navigator !== "undefined" &&
+  (/Mac/.test(navigator.platform) ||
+    (/AppleWebKit/.test(navigator.userAgent) &&
+      /Mobile\/\w+/.test(navigator.userAgent)));
 
 export function formatKeyboardShortcut(shortcut: string) {
   if (isAppleOS()) {
@@ -16,3 +16,5 @@ export function mergeCSSClasses(...classes: string[]) {
   return classes.filter((c) => c).join(" ");
 }
 
+export const isSafari = () =>
+  /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

packages/react/src/components/mantine-shared/Toolbar/ToolbarButton.tsx

@@ -1,7 +1,8 @@
 import { ActionIcon, Button, Tooltip } from "@mantine/core";
-import { ForwardedRef, MouseEvent, forwardRef } from "react";
+import { MouseEvent, forwardRef } from "react";
 import type { IconType } from "react-icons";
 
+import { isSafari } from "@blocknote/core";
 import { TooltipContent } from "../Tooltip/TooltipContent";
 
 export type ToolbarButtonProps = {
@@ -17,8 +18,8 @@ export type ToolbarButtonProps = {
 /**
  * Helper for basic buttons that show in the formatting toolbar.
  */
-export const ToolbarButton = forwardRef(
-  (props: ToolbarButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
+export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (props, ref) => {
     const ButtonIcon = props.icon;
 
     return (
@@ -33,6 +34,13 @@ export const ToolbarButton = forwardRef(
         {/*Creates an ActionIcon instead of a Button if only an icon is provided as content.*/}
         {props.children ? (
           <Button
+            // Needed as Safari doesn't focus button elements on mouse down
+            // unlike other browsers.
+            onMouseDown={(e) => {
+              if (isSafari()) {
+                (e.currentTarget as HTMLButtonElement).focus();
+              }
+            }}
             onClick={props.onClick}
             data-selected={props.isSelected ? "true" : undefined}
             data-test={
@@ -47,6 +55,13 @@ export const ToolbarButton = forwardRef(
           </Button>
         ) : (
           <ActionIcon
+            // Needed as Safari doesn't focus button elements on mouse down
+            // unlike other browsers.
+            onMouseDown={(e) => {
+              if (isSafari()) {
+                (e.currentTarget as HTMLButtonElement).focus();
+              }
+            }}
             onClick={props.onClick}
             data-selected={props.isSelected ? "true" : undefined}
             data-test={

packages/react/src/components/mantine-shared/Toolbar/ToolbarDropdownTarget.tsx

@@ -1,3 +1,4 @@
+import { isSafari } from "@blocknote/core";
 import { Button } from "@mantine/core";
 import { MouseEventHandler, forwardRef } from "react";
 import type { IconType } from "react-icons";
@@ -15,8 +16,16 @@ export const ToolbarDropdownTarget = forwardRef<
   ToolbarDropdownTargetProps
 >((props: ToolbarDropdownTargetProps, ref) => {
   const TargetIcon = props.icon;
+
   return (
     <Button
+      // Needed as Safari doesn't focus button elements on mouse down
+      // unlike other browsers.
+      onMouseDown={(e) => {
+        if (isSafari()) {
+          (e.currentTarget as HTMLButtonElement).focus();
+        }
+      }}
       leftSection={TargetIcon && <TargetIcon size={16} />}
       rightSection={<HiChevronDown />}
       size={"xs"}