react-native-windows 0.71.10 → 0.72.0-preview.2

package/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp

@@ -16,9 +16,11 @@
 #include <Fabric/FabricUIManagerModule.h>
 #include <Utils/ImageUtils.h>
 #include <shcore.h>
+#include <winrt/Windows.Graphics.Effects.h>
 #include <winrt/Windows.UI.Composition.h>
 #include <winrt/Windows.Web.Http.Headers.h>
 #include <winrt/Windows.Web.Http.h>
+#include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 
 extern "C" HRESULT WINAPI WICCreateImagingFactory_Proxy(UINT SDKVersion, IWICImagingFactory **ppIWICImagingFactory);
@@ -54,16 +56,11 @@ ImageComponentView::ImageComponentView(
   m_props = defaultProps;
 }
 
-std::vector<facebook::react::ComponentDescriptorProvider>
-ImageComponentView::supplementalComponentDescriptorProviders() noexcept {
-  return {};
-}
-
-void ImageComponentView::mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+void ImageComponentView::mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
   assert(false);
 }
 
-void ImageComponentView::unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept {
+void ImageComponentView::unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
   assert(false);
 }
 
@@ -83,7 +80,7 @@ void ImageComponentView::didReceiveImage(const winrt::com_ptr<IWICBitmap> &wicbm
     imageEventEmitter->onLoadEnd();
   }
 
-  // TODO - handle m_props.tintColor, imageProps.resizeMode, imageProps.capInsets, imageProps.blurRadius
+  // TODO - handle imageProps.capInsets
 
 #ifdef DEBUG
   auto uiDispatcher = m_context.UIDispatcher();
@@ -112,7 +109,9 @@ void ImageComponentView::updateProps(
 
   updateBorderProps(oldImageProps, newImageProps);
 
-  if (oldImageProps.backgroundColor != newImageProps.backgroundColor) {
+  if (oldImageProps.backgroundColor != newImageProps.backgroundColor ||
+      oldImageProps.blurRadius != newImageProps.blurRadius || oldImageProps.tintColor != newImageProps.tintColor ||
+      oldImageProps.resizeMode != newImageProps.resizeMode) {
     m_drawingSurface = nullptr; // TODO dont need to recreate the surface just to redraw...
   }
 
@@ -171,7 +170,7 @@ void ImageComponentView::updateLayoutMetrics(
   // Set Position & Size Properties
 
   if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    m_visual.IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
   }
 
   updateBorderLayoutMetrics(layoutMetrics, *m_props);
@@ -182,11 +181,6 @@ void ImageComponentView::updateLayoutMetrics(
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-  m_visual.Offset({
-      layoutMetrics.frame.origin.x * layoutMetrics.pointScaleFactor,
-      layoutMetrics.frame.origin.y * layoutMetrics.pointScaleFactor,
-      0.0f,
-  });
 }
 
 void ImageComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {}
@@ -203,8 +197,24 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
   winrt::check_hresult(m_wicbmp->GetSize(&width, &height));
 
   if (!m_drawingSurface && m_wicbmp) {
+    winrt::Windows::Foundation::Size drawingSurfaceSize{static_cast<float>(width), static_cast<float>(height)};
+
+    const auto imageProps = std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+    const auto frame{m_layoutMetrics.getContentFrame().size};
+
+    if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) {
+      drawingSurfaceSize = {frame.width, frame.height};
+    } else if (imageProps->blurRadius > 0) {
+      // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#output-bitmap
+      // The following equation that can be used to compute the output bitmap:
+      // Output bitmap growth (X and Y) = (StandardDeviation(DIPs)*3 + StandardDeviation(DIPs)*3)*((User DPI)/96)
+      // Where StandardDeviation(DIPs)*3 is equivalent to the blur radius.
+      const auto bmpGrowth{imageProps->blurRadius * 2 * m_layoutMetrics.pointScaleFactor};
+      drawingSurfaceSize = {drawingSurfaceSize.Width + bmpGrowth, drawingSurfaceSize.Height + bmpGrowth};
+    }
+
     m_drawingSurface = m_compContext.CreateDrawingSurface(
-        {static_cast<float>(width), static_cast<float>(height)},
+        drawingSurfaceSize,
         winrt::Windows::Graphics::DirectX::DirectXPixelFormat::B8G8R8A8UIntNormalized,
         winrt::Windows::Graphics::DirectX::DirectXAlphaMode::Premultiplied);
 
@@ -212,8 +222,7 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
 
     auto surfaceBrush = m_compContext.CreateSurfaceBrush(m_drawingSurface);
 
-    const auto &imageProps = *std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
-    switch (imageProps.resizeMode) {
+    switch (imageProps->resizeMode) {
       case facebook::react::ImageResizeMode::Stretch:
         surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Fill);
         break;
@@ -223,16 +232,24 @@ void ImageComponentView::ensureDrawingSurface() noexcept {
       case facebook::react::ImageResizeMode::Contain:
         surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
         break;
-      case facebook::react::ImageResizeMode::Center:
-        surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::None);
-        break;
       case facebook::react::ImageResizeMode::Repeat:
-        surfaceBrush.Stretch(winrt::Microsoft::ReactNative::Composition::CompositionStretch::UniformToFill);
-        // TODO - Hook up repeat
+        // TODO - set AlignmentRatio back to 0.5f when switching between resizeModes once we no longer recreate the
+        // drawing surface on prop changes.
+        surfaceBrush.HorizontalAlignmentRatio(0.0f);
+        surfaceBrush.VerticalAlignmentRatio(0.0f);
+        // Repeat and Center use the same Stretch logic, so we can fallthrough here.
+        [[fallthrough]];
+      case facebook::react::ImageResizeMode::Center: {
+        surfaceBrush.Stretch(
+            (height < frame.height && width < frame.width)
+                ? winrt::Microsoft::ReactNative::Composition::CompositionStretch::None
+                : winrt::Microsoft::ReactNative::Composition::CompositionStretch::Uniform);
         break;
+      }
       default:
         assert(false);
     }
+
     m_visual.Brush(surfaceBrush);
   }
 }
