Support arbitrary selectable text in Text component (#1346)

* Support arbitrary selectable text in Text component

Summary:
RN Mac's implementation of the `selectable` prop on `Text` only allows selecting the entire Text component and right click to copy. This diff makes the `Text.selectable` prop on Mac allow arbitrary selection. To do this we used `NSTextView` to render the `Text` component instead of RN Mac's custom text rendering, because it has a `selectable` property which gives us the behavior we want.

We also allow adding custom menu items in the context menu.

Note the change to RNTesterPage.js was required to fix #754.

Test Plan:
See test plan of D27250072 for integration to Zeratul.

Confirmed text selection works in RNTester Text example:
{F588619781}

---

Also I went to RNTester Text examples and did an image diff comparison before and after these changes (differences are in pink):

{F588602710}
- The font smoothing isn't something we need

---

{F588602715}
- The examples with images are different because they load random images
- The pink background on "With size and background color" isn't a difference, the background color is pink in code

---

{F588602706}
- The <TextInput multiline/> example has an off by 1 pixel difference that wasn't trivial to fix and doesn't seem significant enough to investigate

Reviewers: skyle, ericroz

Reviewed By: skyle

Subscribers: eliwhite

Differential Revision: https://phabricator.intern.facebook.com/D27484533

Tasks: T83817888

Signature: 27484533:1617928003:6c1c60a15db8ef3551aafe22229fafc9fea0053e

# Conflicts:
#	Libraries/Text/Text/RCTTextView.m
#	React/Base/RCTTouchHandler.h
#	React/Base/RCTTouchHandler.m

* Fix GH tags

* Revert RNTesterPage style change

* Fix hit-testing in RCTTextView for selection

Summary:
This fixes a regression introduced by D29340382 since the `contentView` of the window was changed to the `RCTRootView` instance. The problem isn't there though, but is due to now the `contentView` having flipped geometry. The `hitTest:` method expects coordinates in the superview's coordinate space:

> A point that is in the coordinate system of the view’s superview, not of the view itself.

Also see how `RCTTouchHandler` also calls `convertPoint:` on the `superview` before passing to `hitTest:` for the same reason: https://fburl.com/diffusion/krx4lxao

Test Plan: 
{F628902534}


Reviewers: lyahdav

Reviewed By: lyahdav

Subscribers: eliwhite

Differential Revision: https://phabricator.intern.facebook.com/D29469639

Tasks: T94420821

Signature: 29469639:1625001662:97028699aee404282c83e35cd66f6308bc793a2a

* Revert changes to touch handler

* Only keep NSTextView changes

* Remove unused property

* Re-add focus ring for selected text

* Fix typos

* Ensure that RCTTextView manages the key loop view

* move focusable property lower in list

* Fix macos tags

* Remove iOS only highlighted prop that was causing re-render issues on macOS

* yarn lint

Co-authored-by: Liron Yahdav <[email protected]>
Co-authored-by: Shawn Dempsey <[email protected]>
Co-authored-by: Scott Kyle <[email protected]>

Author: 4 people

Libraries/Components/View/ReactNativeViewAttributes.js

@@ -37,6 +37,7 @@ const UIView = {
   // [TODO(macOS GH#774)
   acceptsFirstMouse: true,
   enableFocusRing: true,
+  focusable: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onDragEnter: true,

Libraries/Text/Text.js

@@ -42,12 +42,9 @@ const Text: React.AbstractComponent<
     onResponderTerminationRequest,
     onStartShouldSetResponder,
     pressRetentionOffset,
-    suppressHighlighting,
     ...restProps
   } = props;
 
-  const [isHighlighted, setHighlighted] = useState(false);
-
   const isPressable =
     (onPress != null ||
       onLongPress != null ||
@@ -64,11 +61,9 @@ const Text: React.AbstractComponent<
             onLongPress,
             onPress,
             onPressIn(event) {
-              setHighlighted(!suppressHighlighting);
               onPressIn?.(event);
             },
             onPressOut(event) {
-              setHighlighted(false);
               onPressOut?.(event);
             },
             onResponderTerminationRequest_DEPRECATED:
@@ -86,7 +81,6 @@ const Text: React.AbstractComponent<
       onPressOut,
       onResponderTerminationRequest,
       onStartShouldSetResponder,
-      suppressHighlighting,
     ],
   );
 
