react-native-windows 0.79.5 → 0.80.0-preview.10

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -8,8 +8,11 @@
 #include <AutoDraw.h>
 #include <Fabric/Composition/CompositionDynamicAutomationProvider.h>
 #include <Fabric/Composition/UiaHelpers.h>
+#include <Fabric/platform/react/renderer/graphics/PlatformColorUtils.h>
+#include <Utils/ThemeUtils.h>
 #include <Utils/ValueUtils.h>
 #include <react/renderer/components/textinput/TextInputState.h>
+#include <react/renderer/graphics/HostPlatformColor.h>
 #include <react/renderer/textlayoutmanager/WindowsTextLayoutManager.h>
 #include <tom.h>
 #include <unicode.h>
@@ -316,24 +319,39 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
     switch (nIndex) {
       case COLOR_WINDOWTEXT:
-        if (m_outer->windowsTextInputProps().textAttributes.foregroundColor)
-          return (*m_outer->windowsTextInputProps().textAttributes.foregroundColor).AsColorRefNoAlpha();
+        if (m_outer->windowsTextInputProps().textAttributes.foregroundColor) {
+          auto color = m_outer->theme()->Color(*m_outer->windowsTextInputProps().textAttributes.foregroundColor);
+          return RGB(color.R, color.G, color.B);
+        }
         // cr = 0x000000FF;
         break;
-
       case COLOR_WINDOW:
         if (m_outer->viewProps()->backgroundColor)
           return (*m_outer->viewProps()->backgroundColor).AsColorRefNoAlpha();
         break;
-        // case COLOR_HIGHLIGHT:
-        // cr = RGB(0, 0, 255);
-        // cr = 0x0000ffFF;
-        //          break;
 
-        // case COLOR_HIGHLIGHTTEXT:
-        // cr = RGB(255, 0, 0);
-        // cr = 0xFFFFFFFF;
-        //          break;
+      case COLOR_HIGHLIGHT:
+        if (m_outer->windowsTextInputProps().selectionColor) {
+          auto color = m_outer->theme()->Color(*m_outer->windowsTextInputProps().selectionColor);
+          return RGB(color.R, color.G, color.B);
+        }
+        break;
+
+      case COLOR_HIGHLIGHTTEXT:
+        // For selected text color, we use the same color as the selection background
+        // or the text color if selection color is not specified
+        if (m_outer->windowsTextInputProps().selectionColor) {
+          // Calculate appropriate text color based on selection background
+          auto selectionColor = (*m_outer->windowsTextInputProps().selectionColor).AsColorRefNoAlpha();
+          // Use white text for dark selection, black text for light selection
+          int r = GetRValue(selectionColor);
+          int g = GetGValue(selectionColor);
+          int b = GetBValue(selectionColor);
+          int brightness = ::Microsoft::ReactNative::CalculateColorBrightness(r, g, b);
+          return brightness > ::Microsoft::ReactNative::kCaretSelectionBrightnessThreshold ? RGB(0, 0, 0)
+                                                                                           : RGB(255, 255, 255);
+        }
+        break;
 
         // case COLOR_GRAYTEXT:
         // cr = RGB(128, 128, 128);
@@ -749,6 +767,24 @@ void WindowsTextInputComponentView::OnPointerReleased(
     auto hr = m_textServices->TxSendMessage(msg, static_cast<WPARAM>(wParam), static_cast<LPARAM>(lParam), &lresult);
     args.Handled(hr != S_FALSE);
   }
+
+  // Emits the OnPressOut event
+  if (m_eventEmitter && !m_comingFromJS) {
+    auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+    float offsetX = position.X - m_layoutMetrics.frame.origin.x;
+    float offsetY = position.Y - m_layoutMetrics.frame.origin.y;
+    float neutralX = m_layoutMetrics.frame.origin.x;
+    float neutralY = m_layoutMetrics.frame.origin.y;
+
+    facebook::react::GestureResponderEvent pressOutArgs;
+    pressOutArgs.target = m_tag;
+    pressOutArgs.pagePoint = {position.X, position.Y};
+    pressOutArgs.offsetPoint = {offsetX, offsetY}; //{LocationX,LocationY}
+    pressOutArgs.timestamp = static_cast<double>(pp.Timestamp()) / 1000.0;
+    pressOutArgs.identifier = pp.PointerId();
+
+    emitter->onPressOut(pressOutArgs);
+  }
 }
 
 void WindowsTextInputComponentView::OnPointerMoved(
@@ -783,6 +819,29 @@ void WindowsTextInputComponentView::OnPointerMoved(
       DVASPECT_CONTENT, -1, nullptr, nullptr, nullptr, nullptr, nullptr, ptContainer.x, ptContainer.y);
 }
 
