Implement event count for TextInput

Summary:
Changelog: [Internal]

Implementation of event count for Fabric's Text input.

Reviewed By: JoshuaGross

Differential Revision: D20800185

fbshipit-source-id: 988692cb2fc786649821cccb06e629b40b9b0479

Author: sammy-SC

Libraries/Components/TextInput/TextInput.js

@@ -1073,6 +1073,7 @@ function InternalTextInput(props: Props): React.Node {
         ref={_setNativeRef}
         {...props}
         dataDetectorTypes={props.dataDetectorTypes}
+        mostRecentEventCount={mostRecentEventCount}
         onBlur={_onBlur}
         onChange={_onChange}
         onContentSizeChange={props.onContentSizeChange}

Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap

@@ -6,6 +6,7 @@ exports[`TextInput tests should render as expected: should deep render when mock
   allowFontScaling={true}
   focusable={true}
   forwardedRef={null}
+  mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}
   onClick={[Function]}
@@ -32,6 +33,7 @@ exports[`TextInput tests should render as expected: should deep render when not
   allowFontScaling={true}
   focusable={true}
   forwardedRef={null}
+  mostRecentEventCount={0}
   onBlur={[Function]}
   onChange={[Function]}
   onClick={[Function]}

React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm

@@ -28,7 +28,7 @@ @interface RCTTextInputComponentView () <RCTBackedTextInputDelegate, RCTTextInpu
 @implementation RCTTextInputComponentView {
   TextInputShadowNode::ConcreteState::Shared _state;
   UIView<RCTBackedTextInputViewProtocol> *_backedTextInputView;
-  size_t _stateRevision;
+  NSUInteger _mostRecentEventCount;
   NSAttributedString *_lastStringStateWasUpdatedWith;
 
   /*
@@ -55,7 +55,6 @@ - (instancetype)initWithFrame:(CGRect)frame
     _backedTextInputView.frame = self.bounds;
     _backedTextInputView.textInputDelegate = self;
     _ignoreNextTextInputCall = NO;
-    _stateRevision = State::initialRevisionValue;
     [self addSubview:_backedTextInputView];
   }
 
@@ -180,9 +179,8 @@ - (void)updateState:(State::Shared const &)state oldState:(State::Shared const &
     return;
   }
 
-  if (_state->getRevision() != _stateRevision) {
+  if (_mostRecentEventCount == _state->getData().mostRecentEventCount) {
     auto data = _state->getData();
-    _stateRevision = _state->getRevision();
     [self _setAttributedString:RCTNSAttributedStringFromAttributedStringBox(data.attributedStringBox)];
   }
 }
@@ -221,8 +219,8 @@ - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   _backedTextInputView.attributedText = [[NSAttributedString alloc] init];
+  _mostRecentEventCount = 0;
   _state.reset();
-  _stateRevision = State::initialRevisionValue;
   _lastStringStateWasUpdatedWith = nil;
   _ignoreNextTextInputCall = NO;
 }
@@ -360,6 +358,7 @@ - (TextInputMetrics)_textInputMetrics
   TextInputMetrics metrics;
   metrics.text = RCTStringFromNSString(_backedTextInputView.attributedText.string);
   metrics.selectionRange = [self _selectionRange];
+  metrics.eventCount = _mostRecentEventCount;
   return metrics;
 }
 
@@ -370,12 +369,12 @@ - (void)_updateState
   if (!_state) {
     return;
   }
-
   auto data = _state->getData();
   _lastStringStateWasUpdatedWith = attributedString;
   data.attributedStringBox = RCTAttributedStringBoxFromNSAttributedString(attributedString);
-  _state->updateState(std::move(data), EventPriority::SynchronousUnbatched);
-  _stateRevision = _state->getRevision() + 1;
+  _mostRecentEventCount += 1;
+  data.mostRecentEventCount = _mostRecentEventCount;
+  _state->updateState(std::move(data));
 }
 
 - (AttributedString::Range)_selectionRange
@@ -407,19 +406,18 @@ - (void)blur
 
 - (void)setMostRecentEventCount:(NSInteger)eventCount
 {
-  // no-op. `eventCount` isn't used in Fabric's TextInput.
-  // We are keeping it so commands are backwards
-  // compatible with Paper's TextInput.
+  _mostRecentEventCount = eventCount;
 }
 
 - (void)setTextAndSelection:(NSInteger)eventCount
                       value:(NSString *__nullable)value
                       start:(NSInteger)start
                         end:(NSInteger)end
 {
-  // `eventCount` is ignored, isn't used in Fabric's TextInput.
-  // We are keeping it so commands are
-  // backwards compatible with Paper's TextInput.
+  if (_mostRecentEventCount != eventCount) {
+    return;
+  }
+
   if (value) {
     NSMutableAttributedString *mutableString =
         [[NSMutableAttributedString alloc] initWithAttributedString:_backedTextInputView.attributedText];

React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputNativeCommands.h

@@ -51,7 +51,23 @@ RCTTextInputHandleCommand(id<RCTTextInputViewProtocol> componentView, NSString c
   }
 
   if ([commandName isEqualToString:@"setMostRecentEventCount"]) {
-    [componentView setMostRecentEventCount:0];
+#if RCT_DEBUG
+    if ([args count] != 1) {
+      RCTLogError(
+          @"%@ command %@ received %d arguments, expected %d.", @"TextInput", commandName, (int)[args count], 1);
+      return;
+    }
+#endif
+
+    NSObject *arg0 = args[0];
+#if RCT_DEBUG
+    if (!RCTValidateTypeOfViewCommandArgument(arg0, [NSNumber class], @"number", @"TextInput", commandName, @"1st")) {
+      return;
+    }
+#endif
+    NSInteger eventCount = [(NSNumber *)arg0 intValue];
+
+    [componentView setMostRecentEventCount:eventCount];
     return;
   }
 
@@ -64,7 +80,13 @@ RCTTextInputHandleCommand(id<RCTTextInputViewProtocol> componentView, NSString c
     }
 #endif
 
-    NSInteger eventCount = 0;
+    NSObject *arg0 = args[0];
+#if RCT_DEBUG
+    if (!RCTValidateTypeOfViewCommandArgument(arg0, [NSNumber class], @"number", @"TextInput", commandName, @"1st")) {
+      return;
+    }
+#endif
+    NSInteger eventCount = [(NSNumber *)arg0 intValue];
 
     NSObject *arg1 = args[1];
 #if RCT_DEBUG

ReactCommon/fabric/components/textinput/iostextinput/TextInputEventEmitter.cpp

@@ -20,6 +20,8 @@ static jsi::Value textInputMetricsPayload(
       "text",
       jsi::String::createFromUtf8(runtime, textInputMetrics.text));
 
+  payload.setProperty(runtime, "eventCount", textInputMetrics.eventCount);
+
   {
     auto selection = jsi::Object(runtime);
     selection.setProperty(

ReactCommon/fabric/components/textinput/iostextinput/TextInputEventEmitter.h

@@ -22,6 +22,7 @@ class TextInputMetrics {
   Point contentOffset;
   EdgeInsets contentInset;
   Size containerSize;
+  int eventCount;
 };
 
 class TextInputEventEmitter : public ViewEventEmitter {

ReactCommon/fabric/components/textinput/iostextinput/TextInputProps.cpp

@@ -49,7 +49,12 @@ TextInputProps::TextInputProps(
           "underlineColorAndroid",
           sourceProps.underlineColorAndroid,
           {})),
-      text(convertRawProp(rawProps, "text", sourceProps.text, {})){};
+      text(convertRawProp(rawProps, "text", sourceProps.text, {})),
+      mostRecentEventCount(convertRawProp(
+          rawProps,
+          "mostRecentEventCount",
+          sourceProps.mostRecentEventCount,
+          {})){};
 
 TextAttributes TextInputProps::getEffectiveTextAttributes() const {
   auto result = TextAttributes::defaultTextAttributes();

ReactCommon/fabric/components/textinput/iostextinput/TextInputProps.h

@@ -51,6 +51,7 @@ class TextInputProps final : public ViewProps, public BaseTextProps {
    * "Private" (only used by TextInput.js) props
    */
   std::string const text{};
+  int const mostRecentEventCount{0};
 
   /*
    * Accessors

ReactCommon/fabric/components/textinput/iostextinput/TextInputShadowNode.cpp

@@ -69,13 +69,26 @@ void TextInputShadowNode::setTextLayoutManager(
 void TextInputShadowNode::updateStateIfNeeded() {
   ensureUnsealed();
 
-  if (!getState() || getState()->getRevision() == State::initialRevisionValue) {
-    auto state = TextInputState{};
-    state.attributedStringBox = AttributedStringBox{getAttributedString()};
-    state.paragraphAttributes = getConcreteProps().paragraphAttributes;
-    state.layoutManager = textLayoutManager_;
-    setStateData(std::move(state));
+  auto reactTreeAttributedString = getAttributedString();
+  auto const &state = getStateData();
+
+  assert(textLayoutManager_);
+  assert(
+      (!state.layoutManager || state.layoutManager == textLayoutManager_) &&
+      "`StateData` refers to a different `TextLayoutManager`");
+
+  if (state.reactTreeAttributedString == reactTreeAttributedString &&
+      state.layoutManager == textLayoutManager_) {
+    return;
   }
+
+  auto newState = TextInputState{};
+  newState.attributedStringBox = AttributedStringBox{reactTreeAttributedString};
+  newState.paragraphAttributes = getConcreteProps().paragraphAttributes;
+  newState.reactTreeAttributedString = reactTreeAttributedString;
+  newState.layoutManager = textLayoutManager_;
+  newState.mostRecentEventCount = getConcreteProps().mostRecentEventCount;
+  setStateData(std::move(newState));
 }
 
 #pragma mark - LayoutableShadowNode

ReactCommon/fabric/components/textinput/iostextinput/TextInputState.h

@@ -28,6 +28,15 @@ class TextInputState final {
    */
   AttributedStringBox attributedStringBox;
 
+  /*
+   * All content of <TextInput> component represented as an `AttributedString`.
+   * This stores the previous computed *from the React tree*. This usually
+   * doesn't change as the TextInput contents are being updated. If it does
+   * change, we need to wipe out current contents of the TextInput and replace
+   * with the new value from the tree.
+   */
+  AttributedString reactTreeAttributedString{};
+
   /*
    * Represents all visual attributes of a paragraph of text represented as
    * a ParagraphAttributes.
@@ -40,6 +49,8 @@ class TextInputState final {
    * `AttributedString`.
    */
   SharedTextLayoutManager layoutManager;
+
+  size_t mostRecentEventCount{0};
 };
 
 } // namespace react