Cache NSTextStorage

Summary:
changelog: [internal]

This diff introduces a mechanism to cache NSTextStorage on Paragraph's state. The old renderer already has caching for NSTextStorage: https://github.com/facebook/react-native/blob/main/Libraries/Text/Text/RCTTextShadowView.m#L21

Fabric will store `NSTextStorage` inside `ParagraphLayoutManager` which is owned by state.

There is one notable change which is not gated: Paragraph's state strongly owns `TextLayoutManager`, not `ParagraphShadowNode` like previously. This shouldn't change anything

Reviewed By: mdvacca

Differential Revision: D43692171

fbshipit-source-id: efe6077222a30ab6d89abd9916534b9a96e745d4

Author: sammy-SC

React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -116,11 +116,8 @@ - (void)drawRect:(CGRect)rect
     return;
   }
 
-  auto textLayoutManager = _state->getData().layoutManager.lock();
-
-  if (!textLayoutManager) {
-    return;
-  }
+  auto textLayoutManager = _state->getData().paragraphLayoutManager.getTextLayoutManager();
+  auto nsTextStorage = _state->getData().paragraphLayoutManager.getHostTextStorage();
 
   RCTTextLayoutManager *nativeTextLayoutManager =
       (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
@@ -129,7 +126,8 @@ - (void)drawRect:(CGRect)rect
 
   [nativeTextLayoutManager drawAttributedString:_state->getData().attributedString
                             paragraphAttributes:_paragraphAttributes
-                                          frame:frame];
+                                          frame:frame
+                                    textStorage:unwrapManagedObject(nsTextStorage)];
 }
 
 #pragma mark - Accessibility
@@ -161,18 +159,15 @@ - (NSArray *)accessibilityElements
   auto &data = _state->getData();
 
   if (![_accessibilityProvider isUpToDate:data.attributedString]) {
-    auto textLayoutManager = data.layoutManager.lock();
-    if (textLayoutManager) {
-      RCTTextLayoutManager *nativeTextLayoutManager =
-          (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
-      CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
-      _accessibilityProvider =
-          [[RCTParagraphComponentAccessibilityProvider alloc] initWithString:data.attributedString
-                                                               layoutManager:nativeTextLayoutManager
-                                                         paragraphAttributes:data.paragraphAttributes
-                                                                       frame:frame
-                                                                        view:self];
-    }
+    auto textLayoutManager = data.paragraphLayoutManager.getTextLayoutManager();
+    RCTTextLayoutManager *nativeTextLayoutManager =
+        (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());
+    CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
+    _accessibilityProvider = [[RCTParagraphComponentAccessibilityProvider alloc] initWithString:data.attributedString
+                                                                                  layoutManager:nativeTextLayoutManager
+                                                                            paragraphAttributes:data.paragraphAttributes
+                                                                                          frame:frame
+                                                                                           view:self];
   }
 
   return _accessibilityProvider.accessibilityElements;
@@ -191,11 +186,7 @@ - (SharedTouchEventEmitter)touchEventEmitterAtPoint:(CGPoint)point
     return _eventEmitter;
   }
 
-  auto textLayoutManager = _state->getData().layoutManager.lock();
-
-  if (!textLayoutManager) {
-    return _eventEmitter;
-  }
+  auto textLayoutManager = _state->getData().paragraphLayoutManager.getTextLayoutManager();
 
   RCTTextLayoutManager *nativeTextLayoutManager =
       (RCTTextLayoutManager *)unwrapManagedObject(textLayoutManager->getNativeTextLayoutManager());

React/Fabric/RCTSurfacePresenter.mm

