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

Type of Change

• New feature (non-breaking change which adds functionality)

Why

Parity with RN Android/IOS.

Resolves https://github.com/microsoft/react-native-windows/issues/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: https://github.com/facebook/react-native/pull/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

https://github.com/user-attachments/assets/6c72d2a8-7b9f-49f4-83af-dba87cfd04cc

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 !).

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

[iamAbhi-916]

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

tracking in ref: https://github.com/microsoft/react-native-windows/issues/15481

[iamAbhi-916]

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: https://github.com/microsoft/react-native-windows/issues/15481