@@ -162,7 +156,6 @@ const Text: React.AbstractComponent<
     <NativeVirtualText
       {...restProps}
       {...eventHandlersForText}
-      isHighlighted={isHighlighted}
       isPressable={isPressable}
       numberOfLines={numberOfLines}
       selectionColor={selectionColor}
@@ -177,7 +170,6 @@ const Text: React.AbstractComponent<
         accessible={accessible !== false}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
-        isHighlighted={isHighlighted}
         numberOfLines={numberOfLines}
         selectionColor={selectionColor}
         style={style}

Libraries/Text/Text/RCTTextView.m

@@ -22,13 +22,35 @@
 
 #import <QuartzCore/QuartzCore.h> // TODO(macOS GH#774)
 
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+
+// We are managing the key view loop using the RCTTextView.
+// Disable key view for backed NSTextView so we don't get double focus.
+@interface RCTUnfocusableTextView : NSTextView
+@end
+
+@implementation RCTUnfocusableTextView
+
+- (BOOL)canBecomeKeyView
+{
+  return NO;
+}
+
+@end
+
+@interface RCTTextView () <NSTextViewDelegate>
+@end
+
+#endif // ]TODO(macOS GH#774)
+
 @implementation RCTTextView
 {
   CAShapeLayer *_highlightLayer;
 #if !TARGET_OS_OSX // TODO(macOS GH#774)
   UILongPressGestureRecognizer *_longPressGestureRecognizer;
 #else // [TODO(macOS GH#774)
   NSString * _accessibilityLabel;
+  NSTextView *_textView;
 #endif // ]TODO(macOS GH#774)
 
   RCTEventDispatcher *_eventDispatcher; // TODO(OSS Candidate ISS#2710739)
@@ -57,6 +79,18 @@ - (instancetype)initWithFrame:(CGRect)frame
     self.accessibilityRole = NSAccessibilityStaticTextRole;
     // Fix blurry text on non-retina displays.
     self.canDrawSubviewsIntoLayer = YES;
+    // The NSTextView is responsible for drawing text and managing selection.
+    _textView = [[RCTUnfocusableTextView alloc] initWithFrame:self.bounds];
+    _textView.delegate = self;
+    _textView.usesFontPanel = NO;
+    _textView.drawsBackground = NO;
+    _textView.linkTextAttributes = @{};
+    _textView.editable = NO;
+    _textView.selectable = NO;
+    _textView.verticallyResizable = NO;
+    _textView.layoutManager.usesFontLeading = NO;
+    _textStorage = _textView.textStorage;
+    [self addSubview:_textView];
 #endif // ]TODO(macOS GH#774)
     self.opaque = NO;
     RCTUIViewSetContentModeRedraw(self); // TODO(macOS GH#774) and TODO(macOS ISS#3536887)
@@ -65,40 +99,7 @@ - (instancetype)initWithFrame:(CGRect)frame
 }
 
 #if TARGET_OS_OSX // [TODO(macOS GH#774)
-- (void)dealloc
-{
-  [self removeAllTextStorageLayoutManagers];
-}
-
-- (void)removeAllTextStorageLayoutManagers
-{
-  // On macOS AppKit can throw an uncaught exception
-  // (-[NSConcretePointerArray pointerAtIndex:]: attempt to access pointer at index ...)
-  // during the dealloc of NSLayoutManager.  The _textStorage and its
-  // associated NSLayoutManager dealloc later in an autorelease pool.
-  // Manually removing the layout managers from _textStorage prior to release
-  // works around this issue in AppKit.
-  NSArray<NSLayoutManager *> *managers = [[_textStorage layoutManagers] copy];
-  for (NSLayoutManager *manager in managers) {
-    [_textStorage removeLayoutManager:manager];
-  }
-}
 
