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

packages/ariakit/src/input/Form.tsx

@@ -1,12 +1,36 @@
 import { FormProvider as AriakitFormProvider } from "@ariakit/react";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
-  const { children, ...rest } = props;
+  const { children, onSubmit, omitSubmitButton, ...rest } = props;
+  const dict = useDictionary();
 
   assertEmpty(rest);
 
-  return <AriakitFormProvider>{children}</AriakitFormProvider>;
+  return (
+    <AriakitFormProvider>
+      <form
+        onSubmit={(event) => {
+          // These forms have no action — a real submission would navigate.
+          event.preventDefault();
+          onSubmit?.();
+        }}
+      >
+        {children}
+        {/*
+          Gives the form a submit button, which is what makes Enter submit it at
+          all once a caller renders more than one field (see the `onSubmit`
+          contract in `ComponentsContext`). Visually hidden rather than absent,
+          so assistive technology still has a labelled control to activate.
+        */}
+        {!omitSubmitButton && (
+          <button className={"bn-form-submit"} tabIndex={-1} type={"submit"}>
+            {dict.generic.form_submit}
+          </button>
+        )}
+      </form>
+    </AriakitFormProvider>
+  );
 };

packages/ariakit/src/input/TextInput.tsx

@@ -4,8 +4,8 @@ import {
 } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { forwardRef } from "react";
+import { ComponentProps, useMergeRefs } from "@blocknote/react";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const TextInput = forwardRef<
   HTMLInputElement,
@@ -23,7 +23,6 @@ export const TextInput = forwardRef<
     disabled,
     onKeyDown,
     onChange,
-    onSubmit,
     autoComplete,
     "aria-activedescendant": ariaActivedescendant,
     rightSection,
@@ -32,6 +31,19 @@ export const TextInput = forwardRef<
 
   assertEmpty(rest);
 
+  // Focus with `preventScroll`, rather than the native `autofocus`: these
+  // inputs live in popovers that floating-ui positions *after* mount, so the
+  // browser's scroll-into-view runs while the popover is still at its
+  // pre-positioned spot and yanks the page (on mobile, right out from under
+  // the block being edited).
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const setRefs = useMergeRefs([inputRef, ref]);
+  useEffect(() => {
+    if (autoFocus) {
+      inputRef.current?.focus({ preventScroll: true });
+    }
+  }, [autoFocus]);
+
   return (
     <>
       {props.label && <AriakitFormLabel name={name}>{label}</AriakitFormLabel>}
@@ -43,15 +55,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/style.css

@@ -433,3 +433,23 @@
 .bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt {
   color: var(--bn-colors-selected-text);
 }
+
+/* The submit button `Form.Root` renders so that Enter reaches the form
+ * regardless of how many fields a popover has. It carries no visual design of
+ * its own - the popovers commit on Enter - but it stays in the accessibility
+ * tree with a real label, so screen readers and voice control have a submit
+ * control to operate. It is out of the tab order: keeping a control nobody can
+ * see as a tab stop would strand sighted keyboard users on invisible focus,
+ * and Enter already submits for them.
+ */
+.bn-form-submit {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

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

@@ -183,7 +183,26 @@ export class StyleManager<
    */
   public getSelectedLinkUrl() {
     return this.editor.transact((tr) => {
-      return this.getLinkMarkAtPos(tr.selection.from)?.href;
+      const { from, to, empty } = tr.selection;
+      if (empty) {
+        return this.getLinkMarkAtPos(from)?.href;
+      }
+      // For a non-empty selection, probing a single boundary position is
+      // fragile twice over: `marks()` excludes a link at its left edge, and
+      // browsers disagree by a position on where a selection over a link
+      // starts. Scan the selected range for the first link mark instead.
+      let href: string | undefined;
+      tr.doc.nodesBetween(from, to, (node) => {
+        if (href !== undefined) {
+          return false;
+        }
+        const linkMark = node.marks.find((mark) => mark.type.name === "link");
+        if (linkMark) {
+          href = linkMark.attrs.href;
+        }
+        return href === undefined;
+      });
+      return 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: "Absenden",
   },
 };

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

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

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

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

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: "Envoyer",
   },
 };

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

@@ -421,5 +421,6 @@ export const he: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "שליחה",
   },
 };

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