@@ -250,8 +267,6 @@ void ImageComponentView::DrawImage() noexcept {
   m_drawingSurface.as(drawingSurfaceInterop);
 
   if (CheckForDeviceRemoved(drawingSurfaceInterop->BeginDraw(d2dDeviceContext.put(), &offset))) {
-    const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
-
     winrt::com_ptr<ID2D1Bitmap1> bitmap;
     winrt::check_hresult(d2dDeviceContext->CreateBitmapFromWicBitmap(m_wicbmp.get(), nullptr, bitmap.put()));
 
@@ -260,24 +275,81 @@ void ImageComponentView::DrawImage() noexcept {
       d2dDeviceContext->Clear(m_props->backgroundColor.AsD2DColor());
     }
 
-    UINT width, height;
-    winrt::check_hresult(m_wicbmp->GetSize(&width, &height));
-
-    D2D1_RECT_F rect = D2D1::RectF(
-        static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor),
-        static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor),
-        static_cast<float>((offset.x + width) / m_layoutMetrics.pointScaleFactor),
-        static_cast<float>((offset.y + height) / m_layoutMetrics.pointScaleFactor));
-
-    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-    float oldDpiX, oldDpiY;
-    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-    d2dDeviceContext->SetDpi(dpi, dpi);
-
-    d2dDeviceContext->DrawBitmap(bitmap.get(), rect);
-
-    // Restore old dpi setting
-    d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
+    const auto imageProps = std::static_pointer_cast<const facebook::react::ImageProps>(m_props);
+
+    bool useEffects{
+        imageProps->blurRadius > 0 || isColorMeaningful(imageProps->tintColor) ||
+        imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat};
+
+    if (useEffects) {
+      winrt::com_ptr<ID2D1Effect> bitmapEffects;
+      winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1BitmapSource, bitmapEffects.put()));
+      winrt::check_hresult(bitmapEffects->SetValue(D2D1_BITMAPSOURCE_PROP_WIC_BITMAP_SOURCE, m_wicbmp.get()));
+
+      if (imageProps->blurRadius > 0) {
+        winrt::com_ptr<ID2D1Effect> gaussianBlurEffect;
+        winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1GaussianBlur, gaussianBlurEffect.put()));
+        // https://learn.microsoft.com/en-us/windows/win32/direct2d/gaussian-blur#effect-properties
+        // You can compute the blur radius of the kernel by multiplying the standard deviation by 3 (radius multiplier).
+        constexpr float radiusMultiplier = 3;
+        winrt::check_hresult(gaussianBlurEffect->SetValue(
+            D2D1_GAUSSIANBLUR_PROP_STANDARD_DEVIATION, (imageProps->blurRadius) / radiusMultiplier));
+        gaussianBlurEffect->SetInputEffect(0, bitmapEffects.get());
+        bitmapEffects.copy_from(gaussianBlurEffect.get());
+      }
+
+      if (isColorMeaningful(imageProps->tintColor)) {
+        winrt::com_ptr<ID2D1Effect> tintColorEffect;
+        winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Flood, tintColorEffect.put()));
+        winrt::check_hresult(tintColorEffect->SetValue(D2D1_FLOOD_PROP_COLOR, imageProps->tintColor.AsD2DColor()));
+
+        winrt::com_ptr<ID2D1Effect> compositeEffect;
+        winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Composite, compositeEffect.put()));
+        winrt::check_hresult(compositeEffect->SetValue(D2D1_COMPOSITE_PROP_MODE, D2D1_COMPOSITE_MODE_SOURCE_IN));
+        compositeEffect->SetInputEffect(0, bitmapEffects.get());
+        compositeEffect->SetInputEffect(1, tintColorEffect.get());
+
+        bitmapEffects.copy_from(compositeEffect.get());
+      }
+
+      if (imageProps->resizeMode == facebook::react::ImageResizeMode::Repeat) {
+        winrt::com_ptr<ID2D1Effect> borderEffect;
+        winrt::check_hresult(d2dDeviceContext->CreateEffect(CLSID_D2D1Border, borderEffect.put()));
+        winrt::check_hresult(borderEffect->SetValue(D2D1_BORDER_PROP_EDGE_MODE_X, D2D1_BORDER_EDGE_MODE_WRAP));
+        winrt::check_hresult(borderEffect->SetValue(D2D1_BORDER_PROP_EDGE_MODE_Y, D2D1_BORDER_EDGE_MODE_WRAP));
+        borderEffect->SetInputEffect(0, bitmapEffects.get());
+
+        d2dDeviceContext->DrawImage(borderEffect.get());
+      } else {
+        winrt::com_ptr<ID2D1Image> image;
+        bitmapEffects->GetOutput(image.put());
+
+        D2D1_RECT_F imageBounds;
+        winrt::check_hresult(d2dDeviceContext->GetImageLocalBounds(image.get(), &imageBounds));
+
+        d2dDeviceContext->DrawImage(
+            bitmapEffects.get(), {static_cast<float>(offset.x), static_cast<float>(offset.y)}, imageBounds);
+      }
+    } else {
+      UINT width, height;
+      winrt::check_hresult(m_wicbmp->GetSize(&width, &height));
+
+      D2D1_RECT_F rect = D2D1::RectF(
+          static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor),
+          static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor),
+          static_cast<float>((offset.x + width) / m_layoutMetrics.pointScaleFactor),
+          static_cast<float>((offset.y + height) / m_layoutMetrics.pointScaleFactor));
+
+      const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
+      float oldDpiX, oldDpiY;
+      d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+      d2dDeviceContext->SetDpi(dpi, dpi);
+
+      d2dDeviceContext->DrawBitmap(bitmap.get(), rect);
+
+      // Restore old dpi setting
+      d2dDeviceContext->SetDpi(oldDpiX, oldDpiY);
+    }
 
     // Our update is done. EndDraw never indicates rendering device removed, so any
     // failure here is unexpected and, therefore, fatal.