-- (BOOL)canBecomeKeyView
-{
-	// RCTText should not get any keyboard focus unless its `selectable` prop is true
-	return _selectable;
-}
-
-- (void)drawFocusRingMask {
-  if ([self enableFocusRing]) {
-    NSRectFill([self bounds]);
-  }
-}
-
-- (NSRect)focusRingMaskBounds {
-  return [self bounds];
-}
 #endif // ]TODO(macOS GH#774)
 
 #if DEBUG // TODO(macOS GH#774) description is a debug-only feature
@@ -119,14 +120,19 @@ - (void)setSelectable:(BOOL)selectable
 
   _selectable = selectable;
 
-#if !TARGET_OS_OSX // TODO(macOS GH#774)
+#if !TARGET_OS_OSX // [TODO(macOS GH#774)
   if (_selectable) {
     [self enableContextMenu];
   }
   else {
     [self disableContextMenu];
   }
-#endif // TODO(macOS GH#774)
+#else
+  _textView.selectable = _selectable;
+  if (_selectable) {
+    [self setFocusable:YES];
+  }
+#endif // ]TODO(macOS GH#774)
 }
 
 #if !TARGET_OS_OSX // TODO(macOS GH#774)
@@ -149,13 +155,37 @@ - (void)setTextStorage:(NSTextStorage *)textStorage
           contentFrame:(CGRect)contentFrame
        descendantViews:(NSArray<RCTUIView *> *)descendantViews // TODO(macOS ISS#3536887)
 {
-#if TARGET_OS_OSX // [TODO(macOS GH#774)
-  [self removeAllTextStorageLayoutManagers];
+  // This lets the textView own its text storage on macOS
+  // We update and replace the text container `_textView.textStorage.attributedString` when text/layout changes
+#if !TARGET_OS_OSX // [TODO(macOS GH#774)
+  _textStorage = textStorage;
 #endif // ]TODO(macOS GH#774)
 
-  _textStorage = textStorage;
   _contentFrame = contentFrame;
 
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+  NSLayoutManager *layoutManager = textStorage.layoutManagers.firstObject;
+  NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
+
+  [_textView replaceTextContainer:textContainer];
+
+  // On macOS AppKit can throw an uncaught exception
+  // (-[NSConcretePointerArray pointerAtIndex:]: attempt to access pointer at index ...)
+  // during the dealloc of NSLayoutManager.  The textStorage and its
+  // associated NSLayoutManager dealloc later in an autorelease pool.
+  // Manually removing the layout managers from textStorage prior to release
+  // works around this issue in AppKit.
+  NSArray<NSLayoutManager *> *managers = [[textStorage layoutManagers] copy];
+  for (NSLayoutManager *manager in managers) {
+    [textStorage removeLayoutManager:manager];
+  }
+
+  _textView.minSize = contentFrame.size;
+  _textView.maxSize = contentFrame.size;
+  _textView.frame = contentFrame;
+  _textView.textStorage.attributedString = textStorage;
+#endif // ]TODO(macOS GH#774)
+
   // FIXME: Optimize this.
   for (RCTUIView *view in _descendantViews) { // TODO(macOS ISS#3536887)
     [view removeFromSuperview];
@@ -173,6 +203,13 @@ - (void)setTextStorage:(NSTextStorage *)textStorage
 - (void)drawRect:(CGRect)rect
 {
   [super drawRect:rect];
+
+  // For iOS, UITextView api is not used for legacy performance reasons. A custom draw implementation is used instead.
+  // On desktop, we use NSTextView to access api's for arbitrary selection, custom cursors etc...
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+  return;
+#endif // ]TODO(macOS GH#774)
+
   if (!_textStorage) {
     return;
   }
@@ -408,6 +445,39 @@ - (void)rightMouseDown:(NSEvent *)event
     }
   }
 }
