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
Solves the CJK problem while text selection

Outstanding tasks for the feature are tracked ref: #15481

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

selectasble_all_tests.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

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

sundaramramaswamy

Approved with comments.

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

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

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

sundaramramaswamy

LGTM but just take care of the comments I've given.

sundaramramaswamy · 2025-12-24T14:21:17Z

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

+// ICU utilities wrapped in a namespace to avoid UChar naming conflicts with Folly's FBString.
+// Folly has a template parameter named 'UChar' which conflicts with ICU's global UChar typedef.
+namespace IcuUtils {
+#include <icu.h>


Good job adding comments to let readers know why this was done (deviating from other inclusions which are namespace wrapper-free.

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

sundaramramaswamy · 2025-12-24T14:27:11Z

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

+  ~WordBreakIterator() noexcept {
+    if (m_breakIterator) {
+      ubrk_close(m_breakIterator);
+    }
+  }


Please drop this and make m_breakIterator a smart pointer.

Remember the Rule of Zero when you write in C++.

See Also: https://www.fluentcpp.com/2019/04/23/the-rule-of-zero-zero-constructor-zero-calorie/

correct, I thought about this but UBreakIterator is an ICU opaque type that must be freed with ubrk_close so went with this manual destructor approach as anyways we would use ubrk_close to clean up memory, also WordBreakIterator is non-copyable and non-movable anyway.

sundaramramaswamy · 2025-12-24T14:34:26Z

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

+  }
+
+ private:
+  UBreakIterator *m_breakIterator = nullptr;


Suggested change

UBreakIterator *m_breakIterator = nullptr;

struct UBreakIterDeleter {

void operator()(UBreakIterator* ptr ) { if (ptr) ubrk_close(ptr); }

};

std::unique_ptr<UBreakIterator, UBreakIterDeleter> m_breakIterator {nullptr};

Almost all C APIs which create and destroy a resource has duality in functions e.g. ubrk_open + ubrk_close, fopen + fclose, SDL_CreateWindow + SDL_DestroyWindow, etc. And std::unique_ptr is a very good tool to ensure the freeing function is auto-called.

sundaramramaswamy · 2025-12-24T14:38:06Z

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

+  WordBreakIterator(const WordBreakIterator &) = delete;
+  WordBreakIterator &operator=(const WordBreakIterator &) = delete;


These can be dropped once you use unique_ptr as a member variable. Why? Compiler won't supply default implementation of these functions since std::unique_ptr itself is non-copyable. So only when all members support copy would the compiler supply default impls.

sundaramramaswamy · 2025-12-24T14:49:54Z

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

+  return u_isalnum(codePoint) != 0;
+}
+
+inline UChar32 GetCodePointAt(const wchar_t *str, int32_t length, int32_t pos) noexcept {


Suggested change

inline UChar32 GetCodePointAt(const wchar_t *str, int32_t length, int32_t pos) noexcept {

UChar32 GetCodePointAt(const wchar_t *str, int32_t length, int32_t pos) noexcept {

sundaramramaswamy · 2025-12-24T14:52:55Z

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

+    return 0;
+  }
+  UChar32 cp;
+  U16_GET(str, 0, pos, length, cp);


Will this (and others like U16_BACK_1, U16_FWD_1, etc.) function handle when str is nullptr? Check its documentation. If it'll choke on invalid inputs, we'd have to check for nullptr and feed to it only valid pointers. Ignore this comment if it'll handle gracefully.

sundaramramaswamy · 2025-12-24T15:08:23Z

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

+namespace IcuUtils {
+#include <icu.h>
+
+class WordBreakIterator {


These utilities within IcuUtils may be useful beyond this one source file. Consider giving this namespace its own .h and .cpp, house them somewhere like //vnext/Microsoft.ReactNative/Utils and add them to the rightful .vcxprojs.

sundaramramaswamy · 2025-12-24T15:13:03Z

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

+
+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());


Just a reminder: this won't be the grapheme cluster count but the codepoint count.

sundaramramaswamy · 2025-12-24T15:14:12Z

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

+    wordEnd = charPosition;
+
+    while (wordStart > 0) {
+      int32_t prevPos = IcuUtils::MoveToPreviousCodePoint(utf16Text.c_str(), wordStart);


Shouldn't we move by grapheme clusters if you want to select characters and not partial characters?

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

review comments

9597dd6

iamAbhi-916 requested a review from sundaramramaswamy December 18, 2025 12:13

nit

ce9aed6

sundaramramaswamy approved these changes Dec 18, 2025

View reviewed changes

iamAbhi-916 added 5 commits December 19, 2025 10:22

Merge branch 'main' into text_selectable

ae0d409

review comments : nit

f266a31

invalid/null tag returns -1 for ReactTaggedView

eafb2b8

support CJK selcetion using icu.h

c50650f

update Desktop.DLL with icu.lib

b856bfb

iamAbhi-916 requested a review from a team as a code owner December 23, 2025 08:34

CJK word boundary using dictionary

bcd6553

sundaramramaswamy approved these changes Dec 24, 2025

View reviewed changes

-  UBreakIterator *m_breakIterator = nullptr;
+  struct UBreakIterDeleter {
+    void operator()(UBreakIterator* ptr ) { if (ptr) ubrk_close(ptr); }
+  };
+  std::unique_ptr<UBreakIterator, UBreakIterDeleter> m_breakIterator {nullptr};

		WordBreakIterator(const WordBreakIterator &) = delete;
		WordBreakIterator &operator=(const WordBreakIterator &) = delete;

	inline UChar32 GetCodePointAt(const wchar_t *str, int32_t length, int32_t pos) noexcept {
	UChar32 GetCodePointAt(const wchar_t *str, int32_t length, int32_t pos) noexcept {

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!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sundaramramaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sundaramramaswamy left a 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

iamAbhi-916 Dec 24, 2025 •

edited

Loading