Merge pull request #47 from wordpress-mobile/feature/Android_on_forma…

…ts_active_event

Android - Add event to RCTAztecView to propagate format changes

android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecFormattingChangeEvent.java

@@ -0,0 +1,45 @@
+package org.wordpress.mobile.ReactNativeAztec;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.Event;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+/**
+ * Event emitted by Aztec native view when it receives focus.
+ */
+class ReactAztecFormattingChangeEvent extends Event<ReactAztecFormattingChangeEvent> {
+
+    private static final String EVENT_NAME = "topFormatsChanges";
+
+    private String[] mFormats;
+
+    public ReactAztecFormattingChangeEvent(int viewId, String[] formats) {
+        super(viewId);
+        this.mFormats = formats;
+    }
+
+    @Override
+    public String getEventName() {
+        return EVENT_NAME;
+    }
+
+    @Override
+    public boolean canCoalesce() {
+        return false;
+    }
+
+    @Override
+    public void dispatch(RCTEventEmitter rctEventEmitter) {
+        rctEventEmitter.receiveEvent(getViewTag(), getEventName(), serializeEventData());
+    }
+
+    private WritableMap serializeEventData() {
+        WritableMap eventData = Arguments.createMap();
+        eventData.putInt("target", getViewTag());
+        WritableArray newFormats = Arguments.fromArray(mFormats);
+        eventData.putArray("formats", newFormats);
+        return eventData;
+    }
+}

android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecManager.java

@@ -61,6 +61,11 @@ public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
                         MapBuilder.of(
                                 "phasedRegistrationNames",
                                 MapBuilder.of("bubbled", "onChange")))
