Merge pull request #951 from wordpress-mobile/release/1.4.0

Release/1.4.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gutenberg-mobile",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "config": {
     "jsfiles": "./*.js src/*.js src/**/*.js src/**/**/*.js",

react-native-aztec/android/build.gradle

@@ -1,7 +1,7 @@
 buildscript {
     ext {
         gradlePluginVersion = '3.3.1'
-        kotlinVersion = '1.2.31'
+        kotlinVersion = '1.3.11'
         supportLibVersion = '28.0.0'
         tagSoupVersion = '1.2.1'
         glideVersion = '3.7.0'
@@ -12,7 +12,7 @@ buildscript {
         wordpressUtilsVersion = '1.22'
         espressoVersion = '3.0.1'
 
-        aztecVersion = 'v1.3.25'
+        aztecVersion = 'v1.3.26'
     }
 
     repositories {
@@ -23,10 +23,12 @@ buildscript {
     dependencies {
         classpath "com.android.tools.build:gradle:$gradlePluginVersion"
         classpath 'com.github.dcendents:android-maven-gradle-plugin:2.1'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
     }
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
 apply plugin: 'com.github.dcendents.android-maven'
 
 // import the `readReactNativeVersion()` function
@@ -62,6 +64,7 @@ android {
         main {
             dirs.each { dir ->
                 java.srcDirs "src/${dir}/java"
+                java.srcDirs += "src/${dir}/kotlin"
                 res.srcDirs "src/${dir}/res"
             }
         }

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecEnterEvent.java

@@ -15,13 +15,16 @@ class ReactAztecEnterEvent extends Event<ReactAztecEnterEvent> {
   private String mText;
   private int mSelectionStart;
   private int mSelectionEnd;
+  private boolean mFiredAfterTextChanged;
   private int mEventCount;
 
-  public ReactAztecEnterEvent(int viewId, String text, int selectionStart, int selectionEnd, int eventCount) {
+  public ReactAztecEnterEvent(int viewId, String text, int selectionStart, int selectionEnd,
+          boolean firedAfterTextChanged, int eventCount) {
     super(viewId);
     mText = text;
     mSelectionStart = selectionStart;
     mSelectionEnd = selectionEnd;
+    mFiredAfterTextChanged = firedAfterTextChanged;
     mEventCount = eventCount;
   }
 
@@ -46,6 +49,7 @@ private WritableMap serializeEventData() {
     eventData.putString("text", mText);
     eventData.putInt("selectionStart", mSelectionStart);
     eventData.putInt("selectionEnd", mSelectionEnd);
+    eventData.putBoolean("firedAfterTextChanged", mFiredAfterTextChanged);
     eventData.putInt("eventCount", mEventCount);
     return eventData;
   }

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -360,7 +360,7 @@ public void disableGBMode(final ReactAztecText view, boolean disable) {
             view.setImageGetter(new GlideImageLoader(view.getContext()));
             view.setVideoThumbnailGetter(new GlideVideoThumbnailLoader(view.getContext()));
             // we need to restart the editor now
-            String content = view.toHtml(false);
+            String content = view.toHtml(view.getText(), false);
             view.fromHtml(content, false);
         }
     }
@@ -414,6 +414,11 @@ public void setOnPasteHandling(final ReactAztecText view, boolean onPasteHandlin
         view.shouldHandleOnPaste = onPasteHandling;
     }
 
+    @ReactProp(name = "deleteEnter", defaultBoolean = false)
+    public void setShouldDeleteEnter(final ReactAztecText view, boolean shouldDeleteEnter) {
+        view.shouldDeleteEnter = shouldDeleteEnter;
+    }
+
     @Override
     public Map<String, Integer> getCommandsMap() {
         return MapBuilder.<String, Integer>builder()
@@ -455,7 +460,7 @@ public void onFocusChange(View v, boolean hasFocus) {
                             eventDispatcher.dispatchEvent(
                                     new ReactAztecEndEditingEvent(
                                             editText.getId(),
-                                            editText.toHtml(false)));
+                                            editText.toHtml(editText.getText(), false)));
                         }
                     }
                 });
@@ -498,22 +503,26 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {
                 return;
             }
 
-            int currentEventCount = mEditText.incrementAndGetEventCounter();
-            // The event that contains the event counter and updates it must be sent first.
-            // TODO: t7936714 merge these events
-            mEventDispatcher.dispatchEvent(
-                    new ReactTextChangedEvent(
-                            mEditText.getId(),
-                            mEditText.toHtml(false),
-                            currentEventCount));
-
-            mEventDispatcher.dispatchEvent(
-                    new ReactTextInputEvent(
-                            mEditText.getId(),
-                            newText,
-                            oldText,
-                            start,
-                            start + before));
+            // if the "Enter" handling is underway, don't sent text change events. The ReactAztecEnterEvent will have
+            // the text (minus the Enter char itself).
+            if (!mEditText.isEnterPressedUnderway()) {
+                int currentEventCount = mEditText.incrementAndGetEventCounter();
+                // The event that contains the event counter and updates it must be sent first.
+                // TODO: t7936714 merge these events
+                mEventDispatcher.dispatchEvent(
+                        new ReactTextChangedEvent(
+                                mEditText.getId(),
+                                mEditText.toHtml(mEditText.getText(), false),
+                                currentEventCount));
+
+                mEventDispatcher.dispatchEvent(
+                        new ReactTextInputEvent(
+                                mEditText.getId(),
+                                newText,
+                                oldText,
+                                start,
+                                start + before));
+            }
 
 
             if (mPreviousText.length() == 0

react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java

@@ -7,6 +7,8 @@
 import android.support.annotation.Nullable;
 import android.text.Editable;
 import android.text.InputType;
+import android.text.Spannable;
+import android.text.Spanned;
 import android.text.TextUtils;
 import android.text.TextWatcher;
 import android.view.inputmethod.InputMethodManager;
@@ -60,6 +62,8 @@ public class ReactAztecText extends AztecText {
     boolean shouldHandleOnSelectionChange = false;
     boolean shouldHandleActiveFormatsChange = false;
 
+    boolean shouldDeleteEnter = false;
+
     // This optional variable holds the outer HTML tag that will be added to the text when the user start typing in it
     // This is required to keep placeholder text working, and start typing with styled text.
     // Ref: https://github.com/wordpress-mobile/gutenberg-mobile/issues/707
@@ -88,16 +92,16 @@ public ReactAztecText(ThemedReactContext reactContext) {
 
         this.setAztecKeyListener(new ReactAztecText.OnAztecKeyListener() {
             @Override
-            public boolean onEnterKey() {
+            public boolean onEnterKey(Spannable text, boolean firedAfterTextChanged, int selStart, int selEnd) {
                 if (shouldHandleOnEnter && !isTextChangedListenerDisabled()) {
-                    return onEnter();
+                    return onEnter(text, firedAfterTextChanged, selStart, selEnd);
                 }
                 return false;
             }
             @Override
             public boolean onBackspaceKey() {
                 if (shouldHandleOnBackspace && !isTextChangedListenerDisabled()) {
-                    String content = toHtml(false);
+                    String content = toHtml(getText(), false);
                     if (TextUtils.isEmpty(content)) {
                         return onBackspace();
                     }
@@ -296,7 +300,7 @@ private void propagateSelectionChanges(int selStart, int selEnd) {
         if (!shouldHandleOnSelectionChange) {
             return;
         }
-        String content = toHtml(false);
+        String content = toHtml(getText(), false);
         ReactContext reactContext = (ReactContext) getContext();
         EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
         eventDispatcher.dispatchEvent(
@@ -327,6 +331,16 @@ public void addTextChangedListener(TextWatcher watcher) {
         if (mListeners == null) {
             mListeners = new ArrayList<>();
             super.addTextChangedListener(getTextWatcherDelegator());
+
+            // Keep the enter pressed watcher at the beginning of the watchers list.
+            // We want to intercept Enter.key as soon as possible, and before other listeners start modifying the text.
+            // Also note that this Watchers, when the AztecKeyListener is set, keep hold a copy of the content in the editor.
+            mListeners.add(new EnterPressedWatcher(this, new EnterDeleter() {
+                @Override
+                public boolean shouldDeleteEnter() {
+                    return shouldDeleteEnter;
+                }
+            }));
         }
 
         mListeners.add(watcher);
@@ -355,16 +369,17 @@ public void setIsSettingTextFromJS(boolean mIsSettingTextFromJS) {
         this.mIsSettingTextFromJS = mIsSettingTextFromJS;
     }
 
-    private boolean onEnter() {
+    private boolean onEnter(Spannable text, boolean firedAfterTextChanged, int selStart, int selEnd) {
         disableTextChangedListener();
-        String content = toHtml(false);
-        int cursorPositionStart = getSelectionStart();
-        int cursorPositionEnd = getSelectionEnd();
+        String content = toHtml(text, false);
+        int cursorPositionStart = firedAfterTextChanged ? selStart : getSelectionStart();
+        int cursorPositionEnd = firedAfterTextChanged ? selEnd : getSelectionEnd();
         enableTextChangedListener();
         ReactContext reactContext = (ReactContext) getContext();
         EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
         eventDispatcher.dispatchEvent(
-                new ReactAztecEnterEvent(getId(), content, cursorPositionStart, cursorPositionEnd, incrementAndGetEventCounter())
+                new ReactAztecEnterEvent(getId(), content, cursorPositionStart, cursorPositionEnd,
+                        firedAfterTextChanged, incrementAndGetEventCounter())
         );
         return true;
     }
@@ -378,7 +393,7 @@ private boolean onBackspace() {
         }
 
         disableTextChangedListener();
-        String content = toHtml(false);
+        String content = toHtml(getText(), false);
         enableTextChangedListener();
         ReactContext reactContext = (ReactContext) getContext();
         EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
@@ -420,7 +435,7 @@ private boolean onPaste(boolean isPastedAsPlainText) {
 
         // temporarily disable listener during call to toHtml()
         disableTextChangedListener();
-        String content = toHtml(false);
+        String content = toHtml(getText(), false);
         int cursorPositionStart = getSelectionStart();
         int cursorPositionEnd = getSelectionEnd();
         enableTextChangedListener();
@@ -456,6 +471,10 @@ public void setActiveFormats(Iterable<String> newFormats) {
         updateToolbarButtons(newStylesList);
     }
 
+    protected boolean isEnterPressedUnderway() {
+        return EnterPressedWatcher.Companion.isEnterPressedUnderway(getText());
+    }
+
     /**
      * This class will redirect *TextChanged calls to the listeners only in the case where the text
      * is changed by the user, and not explicitly set by JS.

react-native-aztec/android/src/main/kotlin/org/wordpress/mobile/ReactNativeAztec/EnterPressedWatcher.kt

@@ -0,0 +1,71 @@
+package org.wordpress.mobile.ReactNativeAztec
+
+import android.text.Editable
+import android.text.SpannableStringBuilder
+import android.text.Spanned
+import android.text.TextWatcher
+import org.wordpress.aztec.AztecText
+import org.wordpress.aztec.Constants
+import java.lang.ref.WeakReference
+
+// Class to be used as a span to temporarily denote that Enter was detected
+class EnterPressedUnderway
+
+interface EnterDeleter {
+    fun shouldDeleteEnter(): Boolean
+}
+
+class EnterPressedWatcher(aztecText: AztecText, var enterDeleter: EnterDeleter) : TextWatcher {
+
+    private val aztecTextRef: WeakReference<AztecText?> = WeakReference(aztecText)
+    private lateinit var textBefore : SpannableStringBuilder
+    private var start: Int = -1
+    private var selStart: Int = 0
+    private var selEnd: Int = 0
+    var done = false
+
+    override fun beforeTextChanged(text: CharSequence, start: Int, count: Int, after: Int) {
+        val aztecText = aztecTextRef.get()
+        if (aztecText?.getAztecKeyListener() != null && !aztecText.isTextChangedListenerDisabled()) {
+            // we need to make a copy to preserve the contents as they were before the change
+            textBefore = SpannableStringBuilder(text)
+            this.start = start
+            this.selStart = aztecText.selectionStart
+            this.selEnd = aztecText.selectionEnd
+        }
+    }
+
+    override fun onTextChanged(text: CharSequence, start: Int, before: Int, count: Int) {
+        val aztecText = aztecTextRef.get()
+        val aztecKeyListener = aztecText?.getAztecKeyListener()
+        if (aztecText != null && !aztecText.isTextChangedListenerDisabled() && aztecKeyListener != null) {
+            val newTextCopy = SpannableStringBuilder(text)
+            // if new text length is longer than original text by 1
+            if (textBefore?.length == newTextCopy.length - 1) {
+                // now check that the inserted character is actually a NEWLINE
+                if (newTextCopy[this.start] == Constants.NEWLINE) {
+                    done = false
+                    aztecText.editableText.setSpan(EnterPressedUnderway(), 0, 0, Spanned.SPAN_USER)
+                    aztecKeyListener.onEnterKey(newTextCopy.replace(this.start, this.start+1, ""), true, selStart, selEnd)
+                }
+            }
+        }
+    }
+
+    override fun afterTextChanged(text: Editable) {
+        aztecTextRef.get()?.editableText?.getSpans(0, 0, EnterPressedUnderway::class.java)?.forEach {
+            if (!done) {
+                done = true
+                if (enterDeleter.shouldDeleteEnter())
+                    text.replace(start, start + 1, "")
+                }
+            aztecTextRef.get()?.editableText?.removeSpan(it)
+        }
+    }
+
+    companion object {
+        fun isEnterPressedUnderway(spanned: Spanned?): Boolean {
+            return spanned?.getSpans(0, 0, EnterPressedUnderway::class.java)?.isNotEmpty() ?: false
+        }
+    }
+}

react-native-aztec/ios/Cartfile

@@ -1 +1 @@
-github "wordpress-mobile/AztecEditor-iOS" "1.6.0"
+github "wordpress-mobile/AztecEditor-iOS" "1.6.1"

react-native-aztec/ios/Cartfile.resolved

@@ -1 +1 @@
-github "wordpress-mobile/AztecEditor-iOS" "1.6.0"
+github "wordpress-mobile/AztecEditor-iOS" "1.6.1"

react-native-aztec/ios/RNTAztecView/RCTAztecView.swift

@@ -123,7 +123,6 @@ class RCTAztecView: Aztec.TextView {
         delegate = self
         textContainerInset = .zero
         contentInset = .zero
-        textContainer.lineFragmentPadding = 0        
         addPlaceholder()
     }
 
@@ -533,8 +532,11 @@ extension RCTAztecView: UITextViewDelegate {
         textView.setNeedsLayout()
     }
 
-    func textViewDidBeginEditing(_ textView: UITextView) {
-        onFocus?([:])
+    override func becomeFirstResponder() -> Bool {
+        if !isFirstResponder && canBecomeFirstResponder {
+            onFocus?([:])
+        }
+        return super.becomeFirstResponder()
     }
 
     func textViewDidEndEditing(_ textView: UITextView) {

react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.swift

@@ -18,7 +18,7 @@ public class RCTAztecViewManager: RCTViewManager {
     public override func view() -> UIView {
         let view = RCTAztecView(
             defaultFont: defaultFont,
-            defaultParagraphStyle: .default,
+            defaultParagraphStyle: defaultParagrahStyle,
             defaultMissingImage: UIImage())
 
         view.isScrollEnabled = false
@@ -60,4 +60,10 @@ public class RCTAztecViewManager: RCTViewManager {
 
         return defaultFont
     }
+    private var defaultParagrahStyle: ParagraphStyle {
+        let defaultStyle = ParagraphStyle.default
+        defaultStyle.textListParagraphSpacing = 5
+        defaultStyle.textListParagraphSpacingBefore = 5
+        return defaultStyle
+    }
 }