feat(web): submit props (#600)

# Summary

+ implemented handling of `submitBehavior`, `onSubmitEditing` and
partially `returnKeyType`(only a portion of options work,
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint)
+ `returnKeyLabel` is not implemented as browser APIs do not allow such
modifications
+ wrote tests for new props, and new callback
 
## Test Plan

+ Launch example-web app.
+ Play around with submit props in `apps/example-web/App.tsx`.
+ Run `yarn test:e2e:web` to see if new e2e tests pass.
+ To test out `returnKeyLabel` you can run the example-web inside
simulator's/emulator's browsers

## Screenshots / Videos

`returnKeyType` in action: 

<img width="956" height="929" alt="Screenshot 2026-05-11 at 12 27 23"
src="https://github.com/user-attachments/assets/5554881a-b222-4ae9-9eaf-bc9803adf614"
/>

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ❌     |
| Android |    ❌     |
| Web |    ✅     |


## Checklist

- [x] E2E tests are passing
- [x] Required E2E tests have been added (if applicable)

---------

Co-authored-by: Igor Furgała <74370735+exploIF@users.noreply.github.com>

Author: pkaramon

.playwright/tests/submitProps.spec.ts

@@ -0,0 +1,97 @@
+import { test, expect, type Page } from '@playwright/test';
+
+const EDITOR_SELECTOR =
+  '[data-testid="test-submit-root"] .eti-editor [contenteditable="true"]';
+const SUBMIT_PAGE = '/test-submit-props';
+const SUBMIT_LOG_SELECTOR = '[data-testid="submit-log"]';
+const TYPE_DELAY_MS = 50;
+
+interface SubmitLogSnapshot {
+  submitCount: number;
+  text: string;
+}
+
+async function readSubmitLog(page: Page): Promise<SubmitLogSnapshot> {
+  const raw = await page.locator(SUBMIT_LOG_SELECTOR).innerText();
+  return JSON.parse(raw.trim()) as SubmitLogSnapshot;
+}
+
+async function expectSubmitLog(
+  page: Page,
+  expected: SubmitLogSnapshot
+): Promise<void> {
+  await expect.poll(async () => readSubmitLog(page)).toStrictEqual(expected);
+}
+
+test.describe('submit and keyboard props', () => {
+  test('newline mode inserts a paragraph break on Enter', async ({ page }) => {
+    await page.goto(`${SUBMIT_PAGE}?mode=newline`);
+    await page.waitForSelector(EDITOR_SELECTOR);
+
+    const editor = page.locator(EDITOR_SELECTOR);
+    await editor.click();
+    await expect(editor).toBeFocused();
+
+    await editor.pressSequentially(`Hello`, { delay: TYPE_DELAY_MS });
+    await editor.press('Enter');
+    await editor.pressSequentially(`World`, { delay: TYPE_DELAY_MS });
+
+    await expect(page.locator('.eti-editor p')).toHaveCount(2);
+    await expect(page.locator(SUBMIT_LOG_SELECTOR)).toContainText(
+      '"submitCount":0'
+    );
+  });
+
+  test('submit mode fires onSubmitEditing without adding a paragraph', async ({
+    page,
+  }) => {
+    await page.goto(`${SUBMIT_PAGE}?mode=submit`);
+    await page.waitForSelector(EDITOR_SELECTOR);
+
+    const editor = page.locator(EDITOR_SELECTOR);
+    await editor.click();
+    await expect(editor).toBeFocused();
+
+    await editor.pressSequentially(`Hi`, { delay: TYPE_DELAY_MS });
+    await editor.press('Enter');
+
+    await expectSubmitLog(page, {
+      submitCount: 1,
+      text: 'Hi',
+    });
+
+    await expect(page.locator('.eti-editor p')).toHaveCount(1);
+  });
+
+  test('blurAndSubmit fires onSubmitEditing without adding a paragraph then blurs', async ({
+    page,
+  }) => {
+    await page.goto(`${SUBMIT_PAGE}?mode=blurAndSubmit`);
+    await page.waitForSelector(EDITOR_SELECTOR);
+
+    const editor = page.locator(EDITOR_SELECTOR);
+    await editor.click();
+    await expect(editor).toBeFocused();
+
+    await editor.pressSequentially('x', { delay: TYPE_DELAY_MS });
+    await editor.press('Enter');
+
+    await expectSubmitLog(page, {
+      submitCount: 1,
+      text: 'x',
+    });
+
+    await expect(page.locator('.eti-editor p')).toHaveCount(1);
+    await expect(editor).not.toBeFocused();
+  });
+
+  test('returnKeyType sets enterkeyhint on the editable root', async ({
+    page,
+  }) => {
+    await page.goto(`${SUBMIT_PAGE}?enterKeyTest=1&returnKeyType=search`);
+    await page.waitForSelector(EDITOR_SELECTOR);
+
+    const editor = page.locator(EDITOR_SELECTOR);
+    await expect(editor).toHaveAttribute('enterkeyhint', 'search');
+  });
+});

apps/example-web/src/App.tsx

@@ -10,6 +10,7 @@ import {
   type BlurEvent,
   type EnrichedInputStyle,
   type OnLinkDetected,
+  type OnSubmitEditing,
   type OnChangeMentionEvent,
   type OnMentionDetected,
 } from 'react-native-enriched';
@@ -205,6 +206,10 @@ function App() {
     setEditorState(e.nativeEvent);
   };
 
+  const handleSubmitEditing = (e: NativeSyntheticEvent<OnSubmitEditing>) => {
+    console.log('[EnrichedTextInput] onSubmitEditing event', e.nativeEvent);
+  };
+
   const handleOnLinkDetected = (e: OnLinkDetected) => {
     console.log('[EnrichedTextInput] onLinkDetected event', e);
     setCurrentLink(e);
@@ -236,6 +241,7 @@ function App() {
           onChangeSelection={handleChangeSelection}
           onChangeHtml={handleOnChangeHtml}
           onChangeState={handleChangeState}
+          onSubmitEditing={handleSubmitEditing}
           onLinkDetected={handleOnLinkDetected}
           onStartMention={handleStartMention}
           onChangeMention={handleChangeMention}

apps/example-web/src/RouteSelector.tsx

@@ -3,6 +3,7 @@ import { TestMentions } from './testScreens/TestMentions';
 import { TestLinks } from './testScreens/TestLinks';
 import { TestSetSelection } from './testScreens/TestSetSelection';
 import { VisualRegression } from './testScreens/VisualRegression';
+import { TestSubmitProps } from './testScreens/TestSubmitProps';
 import { useEffect, useState } from 'react';
 
 export default function RouteSelector() {
@@ -31,6 +32,10 @@ export default function RouteSelector() {
     return <VisualRegression />;
   }
 
+  if (path === '/test-submit-props') {
+    return <TestSubmitProps />;
+  }
+
   if (path === '/test-mentions') {
     return <TestMentions />;
   }

apps/example-web/src/testScreens/TestSubmitProps.tsx

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react';
+import {
+  EnrichedTextInput,
+  type EnrichedTextInputInstance,
+  type EnrichedTextInputProps,
+  type OnSubmitEditing,
+} from 'react-native-enriched';
+import type { NativeSyntheticEvent, ReturnKeyTypeOptions } from 'react-native';
+
+const editorWrapStyle = {
+  backgroundColor: '#ddd',
+  padding: '16px',
+  borderRadius: '8px',
+} as const;
+
+export function TestSubmitProps() {
+  const ref = useRef<EnrichedTextInputInstance>(null);
+  const params = new URLSearchParams(window.location.search);
+
+  const modeParam = params.get('mode');
+  const mode: 'newline' | 'submit' | 'blurAndSubmit' =
+    modeParam === 'submit' || modeParam === 'blurAndSubmit'
+      ? modeParam
+      : 'newline';
+
+  const enterKeyTest = params.get('enterKeyTest') === '1';
+  const returnKeyQuery = params.get('returnKeyType') ?? 'search';
+
+  const submitBehavior: EnrichedTextInputProps['submitBehavior'] = enterKeyTest
+    ? 'newline'
+    : mode === 'newline'
+      ? 'newline'
+      : mode;
+
+  const returnKeyType: ReturnKeyTypeOptions | undefined = enterKeyTest
+    ? (returnKeyQuery as ReturnKeyTypeOptions)
+    : undefined;
+
+  const [submitLog, setSubmitLog] = useState({
+    submitCount: 0,
+    text: '',
+  });
+
+  const handleSubmitEditing = (e: NativeSyntheticEvent<OnSubmitEditing>) => {
+    setSubmitLog((prev) => ({
+      submitCount: prev.submitCount + 1,
+      text: e.nativeEvent.text,
+    }));
+  };
+
+  return (
+    <div data-testid="test-submit-root">
+      <p data-testid="test-submit-mode-label">{mode}</p>
+      <div
+        className="editor-wrapper"
+        style={editorWrapStyle}
+        onClick={() => ref.current?.focus()}
+      >
+        <EnrichedTextInput
+          ref={ref}
+          placeholder="Submit / keyboard test"
+          autoFocus
+          editable
+          scrollEnabled
+          submitBehavior={submitBehavior}
+          returnKeyType={returnKeyType}
+          onSubmitEditing={handleSubmitEditing}
+        />
+      </div>
+      <pre data-testid="submit-log">
+        {JSON.stringify({
+          submitCount: submitLog.submitCount,
+          text: submitLog.text,
+        })}
+      </pre>
+    </div>
+  );
+}

docs/WEB.md

@@ -13,13 +13,14 @@ Web support is still experimental. APIs and behavior can change in future releas
 - Mentions
 - `getHTML`, `setValue`, selection mapping
 - Core callbacks: `onChange`, `onChangeState`, `onFocus`, `onBlur`, `onSelectionChange`
+- Submit props: `submitBehavior` and `onSubmitEditing`. `returnKeyType` is only a hint, it maps to [enterkeyhint](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint) (`done`, `go`, `next`, `previous`, `search`, `send`, `default`/`enter`). Not all values of `ReturnKeyTypeOptions` are supported, the behavior of this prop is heavily dependent on the browser's capabilities.
 - Input theming via `placeholderTextColor`, `cursorColor` and `selectionColor` props
 
 ## Unsupported
 
+- **`returnKeyLabel`**: ignored on web, it's not possible to set it inside a browser.
 - **Pasting images**: `onPasteImages` is never called.
 - **Automatic link detection**: `linkRegex` is ignored. Links only work when set explicitly via the `setLink` ref method.
-- **Submit and keyboard props**: `onSubmitEditing`, `returnKeyType`, `returnKeyLabel`, and `submitBehavior` have no effect.
 - **Context menu**: `contextMenuItems` is ignored.
 - **HTML normalizer flag**: `useHtmlNormalizer` is ignored; paste behavior follows the browser pipeline.
 - **RN layout ref methods**: `measure`, `measureInWindow`, `measureLayout`, and `setNativeProps` are no-ops.

src/web/EnrichedTextInput.tsx

@@ -6,6 +6,7 @@ import {
   type CSSProperties,
 } from 'react';
 import './EnrichedTextInput.css';
+import type { Node } from '@tiptap/pm/model';
 import type {
   EnrichedTextInputInstance,
   EnrichedTextInputProps,
@@ -70,6 +71,8 @@ import {
 } from './pmPlugins/mentionPlugin';
 
 import { StripMarksOnImagePlugin } from './pmPlugins/stripMarksOnImagePlugin';
+import { returnKeyTypeToEnterKeyHint } from './returnKeyTypeToEnterKeyHint';
+
 function runFocused(
   editor: Editor,
   apply: (chain: ChainedCommands) => ChainedCommands
@@ -98,6 +101,9 @@ export const EnrichedTextInput = ({
   onChangeHtml,
   onChangeState,
   onLinkDetected,
+  onSubmitEditing,
+  returnKeyType,
+  submitBehavior,
   onMentionDetected,
   onStartMention,
   onChangeMention,
@@ -151,6 +157,41 @@ export const EnrichedTextInput = ({
     []
   );
 
+  const submitBehaviorRef = useRef(submitBehavior);
+  const onSubmitEditingRef = useRef(onSubmitEditing);
+  const onKeyPressRef = useRef(onKeyPress);
+  const editorInstanceRef = useRef<Editor | null>(null);
+
+  useEffect(() => {
+    submitBehaviorRef.current = submitBehavior;
+  }, [submitBehavior]);
+  useEffect(() => {
+    onSubmitEditingRef.current = onSubmitEditing;
+  }, [onSubmitEditing]);
+  useEffect(() => {
+    onKeyPressRef.current = onKeyPress;
+  }, [onKeyPress]);
+
+  const handleKeyDown = (doc: Node, event: KeyboardEvent): boolean => {
+    onKeyPressRef.current?.(adaptWebToNativeEvent(event, { key: event.key }));
+    if (event.key !== 'Enter') {
+      return false;
+    }
+
+    const sb = submitBehaviorRef.current;
+    if (sb === 'submit' || sb === 'blurAndSubmit') {
+      event.preventDefault();
+      const text = nativeLeafText(doc, 0, doc.content.size);
+      onSubmitEditingRef.current?.(adaptWebToNativeEvent(event, { text }));
+      if (sb === 'blurAndSubmit') {
+        editorInstanceRef.current?.commands.blur();
+      }
+      return true;
+    }
+
+    return false;
+  };
+
   const extensions = useMemo(
     () => [
       Document,
@@ -211,18 +252,34 @@ export const EnrichedTextInput = ({
         onChangeSelection?.(adaptWebToNativeEvent(null, { start, end, text }));
       },
       editorProps: {
-        handleKeyDown: (_, event) => {
-          onKeyPress?.(adaptWebToNativeEvent(event, { key: event.key }));
-          return false;
-        },
+        handleKeyDown: (view, event) => handleKeyDown(view.state.doc, event),
         attributes: {
           autoCapitalize,
+          enterkeyhint: returnKeyTypeToEnterKeyHint(returnKeyType),
         },
       },
     },
     [tiptapContent, extensions]
   );
 
+  useEffect(() => {
+    editorInstanceRef.current = editor ?? null;
+  }, [editor]);
+
+  useEffect(() => {
+    if (!editor) return;
+    let dom: HTMLElement;
+    try {
+      dom = editor.view.dom;
+    } catch {
+      return;
+    }
+    dom.setAttribute(
+      'enterkeyhint',
+      returnKeyTypeToEnterKeyHint(returnKeyType)
+    );
+  }, [editor, returnKeyType]);
+
   useEffect(() => {
     editor?.commands.normalizeBoldInStyledHeadings();
   }, [editor, resolvedHtmlStyle]);

src/web/__tests__/returnKeyTypeToEnterKeyHint.test.ts

@@ -0,0 +1,18 @@
+import { returnKeyTypeToEnterKeyHint } from '../returnKeyTypeToEnterKeyHint';
+
+describe('returnKeyTypeToEnterKeyHint', () => {
+  test.each([
+    [undefined, 'enter'],
+    ['default', 'enter'],
+    ['done', 'done'],
+    ['go', 'go'],
+    ['next', 'next'],
+    ['previous', 'previous'],
+    ['search', 'search'],
+    ['send', 'send'],
+    ['google', 'enter'],
+    ['yahoo', 'enter'],
+  ] as const)('%j → %s', (input, expected) => {
+    expect(returnKeyTypeToEnterKeyHint(input)).toBe(expected);
+  });
+});

src/web/returnKeyTypeToEnterKeyHint.ts

@@ -0,0 +1,29 @@
+import type { ReturnKeyTypeOptions } from 'react-native';
+
+// Keywords for the HTML global [`enterkeyhint`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint) attribute
+export type EnterKeyHint =
+  | 'enter'
+  | 'done'
+  | 'go'
+  | 'next'
+  | 'previous'
+  | 'search'
+  | 'send';
+
+// Maps React Native `returnKeyType` to the HTML global `enterkeyhint` attribute
+// if possible, otherwise falls back to enter.
+export function returnKeyTypeToEnterKeyHint(
+  returnKeyType: ReturnKeyTypeOptions | undefined
+): EnterKeyHint {
+  switch (returnKeyType) {
+    case 'done':
+    case 'go':
+    case 'next':
+    case 'previous':
+    case 'search':
+    case 'send':
+      return returnKeyType;
+    default:
+      return 'enter';
+  }
+}