fix(ui): commit popover forms through submit, not a key handler

packages/ariakit/src/input/Form.tsx

@@ -4,9 +4,23 @@ import { assertEmpty } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
-  const { children, ...rest } = props;
+  const { children, onSubmit, submitButton, ...rest } = props;
 
   assertEmpty(rest);
 
-  return <AriakitFormProvider>{children}</AriakitFormProvider>;
+  return (
+    <AriakitFormProvider>
+      <form
+        className={"bn-form"}
+        onSubmit={(event) => {
+          // These forms have no action — a real submission would navigate.
+          event.preventDefault();
+          onSubmit?.();
+        }}
+      >
+        {children}
+        {submitButton === "none" ? null : submitButton}
+      </form>
+    </AriakitFormProvider>
+  );
 };

packages/ariakit/src/input/TextInput.tsx

@@ -4,7 +4,7 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useMergeRefs, useAutoFocus } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const TextInput = forwardRef<
@@ -23,7 +23,6 @@ export const TextInput = forwardRef<
     disabled,
     onKeyDown,
     onChange,
-    onSubmit,
     autoComplete,
     "aria-activedescendant": ariaActivedescendant,
     rightSection,
@@ -32,6 +31,10 @@ export const TextInput = forwardRef<
 
   assertEmpty(rest);
 
+  // Rationale in the hook.
+  const inputRef = useAutoFocus<HTMLInputElement>(autoFocus);
+  const setRefs = useMergeRefs([inputRef, ref]);
+
   return (
     <>
       {props.label && <AriakitFormLabel name={name}>{label}</AriakitFormLabel>}
@@ -43,15 +46,13 @@ export const TextInput = forwardRef<
             className || "",
             variant === "large" ? "bn-ak-input-large" : "",
           )}
-          ref={ref}
+          ref={setRefs}
           name={name}
           value={value}
-          autoFocus={autoFocus}
           placeholder={placeholder}
           disabled={disabled}
           onKeyDown={onKeyDown}
           onChange={onChange}
-          onSubmit={onSubmit}
           autoComplete={autoComplete}
           aria-activedescendant={ariaActivedescendant}
         />

packages/ariakit/src/menu/Menu.tsx

@@ -10,22 +10,23 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, preventFocusOnTap } from "@blocknote/react";
 import { createContext, forwardRef, useContext } from "react";
 
-// Hands the `portalElement` prop from `Menu` (the root) down to
-// `MenuDropdown`, where Ariakit takes it.
-const MenuPortalElementContext = createContext<HTMLElement | null>(null);
+// Hands the `portalElement` and `preventFocusOnOpen` props from `Menu` (the
+// root) down to `MenuDropdown`, where Ariakit takes them.
+const MenuRootPropsContext = createContext<{
+  portalElement: HTMLElement | null;
+  preventFocusOnOpen: boolean;
+}>({ portalElement: null, preventFocusOnOpen: false });
 
 export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
   const {
     children,
     onOpenChange,
     position,
     portalElement,
-    // ariakit's `virtualFocus` keeps DOM focus on the editor (roving via
-    // `aria-activedescendant`), so there is no focus to suppress here.
-    preventFocusOnOpen: _preventFocusOnOpen,
+    preventFocusOnOpen,
     sub: _sub, // unused
     ...rest
   } = props;
@@ -38,9 +39,14 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => {
       setOpen={onOpenChange}
       virtualFocus={true}
     >
-      <MenuPortalElementContext.Provider value={portalElement}>
+      <MenuRootPropsContext.Provider
+        value={{
+          portalElement,
+          preventFocusOnOpen: preventFocusOnOpen ?? false,
+        }}
+      >
         {children}
-      </MenuPortalElementContext.Provider>
+      </MenuRootPropsContext.Provider>
     </AriakitMenuProvider>
   );
 };
@@ -58,12 +64,21 @@ export const MenuDropdown = forwardRef<
 
   assertEmpty(rest);
 
