react-native-windows 0.81.2 → 0.82.0-preview.2

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

@@ -8,17 +8,44 @@
 #include <react/renderer/textlayoutmanager/WindowsTextLayoutManager.h>
 
 #include <AutoDraw.h>
+#include <Fabric/ReactTaggedView.h>
+#include <Utils/IcuUtils.h>
 #include <Utils/ValueUtils.h>
 #include <react/renderer/components/text/ParagraphShadowNode.h>
 #include <react/renderer/components/text/ParagraphState.h>
 #include <unicode.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
-#include "CompositionDynamicAutomationProvider.h"
+#include <winrt/Microsoft.UI.Input.h>
+#include <winrt/Windows.ApplicationModel.DataTransfer.h>
 #include "CompositionHelpers.h"
+#include "RootComponentView.h"
 #include "TextDrawing.h"
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
+// Automatically restores the original DPI of a render target
+struct DpiRestorer {
+  ID2D1RenderTarget *renderTarget = nullptr;
+  float originalDpiX = 0.0f;
+  float originalDpiY = 0.0f;
+
+  void operator()(ID2D1RenderTarget *) const noexcept {
+    if (renderTarget) {
+      renderTarget->SetDpi(originalDpiX, originalDpiY);
+    }
+  }
+};
+
+inline std::unique_ptr<ID2D1RenderTarget, DpiRestorer>
+MakeDpiGuard(ID2D1RenderTarget &renderTarget, float newDpiX, float newDpiY) noexcept {
+  float originalDpiX, originalDpiY;
+  renderTarget.GetDpi(&originalDpiX, &originalDpiY);
+  renderTarget.SetDpi(newDpiX, newDpiY);
+
+  return std::unique_ptr<ID2D1RenderTarget, DpiRestorer>(
+      &renderTarget, DpiRestorer{&renderTarget, originalDpiX, originalDpiY});
+}
+
 ParagraphComponentView::ParagraphComponentView(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,
@@ -28,7 +55,8 @@ ParagraphComponentView::ParagraphComponentView(
           compContext,
           tag,
           reactContext,
-          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background) {}
+          // Disable Background (text draws its own) and FocusVisual (selection highlight is the focus indicator)
+          ComponentViewFeatures::Default & ~ComponentViewFeatures::Background & ~ComponentViewFeatures::FocusVisual) {}
 
 void ParagraphComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
@@ -71,6 +99,18 @@ void ParagraphComponentView::updateProps(
     m_textLayout = nullptr;
   }
 
+  // Clear selection if text becomes non-selectable
+  if (oldViewProps.isSelectable != newViewProps.isSelectable) {
+    if (!newViewProps.isSelectable) {
+      ClearSelection();
+    }
+    m_requireRedraw = true;
+  }
+
+  if (oldViewProps.selectionColor != newViewProps.selectionColor) {
+    m_requireRedraw = true;
+  }
+
   Super::updateProps(props, oldProps);
 }
 
@@ -131,6 +171,108 @@ void ParagraphComponentView::updateTextAlignment(
   m_textLayout = nullptr;
 }
 
