feat: on key press support#584
Merged
Merged
Conversation
There was a problem hiding this comment.
Pull request overview
Adds onKeyPress support to EnrichedMarkdownTextInput, exposing a React Native TextInput-like key press event before edits are applied, with native implementations on iOS and Android plus docs and Storybook coverage.
Changes:
- Added
onKeyPressprop (JS/TS) and native event plumbing (onInputKeyPress) via codegen types. - Implemented iOS key mapping from replacement text and Android key inference via
InputConnectionWrapper, plus hardwareTabhandling on Android. - Updated documentation and added a Storybook story demonstrating key press events.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/react-native-enriched-markdown/src/index.tsx | Re-exports OnKeyPressEvent from the public entrypoint. |
| packages/react-native-enriched-markdown/src/EnrichedMarkdownTextInputNativeComponent.ts | Adds OnKeyPressEvent type and onInputKeyPress direct event handler to native props. |
| packages/react-native-enriched-markdown/src/EnrichedMarkdownTextInput.tsx | Adds onKeyPress prop and wires it to native onInputKeyPress. |
| packages/react-native-enriched-markdown/ios/input/EnrichedMarkdownTextInput.mm | Emits onInputKeyPress from iOS text-change delegate callbacks with RN-like key mapping. |
| packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/input/layout/InputEventEmitter.kt | Adds emitKeyPress() helper to dispatch key press events. |
| packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/input/events/OnInputKeyPressEvent.kt | New Android event class for onInputKeyPress payload { key }. |
| packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/input/EnrichedMarkdownTextInputView.kt | Consumes plain Tab to insert \\t and emit Tab on Android, matching iOS behavior. |
| packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/input/EnrichedMarkdownTextInputManager.kt | Registers onInputKeyPress for the view manager’s event list. |
| packages/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/input/editing/InputConnectionWrapper.kt | Infers key presses from IME side effects and emits onInputKeyPress. |
| docs/INPUT.md | Documents new onKeyPress hook in the input guide. |
| docs/API_REFERENCE.md | Adds API reference section and example for onKeyPress. |
| apps/react-native-example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/shared/storyMeta.ts | Wires onKeyPress into Storybook Actions arg types. |
| apps/react-native-example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/props/KeyPress.stories.tsx | New Storybook story showcasing onKeyPress. |
| apps/react-native-example/.rnstorybook/stories/components/EnrichedMarkdownTextInput/EnrichedMarkdownTextInputStory.tsx | Adds KeyPressStory that displays recent keys as chips. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
eszlamczyk
marked this pull request as ready for review
July 23, 2026 12:09
hryhoriiK97
approved these changes
Jul 26, 2026
hryhoriiK97
left a comment
Collaborator
There was a problem hiding this comment.
LGTM! I've left one comment
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What/Why?
closes #348
Adds an
onKeyPressprop toEnrichedMarkdownTextInput, mirroring React Native TextInput's APIBREAKING CHANGE
On Android Plain Tab is now consumed in
onKeyDownso it inserts\tand emitsTablike iOS instead of moving focus; Shift/Ctrl+Tab still navigate focus.Without
onKeyPressthere was no way to observe a keystroke before it is applied to the input content.nativeEvent.keyis the pressed character, or a named key:Backspace,Enter,Tab(iOS additionally reportsEscape). Paste never fires the event.shouldChangeTextInRange/textInputShouldChangeTextwith RN core's key mapping (empty -Backspace,\n-Enter,\t-Tab, ESC -Escape). The custompaste:override bypasses the delegate, so pastes are excluded by construction.ReactEditTextInputConnectionWrapperinto the existingInputConnectionWrapper(cursor-movement heuristics for composing text, ≤2-char commits, batch-edit queueing,SwiftKey/number-pad
sendKeyEvent). .API_REFERENCE.md,INPUT.md).onKeyPressis also wired into the shared Actions arg types, so all input stories log it.Testing
EnrichedMarkdownTextInput/Props/Key Press.Tabis reported on both platforms (Android nolonger moves focus to the toolbar).
Screenshots
iOS
Screen.Recording.2026-07-23.at.13.49.08.mov
Android
Screen.Recording.2026-07-23.at.13.49.41.mov
PR Checklist