Implement baseline alignment function on the new architecture

packages/react-native/ReactCommon/react/renderer/components/text/ParagraphShadowNode.cpp

@@ -163,6 +163,35 @@ Size ParagraphShadowNode::measureContent(
       .size;
 }
 
+Float ParagraphShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  auto layoutMetrics = getLayoutMetrics();
+  auto layoutConstraints =
+      LayoutConstraints{size, size, layoutMetrics.layoutDirection};
+  auto content =
+      getContentWithMeasuredAttachments(layoutContext, layoutConstraints);
+  auto attributedString = content.attributedString;
+
+  if (attributedString.isEmpty()) {
+    // Note: `zero-width space` is insufficient in some cases (e.g. when we need
+    // to measure the "height" of the font).
+    // TODO T67606511: We will redefine the measurement of empty strings as part
+    // of T67606511
+    auto string = BaseTextShadowNode::getEmptyPlaceholder();
+    auto textAttributes = TextAttributes::defaultTextAttributes();
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
+    textAttributes.apply(getConcreteProps().textAttributes);
+    attributedString.appendFragment({string, textAttributes, {}});
+  }
+
+  return textLayoutManager_
+      ->baseline(
+          attributedString,
+          getConcreteProps().paragraphAttributes,
+          size);
+}
+
 void ParagraphShadowNode::layout(LayoutContext layoutContext) {
   ensureUnsealed();
 

packages/react-native/ReactCommon/react/renderer/components/text/ParagraphShadowNode.h

@@ -43,6 +43,7 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
     traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
 
 #ifdef ANDROID
     // Unsetting `FormsStackingContext` trait is essential on Android where we
@@ -69,6 +70,10 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
       const LayoutContext& layoutContext,
       const LayoutConstraints& layoutConstraints) const override;
 