+bool ParagraphComponentView::IsTextSelectableAtPoint(facebook::react::Point pt) noexcept {
+  // paragraph-level selectable prop is enabled
+  const auto &props = paragraphProps();
+  if (!props.isSelectable) {
+    return false;
+  }
+
+  // Finds which text fragment was hit
+  if (m_attributedStringBox.getValue().getFragments().size() && m_textLayout) {
+    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;
+
+      // Finds which fragment contains this text position
+      for (auto fragment : m_attributedStringBox.getValue().getFragments()) {
+        if (textPosition < fragment.string.length()) {
+          return true;
+        }
+        textPosition -= static_cast<uint32_t>(fragment.string.length());
+      }
+    }
+  }
+
+  return false;
+}
+
+std::optional<int32_t> ParagraphComponentView::GetTextPositionAtPoint(facebook::react::Point pt) noexcept {
+  if (!m_textLayout) {
+    return std::nullopt;
+  }
+
+  BOOL isTrailingHit = FALSE;
+  BOOL isInside = FALSE;
+  DWRITE_HIT_TEST_METRICS metrics = {};
+
+  // Convert screen coordinates to character position
+  HRESULT hr = m_textLayout->HitTestPoint(pt.x, pt.y, &isTrailingHit, &isInside, &metrics);
+  if (FAILED(hr) || !isInside) {
+    return std::nullopt;
+  }
+
+  // Calculates the actual character position
+  // If isTrailingHit is true, the point is closer to the trailing edge of the character,
+  // so we should return the next character position (for cursor positioning)
+  return static_cast<int32_t>(metrics.textPosition + isTrailingHit);
+}
+
+std::optional<int32_t> ParagraphComponentView::GetClampedTextPosition(facebook::react::Point pt) noexcept {
+  if (!m_textLayout) {
+    return std::nullopt;
+  }
+
+  const std::wstring utf16Text{facebook::react::WindowsTextLayoutManager::GetTransformedText(m_attributedStringBox)};
+  if (utf16Text.empty()) {
+    return std::nullopt;
+  }
+
+  DWRITE_TEXT_METRICS textMetrics;
+  if (FAILED(m_textLayout->GetMetrics(&textMetrics))) {
+    return std::nullopt;
+  }
+
+  // Clamp the point to the text bounds for hit testing
+  const float clampedX = std::max(0.0f, std::min(pt.x, textMetrics.width));
+  const float clampedY = std::max(0.0f, std::min(pt.y, textMetrics.height));
+
+  BOOL isTrailingHit = FALSE;
+  BOOL isInside = FALSE;
+  DWRITE_HIT_TEST_METRICS metrics = {};
+
+  HRESULT hr = m_textLayout->HitTestPoint(clampedX, clampedY, &isTrailingHit, &isInside, &metrics);
+  if (FAILED(hr)) {
+    return std::nullopt;
+  }
+
+  int32_t result = static_cast<int32_t>(metrics.textPosition);
+  if (pt.x > textMetrics.width) {
+    // Dragging right - go to end of character
+    result = static_cast<int32_t>(metrics.textPosition + metrics.length);
+  } else if (pt.x < 0) {
+    // Dragging left - go to start of character
+    result = static_cast<int32_t>(metrics.textPosition);
+  } else if (isTrailingHit) {
+    // Inside bounds, trailing hit
+    result += 1;
+  }
+
+  if (pt.y > textMetrics.height) {
+    // Dragging below - select to end of text
+    result = static_cast<int32_t>(utf16Text.length());
+  } else if (pt.y < 0) {
+    // Dragging above - select to start of text
+    result = 0;
+  }
+
+  return result;
+}
+
 void ParagraphComponentView::OnRenderingDeviceLost() noexcept {
   DrawText();
 }
@@ -263,6 +405,81 @@ void ParagraphComponentView::onThemeChanged() noexcept {
 }
 
 // Renders the text into our composition surface