+#endif // ]TODO(macOS GH#774)
+
+#pragma mark - Selection
+
+#if TARGET_OS_OSX // [TODO(macOS GH#774)
+- (void)textDidEndEditing:(NSNotification *)notification
+{
+  _textView.selectedRange = NSMakeRange(NSNotFound, 0);
+}
+#endif // ]TODO(macOS GH#774)
+
+#pragma mark - Responder chain
+
+#if !TARGET_OS_OSX // TODO(macOS GH#774)
+- (BOOL)canBecomeFirstResponder
+{
+  return _selectable;
+}
+#else
+- (BOOL)canBecomeKeyView
+{
+  return self.focusable;
+}
+
+- (void)drawFocusRingMask {
+  if (self.focusable && self.enableFocusRing) {
+    NSRectFill([self bounds]);
+  }
+}
+
+- (NSRect)focusRingMaskBounds {
+  return [self bounds];
+}
 
 - (BOOL)becomeFirstResponder
 {
@@ -423,22 +493,19 @@ - (BOOL)becomeFirstResponder
 
 - (BOOL)resignFirstResponder
 {
-  if (![super resignFirstResponder]) {
+  //  Don't relinquish first responder while selecting text.
+  if (_selectable && NSRunLoop.currentRunLoop.currentMode == NSEventTrackingRunLoopMode) {
     return NO;
   }
-
-  // If we've lost focus, notify listeners
-  [_eventDispatcher sendEvent:[RCTFocusChangeEvent blurEventWithReactTag:self.reactTag]];
-
-  return YES;
+  
+  return [super resignFirstResponder];
 }
 
-#endif // ]TODO(macOS GH#774)
-
 - (BOOL)canBecomeFirstResponder
 {
-  return _selectable;
+  return self.focusable;
 }
+#endif
 
 #if !TARGET_OS_OSX // TODO(macOS GH#774)
 - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
@@ -451,6 +518,8 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
 }
 #endif // TODO(macOS GH#774)
 
+#pragma mark - Copy/Paste
+
 - (void)copy:(id)sender
 {
   NSAttributedString *attributedText = _textStorage;
@@ -470,6 +539,8 @@ - (void)copy:(id)sender
   UIPasteboard *pasteboard = [UIPasteboard generalPasteboard];
   pasteboard.items = @[item];
 #elif TARGET_OS_OSX // TODO(macOS GH#774)
+  [_textView copy:sender];
+
   NSPasteboard *pasteboard = [NSPasteboard generalPasteboard];
   [pasteboard clearContents];
   [pasteboard writeObjects:[NSArray arrayWithObjects:attributedText.string, rtf, nil]];

Libraries/Text/TextNativeComponent.js

@@ -33,6 +33,7 @@ export const NativeText: HostComponent<NativeTextProps> =
       isPressable: true,
       numberOfLines: true,
       ellipsizeMode: true,
+      focusable: true,
       allowFontScaling: true,
       dynamicTypeRamp: true,
       maxFontSizeMultiplier: true,

Libraries/Text/TextProps.js

@@ -225,4 +225,16 @@ export type TextProps = $ReadOnly<{|
    * Specifies the Tooltip for the button view
    */
   tooltip?: ?string,
+
+  /**
+   * When `true`, indicates that the text can be focused in key view loop
+   * By default, when `selectable={true}` the text view will be focusable unless disabled
+   */
+  focusable?: ?boolean,
+
+  /**
+   * Specifies whether focus ring should be drawn when the view has the first responder status.
+   * Only works when `focusable={true}`
+   */
+  enableFocusRing?: ?boolean, // TODO(macOS GH#774)
 |}>;

packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js

@@ -47,7 +47,8 @@ function KeyEventExample(): React.Node {
               validKeysDown={['g', 'Escape', 'Enter', 'ArrowLeft']}
               onKeyDown={e => appendLog('Key Down:' + e.nativeEvent.key)}
               validKeysUp={['c', 'd']}
-              onKeyUp={e => appendLog('Key Up:' + e.nativeEvent.key)}></View>
+              onKeyUp={e => appendLog('Key Up:' + e.nativeEvent.key)}
+            />
             <Text style={styles.title}>TextInput</Text>
             <Text style={styles.text}>
               validKeysDown: [ArrowRight, ArrowDown]{'\n'}