Merge pull request #1776 from wordpress-mobile/issue/1773_add_option_…

…to_change_caret_color Allow configuration of selection/caret color on Aztec view.
WordPress · Jan 27, 2020 · f284931 · f284931
2 parents c71ecba + 3296ed4
commit f284931
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/...-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java b/...-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java
@@ -5,6 +5,8 @@
 import android.graphics.Typeface;
 import android.os.Build;
 import androidx.annotation.Nullable;
+import androidx.core.graphics.ColorUtils;
+
 import android.text.Editable;
 import android.text.Layout;
 import android.text.TextUtils;
@@ -363,6 +365,14 @@ public void setColor(ReactAztecText view, @Nullable Integer color) {
         view.setTextColor(newColor);
     }
 
+    @ReactProp(name = "selectionColor", customType = "Color")
+    public void setSelectionColor(ReactAztecText view, @Nullable Integer color) {
+        if (color != null) {
+            view.setHighlightColor(ColorUtils.setAlphaComponent(color, 51));
+            view.setCursorColor(color);
+        }
+    }
+
     @ReactProp(name = "blockType")
     public void setBlockType(ReactAztecText view, ReadableMap inputMap) {
         if (inputMap.hasKey(BLOCK_TYPE_TAG_KEY)) {

diff --git a/...ive-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java b/...ive-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java
@@ -3,18 +3,23 @@
 import android.content.ClipData;
 import android.content.ClipboardManager;
 import android.content.Context;
+import android.content.res.Resources;
 import android.content.res.TypedArray;
+import android.graphics.PorterDuff;
 import android.graphics.Rect;
+import android.graphics.drawable.Drawable;
 import android.os.Handler;
 import android.os.Looper;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
+
 import android.text.Editable;
 import android.text.InputType;
 import android.text.Spannable;
 import android.text.TextUtils;
 import android.text.TextWatcher;
 import android.view.inputmethod.InputMethodManager;
+import android.widget.TextView;
 
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
@@ -31,6 +36,7 @@
 import org.wordpress.aztec.plugins.IAztecPlugin;
 import org.wordpress.aztec.plugins.IToolbarButton;
 
+import java.lang.reflect.Field;
 import java.util.ArrayList;
 import java.util.LinkedList;
 import java.util.Set;
@@ -571,4 +577,49 @@ private boolean shouldDelegateTextChangeCalls() {
     private boolean isPreTag() {
         return PRE_TAG.equals(mTagName);
     }
+
+    public void setCursorColor(@NonNull Integer color) {
+        // This is combination of the patterns taken in:
+        // - https://github.com/facebook/react-native/blob/233fdfc014bb4b919c7624c90e5dac614479076f/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L422-L457
+        // - https://stackoverflow.com/a/44333069/1350218
+        // Note: This only works in API 27 and below as it uses reflection to look up the drawable fields.
+        // API 29 supports setTextCursorDrawable which would be a cleaner way to handle this when
+        // an upgrade to that API level occurs.
+
+        try {
+            Resources res = getContext().getResources();
+
+            Field field = TextView.class.getDeclaredField("mEditor");
+            field.setAccessible(true);
+            Object editor = field.get(this);
+
+            String[] resFieldNames = {"mCursorDrawableRes", "mTextSelectHandleLeftRes", "mTextSelectHandleRightRes", "mTextSelectHandleRes"};
+            String[] drawableFieldNames = {"mCursorDrawable", "mSelectHandleLeft", "mSelectHandleRight", "mSelectHandleCenter"};
+
+            for (int i = 0; i < resFieldNames.length; i++) {
+
+                String resFieldName = resFieldNames[i];
+                String drawableFieldName = drawableFieldNames[i];
+
+                Field resField = TextView.class.getDeclaredField(resFieldName);
+                resField.setAccessible(true);
+                int drawableResId = resField.getInt(this);
+
+                Drawable cursorDrawable = res.getDrawable(drawableResId).mutate();
+                cursorDrawable.setColorFilter(color, PorterDuff.Mode.SRC_IN);
+
+                Field drawableField = editor.getClass().getDeclaredField(drawableFieldName);
+                drawableField.setAccessible(true);
+
+                if ( drawableFieldName.equals("mCursorDrawable")) {
+                    Drawable[] drawables = {cursorDrawable, cursorDrawable};
+                    drawableField.set(editor, drawables);
+                } else {
+                    drawableField.set(editor, cursorDrawable);
+                }
+            }
+        } catch (NoSuchFieldException | IllegalAccessException e) {
+            // Ignore errors to avoid crashing if these private fields don't exist on modified or future android versions.
+        }
+    }
 }
diff --git a/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m b/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m
@@ -28,5 +28,7 @@ @interface RCT_EXTERN_MODULE(RCTAztecViewManager, NSObject)
 
 RCT_EXPORT_VIEW_PROPERTY(disableEditingMenu, BOOL)
 RCT_REMAP_VIEW_PROPERTY(textAlign, textAlignment, NSTextAlignment)
+RCT_REMAP_VIEW_PROPERTY(selectionColor, tintColor, UIColor)
+
 
 @end