Fabric : Implements selectable prop for <Text> #15473

iamAbhi-916 · 2025-12-11T17:52:53Z

Description

Implements selectable prop for Text component for windows

Includes :

Basic text selection - Click and drag to select
Selection highlight - default windows blue accent background on selected text
Ctrl+C - Copy to clipboard
Ctrl+A - Select all text
Double-click - Select word
Right-click context menu - Copy / Select All options
Clear selection on click outside - Deselects when clicking elsewhere
Implements I-beam cursor for selectable text
Selection continues extending even when cursor is outside the selection range

Type of Change

New feature (non-breaking change which adds functionality)

Why

Parity with RN Android/IOS.

Resolves #13112

What

Made upstream changes to fix the issue where the selectable prop wasn’t being passed to native due to a macro conversion problem.
Ref: facebook/react-native#52599

Also updated logic in the Paragraph component view and composition event handler to correctly handle all selection-related scenarios, including text selection, pointer events, copy-to-clipboard, and other related behaviors.

Screenshots

text_selection.mp4

Testing

Tested in playground

Changelog

Should this change be included in the release notes: _indicate yes

Add a brief summary of the change to use in the release notes for the next release.
Adds text Component selection support for Fabric

Microsoft Reviewers: Open in CodeFlow

…ndows into text_selectable

…t-native-windows into text_selectable

vineethkuttan · 2025-12-12T05:19:24Z

Awesome work ! ,
Is the SelectionHighlightColor customizable through JavaScript?

iamAbhi-916 · 2025-12-12T05:31:17Z

Awesome work ! , Is the SelectionHighlightColor customizable through JavaScript?

thank you!, for now default color is only supported (windows blue accent color) but will be taken up as soon this is merged(small change !).

vineethkuttan

LGTM!

sundaramramaswamy · 2025-12-12T07:37:48Z

Please create a task to notify the app of selection change (JS).

sundaramramaswamy · 2025-12-12T07:40:45Z

I remember you talking about SHIFT + click selection. Please create a task for this too to avoid it slipping through the cracks.

sundaramramaswamy · 2025-12-12T07:43:55Z

Resolves [Add Relevant Issue Here]
#13112

Resolves #13112.

Drop template strings; they're noise in the actual PR message.

sundaramramaswamy · 2025-12-12T07:46:04Z

[Nit]

Implement selectable prop for <Text>

reads much nicer than

Implements selectable prop for Text component for windows

This is RNW so Windows is implicitly understood. Keep it minimal without data loss.

sundaramramaswamy · 2025-12-12T07:51:49Z

Please fix formatting issues in What and Changelog sections.

sundaramramaswamy · 2025-12-12T09:09:43Z

Just pointing out that this change is only about selecting text within a <Text> component and the user won't be able to select text spanning across two components, even if they're both selectable.

<View style={styles.selectionTestContainer}>
  <Text selectable={true} style={styles.sectionTitle}>Text Selection Test</Text>
  <Text selectable={true} style={styles.selectableText}>
    This text is SELECTABLE. Try clicking and dragging to select it.
  </Text>
</View>

iamAbhi-916 · 2025-12-12T10:12:36Z

I know this may be beyond the scope of this PR but just pointing it out that this change is only about selecting text within a <Text> component and the user won't be able to select text spanning across two components.
<View style={styles.selectionTestContainer}>
  <Text selectable={true} style={styles.sectionTitle}>Text Selection Test</Text>
  <Text selectable={true} style={styles.selectableText}>
    This text is SELECTABLE. Try clicking and dragging to select it.
  </Text>
</View>

Good point!, this matches iOS and Android.

The React Native docs say selectable (ref: https://reactnative.dev/docs/text#selectable ) enables "native copy and paste functionality" - and native text views (UITextView on iOS, TextView on Android) don't support cross-view selection either. Each text view manages its own selection state independently.

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

… pointer )

…t-native-windows into text_selectable

iamAbhi-916 · 2025-12-16T09:59:00Z

Please create a task to notify the app of selection change (JS).

tracking in ref: #15481

iamAbhi-916 · 2025-12-16T09:59:26Z

I remember you talking about SHIFT + click selection. Please create a task for this too to avoid it slipping through the cracks.

tracking in ref: #15481

sundaramramaswamy

Posted comments. Please address them.

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

sundaramramaswamy · 2025-12-12T08:24:54Z

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

+// Clears any active text selection in the application.
+void ClearCurrentTextSelection() noexcept;


How is this different from void ClearSelection()? I see different comments b/w them:

