feature/highlights

Demo/SelectableText.js

@@ -1,25 +1,146 @@
-import React from "react";
-import { Text, requireNativeComponent, Platform } from "react-native";
+import React from 'react'
+import { Text, requireNativeComponent, Platform } from 'react-native'
+import { v4 } from 'uuid'
+import memoize from 'fast-memoize'
 
-const RNSelectableText = requireNativeComponent("RNSelectableText");
+const RNSelectableText = requireNativeComponent('RNSelectableText')
 
-export const SelectableText = ({ onSelection, value, children, ...props }) => {
+/**
+ * numbers: array({start: int, end: int, id: string})
+ */
+const combineHighlights = memoize(numbers => {
+  return numbers
+    .sort((a, b) => a.start - b.start || a.end - b.end)
+    .reduce(function(combined, next) {
+      if (!combined.length || combined[combined.length - 1].end < next.start)
+        combined.push(next)
+      else {
+        var prev = combined.pop()
+        combined.push({
+          start: prev.start,
+          end: Math.max(prev.end, next.end),
+          id: next.id,
+        })
+      }
+      return combined
+    }, [])
+})
+
+/**
+ * value: string
+ * highlights: array({start: int, end: int, id: any})
+ */
+const mapHighlightsRanges = (value, highlights) => {
+  const combinedHighlights = combineHighlights(highlights)
+
+  if (combinedHighlights.length === 0)
+    return [{ isHighlight: false, text: value }]
+
+  const data = [
+    { isHighlight: false, text: value.slice(0, combinedHighlights[0].start) },
+  ]
+
+  combinedHighlights.forEach(({ start, end }, idx) => {
+    data.push({
+      isHighlight: true,
+      text: value.slice(start, end),
+    })
+
+    if (combinedHighlights[idx + 1]) {
+      data.push({
+        isHighlight: false,
+        text: value.slice(end, combinedHighlights[idx + 1].start),
+      })
+    }
+  })
+
+  data.push({
+    isHighlight: false,
+    text: value.slice(
+      combinedHighlights[combinedHighlights.length - 1].end,
+      value.length
+    ),
+  })
+
+  return data.filter(x => x.text)
+}
+
+/**
+ * Props
+ * ...TextProps
+ * onSelection: ({ content: string, eventType: string, selectionStart: int, selectionEnd: int }) => void
+ * children: ReactNode
+ * highlights: array({ id, start, end })
+ * highlightColor: string
+ * onHighlightPress: string => void
+ */
+export const SelectableText = ({
+  onSelection,
+  onHighlightPress,
+  value,
+  children,
+  ...props
+}) => {
   const onSelectionNative = ({
-    nativeEvent: { content, eventType, selectionStart, selectionEnd }
+    nativeEvent: { content, eventType, selectionStart, selectionEnd },
   }) => {
     onSelection &&
-      onSelection({ content, eventType, selectionStart, selectionEnd });
-  };
+      onSelection({ content, eventType, selectionStart, selectionEnd })
+  }
+
+  const onHighlightPressNative = onHighlightPress
+    ? Platform.OS === 'ios'
+      ? ({ nativeEvent: { clickedRangeStart, clickedRangeEnd } }) => {
+          if (!props.highlights || props.highlights.length === 0) return
+
+          const mergedHighlights = combineHighlights(props.highlights)
+
+          const hightlightInRange = mergedHighlights.find(
+            ({ start, end }) =>
+              clickedRangeStart >= start - 1 && clickedRangeEnd <= end + 1
+          )
+
+          if (hightlightInRange) {
+            onHighlightPress(hightlightInRange.id)
+          }
+        }
+      : onHighlightPress
+    : () => {}
 
-  return Platform.OS === "ios" ? (
+  return (
     <RNSelectableText
       {...props}
-      value={children ? children : value}
+      onHighlightPress={onHighlightPressNative}
+      selectable
       onSelection={onSelectionNative}
-    />
-  ) : (
-    <RNSelectableText {...props} onSelection={onSelectionNative}>
-      {children ? children : <Text>{value}</Text>}
+    >
+      <Text selectable key={v4()}>
+        {props.highlights && props.highlights.length > 0
+          ? mapHighlightsRanges(value, props.highlights).map(
+              ({ id, isHighlight, text }) => (
+                <Text
+                  key={v4()}
+                  selectable
+                  style={
+                    isHighlight
+                      ? {
+                          backgroundColor: props.highlightColor,
+                        }
+                      : {}
+                  }
+                  onPress={() => {
+                    if (isHighlight) {
+                      onHighlightPress && onHighlightPress(id)
+                    }
+                  }}
+                >
+                  {text}
+                </Text>
+              )
+            )
+          : value}
+        {props.appendToChildren ? props.appendToChildren : null}
+      </Text>
     </RNSelectableText>
-  );
-};
+  )
+}

