test(device): local emulator layer — real Chrome/Gboard as normal CI

.env.sample

@@ -1,2 +1,2 @@
 export NX_SELF_HOSTED_REMOTE_CACHE_SERVER=https://cache.nickthesick.com
-export NX_SELF_HOSTED_REMOTE_CACHE_ACCESS_TOKEN=g8@ucL8em4*Z9TKXDY9OEX@!upf^Nz9
+export NX_SELF_HOSTED_REMOTE_CACHE_ACCESS_TOKEN=

.github/workflows/emulator-tests.yml

@@ -0,0 +1,112 @@
+name: Emulator tests
+
+# The OS-emulator layer of the device suite (tests/device/): real Chrome and
+# real Gboard on an Android emulator, and real iOS Safari on a simulator via
+# Appium/XCUITest — driving flows no browser emulation can, including pressing
+# the on-screen keyboard's IME action key. Free minutes, no credentials, so it
+# runs as normal CI. See tests/device/README.md.
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+concurrency:
+  group: emulator-tests-${{ github.ref }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+permissions:
+  contents: read
+
+env:
+  FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true
+
+jobs:
+  android-emulator:
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - uses: voidzero-dev/setup-vp@313600b80b104eadebb9111787d37a2e83e014ca # v1.17.0
+        with:
+          node-version-file: ".node-version"
+          cache: true
+
+      - name: Install dependencies
+        run: vp install
+
+      - name: Enable KVM group perms
+        run: |
+          echo 'KERNEL=="kvm", GROUP="kvm", MODE="0666", OPTIONS+="static_node=kvm"' | sudo tee /etc/udev/rules.d/99-kvm4all.rules
+          sudo udevadm control --reload-rules
+          sudo udevadm trigger --name-match=kvm
+
+      - name: Start playground dev server
+        run: |
+          vp run dev &
+          for _ in $(seq 1 120); do
+            if curl -sf http://127.0.0.1:5173/ > /dev/null; then exit 0; fi
+            sleep 2
+          done
+          echo "playground dev server never came up" >&2
+          exit 1
+
+      - name: Run device suite on the emulator
+        uses: reactivecircus/android-emulator-runner@a421e43855164a8197daf9d8d40fe71c6996bb0d # v2.38.0
+        with:
+          api-level: 35
+          arch: x86_64
+          target: google_apis
+          emulator-options: -no-snapshot-save -no-window -gpu swiftshader_indirect -no-audio -no-boot-anim
+          disable-animations: true
+          script: DEVICE_FILTER=local-android vp run test:device
+
+      - name: Upload screenshots
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
+        with:
+          name: emulator-test-screenshots
+          path: tests/device/.artifacts/
+          if-no-files-found: ignore
+
+  ios-simulator:
+    runs-on: macos-15
+    timeout-minutes: 45
+    steps:
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - uses: voidzero-dev/setup-vp@313600b80b104eadebb9111787d37a2e83e014ca # v1.17.0
+        with:
+          node-version-file: ".node-version"
+          cache: true
+
+      - name: Install dependencies
+        run: vp install
+
+      - name: Start playground dev server
+        run: |
+          vp run dev &
+          for _ in $(seq 1 120); do
+            if curl -sf http://127.0.0.1:5173/ > /dev/null; then exit 0; fi
+            sleep 2
+          done
+          echo "playground dev server never came up" >&2
+          exit 1
+
+      - name: Run device suite on the simulator
+        run: DEVICE_FILTER=local-ios vp run test:device
+
+      - name: Upload screenshots
+        if: always()
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7
+        with:
+          name: simulator-test-screenshots
+          path: tests/device/.artifacts/
+          if-no-files-found: ignore

package.json

@@ -36,6 +36,7 @@
     "prestart": "vp run build",
     "start": "vp run --filter @blocknote/example-editor preview",
     "test": "vp run --filter \"@blocknote/*\" --filter \"docs\" test",
+    "test:device": "vp -C tests exec vitest run --config device/vitest.config.mts",
     "format": "vp fmt",
     "prepare": "vp config"
   },

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/extensions/tiptap-extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts

