Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(fabric, textinput): enable autocorrect / spell check / grammer check props #2290

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+122 −13
Open

fix(fabric, textinput): enable autocorrect / spell check / grammer check props #2290

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d0b1624
[fabric] Enable Automatic Spelling Correction
shwanton Nov 1, 2023
47be1a3
[fabric] Enable Continuous Spell Checking
shwanton Nov 9, 2023
e622c71
[fabric] Enable Grammar Checking
shwanton Nov 9, 2023
6fba5da
[fabric] Static cast BOOL values event data struct init for TextInput
Nov 13, 2023
e85d1e9
fix(fabric, textinput): add grammer events to view config
Saadnajmi Nov 21, 2024
7a84602
fix(paper, textinput): make grammer events direct events
Saadnajmi Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions packages/react-native/Libraries/Components/TextInput/RCTTextInputViewConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,15 @@ const RCTTextInputViewConfig = {
topContentSizeChange: {
registrationName: 'onContentSizeChange',
},
topAutoCorrectChange: {
registrationName: 'onAutoCorrectChange',
},
topSpellCheckChange: {
registrationName: 'onSpellCheckChange',
},
topGrammarCheckChange: {
registrationName: 'onGrammarCheckChange',
},
},
validAttributes: {
fontSize: true,
Expand Down
3 changes: 3 additions & 0 deletions packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ NS_ASSUME_NONNULL_BEGIN
@property (nonatomic, assign, readonly) UIEdgeInsets contentInset;
#if TARGET_OS_OSX // [macOS
@property (nonatomic, assign) CGFloat pointScaleFactor;
@property (nonatomic, getter=isAutomaticSpellingCorrectionEnabled) BOOL automaticSpellingCorrectionEnabled;
@property (nonatomic, getter=isGrammarCheckingEnabled) BOOL grammarCheckingEnabled;
@property (nonatomic, getter=isContinuousSpellCheckingEnabled) BOOL continuousSpellCheckingEnabled;
#endif // macOS]

// This protocol disallows direct access to `selectedTextRange` property because
Expand Down
6 changes: 3 additions & 3 deletions packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,9 +67,9 @@ @implementation RCTBaseTextInputViewManager {
RCT_EXPORT_VIEW_PROPERTY(passwordRules, NSString)

#if TARGET_OS_OSX // [macOS
RCT_EXPORT_VIEW_PROPERTY(onAutoCorrectChange, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onSpellCheckChange, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onGrammarCheckChange, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onAutoCorrectChange, RCTDirectEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onSpellCheckChange, RCTDirectEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onGrammarCheckChange, RCTDirectEventBlock);

RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTDirectEventBlock)

Expand Down
52 changes: 42 additions & 10 deletions .../react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,13 +168,20 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
_backedTextInputView.autocapitalizationType =
RCTUITextAutocapitalizationTypeFromAutocapitalizationType(newTextInputProps.traits.autocapitalizationType);
}
#endif // [macOS]

#if !TARGET_OS_OSX // [macOS]
if (newTextInputProps.traits.autoCorrect != oldTextInputProps.traits.autoCorrect) {
_backedTextInputView.autocorrectionType =
RCTUITextAutocorrectionTypeFromOptionalBool(newTextInputProps.traits.autoCorrect);
}
#endif // [macOS]

#else // [macOS
if (newTextInputProps.traits.autoCorrect != oldTextInputProps.traits.autoCorrect && newTextInputProps.traits.autoCorrect.has_value()) {
_backedTextInputView.automaticSpellingCorrectionEnabled =
newTextInputProps.traits.autoCorrect.value();
}
#endif // macOS]

if (newTextInputProps.traits.contextMenuHidden != oldTextInputProps.traits.contextMenuHidden) {
_backedTextInputView.contextMenuHidden = newTextInputProps.traits.contextMenuHidden;
}
Expand All @@ -193,12 +200,26 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
_backedTextInputView.keyboardAppearance =
RCTUIKeyboardAppearanceFromKeyboardAppearance(newTextInputProps.traits.keyboardAppearance);
}

#endif // [macOS]

#if !TARGET_OS_OSX // [macOS]
if (newTextInputProps.traits.spellCheck != oldTextInputProps.traits.spellCheck) {
_backedTextInputView.spellCheckingType =
RCTUITextSpellCheckingTypeFromOptionalBool(newTextInputProps.traits.spellCheck);
}
#endif // [macOS]
#else // [macOS
if (newTextInputProps.traits.spellCheck != oldTextInputProps.traits.spellCheck && newTextInputProps.traits.spellCheck.has_value()) {
_backedTextInputView.continuousSpellCheckingEnabled =
newTextInputProps.traits.spellCheck.value();
}
#endif // macOS]

#if TARGET_OS_OSX // [macOS
if (newTextInputProps.traits.grammarCheck != oldTextInputProps.traits.grammarCheck && newTextInputProps.traits.grammarCheck.has_value()) {
_backedTextInputView.grammarCheckingEnabled =
newTextInputProps.traits.grammarCheck.value();
}
#endif // macOS]

if (newTextInputProps.traits.caretHidden != oldTextInputProps.traits.caretHidden) {
_backedTextInputView.caretHidden = newTextInputProps.traits.caretHidden;
Expand Down Expand Up @@ -463,14 +484,25 @@ - (void)textInputDidChangeSelection
}

#if TARGET_OS_OSX // [macOS
- (void)automaticSpellingCorrectionDidChange:(BOOL)enabled {}


- (void)continuousSpellCheckingDidChange:(BOOL)enabled {}

