Add support for onTextLayout in Text

Summary:
Changelog: [Internal]

Add `Text.onTextLayout` implementation

Reviewed By: JoshuaGross

Differential Revision: D22865139

fbshipit-source-id: 563084754ebdc9fb23463a306c526b97c61f85ec

Author: sammy-SC

ReactCommon/react/renderer/components/scrollview/ScrollViewEventEmitter.h

@@ -26,11 +26,6 @@ class ScrollViewMetrics {
   Float zoomScale;
 };
 
-class ScrollViewEventEmitter;
-
-using SharedScrollViewEventEmitter =
-    std::shared_ptr<const ScrollViewEventEmitter>;
-
 class ScrollViewEventEmitter : public ViewEventEmitter {
  public:
   using ViewEventEmitter::ViewEventEmitter;

ReactCommon/react/renderer/components/text/paragraph/ParagraphEventEmitter.cpp

@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ParagraphEventEmitter.h"
+
+namespace facebook {
+namespace react {
+
+static jsi::Value linesMeasurementsPayload(
+    jsi::Runtime &runtime,
+    LinesMeasurements const &linesMeasurements) {
+  auto payload = jsi::Object(runtime);
+  auto lines = jsi::Array(runtime, linesMeasurements.size());
+
+  for (size_t i = 0; i < linesMeasurements.size(); ++i) {
+    auto const &lineMeasurement = linesMeasurements[i];
+    auto jsiLine = jsi::Object(runtime);
+    jsiLine.setProperty(runtime, "text", lineMeasurement.text);
+    jsiLine.setProperty(runtime, "x", lineMeasurement.frame.origin.x);
+    jsiLine.setProperty(runtime, "y", lineMeasurement.frame.origin.y);
+    jsiLine.setProperty(runtime, "width", lineMeasurement.frame.size.width);
+    jsiLine.setProperty(runtime, "height", lineMeasurement.frame.size.height);
+    jsiLine.setProperty(runtime, "descender", lineMeasurement.descender);
+    jsiLine.setProperty(runtime, "capHeight", lineMeasurement.capHeight);
+    jsiLine.setProperty(runtime, "ascender", lineMeasurement.ascender);
+    jsiLine.setProperty(runtime, "xHeight", lineMeasurement.xHeight);
+    lines.setValueAtIndex(runtime, i, jsiLine);
+  }
+
+  payload.setProperty(runtime, "lines", lines);
+
+  return payload;
+}
+
+void ParagraphEventEmitter::onTextLayout(
+    LinesMeasurements const &linesMeasurements) const {
+  dispatchEvent(
+      "textLayout",
+      [linesMeasurements](jsi::Runtime &runtime) {
+        return linesMeasurementsPayload(runtime, linesMeasurements);
+      },
+      EventPriority::AsynchronousBatched);
+}
+
+} // namespace react
+} // namespace facebook

ReactCommon/react/renderer/components/text/paragraph/ParagraphEventEmitter.h

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/renderer/components/view/ViewEventEmitter.h>
+#include <react/renderer/textlayoutmanager/TextMeasureCache.h>
+
+namespace facebook {
+namespace react {
+
+class ParagraphEventEmitter : public ViewEventEmitter {
+ public:
+  using ViewEventEmitter::ViewEventEmitter;
+
+  void onTextLayout(LinesMeasurements const &linesMeasurements) const;
+};
+
+} // namespace react
+} // namespace facebook

ReactCommon/react/renderer/components/text/paragraph/ParagraphProps.cpp

@@ -24,10 +24,12 @@ ParagraphProps::ParagraphProps(
       BaseTextProps(sourceProps, rawProps),
       paragraphAttributes(
           convertRawProp(rawProps, sourceProps.paragraphAttributes, {})),
-      isSelectable(convertRawProp(
+      isSelectable(
+          convertRawProp(rawProps, "selectable", sourceProps.isSelectable, {})),
+      onTextLayout(convertRawProp(
           rawProps,
-          "selectable",
-          sourceProps.isSelectable,
+          "onTextLayout",
+          sourceProps.onTextLayout,
           {})) {
   /*
    * These props are applied to `View`, therefore they must not be a part of

ReactCommon/react/renderer/components/text/paragraph/ParagraphProps.h

@@ -41,6 +41,8 @@ class ParagraphProps : public ViewProps, public BaseTextProps {
    */
   bool const isSelectable{};
 
+  bool const onTextLayout{};
+
 #pragma mark - DebugStringConvertible
 
 #if RN_DEBUG_STRING_CONVERTIBLE

ReactCommon/react/renderer/components/text/paragraph/ParagraphShadowNode.cpp

@@ -158,16 +158,26 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
 
   updateStateIfNeeded(content);
 
-  if (content.attachments.empty()) {
-    // No attachments, nothing to layout.
-    return;
-  }
-
   auto measurement = textLayoutManager_->measure(
       AttributedStringBox{content.attributedString},
       content.paragraphAttributes,
       layoutConstraints);
 
+#ifndef ANDROID
+  if (getConcreteProps().onTextLayout) {
+    auto linesMeasurements = textLayoutManager_->measureLines(
+        content.attributedString,
+        content.paragraphAttributes,
+        measurement.size);
+    getConcreteEventEmitter().onTextLayout(linesMeasurements);
+  }
+#endif
+
+  if (content.attachments.empty()) {
+    // No attachments, nothing to layout.
+    return;
+  }
+
   //  Iterating on attachments, we clone shadow nodes and moving
   //  `paragraphShadowNode` that represents clones of `this` object.
   auto paragraphShadowNode = static_cast<ParagraphShadowNode *>(this);

ReactCommon/react/renderer/components/text/paragraph/ParagraphShadowNode.h

@@ -8,6 +8,7 @@
 #pragma once
 
 #include <folly/Optional.h>
+#include <react/renderer/components/text/ParagraphEventEmitter.h>
 #include <react/renderer/components/text/ParagraphProps.h>
 #include <react/renderer/components/text/ParagraphState.h>
 #include <react/renderer/components/text/TextShadowNode.h>
@@ -22,8 +23,6 @@ namespace react {
 
 extern char const ParagraphComponentName[];
 
-using ParagraphEventEmitter = ViewEventEmitter;
-
 /*
  * `ShadowNode` for <Paragraph> component, represents <View>-like component
  * containing and displaying text. Text content is represented as nested <Text>

ReactCommon/react/renderer/core/ConcreteShadowNode.h

@@ -99,6 +99,19 @@ class ConcreteShadowNode : public BaseShadowNodeT {
     return static_cast<ConcreteProps const &>(*props_);
   }
 
+  /*
+   * Returns a concrete event emitter object associated with the node.
+   * Thread-safe after the node is sealed.
+   */
+  ConcreteEventEmitter const &getConcreteEventEmitter() const {
+    assert(
+        std::dynamic_pointer_cast<ConcreteEventEmitter const>(
+            BaseShadowNodeT::getEventEmitter()) &&
+        "EventEmitter must be an instance of ConcreteEventEmitter class.");
+    return static_cast<ConcreteEventEmitter const &>(
+        *BaseShadowNodeT::getEventEmitter());
+  }
+
   /*
    * Returns a concrete state data associated with the node.
    * Thread-safe after the node is sealed.

ReactCommon/react/renderer/textlayoutmanager/TextMeasureCache.h

@@ -16,6 +16,17 @@
 namespace facebook {
 namespace react {
 
+struct LineMeasurement {
+  std::string text;
+  Rect frame;
+  Float descender;
+  Float capHeight;
+  Float ascender;
+  Float xHeight;
+};
+
+using LinesMeasurements = std::vector<LineMeasurement>;
+
 /*
  * Describes a result of text measuring.
  */

ReactCommon/react/renderer/textlayoutmanager/platform/ios/RCTTextLayoutManager.h

@@ -39,6 +39,11 @@ using RCTTextLayoutFragmentEnumerationBlock =
          paragraphAttributes:(facebook::react::ParagraphAttributes)paragraphAttributes
                        frame:(CGRect)frame;
 
+- (facebook::react::LinesMeasurements)getLinesForAttributedString:(facebook::react::AttributedString)attributedString
+                                              paragraphAttributes:
+                                                  (facebook::react::ParagraphAttributes)paragraphAttributes
+                                                             size:(CGSize)size;
+
 - (facebook::react::SharedEventEmitter)
     getEventEmitterWithAttributeString:(facebook::react::AttributedString)attributedString
                    paragraphAttributes:(facebook::react::ParagraphAttributes)paragraphAttributes

ReactCommon/react/renderer/textlayoutmanager/platform/ios/RCTTextLayoutManager.mm

@@ -113,6 +113,50 @@ - (void)drawAttributedString:(AttributedString)attributedString
   [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:frame.origin];
 }
 
+- (LinesMeasurements)getLinesForAttributedString:(facebook::react::AttributedString)attributedString
+                             paragraphAttributes:(facebook::react::ParagraphAttributes)paragraphAttributes
+                                            size:(CGSize)size
+{
+  NSTextStorage *textStorage = [self
+      _textStorageAndLayoutManagerWithAttributesString:[self _nsAttributedStringFromAttributedString:attributedString]
+                                   paragraphAttributes:paragraphAttributes
+                                                  size:size];
+  NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
+  NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
+
+  NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
+
+  std::vector<LineMeasurement> paragraphLines{};
+  auto blockParagraphLines = &paragraphLines;
+
+  [layoutManager enumerateLineFragmentsForGlyphRange:glyphRange
+                                          usingBlock:^(
+                                              CGRect overallRect,
+                                              CGRect usedRect,
+                                              NSTextContainer *_Nonnull usedTextContainer,
+                                              NSRange lineGlyphRange,
+                                              BOOL *_Nonnull stop) {
+                                            NSRange range = [layoutManager characterRangeForGlyphRange:lineGlyphRange
+                                                                                      actualGlyphRange:nil];
+                                            NSString *renderedString = [textStorage.string substringWithRange:range];
+                                            UIFont *font = [[textStorage attributedSubstringFromRange:range]
+                                                     attribute:NSFontAttributeName
+                                                       atIndex:0
+                                                effectiveRange:nil];
+                                            auto rect = facebook::react::Rect{
+                                                facebook::react::Point{usedRect.origin.x, usedRect.origin.y},
+                                                facebook::react::Size{usedRect.size.width, usedRect.size.height}};
+                                            auto line = LineMeasurement{std::string([renderedString UTF8String]),
+                                                                        rect,
+                                                                        -font.descender,
+                                                                        font.capHeight,
+                                                                        font.ascender,
+                                                                        font.xHeight};
+                                            blockParagraphLines->push_back(line);
+                                          }];
+  return paragraphLines;
+}
+
 - (NSTextStorage *)_textStorageAndLayoutManagerWithAttributesString:(NSAttributedString *)attributedString
                                                 paragraphAttributes:(ParagraphAttributes)paragraphAttributes
                                                                size:(CGSize)size

ReactCommon/react/renderer/textlayoutmanager/platform/ios/TextLayoutManager.h

@@ -39,6 +39,15 @@ class TextLayoutManager {
       ParagraphAttributes paragraphAttributes,
       LayoutConstraints layoutConstraints) const;
 
+  /*
+   * Measures lines of `attributedString` using native text rendering
+   * infrastructure.
+   */
+  LinesMeasurements measureLines(
+      AttributedString attributedString,
+      ParagraphAttributes paragraphAttributes,
+      Size size) const;
+
   /*
    * Returns an opaque pointer to platform-specific TextLayoutManager.
    * Is used on a native views layer to delegate text rendering to the manager.

ReactCommon/react/renderer/textlayoutmanager/platform/ios/TextLayoutManager.mm

@@ -6,7 +6,6 @@
  */
 
 #include "TextLayoutManager.h"
-
 #include <react/utils/ManagedObjectWrapper.h>
 
 #import "RCTTextLayoutManager.h"
@@ -63,5 +62,16 @@
   return measurement;
 }
 
+LinesMeasurements TextLayoutManager::measureLines(
+    AttributedString attributedString,
+    ParagraphAttributes paragraphAttributes,
+    Size size) const
+{
+  RCTTextLayoutManager *textLayoutManager = (RCTTextLayoutManager *)unwrapManagedObject(self_);
+  return [textLayoutManager getLinesForAttributedString:attributedString
+                                    paragraphAttributes:paragraphAttributes
+                                                   size:{size.width, size.height}];
+}
+
 } // namespace react
 } // namespace facebook