ios/RNSelectableTextManager.h

@@ -7,6 +7,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonnull, nonatomic, copy) NSString *value;
 @property (nonatomic, copy) RCTDirectEventBlock onSelection;
 @property (nullable, nonatomic, copy) NSArray<NSString *> *menuItems;
+@property (nonatomic, copy) RCTDirectEventBlock onHighlightPress;
 
 @end
 

ios/RNSelectableTextManager.m

@@ -14,6 +14,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onSelection, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(menuItems, NSArray);
 RCT_EXPORT_VIEW_PROPERTY(value, NSString);
+RCT_EXPORT_VIEW_PROPERTY(onHighlightPress, RCTDirectEventBlock)
 
 #pragma mark - Multiline <TextInput> (aka TextView) specific properties
 

ios/RNSelectableTextView.h

@@ -7,6 +7,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonnull, nonatomic, copy) NSString *value;
 @property (nonatomic, copy) RCTDirectEventBlock onSelection;
 @property (nullable, nonatomic, copy) NSArray<NSString *> *menuItems;
+@property (nonatomic, copy) RCTDirectEventBlock onHighlightPress;
 
 @end
 

ios/RNSelectableTextView.m

@@ -44,21 +44,24 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
                 gesture.enabled = NO;
             }
         }
-        
+
         [self addSubview:_backedTextInputView];
 
         UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
-        longPressGesture.minimumPressDuration = 0.15;
 
         UITapGestureRecognizer *tapGesture = [ [UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTap:)];
         tapGesture.numberOfTapsRequired = 2;
 
+        UITapGestureRecognizer *singleTapGesture = [ [UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
+        singleTapGesture.numberOfTapsRequired = 1;
+
         [_backedTextInputView addGestureRecognizer:longPressGesture];
         [_backedTextInputView addGestureRecognizer:tapGesture];
+        [_backedTextInputView addGestureRecognizer:singleTapGesture];
 
-        [self setUserInteractionEnabled:true];
+        [self setUserInteractionEnabled:YES];
     }
-    
+
     return self;
 }
 
@@ -87,6 +90,28 @@ -(void) _handleGesture
     [menuController setMenuVisible:YES animated:YES];
 }
 
+-(void) handleSingleTap: (UITapGestureRecognizer *) gesture
+{
+    CGPoint pos = [gesture locationInView:_backedTextInputView];
+    pos.y += _backedTextInputView.contentOffset.y;
+
+    UITextPosition *tapPos = [_backedTextInputView closestPositionToPoint:pos];
+    UITextRange *word = [_backedTextInputView.tokenizer rangeEnclosingPosition:tapPos withGranularity:(UITextGranularityWord) inDirection:UITextLayoutDirectionRight];
+
+    UITextPosition* beginning = _backedTextInputView.beginningOfDocument;
+
+    UITextPosition *selectionStart = word.start;
+    UITextPosition *selectionEnd = word.end;
+
+    const NSInteger location = [_backedTextInputView offsetFromPosition:beginning toPosition:selectionStart];
+    const NSInteger endLocation = [_backedTextInputView offsetFromPosition:beginning toPosition:selectionEnd];
+
+    self.onHighlightPress(@{
+        @"clickedRangeStart": @(location),
+        @"clickedRangeEnd": @(endLocation),
+    });
+}
+
 -(void) handleLongPress: (UILongPressGestureRecognizer *) gesture
 {
     CGPoint pos = [gesture locationInView:_backedTextInputView];
@@ -144,6 +169,8 @@ - (void)tappedMenuItem:(NSString *)eventType
         @"selectionStart": @(start),
         @"selectionEnd": @(selection.end)
     });
+
+    [_backedTextInputView setSelectedTextRange:nil notifyDelegate:false];
 }
 
 - (NSMethodSignature *)methodSignatureForSelector:(SEL)sel
@@ -181,4 +208,10 @@ - (BOOL)canPerformAction:(SEL)action withSender:(id)sender
     return NO;
 }
 
+- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
+{
+    [_backedTextInputView setSelectedTextRange:nil notifyDelegate:true];
+    return [super hitTest:point withEvent:event];
+}
+
 @end

package.json

@@ -13,5 +13,9 @@
   "license": "MIT",
   "peerDependencies": {
     "react-native": "^0.41.2"
+  },
+  "dependencies": {
+    "fast-memoize": "^2.5.1",
+    "uuid": "^3.3.2"
   }
 }

yarn.lock

@@ -0,0 +1,13 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+fast-memoize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/fast-memoize/-/fast-memoize-2.5.1.tgz#c3519241e80552ce395e1a32dcdde8d1fd680f5d"
+  integrity sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g==
+
+uuid@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
+  integrity sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==