- (void)automaticSpellingCorrectionDidChange:(BOOL)enabled {
if (_eventEmitter) {
std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onAutoCorrectChange({.enabled = static_cast<bool>(enabled)});
}
}

- (void)grammarCheckingDidChange:(BOOL)enabled {}
- (void)continuousSpellCheckingDidChange:(BOOL)enabled
{
if (_eventEmitter) {
std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onSpellCheckChange({.enabled = static_cast<bool>(enabled)});
}
}

- (void)grammarCheckingDidChange:(BOOL)enabled
{
if (_eventEmitter) {
std::static_pointer_cast<TextInputEventEmitter const>(_eventEmitter)->onGrammarCheckChange({.enabled = static_cast<bool>(enabled)});
}
}

- (BOOL)hasValidKeyDownOrValidKeyUp:(nonnull NSString *)key {
return YES;
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputUtils.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,9 @@ UITextAutocapitalizationType RCTUITextAutocapitalizationTypeFromAutocapitalizati

UIKeyboardAppearance RCTUIKeyboardAppearanceFromKeyboardAppearance(
facebook::react::KeyboardAppearance keyboardAppearance);
#endif // [macOS]

#if !TARGET_OS_OSX // [macOS]
UITextSpellCheckingType RCTUITextSpellCheckingTypeFromOptionalBool(std::optional<bool> spellCheck);

UITextFieldViewMode RCTUITextFieldViewModeFromTextInputAccessoryVisibilityMode(
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputUtils.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,9 @@ UIKeyboardAppearance RCTUIKeyboardAppearanceFromKeyboardAppearance(KeyboardAppea
return UIKeyboardAppearanceDark;
}
}
#endif // [macOS]

#if !TARGET_OS_OSX // [macOS]
UITextSpellCheckingType RCTUITextSpellCheckingTypeFromOptionalBool(std::optional<bool> spellCheck)
{
return spellCheck.has_value() ? (*spellCheck ? UITextSpellCheckingTypeYes : UITextSpellCheckingTypeNo)
Expand Down
26 changes: 26 additions & 0 deletions ...s/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,4 +188,30 @@ void TextInputEventEmitter::dispatchTextInputContentSizeChangeEvent(
});
}

#if TARGET_OS_OSX // [macOS
void TextInputEventEmitter::onAutoCorrectChange(OnAutoCorrectChange event) const {
dispatchEvent("autoCorrectChange", [event=std::move(event)](jsi::Runtime &runtime) {
Copy link
Member

@tido64 tido64 Nov 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This struct is a POD with a single member. It's faster to just copy the whole thing. But we're only reading a boolean from this struct. Can we just copy the value instead?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the rest of this file, looks like we don't use std::move elsewhere. I'll update this to match the rest

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like we should also refactor to use textInputMetrics insteaad of custom events

auto payload = jsi::Object(runtime);
payload.setProperty(runtime, "enabled", event.enabled);
return payload;
});
}

void TextInputEventEmitter::onSpellCheckChange(OnSpellCheckChange event) const {
dispatchEvent("spellCheckChange", [event=std::move(event)](jsi::Runtime &runtime) {
auto payload = jsi::Object(runtime);
payload.setProperty(runtime, "enabled", event.enabled);
return payload;
});
}

void TextInputEventEmitter::onGrammarCheckChange(OnGrammarCheckChange event) const {
dispatchEvent("grammarCheckChange", [event=std::move(event)](jsi::Runtime &runtime) {
auto payload = jsi::Object(runtime);
payload.setProperty(runtime, "enabled", event.enabled);
return payload;
});
}
#endif // macOS]

} // namespace facebook::react
17 changes: 17 additions & 0 deletions ...nts/textinput/platform/ios/react/renderer/components/iostextinput/TextInputEventEmitter.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,23 @@ class TextInputEventEmitter : public ViewEventEmitter {
void onKeyPress(const KeyPressMetrics& keyPressMetrics) const;
void onScroll(const Metrics& textInputMetrics) const;

#if TARGET_OS_OSX // [macOS
struct OnAutoCorrectChange {
bool enabled;
};
void onAutoCorrectChange(OnAutoCorrectChange value) const;

struct OnSpellCheckChange {
bool enabled;
};
void onSpellCheckChange(OnSpellCheckChange value) const;

struct OnGrammarCheckChange {
bool enabled;
};
void onGrammarCheckChange(OnGrammarCheckChange value) const;
Comment on lines +48 to +61
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: Indentation

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's wrong with it? It's two spaces in like the stuff outside the block

#endif // macOS]

private:
void dispatchTextInputEvent(
const std::string& name,
Expand Down
9 changes: 9 additions & 0 deletions ...rer/components/textinput/platform/ios/react/renderer/components/iostextinput/primitives.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,6 +231,15 @@ class TextInputTraits final {
* Default value: `empty` (`null`).
*/
std::optional<bool> smartInsertDelete{};

#ifdef TARGET_OS_OSX // [macOS
/*
* Can be empty (`null` in JavaScript) which means `default`.
* maOS
* Default value: `empty` (`null`).
*/
std::optional<bool> grammarCheck{};
#endif // macOS]
};

} // namespace facebook::react
9 changes: 9 additions & 0 deletions ...mponents/textinput/platform/ios/react/renderer/components/iostextinput/propsConversions.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,15 @@ static TextInputTraits convertRawProp(
sourceTraits.smartInsertDelete,
defaultTraits.smartInsertDelete);

#ifdef TARGET_OS_OSX // [macOS
traits.grammarCheck = convertRawProp(
context,
rawProps,
"grammarCheck",
sourceTraits.grammarCheck,
defaultTraits.grammarCheck);
#endif // macOS]

return traits;
}

Expand Down
Loading