+  Float baseline(
+      const LayoutContext& layoutContext,
+      Size size) const override;
+
   /*
    * Internal representation of the nested content of the node in a format
    * suitable for future processing.

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.cpp

@@ -214,6 +214,28 @@ Size AndroidTextInputShadowNode::measureContent(
       .size;
 }
 
+Float AndroidTextInputShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  AttributedString attributedString = getMostRecentAttributedString();
+
+  if (attributedString.isEmpty()) {
+    attributedString = getPlaceholderAttributedString();
+  }
+
+  // Yoga expects a baseline relative to the Node's border-box edge instead of
+  // the content, so we need to adjust by the padding and border widths, which
+  // have already been set by the time of baseline alignment
+  auto top = YGNodeLayoutGetBorder(&yogaNode_, YGEdgeTop) +
+      YGNodeLayoutGetPadding(&yogaNode_, YGEdgeTop);
+
+  return textLayoutManager_
+      ->baseline(
+          attributedString,
+          getConcreteProps().paragraphAttributes,
+          size) + top;
+}
+
 void AndroidTextInputShadowNode::layout(LayoutContext layoutContext) {
   updateStateIfNeeded();
   ConcreteViewShadowNode::layout(layoutContext);

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.h

@@ -34,6 +34,7 @@ class AndroidTextInputShadowNode final
   static ShadowNodeTraits BaseTraits() {
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
     return traits;
   }
 
@@ -65,6 +66,10 @@ class AndroidTextInputShadowNode final
       const LayoutConstraints& layoutConstraints) const override;
   void layout(LayoutContext layoutContext) override;
 
+  Float baseline(
+      const LayoutContext& layoutContext,
+      Size size) const override;
+
  private:
   ContextContainer* contextContainer_{};
 

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputShadowNode.cpp

@@ -140,6 +140,33 @@ Size TextInputShadowNode::measureContent(
       .size;
 }
 
+Float TextInputShadowNode::baseline(
+    const LayoutContext& layoutContext,
+    Size size) const {
+  auto attributedString = getAttributedString(layoutContext);
+
+  if (attributedString.isEmpty()) {
+    auto placeholderString = !getConcreteProps().placeholder.empty()
+      ? getConcreteProps().placeholder
+      : BaseTextShadowNode::getEmptyPlaceholder();
+    auto textAttributes = getConcreteProps().getEffectiveTextAttributes(
+      layoutContext.fontSizeMultiplier);
+    attributedString.appendFragment({std::move(placeholderString), textAttributes, {}});
+  }
+
+  // Yoga expects a baseline relative to the Node's border-box edge instead of
+  // the content, so we need to adjust by the padding and border widths, which
+  // have already been set by the time of baseline alignment
+  auto top = YGNodeLayoutGetBorder(&yogaNode_, YGEdgeTop) +
+      YGNodeLayoutGetPadding(&yogaNode_, YGEdgeTop);
+
+  return textLayoutManager_
+      ->baseline(
+        attributedString,
+        getConcreteProps().getEffectiveParagraphAttributes(),
+        size) + top;
+}
+
 void TextInputShadowNode::layout(LayoutContext layoutContext) {
   updateStateIfNeeded(layoutContext);
   ConcreteViewShadowNode::layout(layoutContext);

packages/react-native/ReactCommon/react/renderer/components/textinput/platform/ios/react/renderer/components/iostextinput/TextInputShadowNode.h

@@ -40,6 +40,7 @@ class TextInputShadowNode final : public ConcreteViewShadowNode<
     auto traits = ConcreteViewShadowNode::BaseTraits();
     traits.set(ShadowNodeTraits::Trait::LeafYogaNode);
     traits.set(ShadowNodeTraits::Trait::MeasurableYogaNode);
+    traits.set(ShadowNodeTraits::Trait::BaselineYogaNode);
     return traits;
   }
 
@@ -58,6 +59,10 @@ class TextInputShadowNode final : public ConcreteViewShadowNode<
       const LayoutConstraints& layoutConstraints) const override;
   void layout(LayoutContext layoutContext) override;
 
+  Float baseline(
+      const LayoutContext& layoutContext,
+      Size size) const override;
+
  private:
   /*
    * Creates a `State` object if needed.

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -81,6 +81,11 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
         YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector);
   }
 
+  if (getTraits().check(ShadowNodeTraits::Trait::BaselineYogaNode)) {
+    yogaNode_.setBaselineFunc(
+        YogaLayoutableShadowNode::yogaNodeBaselineCallbackConnector);
+  }
+
   updateYogaProps();
   updateYogaChildren();
 
@@ -845,6 +850,22 @@ YGSize YogaLayoutableShadowNode::yogaNodeMeasureCallbackConnector(
       yogaFloatFromFloat(size.width), yogaFloatFromFloat(size.height)};
 }
 
+float YogaLayoutableShadowNode::yogaNodeBaselineCallbackConnector(
+    YGNodeConstRef yogaNode,
+    float width,
+    float height) {
+  SystraceSection s(
+      "YogaLayoutableShadowNode::yogaNodeBaselineCallbackConnector");
+
+  auto& shadowNode = shadowNodeFromContext(yogaNode);
+  auto baseline = shadowNode.baseline(
+      threadLocalLayoutContext,
+      {.width = floatFromYogaFloat(width),
+      .height = floatFromYogaFloat(height)});
+
+  return yogaFloatFromFloat(baseline);
+}
+
 YogaLayoutableShadowNode& YogaLayoutableShadowNode::shadowNodeFromContext(
     YGNodeConstRef yogaNode) {
   return dynamic_cast<YogaLayoutableShadowNode&>(

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h

@@ -164,6 +164,10 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
       YGMeasureMode widthMode,
       float height,
       YGMeasureMode heightMode);
+  static float yogaNodeBaselineCallbackConnector(
+      YGNodeConstRef yogaNode,
+      float width,
+      float height);
   static YogaLayoutableShadowNode& shadowNodeFromContext(
       YGNodeConstRef yogaNode);
 

packages/react-native/ReactCommon/react/renderer/core/LayoutableShadowNode.cpp

@@ -240,11 +240,7 @@ Size LayoutableShadowNode::measure(
   return layoutableShadowNode.getLayoutMetrics().frame.size;
 }
 
-Float LayoutableShadowNode::firstBaseline(Size /*size*/) const {
-  return 0;
-}
-
-Float LayoutableShadowNode::lastBaseline(Size /*size*/) const {
+Float LayoutableShadowNode::baseline(const LayoutContext& /*layoutContext*/, Size /*size*/) const {
   return 0;
 }
 

packages/react-native/ReactCommon/react/renderer/core/LayoutableShadowNode.h

@@ -153,8 +153,7 @@ class LayoutableShadowNode : public ShadowNode {
   /*
    * Unifed methods to access text layout metrics.
    */
-  virtual Float firstBaseline(Size size) const;
-  virtual Float lastBaseline(Size size) const;
+  virtual Float baseline(const LayoutContext& layoutContext, Size size) const;
 
   virtual bool canBeTouchTarget() const;
   virtual bool canChildrenBeTouchTarget() const;

packages/react-native/ReactCommon/react/renderer/core/ShadowNodeTraits.h

@@ -75,6 +75,9 @@ class ShadowNodeTraits {
 
     // Indicates that direct children of the node should not be collapsed
     ChildrenFormStackingContext = 1 << 10,
+
+    // Inherits `YogaLayoutableShadowNode` and has a custom baseline function.
+    BaselineYogaNode = 1 << 11,
   };
 
   /*

packages/react-native/ReactCommon/react/renderer/textlayoutmanager/TextMeasureCache.h

@@ -66,6 +66,16 @@ class TextMeasureCacheKey final {
   LayoutConstraints layoutConstraints{};
 };
 
+// The Key type that is used for Line Measure Cache.
+// The equivalence and hashing operations of this are defined to respect the
+// nature of text measuring.
+class LineMeasureCacheKey final {
+ public:
+  AttributedString attributedString{};
+  ParagraphAttributes paragraphAttributes{};
+  Size size{};
+};
+
 /*
  * Maximum size of the Cache.
  * The number was empirically chosen based on approximation of an average amount
@@ -82,6 +92,15 @@ using TextMeasureCache = SimpleThreadSafeCache<
     TextMeasurement,
     kSimpleThreadSafeCacheSizeCap>;
 
+/*
+ * Thread-safe, evicting hash table designed to store line measurement
+ * information.
+ */
+using LineMeasureCache = SimpleThreadSafeCache<
+    LineMeasureCacheKey,
+    LinesMeasurements,
+    kSimpleThreadSafeCacheSizeCap>;
+
 inline bool areTextAttributesEquivalentLayoutWise(
     const TextAttributes& lhs,
     const TextAttributes& rhs) {
@@ -199,6 +218,21 @@ inline bool operator!=(
   return !(lhs == rhs);
 }
 
+inline bool operator==(
+    const LineMeasureCacheKey& lhs,
+    const LineMeasureCacheKey& rhs) {
+  return areAttributedStringsEquivalentLayoutWise(
+             lhs.attributedString, rhs.attributedString) &&
+      lhs.paragraphAttributes == rhs.paragraphAttributes &&
+      lhs.size == rhs.size;
+}
+
+inline bool operator!=(
+    const LineMeasureCacheKey& lhs,
+    const LineMeasureCacheKey& rhs) {
+  return !(lhs == rhs);
+}
+
 } // namespace facebook::react
 
 namespace std {
@@ -213,4 +247,14 @@ struct hash<facebook::react::TextMeasureCacheKey> {
   }
 };
 
+template <>
+struct hash<facebook::react::LineMeasureCacheKey> {
+  size_t operator()(const facebook::react::LineMeasureCacheKey& key) const {
+    return facebook::react::hash_combine(
+        attributedStringHashLayoutWise(key.attributedString),
+        key.paragraphAttributes,
+        key.size);
+  }
+};
+
 } // namespace std