+void WindowsTextInputComponentView::OnPointerWheelChanged(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (windowsTextInputProps().scrollEnabled && windowsTextInputProps().multiline) {
+    auto pointerPointProperties = args.GetCurrentPoint(-1).Properties();
+
+    auto delta = static_cast<float>(pointerPointProperties.MouseWheelDelta());
+
+    if (m_textServices && !pointerPointProperties.IsHorizontalMouseWheel()) {
+      // Vertical scrolling
+      if (delta > 0) {
+        m_textServices->TxSendMessage(WM_VSCROLL, SB_LINEUP, 0, nullptr);
+      } else {
+        m_textServices->TxSendMessage(WM_VSCROLL, SB_LINEDOWN, 0, nullptr);
+      }
+      args.Handled(true);
+    }
+    // Emit the onScroll event
+    EmitOnScrollEvent();
+
+    // We don't support horizontal scrolling yet cause it is not implemented in Android/IOS
+  }
+  Super::OnPointerWheelChanged(args);
+}
 void WindowsTextInputComponentView::OnKeyDown(
     const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
   // Do not forward tab keys into the TextInput, since we want that to do the tab loop instead.  This aligns with WinUI
@@ -808,7 +867,6 @@ void WindowsTextInputComponentView::OnKeyDown(
       args.Handled(true);
     }
   }
-
   Super::OnKeyDown(args);
 }
 
@@ -838,7 +896,6 @@ void WindowsTextInputComponentView::OnKeyUp(
       args.Handled(true);
     }
   }
-
   Super::OnKeyUp(args);
 }
 