-  const portalElement = useContext(MenuPortalElementContext);
+  const { portalElement, preventFocusOnOpen } =
+    useContext(MenuRootPropsContext);
 
   return (
     <AriakitMenu
       unmountOnHide={true}
       className={mergeCSSClasses("bn-ak-menu", className || "")}
+      // `virtualFocus` does not keep DOM focus on the editor: on show, Ariakit
+      // focuses the menu element itself (items then rove via
+      // `aria-activedescendant`), which on the mobile toolbar blurs the editor
+      // and closes the keyboard. A function, not `false`: Ariakit's Menu
+      // treats a falsy prop as "defer to the store", and its MenuButton sets
+      // that store flag on every click, so `false` still focuses the menu.
+      // How-to-test: without the callback, opening the colors menu from the mobile toolbar moves focus into the menu and closes the keyboard (covered by skinFocus, android, ariakit: "opening the colors menu keeps focus in the editor").
+      autoFocusOnShow={preventFocusOnOpen ? () => false : true}
       // Ariakit falls back to a body-appended div for a missing element, so
       // don't portal at all until there is one (editor not mounted yet).
       portal={portalElement !== null}
@@ -84,10 +99,19 @@ export const MenuItem = forwardRef<
 
   assertEmpty(rest);
 
+  // Under `preventFocusOnOpen`, hovering an item (a tap's compat mousemove
+  // included) must not focus the menu.
+  const { preventFocusOnOpen } = useContext(MenuRootPropsContext);
+
   if (subTrigger) {
     return (
       <AriakitMenuButton
-        render={<AriakitMenuItem />}
+        render={
+          <AriakitMenuItem
+            focusOnHover={!preventFocusOnOpen}
+            onMouseDown={preventFocusOnTap}
+          />
+        }
         className={mergeCSSClasses("bn-ak-menu-item", className || "")}
         ref={ref}
         onClick={onClick}
@@ -104,6 +128,10 @@ export const MenuItem = forwardRef<
       className={mergeCSSClasses("bn-ak-menu-item", className || "")}
       ref={ref}
       onClick={onClick}
+      // How-to-test: with hover focus on, tapping a color focuses the menu through the tap's compat mousemove and closes the keyboard (covered by skinFocus, android, ariakit: "picking from the colors menu leaves focus in the editor").
+      focusOnHover={!preventFocusOnOpen}
+      // How-to-test: without the tap guard, tapping a color focuses the item and closes the keyboard (covered by the same case).
+      onMouseDown={preventFocusOnTap}
     >
       {icon}
       {children}

packages/ariakit/src/panel/PanelButton.tsx

@@ -8,12 +8,13 @@ export const PanelButton = forwardRef<
   HTMLButtonElement,
   ComponentProps["FilePanel"]["Button"]
 >((props, ref) => {
-  const { className, children, onClick, label, ...rest } = props;
+  const { className, children, type, onClick, label, ...rest } = props;
 
   assertEmpty(rest);
 
   return (
     <AriakitButton
+      type={type}
       className={mergeCSSClasses("bn-ak-button", className || "")}
       onClick={onClick}
       aria-label={label}

packages/ariakit/src/popover/Popover.tsx

@@ -40,6 +40,13 @@ export const PopoverContent = forwardRef<
         className || "",
         variant === "panel-popover" ? "bn-ak-panel-popover" : "",
       )}
+      // BlockNote owns focus (`useAutoFocus` on the input), so Ariakit's own
+      // autofocus stays off. That hook runs at mount, and Ariakit keeps
+      // popover content mounted while closed: without `unmountOnHide` it ran
+      // once, on the hidden input, and the URL input was never focused.
+      autoFocusOnShow={false}
+      // How-to-test: without it, the link form's URL input never gets focus, desktop and mobile alike: Ariakit keeps the closed popover's content mounted, so the input's `useAutoFocus` fired once, hidden, when the toolbar mounted, and never again on open (covered by skinFocus, android, ariakit: "the link button hands focus to the URL input", and linkToolbar, chromium, ariakit: "Create link").
+      unmountOnHide={true}
       // Ariakit falls back to a body-appended div for a missing element, so
       // don't portal at all until there is one (editor not mounted yet).
       portal={portalElement !== null}
@@ -54,15 +61,8 @@ export const PopoverContent = forwardRef<
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"],
 ) => {
-  const {
-    children,
-    open,
-    onOpenChange,
-    position,
-    portalElement,
-    preventFocusOnOpen: _preventFocusOnOpen, // unused; see Menu.tsx
-    ...rest
-  } = props;
+  const { children, open, onOpenChange, position, portalElement, ...rest } =
+    props;
 
   assertEmpty(rest);
 

packages/ariakit/src/toolbar/ToolbarButton.tsx

@@ -5,11 +5,17 @@ import {
   TooltipProvider as AriakitTooltipProvider,
 } from "@ariakit/react";
 
-import { assertEmpty, isSafari, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef, type MouseEvent } from "react";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps, preventFocusOnTap } from "@blocknote/react";
+import { forwardRef, type HTMLAttributes, type MouseEvent } from "react";
 
-type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"];
+// Ariakit merges its own props into a `render` element: its `createElement`
+// clones the element with the trigger's HTML attributes, handlers and ref,
+// the `React.HTMLAttributes` its `RenderProp` type declares. This button is
+// the render element of the menu and popover triggers, so it receives those
+// on top of the generic Button props.
+type ToolbarButtonProps = ComponentProps["Generic"]["Toolbar"]["Button"] &
+  HTMLAttributes<HTMLButtonElement>;
 
 /**
  * Helper for basic buttons that show in the formatting toolbar.
@@ -27,12 +33,17 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
       onClick,
       label,
       variant: _variant,
+      onMouseDown: triggerMouseDown,
       ...rest
     } = props;
 
-    // false, because rest props can be added by ariakit when button is used as a trigger
-    // assertEmpty in this case is only used at typescript level, not runtime level
-    assertEmpty(rest, false);
+    // Every generic prop is taken above, so only what Ariakit injected may
+    // remain: a forgotten generic prop fails to compile here. Type-level only;
+    // at runtime the injected attributes are expected.
+    assertEmpty(
+      rest as Omit<typeof rest, keyof HTMLAttributes<HTMLButtonElement>>,
+      false,
+    );
 
     return (
       <AriakitTooltipProvider>
@@ -44,19 +55,19 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
                 "bn-ak-button bn-ak-secondary",
                 className || "",
               )}
-              // Needed as Safari doesn't focus button elements on mouse down
-              // unlike other browsers.
+              {...rest}
               onMouseDown={(e: MouseEvent<HTMLButtonElement>) => {
-                if (isSafari()) {
-                  (e.currentTarget as HTMLButtonElement).focus();
-                }
+                // On touch this also keeps the focus-triggered tooltip from
+                // inserting itself mid-tap: the layout shift moved the button
+                // between mousedown and mouseup, and the click never completed.
+                preventFocusOnTap(e);
+                triggerMouseDown?.(e);
               }}
               onClick={onClick}
               aria-pressed={isSelected}
               data-selected={isSelected ? "true" : undefined}
               disabled={isDisabled || false}
               ref={ref}
-              {...rest}
             >
               {icon}
               {children}

packages/ariakit/src/toolbar/ToolbarSelect.tsx

@@ -9,7 +9,7 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, preventFocusOnTap } from "@blocknote/react";
 import { forwardRef } from "react";
 
 export const ToolbarSelect = forwardRef<
@@ -21,7 +21,7 @@ export const ToolbarSelect = forwardRef<
     items,
     isDisabled,
     portalElement,
-    preventFocusOnOpen: _preventFocusOnOpen, // unused; see Menu.tsx
+    preventFocusOnOpen,
     ...rest
   } = props;
 
@@ -38,7 +38,8 @@ export const ToolbarSelect = forwardRef<
       <AriakitSelect
         className={"bn-ak-button bn-ak-secondary"}
         disabled={isDisabled}
-        aria-label="Text alignment"
+        // How-to-test: without it, tapping the block type select focuses the button and closes the keyboard (covered by skinFocus, android, ariakit: "opening the block type select keeps focus in the editor").
+        onMouseDown={preventFocusOnTap}
         render={<AriakitToolbarItem />}
       >
         {selectedItem.icon} {selectedItem.text} <AriakitSelectArrow />
@@ -47,6 +48,10 @@ export const ToolbarSelect = forwardRef<
         className={mergeCSSClasses("bn-ak-popover", className || "")}
         ref={ref}
         gutter={4}
+        // Ariakit's default focuses the listbox on show; on the mobile toolbar
+        // that blurs the editor and closes the keyboard.
+        // How-to-test: without it, opening the block type select focuses the listbox and closes the keyboard (covered by skinFocus, android, ariakit: "opening the block type select keeps focus in the editor").
+        autoFocusOnShow={!preventFocusOnOpen}
         // Ariakit falls back to a body-appended div for a missing element,
         // so don't portal at all until there is one (editor not mounted yet).
         portal={portalElement !== null}
@@ -57,6 +62,13 @@ export const ToolbarSelect = forwardRef<
             className={"bn-ak-select-item"}
             key={option.text}
             value={option.text}
+            // A tap must not focus the option; under `preventFocusOnOpen`,
+            // hovering one (a tap's compat mousemove included) must not focus
+            // the listbox either.
+            // How-to-test: with hover focus on, tapping a block type focuses the listbox through the tap's compat mousemove and closes the keyboard (covered by skinFocus, android, ariakit: "picking from the block type select leaves focus in the editor").
+            focusOnHover={!preventFocusOnOpen}
+            // How-to-test: without the tap guard, tapping a block type focuses the option and closes the keyboard (covered by the same case).
+            onMouseDown={preventFocusOnTap}
           >
             {option.icon}
             {option.text}

packages/core/src/editor/managers/StyleManager.ts

@@ -183,7 +183,13 @@ export class StyleManager<
    */
   public getSelectedLinkUrl() {
     return this.editor.transact((tr) => {
-      return this.getLinkMarkAtPos(tr.selection.from)?.href;
+      // `from + 1` for the same boundary reason as `editLink` below: at the
+      // left edge of a link (e.g. when the whole link is selected), the mark
+      // lookup at `from` itself misses the mark and the link's URL would
+      // incorrectly read as absent.
+      return this.getLinkMarkAtPos(
+        Math.min(tr.selection.from + 1, tr.doc.content.size),
+      )?.href;
     });
   }
 

packages/core/src/i18n/locales/ar.ts

@@ -406,5 +406,6 @@ export const ar: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "موافق",
   },
 };

packages/core/src/i18n/locales/de.ts

@@ -440,5 +440,6 @@ export const de: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Strg",
+    form_submit: "OK",
   },
 };

packages/core/src/i18n/locales/en.ts

@@ -421,5 +421,6 @@ export const en = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "OK",
   },
 };

packages/core/src/i18n/locales/es.ts

@@ -419,5 +419,6 @@ export const es: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Aceptar",
   },
 };

packages/core/src/i18n/locales/fa.ts

@@ -390,5 +390,6 @@ export const fa = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "تأیید",
   },
 };

packages/core/src/i18n/locales/fr.ts

@@ -467,5 +467,6 @@ export const fr: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "OK",
   },
 };