fix(ui): drop the composition guard — native submission already handles IMEs

The guard answered the wrong category of problem. `isComposing` checks are
needed in *keydown* handlers, because an IME-consumed key still dispatches
to JS — that is what the five removed Enter handlers were. Native form
submission never sees that key: the IME consumes the confirming Enter (it
reaches the page as keyCode 229, which the browser runs no default action
for), so implicit submission cannot fire mid-composition. This is why no
plain form on the web carries composition handling.

The state the guard defended — composition open, unconsumed trusted Enter
delivered — is one only CDP emulation can fabricate: `imeSetComposition`
sets composition state with no IME in the loop to consume the key. No real
IME produces the sequence. Worse, the guard carried real risk in the other
direction: Gboard's action key commits the composition and submits in one
press, so if any IME delivers `submit` before `compositionend`, the guard
would swallow a legitimate submission — the original bug, reintroduced for
exactly the users it claimed to protect.

`Form.Root` goes back to plain `preventDefault` wiring, `useFormSubmit` is
deleted, and the composition tests now pin the *native* contract against
the real popover: accepting a candidate does not submit, Enter afterwards
does.

Author: YousefED

packages/ariakit/src/input/Form.tsx

@@ -1,18 +1,23 @@
 import { FormProvider as AriakitFormProvider } from "@ariakit/react";
 
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, useDictionary, useFormSubmit } from "@blocknote/react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
   const { children, onSubmit, omitSubmitButton, ...rest } = props;
   const dict = useDictionary();
-  const formProps = useFormSubmit(onSubmit);
 
   assertEmpty(rest);
 
   return (
     <AriakitFormProvider>
-      <form {...formProps}>
+      <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

packages/mantine/src/form/Form.tsx

@@ -1,15 +1,20 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, useDictionary, useFormSubmit } from "@blocknote/react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
   const { children, onSubmit, omitSubmitButton, ...rest } = props;
   const dict = useDictionary();