@@ -281,6 +281,10 @@ - (RCTScheduler *)_createScheduler
     CoreFeatures::useNativeState = true;
   }
 
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:enable_nstextstorage_caching")) {
+    CoreFeatures::cacheNSTextStorage = true;
+  }
+
   auto componentRegistryFactory =
       [factory = wrapManagedObject(_mountingManager.componentViewRegistry.componentViewFactory)](
           EventDispatcher::Weak const &eventDispatcher, ContextContainer::Shared const &contextContainer) {

ReactCommon/react/renderer/components/text/ParagraphLayoutManager.cpp

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "ParagraphLayoutManager.h"
+#include <folly/Hash.h>
+#include <react/renderer/core/CoreFeatures.h>
+
+namespace facebook::react {
+
+TextMeasurement ParagraphLayoutManager::measure(
+    AttributedString const &attributedString,
+    ParagraphAttributes const &paragraphAttributes,
+    LayoutConstraints layoutConstraints) const {
+  if (CoreFeatures::cacheNSTextStorage) {
+    size_t newHash = folly::hash::hash_combine(
+        0,
+        textAttributedStringHashLayoutWise(attributedString),
+        paragraphAttributes);
+
+    if (!hostTextStorage_ || newHash != hash_) {
+      hostTextStorage_ = textLayoutManager_->getHostTextStorage(
+          attributedString, paragraphAttributes, layoutConstraints);
+      hash_ = newHash;
+    }
+  }
+
+  return textLayoutManager_->measure(
+      AttributedStringBox(attributedString),
+      paragraphAttributes,
+      layoutConstraints,
+      hostTextStorage_);
+}
+
+LinesMeasurements ParagraphLayoutManager::measureLines(
+    AttributedString const &attributedString,
+    ParagraphAttributes const &paragraphAttributes,
+    Size size) const {
+  return textLayoutManager_->measureLines(
+      attributedString, paragraphAttributes, size);
+}
+
+void ParagraphLayoutManager::setTextLayoutManager(
+    std::shared_ptr<TextLayoutManager const> textLayoutManager) const {
+  textLayoutManager_ = std::move(textLayoutManager);
+}
+
+std::shared_ptr<TextLayoutManager const>
+ParagraphLayoutManager::getTextLayoutManager() const {
+  return textLayoutManager_;
+}
+
+std::shared_ptr<void> ParagraphLayoutManager::getHostTextStorage() const {
+  return hostTextStorage_;
+}
+} // namespace facebook::react

ReactCommon/react/renderer/components/text/ParagraphLayoutManager.h

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and 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/attributedstring/AttributedString.h>
+#include <react/renderer/attributedstring/ParagraphAttributes.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+
+namespace facebook::react {
+
+/*
+ * Serves as a middle man between `ParagraphShadowNode` and `TextLayoutManager`.
+ * On iOS, caches `NSTextStorage` for individual `ParagraphShadowNode` to make
+ * sure only one `NSTextStorage` is created for every string. `NSTextStorage`
+ * can be re created on native views layer but it is expensive. On Android, this
+ * class does not cache anything.
+ */
+class ParagraphLayoutManager {
+ public:
+  TextMeasurement measure(
+      AttributedString const &attributedString,
+      ParagraphAttributes const &paragraphAttributes,
+      LayoutConstraints layoutConstraints) const;
+
+  LinesMeasurements measureLines(
+      AttributedString const &attributedString,
+      ParagraphAttributes const &paragraphAttributes,
+      Size size) const;
+
+  void setTextLayoutManager(
+      std::shared_ptr<TextLayoutManager const> textLayoutManager) const;
+
+  /*
+   * Returns an opaque pointer to platform-specific `TextLayoutManager`.
+   * Is used on a native views layer to delegate text rendering to the manager.
+   */
+  std::shared_ptr<TextLayoutManager const> getTextLayoutManager() const;
+
+  /*
+   * Returns opaque shared_ptr holding `NSTextStorage`.
+   * May be nullptr.
+   * Is used on a native views layer to prevent `NSTextStorage` from being
+   * created twice.
+   */
+  std::shared_ptr<void> getHostTextStorage() const;
+
+ private:
+  std::shared_ptr<TextLayoutManager const> mutable textLayoutManager_{};
+  std::shared_ptr<void> mutable hostTextStorage_{};
+
+  size_t mutable hash_{};
+};
+} // namespace facebook::react

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

@@ -95,15 +95,16 @@ Content ParagraphShadowNode::getContentWithMeasuredAttachments(
 void ParagraphShadowNode::setTextLayoutManager(
     std::shared_ptr<TextLayoutManager const> textLayoutManager) {
   ensureUnsealed();
-  textLayoutManager_ = std::move(textLayoutManager);
+  getStateData().paragraphLayoutManager.setTextLayoutManager(
+      std::move(textLayoutManager));
 }
 
 void ParagraphShadowNode::updateStateIfNeeded(Content const &content) {
   ensureUnsealed();
 
   auto &state = getStateData();
 
-  react_native_assert(textLayoutManager_);
+  react_native_assert(state.paragraphLayoutManager.getTextLayoutManager());
 
   if (state.attributedString == content.attributedString) {
     return;
@@ -112,7 +113,7 @@ void ParagraphShadowNode::updateStateIfNeeded(Content const &content) {
   setStateData(ParagraphState{
       content.attributedString,
       content.paragraphAttributes,
-      textLayoutManager_});
+      state.paragraphLayoutManager});
 }
 
 #pragma mark - LayoutableShadowNode
@@ -136,11 +137,9 @@ Size ParagraphShadowNode::measureContent(
     attributedString.appendFragment({string, textAttributes, {}});
   }
 
-  return textLayoutManager_
-      ->measure(
-          AttributedStringBox{attributedString},
-          content.paragraphAttributes,
-          layoutConstraints)
+  return getStateData()
+      .paragraphLayoutManager
+      .measure(attributedString, content.paragraphAttributes, layoutConstraints)
       .size;
 }
 
@@ -157,13 +156,11 @@ void ParagraphShadowNode::layout(LayoutContext layoutContext) {
 
   updateStateIfNeeded(content);
 
-  auto measurement = textLayoutManager_->measure(
-      AttributedStringBox{content.attributedString},
-      content.paragraphAttributes,
-      layoutConstraints);
+  auto measurement = getStateData().paragraphLayoutManager.measure(
+      content.attributedString, content.paragraphAttributes, layoutConstraints);
 
   if (getConcreteProps().onTextLayout) {
-    auto linesMeasurements = textLayoutManager_->measureLines(
+    auto linesMeasurements = getStateData().paragraphLayoutManager.measureLines(
         content.attributedString,
         content.paragraphAttributes,
         measurement.size);

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

@@ -7,15 +7,14 @@
 
 #pragma once
 
+#include <react/renderer/components/text/BaseTextShadowNode.h>
 #include <react/renderer/components/text/ParagraphEventEmitter.h>
+#include <react/renderer/components/text/ParagraphLayoutManager.h>
 #include <react/renderer/components/text/ParagraphProps.h>
 #include <react/renderer/components/text/ParagraphState.h>
-#include <react/renderer/components/text/TextShadowNode.h>
 #include <react/renderer/components/view/ConcreteViewShadowNode.h>
-#include <react/renderer/core/ConcreteShadowNode.h>
 #include <react/renderer/core/LayoutContext.h>
 #include <react/renderer/core/ShadowNode.h>
-#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
 
 namespace facebook {
 namespace react {
@@ -96,8 +95,6 @@ class ParagraphShadowNode final : public ConcreteViewShadowNode<
    */
   void updateStateIfNeeded(Content const &content);
 
-  std::shared_ptr<TextLayoutManager const> textLayoutManager_;
-
   /*
    * Cached content of the subtree started from the node.
    */

ReactCommon/react/renderer/components/text/ParagraphState.h

@@ -10,15 +10,14 @@
 #include <react/debug/react_native_assert.h>
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/attributedstring/ParagraphAttributes.h>
-#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+#include <react/renderer/components/text/ParagraphLayoutManager.h>
 
 #ifdef ANDROID
 #include <folly/dynamic.h>
 #include <react/renderer/mapbuffer/MapBuffer.h>
 #endif
 
-namespace facebook {
-namespace react {
+namespace facebook::react {
 
 #ifdef ANDROID
 // constants for Text State serialization
@@ -33,8 +32,7 @@ constexpr static MapBuffer::Key TX_STATE_KEY_MOST_RECENT_EVENT_COUNT = 3;
  * State for <Paragraph> component.
  * Represents what to render and how to render.
  */
-class ParagraphState final {
- public:
+struct ParagraphState {
   /*
    * All content of <Paragraph> component represented as an `AttributedString`.
    */
@@ -47,22 +45,22 @@ class ParagraphState final {
   ParagraphAttributes paragraphAttributes;
 
   /*
-   * `TextLayoutManager` provides a connection to platform-specific
+   * `ParagraphLayoutManager` provides a connection to platform-specific
    * text rendering infrastructure which is capable to render the
    * `AttributedString`.
    * This is not on every platform. This is not used on Android, but is
    * used on the iOS mounting layer.
    */
-  std::weak_ptr<TextLayoutManager const> layoutManager;
+  ParagraphLayoutManager paragraphLayoutManager;
 
 #ifdef ANDROID
   ParagraphState(
       AttributedString const &attributedString,
       ParagraphAttributes const &paragraphAttributes,
-      std::weak_ptr<const TextLayoutManager> const &layoutManager)
+      ParagraphLayoutManager const &paragraphLayoutManager)
       : attributedString(attributedString),
         paragraphAttributes(paragraphAttributes),
-        layoutManager(layoutManager) {}
+        paragraphLayoutManager(paragraphLayoutManager) {}
   ParagraphState() = default;
   ParagraphState(
       ParagraphState const &previousState,
@@ -74,5 +72,4 @@ class ParagraphState final {
 #endif
 };
 
-} // namespace react
-} // namespace facebook
+} // namespace facebook::react

ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputShadowNode.cpp

@@ -197,7 +197,8 @@ Size AndroidTextInputShadowNode::measureContent(
       ->measure(
           AttributedStringBox{attributedString},
           getConcreteProps().paragraphAttributes,
-          layoutConstraints)
+          layoutConstraints,
+          nullptr)
       .size;
 }
 

ReactCommon/react/renderer/components/textinput/iostextinput/react/renderer/components/iostextinput/TextInputShadowNode.cpp

@@ -110,7 +110,8 @@ Size TextInputShadowNode::measureContent(
       ->measure(
           attributedStringBoxToMeasure(layoutContext),
           getConcreteProps().getEffectiveParagraphAttributes(),
-          layoutConstraints)
+          layoutConstraints,
+          nullptr)
       .size;
 }
 

ReactCommon/react/renderer/core/CoreFeatures.cpp

@@ -14,6 +14,7 @@ bool CoreFeatures::enablePropIteratorSetter = false;
 bool CoreFeatures::enableMapBuffer = false;
 bool CoreFeatures::blockPaintForUseLayoutEffect = false;
 bool CoreFeatures::useNativeState = false;
+bool CoreFeatures::cacheNSTextStorage = false;
 
 } // namespace react
 } // namespace facebook

ReactCommon/react/renderer/core/CoreFeatures.h

@@ -34,6 +34,11 @@ class CoreFeatures {
   // Whether to use Hermes' NativeState instead of HostObject
   // in simple data passing scenarios with JS
   static bool useNativeState;
+
+  // Creating NSTextStorage is relatively expensive operation and we were
+  // creating it twice. Once when measuring text and once when rendering it.
+  // This flag caches it inside ParagraphState.
+  static bool cacheNSTextStorage;
 };
 
 } // namespace react

ReactCommon/react/renderer/textlayoutmanager/TextMeasureCache.h

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <folly/Hash.h>
 #include <react/renderer/attributedstring/AttributedString.h>
 #include <react/renderer/attributedstring/ParagraphAttributes.h>
 #include <react/renderer/core/LayoutConstraints.h>