Fabric : Implements selectable prop for <Text>

[iamAbhi-916]

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

[vineethkuttan]

Awesome work ! ,
Is the SelectionHighlightColor customizable through JavaScript?

[iamAbhi-916]

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]

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

[sundaramramaswamy]

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

[sundaramramaswamy]

Resolves [Add Relevant Issue Here]
#13112

Resolves #13112.

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

[sundaramramaswamy]

[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]

Please fix formatting issues in What and Changelog sections.

[sundaramramaswamy]

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]

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.

[acoates-ms]

These strings would need to be localized.

[iamAbhi-916]

correct , I basically looked at textInput component and it has similar localisation issue(ref :

react-native-windows/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

Line 1889 in 5d22b44

AppendMenuW(menu, MF_STRING | (hasSelection && !isReadOnly ? 0 : MF_GRAYED), 1, L"Cut");

).

I dont see any infra for localization, shall I add it or is it there and I missed it?