+                .put(
+                        "topFormatsChanges",
+                        MapBuilder.of(
+                                "phasedRegistrationNames",
+                                MapBuilder.of("bubbled", "onActiveFormatsChange")))
                 .put(
                         "topEndEditing",
                         MapBuilder.of(
@@ -151,6 +156,11 @@ public void setOnContentSizeChange(final ReactAztecText view, boolean onContentS
         }
     }
 
+    @ReactProp(name = "onActiveFormatsChange", defaultBoolean = false)
+    public void setOnActiveFormatsChange(final ReactAztecText view, boolean onActiveFormatsChange) {
+        view.setActiveFormatsChange(onActiveFormatsChange);
+    }
+
     @ReactProp(name = "onScroll", defaultBoolean = false)
     public void setOnScroll(final ReactAztecText view, boolean onScroll) {
         if (onScroll) {

android/src/main/java/org/wordpress/mobile/ReactNativeAztec/ReactAztecText.java

@@ -7,6 +7,7 @@
 import com.facebook.react.bridge.ReactContext;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.UIManagerModule;
+import com.facebook.react.uimanager.events.EventDispatcher;
 import com.facebook.react.views.textinput.ContentSizeWatcher;
 import com.facebook.react.views.textinput.ReactTextInputLocalData;
 import com.facebook.react.views.textinput.ScrollWatcher;
@@ -27,6 +28,7 @@
 import org.wordpress.aztec.plugins.wpcomments.toolbar.MoreToolbarButton;
 
 import java.util.ArrayList;
+import java.util.LinkedList;
 
 public class ReactAztecText extends AztecText {
 
@@ -43,6 +45,8 @@ public class ReactAztecText extends AztecText {
     // check when it's used in EditText in RN. (maybe tests?)
     int mNativeEventCount = 0;
 
+    String lastSentFormattingOptionsEventString = "";
+
     public ReactAztecText(ThemedReactContext reactContext) {
         super(reactContext);
         this.setFocusableInTouchMode(true);
@@ -97,6 +101,69 @@ private void onContentSizeChange() {
         setIntrinsicContentSize();
     }
 
+    void setActiveFormatsChange(boolean enabled) {
+        // If it's not enabled set an empty listener on AztecText
+        if (!enabled) {
+            setOnSelectionChangedListener(new OnSelectionChangedListener() {
+                @Override
+                public void onSelectionChanged(int selStart, int selEnd) {
+                    // nope
+                }
+            });
+            return;
+        }
+
+        setOnSelectionChangedListener(new OnSelectionChangedListener() {
+            @Override
+            public void onSelectionChanged(int selStart, int selEnd) {
+               ReactAztecText.this.updateToolbarButtons(selStart, selEnd);
+            }
+        });
+    }
+
+    private void updateToolbarButtons(int selStart, int selEnd) {
+        ArrayList<ITextFormat> appliedStyles = getAppliedStyles(selStart, selEnd);
+        updateToolbarButtons(appliedStyles);
+    }
+
+    private void updateToolbarButtons(ArrayList<ITextFormat> appliedStyles) {
+        // Read the applied styles and get the String list of formatting options
+        LinkedList<String> formattingOptions = new LinkedList<>();
+        for (ITextFormat currentStyle : appliedStyles) {
+            if ((currentStyle == AztecTextFormat.FORMAT_STRONG || currentStyle == AztecTextFormat.FORMAT_BOLD)
+                    && !formattingOptions.contains("bold")) {
+                formattingOptions.add("bold");
+            }
+            if ((currentStyle == AztecTextFormat.FORMAT_ITALIC || currentStyle == AztecTextFormat.FORMAT_CITE)
+                    && !formattingOptions.contains("italic")) {
+                formattingOptions.add("italic");
+            }
+            if (currentStyle == AztecTextFormat.FORMAT_STRIKETHROUGH) {
+                formattingOptions.add("strikethrough");
+            }
+        }
+
+        // Check if the same formatting event was already sent
+        String newOptionsAsString = "";
+        for (String currentFormatting: formattingOptions) {
+            newOptionsAsString += currentFormatting;
+        }
+        if (newOptionsAsString.equals(lastSentFormattingOptionsEventString)) {
+            // no need to send any event now
+            return;
+        }
+        lastSentFormattingOptionsEventString = newOptionsAsString;
+
+        ReactContext reactContext = (ReactContext) getContext();
+        EventDispatcher eventDispatcher = reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher();
+        eventDispatcher.dispatchEvent(
+                new ReactAztecFormattingChangeEvent(
+                        getId(),
+                        formattingOptions.toArray(new String[formattingOptions.size()])
+                )
+        );
+    }
+
     @Override
     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
         onContentSizeChange();
@@ -152,6 +219,7 @@ public void applyFormat(String format) {
         ArrayList<ITextFormat> newFormats = new ArrayList<>();
         switch (format) {
             case ("bold"):
+            case ("strong"):
                 newFormats.add(AztecTextFormat.FORMAT_STRONG);
                 newFormats.add(AztecTextFormat.FORMAT_BOLD);
             break;
@@ -169,9 +237,14 @@ public void applyFormat(String format) {
         }
 
         if (!isTextSelected()) {
-            setSelectedStyles(getNewStylesList(newFormats));
+            final ArrayList<ITextFormat> newStylesList = getNewStylesList(newFormats);
+            setSelectedStyles(newStylesList);
+            // Update the toolbar state
+            updateToolbarButtons(newStylesList);
         } else {
             toggleFormatting(newFormats.get(0));
+            // Update the toolbar state
+            updateToolbarButtons(getSelectionStart(), getSelectionEnd());
         }
     }
 
@@ -180,10 +253,10 @@ private ArrayList<ITextFormat> getNewStylesList(ArrayList<ITextFormat> newFormat
         ArrayList<ITextFormat> textFormats = new ArrayList<>();
         textFormats.addAll(getSelectedStyles());
         boolean wasRemoved = false;
-        for (ITextFormat currentFormat : newFormats) {
-            if (textFormats.contains(currentFormat)) {
+        for (ITextFormat newFormat : newFormats) {
+            if (textFormats.contains(newFormat)) {
                 wasRemoved = true;
-                textFormats.remove(currentFormat);
+                textFormats.remove(newFormat);
             }
         }
 

example/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {AppRegistry, StyleSheet, TextInput, FlatList, KeyboardAvoidingView, SafeAreaView, Platform} from 'react-native';
 import {example_content} from './content';
 import Editor from './editor'
@@ -25,7 +25,6 @@ export default class example extends React.Component {
     }
 
     renderItem( { item } ) {
-      let myMinHeight = Math.max(_minHeight, item.height);
       const key = item.key;
       return (              
               <Editor                

example/editor.js

@@ -19,7 +19,7 @@ export default class Editor extends Component {
     }
 
     onActiveFormatsChange( formats ) {      
-      this.setState( { activeFormats: formats });
+      this.setState({activeFormats: formats });
     }
 
     isFormatActive( format ) {