@@ -435,5 +435,6 @@ export const hr: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Pošalji",
   },
 };

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

@@ -435,5 +435,6 @@ export const is: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Senda",
   },
 };

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

@@ -443,5 +443,6 @@ export const it: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Invia",
   },
 };

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

@@ -461,5 +461,6 @@ export const ja: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "送信",
   },
 };

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

@@ -434,5 +434,6 @@ export const ko: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "제출",
   },
 };

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

@@ -422,5 +422,6 @@ export const nl: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Verzenden",
   },
 };

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

@@ -439,5 +439,6 @@ export const no: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Send inn",
   },
 };

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

@@ -412,5 +412,6 @@ export const pl: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Wyślij",
   },
 };

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

@@ -414,5 +414,6 @@ export const pt: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Enviar",
   },
 };

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

@@ -465,5 +465,6 @@ export const ru: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Отправить",
   },
 };

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

@@ -419,5 +419,6 @@ export const sk = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Odoslať",
   },
 };

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

@@ -445,5 +445,6 @@ export const uk: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Надіслати",
   },
 };

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

@@ -455,5 +455,6 @@ export const uz: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Yuborish",
   },
 };

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

@@ -420,5 +420,6 @@ export const vi: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "Gửi",
   },
 };

packages/core/src/i18n/locales/zh-tw.ts

@@ -462,5 +462,6 @@ export const zhTW: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "提交",
   },
 };

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

@@ -462,5 +462,6 @@ export const zh: Dictionary = {
   },
   generic: {
     ctrl_shortcut: "Ctrl",
+    form_submit: "提交",
   },
 };

packages/mantine/src/blocknoteStyles.css

@@ -257,6 +257,19 @@ on touch devices (e.g. the mobile formatting toolbar). */
   font-size: 12px;
 }
 
+/* On touch devices, enlarge the form-popover inputs (e.g. the link popover's
+   URL field). The 16px font-size is load-bearing: iOS Safari auto-zooms the
+   page when focusing an input with a smaller computed font-size, and that zoom
+   perturbs the visual viewport the mobile toolbar positions itself from. The
+   taller min-height also gives a comfortable tap target. */
+@media (pointer: coarse) {
+  .bn-form-popover .mantine-TextInput-input,
+  .bn-form-popover .mantine-FileInput-input {
+    font-size: 16px;
+    min-height: 40px;
+  }
+}
+
 .bn-form-popover .mantine-FileInput-input:hover {
   background-color: var(--bn-colors-hovered-background);
 }
@@ -806,3 +819,23 @@ we just don't display it in CSS instead. */
 .bn-mantine .bn-badge .mantine-Chip-iconWrapper {
   display: none;
 }
+
+/* The submit button `Form.Root` renders so that Enter reaches the form
+ * regardless of how many fields a popover has. It carries no visual design of
+ * its own - the popovers commit on Enter - but it stays in the accessibility
+ * tree with a real label, so screen readers and voice control have a submit
+ * control to operate. It is out of the tab order: keeping a control nobody can
+ * see as a tab stop would strand sighted keyboard users on invisible focus,
+ * and Enter already submits for them.
+ */
+.bn-form-submit {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

packages/mantine/src/components.tsx

@@ -3,6 +3,7 @@ import { Badge, BadgeGroup } from "./badge/Badge.js";
 import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
+import { Form } from "./form/Form.js";
 import { TextInput } from "./form/TextInput.js";
 import {
   Menu,
@@ -89,7 +90,7 @@ export const components: Components = {
       Group: BadgeGroup,
     },
     Form: {
-      Root: (props) => <div>{props.children}</div>,
+      Root: Form,
       TextInput: TextInput,
     },
     Menu: {