-  const formProps = useFormSubmit(onSubmit);
 
   assertEmpty(rest);
 
   return (
-    <form {...formProps}>
+    <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

packages/react/src/hooks/useFormSubmit.ts

@@ -136,7 +136,6 @@ export * from "./hooks/useCreateBlockNote.js";
 export * from "./hooks/useEditorChange.js";
 export * from "./hooks/useEditorFocus.js";
 export * from "./hooks/useEditorFocusChange.js";
-export * from "./hooks/useFormSubmit.js";
 export * from "./hooks/useEditorDomElement.js";
 export * from "./hooks/useEditorSelectionBoundingBox.js";
 export * from "./hooks/useEditorSelectionChange.js";

packages/react/src/index.ts

@@ -1,15 +1,20 @@
 import { assertEmpty } from "@blocknote/core";
-import { ComponentProps, useDictionary, useFormSubmit } from "@blocknote/react";
+import { ComponentProps, useDictionary } from "@blocknote/react";
 
 export const Form = (props: ComponentProps["Generic"]["Form"]["Root"]) => {
   const { children, onSubmit, omitSubmitButton, ...rest } = props;
   const dict = useDictionary();
-  const formProps = useFormSubmit(onSubmit);
 
   assertEmpty(rest);
 
   return (
-    <form {...formProps}>
+    <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

packages/shadcn/src/form/Form.tsx

@@ -3,15 +3,23 @@ import { browserName, commands, userEvent } from "../../utils/context.js";
 import type { ImeCompositionCommand } from "../../utils/imeComposition.js";
 
 /**
- * Every popover Enter handler used to guard on `isComposing`, so that Enter
- * pressed to accept an IME candidate committed the candidate instead of the
- * form. Those handlers are gone — submission now runs off the form's `submit`
- * event — which moves the question to the platform: can a composition-ending
- * Enter reach a form as an implicit submission?
+ * Why the popover forms need no composition guard.
  *
- * If it can, dropping the guards regressed CJK input everywhere, and the
- * guards have to come back at the form level. So it is asserted rather than
- * assumed.
+ * The Enter handlers that `Form.Root`'s submit path replaced all guarded on
+ * `isComposing` — necessary for a *keydown* handler, because the keydown for
+ * an IME-consumed key still dispatches to JS. Native form submission is a
+ * different category: the IME consumes the confirming Enter (it reaches the
+ * page as keyCode 229, which the browser runs no default action for), so
+ * implicit submission never fires mid-composition. This is why no plain
+ * `<form onSubmit>` in the world carries composition handling.
+ *
+ * These tests pin the two halves of that contract on the real IME event
+ * sequence. What they deliberately do *not* do is inject a bare Enter while
+ * composition is held open: CDP can fabricate that state, and the browser
+ * does submit on it, but no real IME delivers an unconsumed Enter
+ * mid-composition — and guarding against the fabricated state would mean
+ * betting that every IME fires `compositionend` before the submit it
+ * triggers, or a Gboard-style single-press commit-and-submit gets swallowed.
  */
 
 const browserCommands = commands as typeof commands & {
@@ -34,15 +42,8 @@ function buildForm() {
   form = document.createElement("form");
   const submits: string[] = [];
   const compositions: string[] = [];
-  // Mirrors what `useFormSubmit` wires onto a real `Form.Root`.
-  let composing = false;
-  form.addEventListener("compositionstart", () => (composing = true));
-  form.addEventListener("compositionend", () => (composing = false));
   form.addEventListener("submit", (event) => {
     event.preventDefault();
-    if (composing) {
-      return;
-    }
     submits.push("submit");
   });
 
@@ -67,13 +68,14 @@ function buildForm() {
   return { input, submits, compositions };
 }
 
-describeIme("Enter during an IME composition", () => {
+describeIme("IME composition and form submission", () => {
   test("accepting a candidate does not submit the form", async () => {
+    // The real accept path: the IME replaces the composition with the final
+    // text (`insertText`), and the confirming key never reaches the page as
+    // an actionable Enter — so nothing submits, natively.
     const { input, submits, compositions } = buildForm();
     input.focus();
 
-    // Accepting a candidate the way an IME does: the final text replaces the
-    // composing text, and the confirming key never reaches the page.
     await browserCommands.imeComposition([
       { type: "setComposition", text: "にほん" },
       { type: "commit", text: "日本" },
@@ -87,36 +89,6 @@ describeIme("Enter during an IME composition", () => {
     ).toEqual([]);
   });
 
-  test("Enter arriving mid-composition does not submit the form", async () => {
-    // The case that makes the guard necessary rather than defensive: the
-    // browser delivers this Enter as `keydown` with `isComposing: true` and
-    // performs implicit submission for it regardless, so without the guard a
-    // CJK user accepting a candidate submits the popover mid-word.
-    const { input, submits, compositions } = buildForm();
-    const composingOnKeyDown: boolean[] = [];
-    input.addEventListener("keydown", (event) =>
-      composingOnKeyDown.push(event.isComposing),
-    );
-    input.focus();
-
-    await browserCommands.imeComposition([
-      { type: "setComposition", text: "にほん" },
-    ]);
-    await userEvent.keyboard("{Enter}");
-
-    // Pin the precondition too: if a future engine stopped delivering this
-    // Enter to the page, the guard would be untested rather than unnecessary.
-    expect(
-      composingOnKeyDown,
-      "Enter must reach the page mid-composition",
-    ).toEqual([true]);
-    expect(compositions).not.toContain("compositionend");
-    expect(
-      submits,
-      "Enter must not submit while a composition is in progress",
-    ).toEqual([]);
-  });
-
   test("Enter after the composition ends does submit", async () => {
     // The other half of the contract: once composition is over, Enter has to
     // work normally, or CJK users could never submit at all.

tests/src/end-to-end/form/compositionSubmit.test.tsx

@@ -154,13 +154,13 @@ describe("Submitting a toolbar popover with Enter", () => {
   // `Input.imeSetComposition` is CDP-only, so the real composition state can
   // only be entered in chromium.
   test.skipIf(browserName !== "chromium")(
-    "Enter mid-composition does not commit the popover",
+    "accepting an IME candidate does not commit the popover",
     async () => {
-      // The platform performs implicit submission for an Enter delivered with
-      // `isComposing: true` (see ./compositionSubmit.test.tsx), so accepting
-      // an IME candidate would otherwise commit the link mid-word. This drives
-      // the real popover rather than a stand-in, so it covers the guard
-      // `Form.Root` actually ships.
+      // The real accept path: the IME consumes the confirming key and
+      // replaces the composition with the final text, so no actionable Enter
+      // reaches the page and nothing submits — natively, with no composition
+      // guard in `Form.Root` (see ./compositionSubmit.test.tsx for why none
+      // is needed).
       await focusOnEditor();
       await userEvent.keyboard("link me");
       await userEvent.keyboard("{Home}{Shift>}{End}{/Shift}");
@@ -171,19 +171,17 @@ describe("Submitting a toolbar popover with Enter", () => {
       await userEvent.click(input);
 
       await browserCommands.imeComposition([
-        { type: "setComposition", text: "にほん" },
+        { type: "setComposition", text: "example.co" },
+        { type: "commit", text: "example.com" },
       ]);
-      await userEvent.keyboard("{Enter}");
 
+      expect(input.value).toBe("example.com");
       expect(
         document.querySelector(`${EDITOR_SELECTOR} a`),
-        "accepting an IME candidate must not commit the link",
+        "accepting a candidate must not commit the link",
       ).toBeNull();
 
-      // And once composition is over, Enter still works.
-      await browserCommands.imeComposition([
-        { type: "commit", text: "example.com" },
-      ]);
+      // Enter after the composition commits it as usual.
       await userEvent.keyboard("{Enter}");
       await waitForSelector(`${EDITOR_SELECTOR} a`);
     },