+void ParagraphComponentView::DrawSelectionHighlight(
+    ID2D1RenderTarget &renderTarget,
+    float offsetX,
+    float offsetY,
+    float pointScaleFactor) noexcept {
+  if (!m_selectionStart || !m_selectionEnd || !m_textLayout) {
+    return;
+  }
+
+  // During drag, selection may not be normalized yet, using min/max for rendering
+  const int32_t selStart = std::min(*m_selectionStart, *m_selectionEnd);
+  const int32_t selEnd = std::max(*m_selectionStart, *m_selectionEnd);
+  if (selEnd <= selStart) {
+    return;
+  }
+
+  // Scale offset to match text layout coordinates (same as RenderText)
+  const float scaledOffsetX = offsetX / pointScaleFactor;
+  const float scaledOffsetY = offsetY / pointScaleFactor;
+
+  // Set DPI to match text rendering
+  const float dpi = pointScaleFactor * 96.0f;
+  std::unique_ptr<ID2D1RenderTarget, DpiRestorer> dpiGuard = MakeDpiGuard(renderTarget, dpi, dpi);
+
+  // Get the hit test metrics for the selected text range
+  UINT32 actualCount = 0;
+  HRESULT hr = m_textLayout->HitTestTextRange(
+      static_cast<UINT32>(selStart),
+      static_cast<UINT32>(selEnd - selStart),
+      scaledOffsetX,
+      scaledOffsetY,
+      nullptr,
+      0,
+      &actualCount);
+
+  if (actualCount == 0) {
+    return;
+  }
+
+  std::vector<DWRITE_HIT_TEST_METRICS> hitTestMetrics(actualCount);
+  hr = m_textLayout->HitTestTextRange(
+      static_cast<UINT32>(selStart),
+      static_cast<UINT32>(selEnd - selStart),
+      scaledOffsetX,
+      scaledOffsetY,
+      hitTestMetrics.data(),
+      actualCount,
+      &actualCount);
+
+  if (FAILED(hr)) {
+    return;
+  }
+
+  winrt::com_ptr<ID2D1SolidColorBrush> selectionBrush;
+  D2D1_COLOR_F selectionColor;
+  const auto &props = paragraphProps();
+  if (props.selectionColor) {
+    selectionColor = theme()->D2DColor(**props.selectionColor);
+  } else {
+    selectionColor = theme()->D2DPlatformColor("Highlight@40");
+  }
+  hr = renderTarget.CreateSolidColorBrush(selectionColor, selectionBrush.put());
+
+  if (FAILED(hr)) {
+    return;
+  }
+
+  // Draw rectangles for each hit test metric
+  for (UINT32 i = 0; i < actualCount; i++) {
+    const auto &metric = hitTestMetrics[i];
+    const D2D1_RECT_F rect = {metric.left, metric.top, metric.left + metric.width, metric.top + metric.height};
+    renderTarget.FillRectangle(&rect, selectionBrush.get());
+  }
+}
+
 void ParagraphComponentView::DrawText() noexcept {
   if (!m_drawingSurface || theme()->IsEmpty())
     return;
@@ -281,13 +498,20 @@ void ParagraphComponentView::DrawText() noexcept {
           viewProps()->backgroundColor ? theme()->D2DColor(*viewProps()->backgroundColor)
                                        : D2D1::ColorF(D2D1::ColorF::Black, 0.0f));
       const auto &props = paragraphProps();
+
+      // Calculate text offset
+      const float textOffsetX = static_cast<float>(offset.x) + m_layoutMetrics.contentInsets.left;
+      const float textOffsetY = static_cast<float>(offset.y) + m_layoutMetrics.contentInsets.top;
+
+      // Draw selection highlight behind text
+      DrawSelectionHighlight(*d2dDeviceContext, textOffsetX, textOffsetY, m_layoutMetrics.pointScaleFactor);
+
       RenderText(
           *d2dDeviceContext,
           *m_textLayout,
           m_attributedStringBox.getValue(),
           props.textAttributes,
-          {static_cast<float>(offset.x) + m_layoutMetrics.contentInsets.left,
-           static_cast<float>(offset.y) + m_layoutMetrics.contentInsets.top},
+          {textOffsetX, textOffsetY},
           m_layoutMetrics.pointScaleFactor,
           *theme());
 
@@ -299,6 +523,324 @@ void ParagraphComponentView::DrawText() noexcept {
   }
 }
 