// Clears any active text selection in the application. void ClearCurrentTextSelection() noexcept; // Called when losing focus, when another text starts selection, or when clicking outside text bounds. void ClearSelection() noexcept;

However, for an implementation (leaf-node) method, when something is done doesn't matter. Only the doing matters.

I see that ClearCurrentTextSelection is a free-standing function, not a method of ParagraphComponentView. However, it should be a method of the parent entity which holds all the paragraph component view objects.

As discussed offline, once you've a strong pointer to a ParagraphComponentView holding the current selection, just call ClearSelection on it. This ClearCurrentTextSelection can be dropped entirely.

sundaramramaswamy · 2025-12-12T08:35:11Z

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

+  // Returns character position at the given point, or -1 if outside text bounds
+  int32_t getTextPositionAtPoint(facebook::react::Point pt) noexcept;


std::optional<uint32_t> GetTextPositionAtPoint(facebook::react::Point pt) noexcept;

Consider switching to std::optional instead of using -1 (or other in-band signalling of error conditions) as it's easy to get it wrong. C++17 introduced this exclusively for cases like these. It'd be a must if this were a public method.

Interested to knowing more? Refer std::optional: How, when, and why -- devblogs.microsoft.com.

Please switch to PascalCase.

sundaramramaswamy · 2025-12-12T08:43:41Z

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

+      float offsetY,
+      float pointScaleFactor) noexcept;
  void updateTextAlignment(const std::optional<facebook::react::TextAlignment> &fbAlignment) noexcept;
+  bool isTextSelectableAtPoint(facebook::react::Point pt) noexcept;


Please be consistent with method naming style. Except for upstream's functions, which use camelCase with override specified, most class functions follow PascalCase.

sundaramramaswamy · 2025-12-12T08:48:28Z

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

+  int32_t getTextPositionAtPoint(facebook::react::Point pt) noexcept;
+
+  // Returns the currently selected text, or empty string if no selection
+  std::string getSelectedText() const noexcept;


Switch to PascalCase.

sundaramramaswamy · 2025-12-15T13:08:39Z

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