@@ -315,13 +387,10 @@ facebook::react::Tag ImageComponentView::hitTest(facebook::react::Point pt, face
   return -1;
 }
 
-facebook::react::SharedTouchEventEmitter ImageComponentView::touchEventEmitter() noexcept {
-  return m_eventEmitter;
-}
-
 void ImageComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();
+    OuterVisual().InsertAt(m_visual, 0);
   }
 }
 
@@ -329,4 +398,15 @@ winrt::Microsoft::ReactNative::Composition::IVisual ImageComponentView::Visual()
   return m_visual;
 }
 
+bool ImageComponentView::focusable() const noexcept {
+  return m_props->focusable;
+}
+
+std::shared_ptr<ImageComponentView> ImageComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag,
+    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
+  return std::shared_ptr<ImageComponentView>(new ImageComponentView(compContext, tag, reactContext));
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.h

@@ -29,15 +29,14 @@ struct WindowsImageResponseObserver;
 
 struct ImageComponentView : CompositionBaseComponentView {
   using Super = CompositionBaseComponentView;
-  ImageComponentView(
+
+  [[nodiscard]] static std::shared_ptr<ImageComponentView> Create(
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
       facebook::react::Tag tag,
-      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept;
 
-  std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
-      override;
-  void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
-  void unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
   void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
       override;
   void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
@@ -49,12 +48,17 @@ struct ImageComponentView : CompositionBaseComponentView {
   void prepareForRecycle() noexcept override;
   facebook::react::Props::Shared props() noexcept override;
   void OnRenderingDeviceLost() noexcept override;
-  facebook::react::SharedTouchEventEmitter touchEventEmitter() noexcept override;
 
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
+  bool focusable() const noexcept override;
 
  private:
+  ImageComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag,
+      winrt::Microsoft::ReactNative::ReactContext const &reactContext);
+
   struct WindowsImageResponseObserver : facebook::react::ImageResponseObserver {
    public:
     WindowsImageResponseObserver(std::shared_ptr<ImageComponentView> image);

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp

@@ -11,6 +11,7 @@
 #include <react/renderer/components/text/ParagraphState.h>
 #include <unicode.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
+#include "CompositionDynamicAutomationProvider.h"
 #include "CompositionHelpers.h"
 
 namespace Microsoft::ReactNative {
@@ -23,22 +24,13 @@ ParagraphComponentView::ParagraphComponentView(
   m_props = defaultProps;
 }
 
-std::vector<facebook::react::ComponentDescriptorProvider>
-ParagraphComponentView::supplementalComponentDescriptorProviders() noexcept {
-  return {};
-}
-
-void ParagraphComponentView::mountChildComponentView(
-    const IComponentView &childComponentView,
-    uint32_t index) noexcept {
-  auto v = static_cast<const ParagraphComponentView &>(childComponentView);
+void ParagraphComponentView::mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
+  // auto v = static_cast<ParagraphComponentView &>(childComponentView);
   assert(false);
   // m_element.Children().InsertAt(index, v.Element());
 }
 
-void ParagraphComponentView::unmountChildComponentView(
-    const IComponentView &childComponentView,
-    uint32_t index) noexcept {
+void ParagraphComponentView::unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept {
   assert(false);
   // m_element.Children().RemoveAt(index);
 }
@@ -49,6 +41,8 @@ void ParagraphComponentView::updateProps(
   const auto &oldViewProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
   const auto &newViewProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(props);
 
+  ensureVisual();
+
   if (oldViewProps.textAttributes.foregroundColor != newViewProps.textAttributes.foregroundColor) {
     m_requireRedraw = true;
   }
@@ -60,10 +54,14 @@ void ParagraphComponentView::updateProps(
     updateTextAlignment(newViewProps.textAttributes.alignment);
   }
 
+  updateBorderProps(oldViewProps, newViewProps);
+
   m_props = std::static_pointer_cast<facebook::react::ParagraphProps const>(props);
 }
 
-void ParagraphComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {}
+void ParagraphComponentView::updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept {
+  Super::updateEventEmitter(eventEmitter);
+}
 
 void ParagraphComponentView::updateState(
     facebook::react::State::Shared const &state,
@@ -80,23 +78,17 @@ void ParagraphComponentView::updateLayoutMetrics(
     facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
   // Set Position & Size Properties
 
-  ensureVisual();
-
   if ((layoutMetrics.displayType != m_layoutMetrics.displayType)) {
-    m_visual.IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
+    OuterVisual().IsVisible(layoutMetrics.displayType != facebook::react::DisplayType::None);
   }
 
+  updateBorderLayoutMetrics(layoutMetrics, *m_props);
   m_layoutMetrics = layoutMetrics;
 
   UpdateCenterPropertySet();
   m_visual.Size(
       {layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
        layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});
-  m_visual.Offset({
-      layoutMetrics.frame.origin.x * layoutMetrics.pointScaleFactor,
-      layoutMetrics.frame.origin.y * layoutMetrics.pointScaleFactor,
-      0.0f,
-  });
 }
 void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
   ensureVisual();
@@ -104,8 +96,7 @@ void ParagraphComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMas
 }
 void ParagraphComponentView::prepareForRecycle() noexcept {}
 facebook::react::Props::Shared ParagraphComponentView::props() noexcept {
-  assert(false);
-  return {};
+  return m_props;
 }
 
 facebook::react::Tag ParagraphComponentView::hitTest(facebook::react::Point pt, facebook::react::Point &localPt)
@@ -135,13 +126,33 @@ facebook::react::Tag ParagraphComponentView::hitTest(facebook::react::Point pt,
   return -1;
 }
 
-facebook::react::SharedTouchEventEmitter ParagraphComponentView::touchEventEmitter() noexcept {
+facebook::react::SharedTouchEventEmitter ParagraphComponentView::touchEventEmitterAtPoint(
+    facebook::react::Point pt) noexcept {
+  if (m_attributedStringBox.getValue().getFragments().size()) {
+    BOOL isTrailingHit = false;
+    BOOL isInside = false;
+    DWRITE_HIT_TEST_METRICS metrics;
+    winrt::check_hresult(m_textLayout->HitTestPoint(pt.x, pt.y, &isTrailingHit, &isInside, &metrics));
+    if (isInside) {
+      uint32_t textPosition = metrics.textPosition;
+
+      for (auto fragment : m_attributedStringBox.getValue().getFragments()) {
+        if (textPosition < fragment.string.length()) {
+          return std::static_pointer_cast<const facebook::react::TouchEventEmitter>(
+              fragment.parentShadowView.eventEmitter);
+        }
+        textPosition -= static_cast<uint32_t>(fragment.string.length());
+      }
+    }
+  }
+
   return m_eventEmitter;
 }
 
 void ParagraphComponentView::ensureVisual() noexcept {
   if (!m_visual) {
     m_visual = m_compContext.CreateSpriteVisual();
+    OuterVisual().InsertAt(m_visual, 0);
   }
 }
 
@@ -195,13 +206,7 @@ void ParagraphComponentView::updateVisualBrush() noexcept {
     contraints.maximumSize.height =
         m_layoutMetrics.frame.size.height - m_layoutMetrics.contentInsets.top - m_layoutMetrics.contentInsets.bottom;
 
-    // TODO Figure out how to get text alignment not through m_props and only use StringBox and ParagraphAttributes
-    // instead
-    const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
-    const std::optional<facebook::react::TextAlignment> &textAlignment = m_props->textAttributes.alignment;
-
-    facebook::react::TextLayoutManager::GetTextLayout(
-        m_attributedStringBox, {} /*TODO*/, contraints, textAlignment, m_textLayout);
+    facebook::react::TextLayoutManager::GetTextLayout(m_attributedStringBox, {} /*TODO*/, contraints, m_textLayout);
     requireNewBrush = true;
   }
 
@@ -291,6 +296,17 @@ void ParagraphComponentView::DrawText() noexcept {
   m_drawingSurface.as(drawingSurfaceInterop);
 
   if (CheckForDeviceRemoved(drawingSurfaceInterop->BeginDraw(d2dDeviceContext.put(), &offset))) {
+    d2dDeviceContext->Clear(
+        m_props->backgroundColor ? m_props->backgroundColor.AsD2DColor() : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
+    assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
+    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
+    float oldDpiX, oldDpiY;
+    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
+    d2dDeviceContext->SetDpi(dpi, dpi);
+
+    float offsetX = static_cast<float>(offset.x / m_layoutMetrics.pointScaleFactor);
+    float offsetY = static_cast<float>(offset.y / m_layoutMetrics.pointScaleFactor);
+
     const auto &paragraphProps = *std::static_pointer_cast<const facebook::react::ParagraphProps>(m_props);
 
     // Create a solid color brush for the text. A more sophisticated application might want
@@ -330,7 +346,7 @@ void ParagraphComponentView::DrawText() noexcept {
     }
 
     if (!isnan(paragraphProps.opacity)) {
-      brush->SetOpacity(paragraphProps.opacity);
+      m_visual.Opacity(paragraphProps.opacity);
     }
 
     // Create color effects for individual text fragments.
@@ -376,18 +392,66 @@ void ParagraphComponentView::DrawText() noexcept {
           fragmentBrush->SetOpacity(fragment.textAttributes.opacity);
         }
         m_textLayout->SetDrawingEffect(fragmentBrush.get(), range);
+
+        // DWrite doesn't handle background hightlight colors, so we manually draw the background color for ranges
+        if (facebook::react::isColorMeaningful(fragment.textAttributes.backgroundColor)) {
+          UINT32 actualHitTestCount = 0;
+          if (range.length > 0) {
+            m_textLayout->HitTestTextRange(
+                range.startPosition,
+                range.length,
+                0, // x
+                0, // y
+                NULL,
+                0, // metrics count
+                &actualHitTestCount);
+          }
+
+          // Allocate enough room to return all hit-test metrics.
+          std::vector<DWRITE_HIT_TEST_METRICS> hitTestMetrics(actualHitTestCount);
+          if (range.length > 0) {
+            m_textLayout->HitTestTextRange(
+                range.startPosition,
+                range.length,
+                0, // x
+                0, // y
+                &hitTestMetrics[0],
+                static_cast<UINT32>(hitTestMetrics.size()),
+                &actualHitTestCount);
+          }
+
+          // Draw the selection ranges behind the text.
+          if (actualHitTestCount > 0) {
+            // Note that an ideal layout will return fractional values,
+            // so you may see slivers between the selection ranges due
+            // to the per-primitive antialiasing of the edges unless
+            // it is disabled (better for performance anyway).
+            auto oldAliasMode = d2dDeviceContext->GetAntialiasMode();
+            d2dDeviceContext->SetAntialiasMode(D2D1_ANTIALIAS_MODE_ALIASED);
+
+            winrt::com_ptr<ID2D1SolidColorBrush> textHighlightBrush;
+            winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(
+                fragment.textAttributes.backgroundColor.AsD2DColor(), textHighlightBrush.put()));
+
+            for (size_t i = 0; i < actualHitTestCount; ++i) {
+              const DWRITE_HIT_TEST_METRICS &htm = hitTestMetrics[i];
+
+              const D2D1_RECT_F rect = {
+                  std::round(htm.left + offsetX),
+                  std::round(htm.top + offsetY),
+                  std::round(htm.left + htm.width + offsetX),
+                  std::round(htm.top + htm.height + offsetY)};
+
+              d2dDeviceContext->FillRectangle(rect, textHighlightBrush.get());
+            }
+            d2dDeviceContext->SetAntialiasMode(oldAliasMode);
+          }
+        }
       }
 
       position += length;
     }
 
-    d2dDeviceContext->Clear(D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
-    assert(d2dDeviceContext->GetUnitMode() == D2D1_UNIT_MODE_DIPS);
-    const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f;
-    float oldDpiX, oldDpiY;
-    d2dDeviceContext->GetDpi(&oldDpiX, &oldDpiY);
-    d2dDeviceContext->SetDpi(dpi, dpi);
-
     // Draw the line of text at the specified offset, which corresponds to the top-left
     // corner of our drawing surface. Notice we don't call BeginDraw on the D2D device
     // context; this has already been done for us by the composition API.
@@ -412,4 +476,10 @@ winrt::Microsoft::ReactNative::Composition::IVisual ParagraphComponentView::Visu
   return m_visual;
 }
 
+std::shared_ptr<ParagraphComponentView> ParagraphComponentView::Create(
+    const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+    facebook::react::Tag tag) noexcept {
+  return std::shared_ptr<ParagraphComponentView>(new ParagraphComponentView(compContext, tag));
+}
+
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.h

@@ -18,14 +18,13 @@ namespace Microsoft::ReactNative {
 
 struct ParagraphComponentView : CompositionBaseComponentView {
   using Super = CompositionBaseComponentView;
-  ParagraphComponentView(
+
+  [[nodiscard]] static std::shared_ptr<ParagraphComponentView> Create(
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
-      facebook::react::Tag tag);
+      facebook::react::Tag tag) noexcept;
 
-  std::vector<facebook::react::ComponentDescriptorProvider> supplementalComponentDescriptorProviders() noexcept
-      override;
-  void mountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
-  void unmountChildComponentView(const IComponentView &childComponentView, uint32_t index) noexcept override;
+  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
   void updateProps(facebook::react::Props::Shared const &props, facebook::react::Props::Shared const &oldProps) noexcept
       override;
   void updateEventEmitter(facebook::react::EventEmitter::Shared const &eventEmitter) noexcept override;
@@ -39,11 +38,15 @@ struct ParagraphComponentView : CompositionBaseComponentView {
   facebook::react::Props::Shared props() noexcept override;
   facebook::react::Tag hitTest(facebook::react::Point pt, facebook::react::Point &localPt) const noexcept override;
   void OnRenderingDeviceLost() noexcept override;
-  facebook::react::SharedTouchEventEmitter touchEventEmitter() noexcept override;
+  facebook::react::SharedTouchEventEmitter touchEventEmitterAtPoint(facebook::react::Point pt) noexcept override;
 
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
 
  private:
+  ParagraphComponentView(
+      const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
+      facebook::react::Tag tag);
+
   void ensureVisual() noexcept;
   void updateVisualBrush() noexcept;
   void DrawText() noexcept;