@@ -1,6 +1,7 @@
 import { Extension } from "@tiptap/core";
 import { Fragment, Node } from "prosemirror-model";
-import { TextSelection } from "prosemirror-state";
+import { Plugin, PluginKey, TextSelection } from "prosemirror-state";
+import type { EditorView } from "prosemirror-view";
 
 import {
   getBottomNestedBlockInfo,
@@ -22,15 +23,98 @@ import {
   getBlockInfoFromSelection,
 } from "../../../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import { isAndroid } from "../../../util/browser.js";
 import { FilePanelExtension } from "../../FilePanel/FilePanel.js";
 import { FormattingToolbarExtension } from "../../FormattingToolbar/FormattingToolbar.js";
 
+/**
+ * Runs the keymap chain for an Enter that never reached it (see the
+ * `blockNoteAndroidEnter` plugin below): flushes pending DOM observations
+ * first, then dispatches a synthesized Enter keydown through
+ * `handleKeyDown`.
+ */
+function dispatchSynthesizedEnter(view: EditorView, shiftKey: boolean): void {
+  (
+    view as EditorView & {
+      domObserver: { forceFlush(): void };
+    }
+  ).domObserver.forceFlush();
+  view.someProp("handleKeyDown", (handler) =>
+    handler(
+      view,
+      new KeyboardEvent("keydown", {
+        key: "Enter",
+        code: "Enter",
+        shiftKey,
+      }),
+    ),
+  );
+}
+
 export const KeyboardShortcutsExtension = Extension.create<{
   editor: BlockNoteEditor<any, any, any>;
   tabBehavior: "prefer-navigate-ui" | "prefer-indent";
 }>({
   priority: 50,
 
+  addProseMirrorPlugins() {
+    return [
+      // On Android, Enter never reaches the keymap: the IME delivers it as a
+      // `beforeinput` (the keydown is keyCode 229), and prosemirror-view
+      // additionally ignores Enter keydowns on Android Chrome. ProseMirror's
+      // fallback — parsing the browser's native DOM split and synthesizing an
+      // Enter key event — fails to recognize the split in BlockNote's nested
+      // block DOM and corrupts the document instead (Enter inserting a space,
+      // doing nothing, or breaking tables — TypeCellOS/BlockNote#3001).
+      // Intercepting the `beforeinput` and running the keymap chain directly
+      // bypasses the fragile DOM diffing entirely.
+      new Plugin({
+        key: new PluginKey("blockNoteAndroidEnter"),
+        props: {
+          // Runs the keymap chain for an Enter that prosemirror-view's
+          // Android keydown bail skipped, with the parity that bail also
+          // skips: force-flushing pending DOM observations (including
+          // selection changes) before running key handlers — without it the
+          // synthesized Enter can run against a stale selection (e.g. a
+          // just-made cross-block selection that hasn't synced yet).
+          handleKeyPress: (view, event) => {
+            // A keypress for Enter only happens off a hardware/synthetic
+            // keyboard (the IME path is keyCode 229 + `beforeinput`, no
+            // keypress — handled below). prosemirror-view's own keypress
+            // handler would cancel the browser default for cross-block
+            // selections without doing anything (its cross-parent branch
+            // calls preventDefault but skips newline characters), turning
+            // Enter into a silent no-op — so take over before it runs.
+            if (!isAndroid() || view.composing || event.key !== "Enter") {
+              return false;
+            }
+            dispatchSynthesizedEnter(view, event.shiftKey);
+            return true;
+          },
+          handleDOMEvents: {
+            beforeinput: (view, event) => {
+              if (!isAndroid() || view.composing) {
+                return false;
+              }
+              if (
+                event.inputType !== "insertParagraph" &&
+                event.inputType !== "insertLineBreak"
+              ) {
+                return false;
+              }
+              event.preventDefault();
+              dispatchSynthesizedEnter(
+                view,
+                event.inputType === "insertLineBreak",
+              );
+              return true;
+            },
+          },
+        },
+      }),
+    ];
+  },
+
   // TODO: The shortcuts need a refactor. Do we want to use a command priority
   //  design as there is now, or clump the logic into a single function?
   addKeyboardShortcuts() {

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