+  int32_t selStart = std::min(m_selectionStart, m_selectionEnd);
+  int32_t selEnd = std::max(m_selectionStart, m_selectionEnd);
+  if (selStart < 0 || selEnd <= selStart || !m_textLayout) {


Const correctness all throughout.

sundaramramaswamy · 2025-12-15T13:08:47Z

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

+  float clampedX = std::max(0.0f, std::min(pt.x, textMetrics.width));
+  float clampedY = std::max(0.0f, std::min(pt.y, textMetrics.height));


Const correctness.

sundaramramaswamy · 2025-12-15T13:20:02Z

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

+  renderTarget.GetDpi(&oldDpiX, &oldDpiY);
+  renderTarget.SetDpi(dpi, dpi);


This is risky. Everywhere there's a function exit (normally or due to some error condition) you'd have to remember to reset old DPI on render target. Use a RAII wrapper, a unique_ptr for instance, which would undo this for you with no intervention of your's.

How? Examples with comments: 1 (only line 64 and below are relevant) and 2. Once you have such a type made, you can create an object and upon destruction it'd auto-revert to old DPI.

This is a very useful concept. Once you learn it you can avoid manual resource management for the most part using std::unique_ptr.

sundaramramaswamy · 2025-12-15T13:29:03Z

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

+  for (UINT32 i = 0; i < actualCount; i++) {
+    const auto &metric = hitTestMetrics[i];
+    D2D1_RECT_F rect = {metric.left, metric.top, metric.left + metric.width, metric.top + metric.height};
+    renderTarget.FillRectangle(&rect, selectionBrush.get());


ID2D1RenderTarget::FillRectangle already takes DIP (logical) why play with RT's DPI? We should be operating only in the logical coordinates space, no?

Refer Create a simple Direct2D application - learn.microsoft.com where FillRectangle is just in DIP and no mucking around with RT's DPI.

sundaramramaswamy · 2025-12-15T14:17:30Z

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

+  int32_t selStart = std::min(m_selectionStart, m_selectionEnd);
+  int32_t selEnd = std::max(m_selectionStart, m_selectionEnd);


Instead of checking before every usage, you can fix this when writing to these values to always have the lower limit to start and upper limit to end.

Please be mindful that such checks will fail in RTL text (Arabic, etc.). Doing it in one place, taking care of all these nuances, will rid this check off other places. They can blindly read these values without worrying about constructing meaning out of them.

iamAbhi-916 added 13 commits December 10, 2025 16:10

visual studio 2026 strict check fix

2e4a455

Merge branch 'main' of https://github.com/iamAbhi-916/react-native-wi…

ee5387f

…ndows into text_selectable

Implement text selection with drag highlight for selectable prop

084de27

implemented copy to clipboard

49078d9

CTRL + A to select all text

0c13ab8

Double-click on a word in selectable text selects the word

1f1ea26

right click on selected text provides context menu

3f2d1da

fixes unselect after CTRL + A selection

4866ff3

implements I-beam cursor for selectable text

1d02588

default selection color cleanup

c53a3a0

yarn lint:fix and format

96e82c1

Change files

a14ff7a

Merge branch 'main' into text_selectable

7f8b7fc

iamAbhi-916 changed the title ~~Fabric : Implements selectable prop for Text component for windows~~ Fabric : Implements selectable prop for text component for windows Dec 11, 2025

iamAbhi-916 added 3 commits December 11, 2025 23:28

nit

eb5b783

Merge branch 'main' of https://github.com/iamAbhi-916/react-native-wi…

02697cf

…ndows into text_selectable

Merge branch 'text_selectable' of https://github.com/iamAbhi-916/reac…

8bc63c0

…t-native-windows into text_selectable

iamAbhi-916 marked this pull request as ready for review December 12, 2025 05:29

iamAbhi-916 requested a review from a team as a code owner December 12, 2025 05:29

vineethkuttan approved these changes Dec 12, 2025

View reviewed changes

iamAbhi-916 changed the title ~~Fabric : Implements selectable prop for text component for windows~~ Fabric : Implements selectable prop for <Text> Dec 12, 2025

nit

fcf0cbb

acoates-ms reviewed Dec 12, 2025

View reviewed changes

iamAbhi-916 added 4 commits December 15, 2025 14:05

review comments ( double click , theme ( use of system api) , Capture…

365d6ab

… pointer )

removed weak_ref of ComponentView rather take ReactTaggedView

7d37868

Merge branch 'text_selectable' of https://github.com/iamAbhi-916/reac…

78d3d17

…t-native-windows into text_selectable

Merge branch 'main' into text_selectable

2b04f1b

iamAbhi-916 requested a review from acoates-ms December 15, 2025 09:37

yarn format

709fa62

sundaramramaswamy reviewed Dec 16, 2025

View reviewed changes

		// Clears any active text selection in the application.
		void ClearCurrentTextSelection() noexcept;

		// Returns character position at the given point, or -1 if outside text bounds
		int32_t getTextPositionAtPoint(facebook::react::Point pt) noexcept;

		float clampedX = std::max(0.0f, std::min(pt.x, textMetrics.width));
		float clampedY = std::max(0.0f, std::min(pt.y, textMetrics.height));

		renderTarget.GetDpi(&oldDpiX, &oldDpiY);
		renderTarget.SetDpi(dpi, dpi);

		int32_t selStart = std::min(m_selectionStart, m_selectionEnd);
		int32_t selEnd = std::max(m_selectionStart, m_selectionEnd);

Fabric : Implements selectable prop for <Text> #15473

Are you sure you want to change the base?

Fabric : Implements selectable prop for <Text> #15473

Uh oh!

Conversation

iamAbhi-916 commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Uh oh!

vineethkuttan commented Dec 12, 2025

Uh oh!

iamAbhi-916 commented Dec 12, 2025

Uh oh!

vineethkuttan left a comment

Choose a reason for hiding this comment

Uh oh!

sundaramramaswamy commented Dec 12, 2025

Uh oh!

sundaramramaswamy commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sundaramramaswamy commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sundaramramaswamy commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sundaramramaswamy commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sundaramramaswamy commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iamAbhi-916 commented Dec 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

iamAbhi-916 commented Dec 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

iamAbhi-916 commented Dec 16, 2025

Uh oh!

sundaramramaswamy left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

iamAbhi-916 commented Dec 11, 2025 •

edited

Loading

sundaramramaswamy commented Dec 12, 2025 •

edited

Loading

sundaramramaswamy commented Dec 12, 2025 •

edited

Loading

sundaramramaswamy commented Dec 12, 2025 •

edited

Loading

sundaramramaswamy commented Dec 12, 2025 •

edited

Loading

sundaramramaswamy commented Dec 12, 2025 •

edited

Loading

iamAbhi-916 commented Dec 12, 2025 •

edited

Loading

iamAbhi-916 commented Dec 16, 2025 •

edited

Loading

sundaramramaswamy left a comment •

edited

Loading