@@ -1028,13 +1085,9 @@ std::string WindowsTextInputComponentView::DefaultHelpText() const noexcept {
 void WindowsTextInputComponentView::updateCursorColor(
     const facebook::react::SharedColor &cursorColor,
     const facebook::react::SharedColor &foregroundColor) noexcept {
-  if (cursorColor) {
-    m_caretVisual.Brush(theme()->Brush(*cursorColor));
-  } else if (foregroundColor) {
-    m_caretVisual.Brush(theme()->Brush(*foregroundColor));
-  } else {
-    m_caretVisual.Brush(theme()->PlatformBrush("TextControlForeground"));
-  }
+  const auto &props = windowsTextInputProps();
+  auto caretColor = ::Microsoft::ReactNative::GetCaretColor(cursorColor, foregroundColor, props.backgroundColor);
+  m_caretVisual.Brush(theme()->Brush(*caretColor));
 }
 
 void WindowsTextInputComponentView::updateProps(
@@ -1052,7 +1105,10 @@ void WindowsTextInputComponentView::updateProps(
       oldTextInputProps.textAttributes.fontWeight != newTextInputProps.textAttributes.fontWeight ||
       !facebook::react::floatEquality(
           oldTextInputProps.textAttributes.letterSpacing, newTextInputProps.textAttributes.letterSpacing) ||
-      oldTextInputProps.textAttributes.fontFamily != newTextInputProps.textAttributes.fontFamily) {
+      oldTextInputProps.textAttributes.fontFamily != newTextInputProps.textAttributes.fontFamily ||
+      !facebook::react::floatEquality(
+          oldTextInputProps.textAttributes.maxFontSizeMultiplier,
+          newTextInputProps.textAttributes.maxFontSizeMultiplier)) {
     m_propBitsMask |= TXTBIT_CHARFORMATCHANGE;
     m_propBits |= TXTBIT_CHARFORMATCHANGE;
   }
@@ -1126,11 +1182,14 @@ void WindowsTextInputComponentView::updateProps(
     bool effectiveSpellCheck = newTextInputProps.spellCheck || newTextInputProps.autoCorrect;
     updateSpellCheck(effectiveSpellCheck);
   }
-
   if (!oldProps || oldTextInputProps.autoCorrect != newTextInputProps.autoCorrect) {
     updateAutoCorrect(newTextInputProps.autoCorrect);
   }
 
+  if (oldTextInputProps.selectionColor != newTextInputProps.selectionColor) {
+    m_needsRedraw = true;
+  }
+
   UpdatePropertyBits();
 }
 
@@ -1216,6 +1275,49 @@ void WindowsTextInputComponentView::updateLayoutMetrics(
   m_imgHeight = newHeight;
 }
 
+std::pair<float, float> WindowsTextInputComponentView::GetContentSize() const noexcept {
+  if (!m_textServices)
+    return {0.0f, 0.0f};
+
+  // Get a device context for measurement
+  HDC hdc = GetDC(nullptr);
+  if (!hdc)
+    return {0.0f, 0.0f};
+
+  // Use the layout width as the constraint (always multiline)
+  float availableWidth = m_layoutMetrics.frame.size.width;
+  float scale = m_layoutMetrics.pointScaleFactor;
+  float dpi = m_layoutMetrics.pointScaleFactor * GetDpiForSystem();
+  constexpr float HIMETRIC_PER_INCH = 2540.0f;
+
+  SIZE extentHimetric = {
+      static_cast<LONG>(availableWidth * scale * HIMETRIC_PER_INCH / dpi),
+      static_cast<LONG>(std::numeric_limits<LONG>::max() * HIMETRIC_PER_INCH / dpi)};
+
+  SIZE naturalSize = {0, 0};
+
+  HRESULT hr = m_textServices->TxGetNaturalSize(
+      DVASPECT_CONTENT,
+      hdc,
+      nullptr,
+      nullptr,
+      static_cast<DWORD>(TXTNS_FITTOCONTENTWSP),
+      reinterpret_cast<SIZEL *>(&extentHimetric),
+      &naturalSize.cx,
+      &naturalSize.cy);
+
+  ReleaseDC(nullptr, hdc);
+
+  if (FAILED(hr)) {
+    return {0.0f, 0.0f};
+  }
+
+  float contentWidth = static_cast<float>(naturalSize.cx) / scale;
+  float contentHeight = static_cast<float>(naturalSize.cy) / scale;
+
+  return {contentWidth, contentHeight};
+}
+
 // When we are notified by RichEdit that the text changed, we need to notify JS
 void WindowsTextInputComponentView::OnTextUpdated() noexcept {
   auto data = m_state->getData();
@@ -1234,6 +1336,13 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
     onChangeArgs.text = GetTextFromRichEdit();
     onChangeArgs.eventCount = ++m_nativeEventCount;
     emitter->onChange(onChangeArgs);
+    if (windowsTextInputProps().multiline) {
+      auto [contentWidth, contentHeight] = GetContentSize();
+      facebook::react::WindowsTextInputEventEmitter::OnContentSizeChange onContentSizeChangeArgs;
+      onContentSizeChangeArgs.contentSize.width = contentWidth;
+      onContentSizeChangeArgs.contentSize.height = contentHeight;
+      emitter->onContentSizeChange(onContentSizeChangeArgs);
+    }
   }
 
   if (UiaClientsAreListening()) {
@@ -1243,6 +1352,22 @@ void WindowsTextInputComponentView::OnTextUpdated() noexcept {
   }
 }
 
+void WindowsTextInputComponentView::EmitOnScrollEvent() noexcept {
+  if (!windowsTextInputProps().scrollEnabled || !m_eventEmitter || m_comingFromJS || !m_textServices) {
+    return;
+  }
+  LONG hMin, hMax, hPos, hPage;
+  LONG vMin, vMax, vPos, vPage;
+  BOOL hEnabled, vEnabled;
+  winrt::check_hresult(m_textServices->TxGetHScroll(&hMin, &hMax, &hPos, &hPage, &hEnabled));
+  winrt::check_hresult(m_textServices->TxGetVScroll(&vMin, &vMax, &vPos, &vPage, &vEnabled));
+  facebook::react::Point offset;
+  offset.x = static_cast<float>(hPos);
+  offset.y = static_cast<float>(vPos);
+  auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
+  emitter->onScroll(offset);
+}
+
 void WindowsTextInputComponentView::OnSelectionChanged(LONG start, LONG end) noexcept {
   if (m_eventEmitter && !m_comingFromState /* && !m_comingFromJS ?? */) {
     auto emitter = std::static_pointer_cast<const facebook::react::WindowsTextInputEventEmitter>(m_eventEmitter);
@@ -1308,6 +1433,13 @@ void WindowsTextInputComponentView::onMounted() noexcept {
     m_propBits |= TXTBIT_CHARFORMATCHANGE;
   }
   InternalFinalize();
+
+  // Handle autoFocus property - focus the component when mounted if autoFocus is true
+  if (windowsTextInputProps().autoFocus) {
+    if (auto root = rootComponentView()) {
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+    }
+  }
 }
 
 std::optional<std::string> WindowsTextInputComponentView::getAccessiblityValue() noexcept {
@@ -1352,9 +1484,15 @@ void WindowsTextInputComponentView::UpdateCharFormat() noexcept {
 
   // set font size -- 15 to convert twips to pt
   const auto &props = windowsTextInputProps();
-  float fontSize = m_fontSizeMultiplier *
+  float fontSize =
       (std::isnan(props.textAttributes.fontSize) ? facebook::react::TextAttributes::defaultTextAttributes().fontSize
                                                  : props.textAttributes.fontSize);
+
+  // Apply maxFontSizeMultiplier if specified
+  auto maxFontSizeMultiplier = windowsTextInputProps().textAttributes.maxFontSizeMultiplier;
+  fontSize *=
+      (maxFontSizeMultiplier >= 1.0f) ? std::min(maxFontSizeMultiplier, m_fontSizeMultiplier) : m_fontSizeMultiplier;
+
   // TODO get fontSize from props.textAttributes, or defaultTextAttributes, or fragment?
   cfNew.dwMask |= CFM_SIZE;
   cfNew.yHeight = static_cast<LONG>(fontSize * 15);
@@ -1461,6 +1599,8 @@ void WindowsTextInputComponentView::ensureDrawingSurface() noexcept {
 
 void WindowsTextInputComponentView::ShowCaret(bool show) noexcept {
   ensureVisual();
+  const auto &props = windowsTextInputProps();
+  updateCursorColor(props.cursorColor, props.textAttributes.foregroundColor);
   m_caretVisual.IsVisible(show);
 }
 
@@ -1555,8 +1695,20 @@ void WindowsTextInputComponentView::DrawText() noexcept {
           auto color = theme()->D2DColor(*props.placeholderTextColor);
           winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(color, brush.put()));
         } else {
-          winrt::check_hresult(
-              d2dDeviceContext->CreateSolidColorBrush(D2D1::ColorF(D2D1::ColorF::Gray, 1.0f), brush.put()));
+          // Use theme-aware placeholder color based on focus state and background
+          // Color selection follows Windows 11 design system semantic colors:
+          // - High contrast: System GrayText for accessibility
+          // - Light backgrounds: Darker grays for better contrast
+          // - Dark backgrounds: Lighter grays for readability
+          winrt::Windows::UI::Color backgroundColor = {};
+          if (facebook::react::isColorMeaningful(props.backgroundColor)) {
+            auto bgColor = (*props.backgroundColor).AsWindowsColor();
+            backgroundColor = bgColor;
+          }
+
+          auto placeholderColor = facebook::react::GetTextInputPlaceholderColor(m_hasFocus, backgroundColor);
+          auto d2dColor = theme()->D2DColor(*placeholderColor);
+          winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(d2dColor, brush.put()));
         }
 
         // Create placeholder text layout

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h

@@ -60,6 +60,8 @@ struct WindowsTextInputComponentView
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
   void OnPointerMoved(
       const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerWheelChanged(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
 
   void OnKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
   void OnKeyUp(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
@@ -97,7 +99,9 @@ struct WindowsTextInputComponentView
   void UpdateParaFormat() noexcept;
   void UpdateText(const std::string &str) noexcept;
   void OnTextUpdated() noexcept;
+  void EmitOnScrollEvent() noexcept;
   void OnSelectionChanged(LONG start, LONG end) noexcept;
+  std::pair<float, float> GetContentSize() const noexcept;
   std::string GetTextFromRichEdit() const noexcept;
   void updateCursorColor(
       const facebook::react::SharedColor &cursorColor,

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.cpp

@@ -93,4 +93,33 @@ void WindowsTextInputEventEmitter::onEndEditing(OnEndEditing event) const {
   });
 }
 
+void WindowsTextInputEventEmitter::onPressOut(GestureResponderEvent event) const {
+  dispatchEvent("textInputPressOut", [event = std::move(event)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    auto nativeEvent = jsi::Object(runtime);
+    nativeEvent.setProperty(runtime, "target", static_cast<double>(event.target));
+    nativeEvent.setProperty(runtime, "pageX", event.pagePoint.x);
+    nativeEvent.setProperty(runtime, "pageY", event.pagePoint.y);
+    nativeEvent.setProperty(runtime, "locationX", event.offsetPoint.x);
+    nativeEvent.setProperty(runtime, "locationY", event.offsetPoint.y);
+    nativeEvent.setProperty(runtime, "timestamp", event.timestamp);
+    nativeEvent.setProperty(runtime, "identifier", static_cast<double>(event.identifier));
+    payload.setProperty(runtime, "nativeEvent", nativeEvent);
+    return payload;
+  });
+}
+
+void WindowsTextInputEventEmitter::onScroll(facebook::react::Point offset) const {
+  dispatchEvent("textInputScroll", [offset = std::move(offset)](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    {
+      auto contentOffsetObj = jsi::Object(runtime);
+      contentOffsetObj.setProperty(runtime, "x", offset.x);
+      contentOffsetObj.setProperty(runtime, "y", offset.y);
+      payload.setProperty(runtime, "contentOffset", contentOffsetObj);
+    }
+    return payload;
+  });
+}
+
 } // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputEventEmitter.h

@@ -54,6 +54,8 @@ class WindowsTextInputEventEmitter : public ViewEventEmitter {
   void onContentSizeChange(OnContentSizeChange value) const;
   void onPressIn(GestureResponderEvent event) const override;
   void onEndEditing(OnEndEditing value) const;
+  void onPressOut(GestureResponderEvent event) const override;
+  void onScroll(facebook::react::Point offset) const;
 };
 
 } // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp

@@ -25,10 +25,11 @@ Size WindowsTextInputShadowNode::measureContent(
     const LayoutContext &layoutContext,
     const LayoutConstraints &layoutConstraints) const {
   // Layout is called right after measure.
-  // Measure is marked as `const`, and `layout` is not; so State can be updated
-  // during layout, but not during `measure`. If State is out-of-date in layout,
-  // it's too late: measure will have already operated on old State. Thus, we
-  // use the same value here that we *will* use in layout to update the state.
+  // Measure is marked as `const`, and `layout` is not; so State can be
+  // updated during layout, but not during `measure`. If State is out-of-date
+  // in layout, it's too late: measure will have already operated on old
+  // State. Thus, we use the same value here that we *will* use in layout to
+  // update the state.
   AttributedString attributedString = getMostRecentAttributedString(layoutContext);
 
   if (attributedString.isEmpty()) {
@@ -88,9 +89,8 @@ LayoutConstraints WindowsTextInputShadowNode::getTextConstraints(const LayoutCon
 
 void WindowsTextInputShadowNode::updateStateIfNeeded(const LayoutContext &layoutContext) {
   ensureUnsealed();
-
-  auto reactTreeAttributedString = getAttributedString(layoutContext);
   const auto &stateData = getStateData();
+  auto reactTreeAttributedString = getAttributedString(layoutContext);
 
   // Tree is often out of sync with the value of the TextInput.
   // This is by design - don't change the value of the TextInput in the State,
@@ -124,6 +124,7 @@ void WindowsTextInputShadowNode::updateStateIfNeeded(const LayoutContext &layout
   // current attributedString unchanged, and pass in zero for the "event count"
   // so no changes are applied There's no way to prevent a state update from
   // flowing to Java, so we just ensure it's a noop in those cases.
+
   setStateData(facebook::react::TextInputState{
       AttributedStringBox(newAttributedString), reactTreeAttributedString, {}, newEventCount});
 }
@@ -133,7 +134,6 @@ AttributedString WindowsTextInputShadowNode::getAttributedString(const LayoutCon
 
   auto childTextAttributes = TextAttributes::defaultTextAttributes();
   childTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
-
   childTextAttributes.apply(getConcreteProps().textAttributes);
   // Don't propagate the background color of the TextInput onto the attributed
   // string. Android tries to render shadow of the background alongside the
@@ -151,6 +151,7 @@ AttributedString WindowsTextInputShadowNode::getAttributedString(const LayoutCon
     auto textAttributes = TextAttributes::defaultTextAttributes();
     textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
     textAttributes.apply(getConcreteProps().textAttributes);
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
     auto fragment = AttributedString::Fragment{};
     fragment.string = getConcreteProps().text;
     fragment.textAttributes = textAttributes;
@@ -187,36 +188,18 @@ AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString(const
 // TODO T67606511: We will redefine the measurement of empty strings as part
 // of T67606511
 AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(const LayoutContext &layoutContext) const {
-  // Return placeholder text, since text and children are empty.
-  auto textAttributedString = AttributedString{};
-  auto fragment = AttributedString::Fragment{};
-  fragment.string = getConcreteProps().placeholder;
-
-  if (fragment.string.empty()) {
-    fragment.string = BaseTextShadowNode::getEmptyPlaceholder();
-  }
+  const auto &props = BaseShadowNode::getConcreteProps();
 
+  AttributedString attributedString;
+  auto placeholderString = !props.placeholder.empty() ? props.placeholder : BaseTextShadowNode::getEmptyPlaceholder();
   auto textAttributes = TextAttributes::defaultTextAttributes();
   textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
-  textAttributes.apply(getConcreteProps().textAttributes);
-
-  // If there's no text, it's possible that this Fragment isn't actually
-  // appended to the AttributedString (see implementation of appendFragment)
-  fragment.textAttributes = textAttributes;
-  fragment.parentShadowView = ShadowView(*this);
-  textAttributedString.appendFragment(std::move(fragment));
-
-  return textAttributedString;
-  // TextLayoutContext textLayoutContext;
-  // textLayoutContext.pointScaleFactor = layoutContext.pointScaleFactor;
-  // auto textSize = textLayoutManager_
-  //                     ->measure(
-  //                         AttributedStringBox{attributedString},
-  //                         getConcreteProps().paragraphAttributes,
-  //                         textLayoutContext,
-  //                         textConstraints)
-  //                     .size;
-  // return layoutConstraints.clamp(textSize);
+  textAttributes.apply(props.textAttributes);
+  attributedString.appendFragment(
+      {.string = std::move(placeholderString),
+       .textAttributes = textAttributes,
+       .parentShadowView = ShadowView(*this)});
+  return attributedString;
 }
 
 #pragma mark - LayoutableShadowNode