+void ParagraphComponentView::ClearSelection() noexcept {
+  const bool hadSelection = (m_selectionStart || m_selectionEnd || m_isSelecting);
+  m_selectionStart = std::nullopt;
+  m_selectionEnd = std::nullopt;
+  m_isSelecting = false;
+  if (hadSelection) {
+    // Clears selection highlight
+    DrawText();
+  }
+}
+
+void ParagraphComponentView::OnPointerPressed(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  // Only handle selection if text is selectable
+  const auto &props = paragraphProps();
+  if (!props.isSelectable) {
+    Super::OnPointerPressed(args);
+    return;
+  }
+
+  auto pp = args.GetCurrentPoint(-1);
+
+  // Ignores right-click
+  if (pp.Properties().PointerUpdateKind() ==
+      winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::RightButtonPressed) {
+    args.Handled(true);
+    return;
+  }
+
+  auto position = pp.Position();
+
+  facebook::react::Point localPt{
+      position.X - m_layoutMetrics.frame.origin.x, position.Y - m_layoutMetrics.frame.origin.y};
+
+  std::optional<int32_t> charPosition = GetTextPositionAtPoint(localPt);
+
+  if (charPosition) {
+    if (auto root = rootComponentView()) {
+      root->ClearCurrentTextSelection();
+    }
+
+    // Check for double-click
+    auto now = std::chrono::steady_clock::now();
+    auto timeSinceLastClick = std::chrono::duration_cast<std::chrono::milliseconds>(now - m_lastClickTime);
+    const UINT doubleClickTime = GetDoubleClickTime();
+    const bool isDoubleClick = (timeSinceLastClick.count() < static_cast<long long>(doubleClickTime)) &&
+        m_lastClickPosition && (std::abs(*charPosition - *m_lastClickPosition) <= 1);
+
+    // Update last click tracking
+    m_lastClickTime = now;
+    m_lastClickPosition = charPosition;
+
+    if (isDoubleClick) {
+      SelectWordAtPosition(*charPosition);
+      m_isSelecting = false;
+    } else {
+      // Single-click: start drag selection
+      m_selectionStart = charPosition;
+      m_selectionEnd = charPosition;
+      m_isSelecting = true;
+
+      // Tracks selection even when the mouse moves outside the component bounds
+      CapturePointer(args.Pointer());
+    }
+
+    if (auto root = rootComponentView()) {
+      root->SetViewWithTextSelection(*get_strong());
+    }
+
+    // Focuses so we receive onLostFocus when clicking elsewhere
+    if (auto root = rootComponentView()) {
+      root->TrySetFocusedComponent(*get_strong(), winrt::Microsoft::ReactNative::FocusNavigationDirection::None);
+    }
+
+    args.Handled(true);
+  } else {
+    ClearSelection();
+    m_lastClickPosition = std::nullopt;
+    Super::OnPointerPressed(args);
+  }
+}
+
+void ParagraphComponentView::OnPointerMoved(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  // Only track movement if we're actively selecting
+  if (!m_isSelecting) {
+    Super::OnPointerMoved(args);
+    return;
+  }
+
+  auto pp = args.GetCurrentPoint(static_cast<int32_t>(Tag()));
+  auto position = pp.Position();
+
+  facebook::react::Point localPt{position.X, position.Y};
+  std::optional<int32_t> charPosition = GetClampedTextPosition(localPt);
+
+  if (charPosition && charPosition != m_selectionEnd) {
+    m_selectionEnd = charPosition;
+    DrawText();
+    args.Handled(true);
+  }
+}
+
+void ParagraphComponentView::OnPointerReleased(
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  // Check for right-click to show context menu
+  auto pp = args.GetCurrentPoint(-1);
+  if (pp.Properties().PointerUpdateKind() ==
+      winrt::Microsoft::ReactNative::Composition::Input::PointerUpdateKind::RightButtonReleased) {
+    const auto &props = paragraphProps();
+    if (props.isSelectable) {
+      ShowContextMenu();
+      args.Handled(true);
+      return;
+    }
+  }
+
+  if (!m_isSelecting) {
+    Super::OnPointerReleased(args);
+    return;
+  }
+
+  m_isSelecting = false;
+
+  ReleasePointerCapture(args.Pointer());
+
+  if (!m_selectionStart || !m_selectionEnd || *m_selectionStart == *m_selectionEnd) {
+    m_selectionStart = std::nullopt;
+    m_selectionEnd = std::nullopt;
+  } else {
+    SetSelection(*m_selectionStart, *m_selectionEnd);
+  }
+
+  args.Handled(true);
+}
+
+void ParagraphComponentView::onLostFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  ClearSelection();
+
+  Super::onLostFocus(args);
+}
+
+void ParagraphComponentView::OnPointerCaptureLost() noexcept {
+  // Pointer capture was lost stop any active selection drag
+  if (m_isSelecting) {
+    m_isSelecting = false;
+
+    if (!m_selectionStart || !m_selectionEnd || *m_selectionStart == *m_selectionEnd) {
+      m_selectionStart = std::nullopt;
+      m_selectionEnd = std::nullopt;
+    } else {
+      SetSelection(*m_selectionStart, *m_selectionEnd);
+    }
+  }
+
+  Super::OnPointerCaptureLost();
+}
+
+std::string ParagraphComponentView::GetSelectedText() const noexcept {
+  if (!m_selectionStart || !m_selectionEnd) {
+    return "";
+  }
+
+  const int32_t selStart = std::min(*m_selectionStart, *m_selectionEnd);
+  const int32_t selEnd = std::max(*m_selectionStart, *m_selectionEnd);
+
+  if (selEnd <= selStart) {
+    return "";
+  }
+
+  const std::wstring utf16Text{facebook::react::WindowsTextLayoutManager::GetTransformedText(m_attributedStringBox)};
+
+  if (selStart >= static_cast<int32_t>(utf16Text.length())) {
+    return "";
+  }
+
+  const int32_t clampedEnd = std::min(selEnd, static_cast<int32_t>(utf16Text.length()));
+  const std::wstring selectedUtf16 =
+      utf16Text.substr(static_cast<size_t>(selStart), static_cast<size_t>(clampedEnd - selStart));
+  return ::Microsoft::Common::Unicode::Utf16ToUtf8(selectedUtf16);
+}
+
+void ParagraphComponentView::CopySelectionToClipboard() noexcept {
+  const std::string selectedText = GetSelectedText();
+  if (selectedText.empty()) {
+    return;
+  }
+
+  // Convert UTF-8 to wide string for Windows clipboard
+  const std::wstring wideText = ::Microsoft::Common::Unicode::Utf8ToUtf16(selectedText);
+
+  winrt::Windows::ApplicationModel::DataTransfer::DataPackage dataPackage;
+  dataPackage.SetText(wideText);
+  winrt::Windows::ApplicationModel::DataTransfer::Clipboard::SetContent(dataPackage);
+}
+
+void ParagraphComponentView::SelectWordAtPosition(int32_t charPosition) noexcept {
+  const std::wstring utf16Text{facebook::react::WindowsTextLayoutManager::GetTransformedText(m_attributedStringBox)};
+  const int32_t textLength = static_cast<int32_t>(utf16Text.length());
+
+  if (utf16Text.empty() || charPosition < 0 || charPosition >= textLength) {
+    return;
+  }
+
+  int32_t wordStart = charPosition;
+  int32_t wordEnd = charPosition;
+
+  ::Microsoft::ReactNative::IcuUtils::WordBreakIterator wordBreaker(utf16Text.c_str(), textLength);
+  const bool icuSuccess = wordBreaker.IsValid() && wordBreaker.GetWordBoundaries(charPosition, wordStart, wordEnd);
+
+  if (!icuSuccess) {
+    wordStart = charPosition;
+    wordEnd = charPosition;
+
+    while (wordStart > 0) {
+      int32_t prevPos = ::Microsoft::ReactNative::IcuUtils::MoveToPreviousCodePoint(utf16Text.c_str(), wordStart);
+      ::Microsoft::ReactNative::IcuUtils::UChar32 prevCp =
+          ::Microsoft::ReactNative::IcuUtils::GetCodePointAt(utf16Text.c_str(), textLength, prevPos);
+      if (!::Microsoft::ReactNative::IcuUtils::IsAlphanumeric(prevCp)) {
+        break;
+      }
+      wordStart = prevPos;
+    }
+
+    while (wordEnd < textLength) {
+      ::Microsoft::ReactNative::IcuUtils::UChar32 cp =
+          ::Microsoft::ReactNative::IcuUtils::GetCodePointAt(utf16Text.c_str(), textLength, wordEnd);
+      if (!::Microsoft::ReactNative::IcuUtils::IsAlphanumeric(cp)) {
+        break;
+      }
+      wordEnd = ::Microsoft::ReactNative::IcuUtils::MoveToNextCodePoint(utf16Text.c_str(), textLength, wordEnd);
+    }
+  }
+
+  if (wordEnd > wordStart) {
+    SetSelection(wordStart, wordEnd);
+    DrawText();
+  }
+}
+
+void ParagraphComponentView::SetSelection(int32_t start, int32_t end) noexcept {
+  m_selectionStart = std::min(start, end);
+  m_selectionEnd = std::max(start, end);
+}
+
+void ParagraphComponentView::ShowContextMenu() noexcept {
+  HMENU menu = CreatePopupMenu();
+  if (!menu) {
+    return;
+  }
+
+  const bool hasSelection = (m_selectionStart && m_selectionEnd && *m_selectionStart != *m_selectionEnd);
+  const std::wstring utf16Text{facebook::react::WindowsTextLayoutManager::GetTransformedText(m_attributedStringBox)};
+  const bool hasText = !utf16Text.empty();
+
+  // Add menu items (1 = Copy, 2 = Select All)
+  AppendMenuW(menu, MF_STRING | (hasSelection ? 0 : MF_GRAYED), 1, L"Copy");
+  AppendMenuW(menu, MF_STRING | (hasText ? 0 : MF_GRAYED), 2, L"Select All");
+
+  // Get cursor position for menu placement
+  POINT cursorPos;
+  GetCursorPos(&cursorPos);
+
+  const HWND hwnd = GetActiveWindow();
+
+  const int cmd = TrackPopupMenu(
+      menu, TPM_LEFTALIGN | TPM_TOPALIGN | TPM_RETURNCMD | TPM_NONOTIFY, cursorPos.x, cursorPos.y, 0, hwnd, NULL);
+
+  if (cmd == 1) {
+    // Copy
+    CopySelectionToClipboard();
+  } else if (cmd == 2) {
+    SetSelection(0, static_cast<int32_t>(utf16Text.length()));
+    DrawText();
+  }
+
+  DestroyMenu(menu);
+}
+
+void ParagraphComponentView::OnKeyDown(
+    const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept {
+  const bool isCtrlDown =
+      (args.KeyboardSource().GetKeyState(winrt::Windows::System::VirtualKey::Control) &
+       winrt::Microsoft::UI::Input::VirtualKeyStates::Down) == winrt::Microsoft::UI::Input::VirtualKeyStates::Down;
+
+  // Handle Ctrl+C for copy
+  if (isCtrlDown && args.Key() == winrt::Windows::System::VirtualKey::C) {
+    if (m_selectionStart && m_selectionEnd && *m_selectionStart != *m_selectionEnd) {
+      CopySelectionToClipboard();
+      args.Handled(true);
+      return;
+    }
+  }
+
+  // Handle Ctrl+A for select all
+  if (isCtrlDown && args.Key() == winrt::Windows::System::VirtualKey::A) {
+    const std::wstring utf16Text{facebook::react::WindowsTextLayoutManager::GetTransformedText(m_attributedStringBox)};
+    if (!utf16Text.empty()) {
+      if (auto root = rootComponentView()) {
+        root->ClearCurrentTextSelection();
+      }
+
+      SetSelection(0, static_cast<int32_t>(utf16Text.length()));
+
+      if (auto root = rootComponentView()) {
+        root->SetViewWithTextSelection(*get_strong());
+      }
+
+      DrawText();
+      args.Handled(true);
+      return;
+    }
+  }
+
+  Super::OnKeyDown(args);
+}
+
 std::string ParagraphComponentView::DefaultControlType() const noexcept {
   return "text";
 }
@@ -307,6 +849,19 @@ std::string ParagraphComponentView::DefaultAccessibleName() const noexcept {
   return m_attributedStringBox.getValue().getString();
 }
 
+bool ParagraphComponentView::focusable() const noexcept {
+  // Text is focusable when it's selectable or when explicitly marked as focusable via props
+  return paragraphProps().isSelectable || viewProps()->focusable;
+}
+
+std::pair<facebook::react::Cursor, HCURSOR> ParagraphComponentView::cursor() const noexcept {
+  // Returns I-beam cursor for selectable text
+  if (paragraphProps().isSelectable) {
+    return {facebook::react::Cursor::Text, nullptr};
+  }
+  return Super::cursor();
+}
+
 winrt::Microsoft::ReactNative::ComponentView ParagraphComponentView::Create(
     const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
     facebook::react::Tag tag,

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

@@ -12,6 +12,7 @@
 #include <react/renderer/components/text/ParagraphProps.h>
 #include <windows.ui.composition.interop.h>
 #include <winrt/Windows.UI.Composition.h>
+#include <chrono>
 #include "CompositionHelpers.h"
 #include "CompositionViewComponentView.h"
 
@@ -48,6 +49,28 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
   static facebook::react::SharedViewProps defaultProps() noexcept;
   const facebook::react::ParagraphProps &paragraphProps() const noexcept;
 
+  // Returns true when text is selectable
+  bool focusable() const noexcept override;
+
+  // Returns I-beam cursor for selectable text
+  std::pair<facebook::react::Cursor, HCURSOR> cursor() const noexcept override;
+
+  // Called when losing focus, when another text starts selection, or when clicking outside text bounds.
+  void ClearSelection() noexcept;
+
+  // Text selection pointer event handlers
+  void OnPointerPressed(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerMoved(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerReleased(
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept override;
+  void OnPointerCaptureLost() noexcept override;
+  void onLostFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept override;
+
+  // Keyboard event handler for copy
+  void OnKeyDown(const winrt::Microsoft::ReactNative::Composition::Input::KeyRoutedEventArgs &args) noexcept override;
+
   ParagraphComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
@@ -56,7 +79,28 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
  private:
   void updateVisualBrush() noexcept;
   void DrawText() noexcept;
+  void DrawSelectionHighlight(
+      ID2D1RenderTarget &renderTarget,
+      float offsetX,
+      float offsetY,
+      float pointScaleFactor) noexcept;
   void updateTextAlignment(const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept;
+  bool IsTextSelectableAtPoint(facebook::react::Point pt) noexcept;
+  std::optional<int32_t> GetTextPositionAtPoint(facebook::react::Point pt) noexcept;
+  std::optional<int32_t> GetClampedTextPosition(facebook::react::Point pt) noexcept;
+  std::string GetSelectedText() const noexcept;
+
+  // Copies currently selected text to the system clipboard
+  void CopySelectionToClipboard() noexcept;
+
+  // Selects the word at the given character position
+  void SelectWordAtPosition(int32_t charPosition) noexcept;
+
+  // Shows a context menu with Copy/Select All options on right-click
+  void ShowContextMenu() noexcept;
+
+  // m_selectionStart <= m_selectionEnd
+  void SetSelection(int32_t start, int32_t end) noexcept;
 
   winrt::com_ptr<::IDWriteTextLayout> m_textLayout;
   facebook::react::AttributedStringBox m_attributedStringBox;
@@ -64,6 +108,14 @@ struct ParagraphComponentView : ParagraphComponentViewT<ParagraphComponentView,
 
   bool m_requireRedraw{true};
   winrt::Microsoft::ReactNative::Composition::Experimental::IDrawingSurfaceBrush m_drawingSurface;
+
+  std::optional<int32_t> m_selectionStart;
+  std::optional<int32_t> m_selectionEnd;
+  bool m_isSelecting{false};
+
+  // Double-click detection
+  std::chrono::steady_clock::time_point m_lastClickTime{};
+  std::optional<int32_t> m_lastClickPosition;
 };
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation