Merge pull request #44 from wordpress-mobile/issue/format_actions

Format actions

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

@@ -6,6 +6,7 @@
 import android.text.Editable;
 import android.text.TextWatcher;
 import android.view.View;
+import android.util.Log;
 
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReactContext;
@@ -108,12 +109,11 @@ private void setTextfromJS(ReactAztecText view, String text) {
         view.setIsSettingTextFromJS(false);
     }
 
-    @ReactProp(name = "color")
-    public void setColor(ReactAztecText view, String color) {
+    @ReactProp(name = "color", customType = "Color")
+    public void setColor(ReactAztecText view, @Nullable Integer color) {
         int newColor = Color.BLACK;
-        try {
-            newColor = Color.parseColor(color);
-        } catch (IllegalArgumentException e) {
+        if (color != null) {
+            newColor = color;
         }
         view.setTextColor(newColor);
     }
@@ -160,6 +160,28 @@ public void setOnScroll(final ReactAztecText view, boolean onScroll) {
         }
     }
 
+    private static final int COMMAND_NOTIFY_APPLY_FORMAT = 1;
+    private static final String TAG = "ReactAztecText";
+
+    @Override
+    public Map<String, Integer> getCommandsMap() {
+        return MapBuilder.of("applyFormat", COMMAND_NOTIFY_APPLY_FORMAT);
+    }
+
+    @Override
+    public void receiveCommand(final ReactAztecText parent, int commandType, @Nullable ReadableArray args) {
+        Assertions.assertNotNull(parent);
+        Assertions.assertNotNull(args);
+        switch (commandType) {
+        case COMMAND_NOTIFY_APPLY_FORMAT: {
+            final String format = args.getString(0);            
+            Log.d(TAG, String.format("Apply format: %s", format)); 
+            parent.applyFormat(format);           
+            return;
+        }
+        }
+    }
+
     @Override
     protected void addEventEmitters(final ThemedReactContext reactContext, final ReactAztecText aztecText) {
         aztecText.addTextChangedListener(new AztecTextWatcher(reactContext, aztecText));

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

@@ -146,6 +146,17 @@ public void setIsSettingTextFromJS(boolean mIsSettingTextFromJS) {
         this.mIsSettingTextFromJS = mIsSettingTextFromJS;
     }
 
+    public void applyFormat(String format) {
+        switch (format) {
+            case ("bold"):
+            break;
+            case ("italic"):
+            break;
+            case ("strikethrough"):
+            break;
+        }
+    }
+
     /**
      * 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.

example/App.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {AppRegistry, StyleSheet, TextInput, FlatList, KeyboardAvoidingView, SafeAreaView, Platform} from 'react-native';
 import {example_content} from './content';
-import RCTAztecView from 'react-native-aztec'
+import Editor from './editor'
 
 const _minHeight = 100;
 
@@ -27,11 +27,9 @@ export default class example extends React.Component {
     renderItem( { item } ) {
       let myMinHeight = Math.max(_minHeight, item.height);
       const key = item.key;
-      return (<RCTAztecView                
-                style={[styles.aztec_editor, {minHeight: myMinHeight}]}
-                text = { { text: item.text } } 
-                placeholder = {'This is the placeholder text'}
-                placeholderTextColor = {'lightgray'} // See http://facebook.github.io/react-native/docs/colors                
+      return (              
+              <Editor                
+                item={ item }                
                 onContentSizeChange= {(event) => {                    
                     let newHeight = event.nativeEvent.contentSize.height                    
                     const newElements = this.state.data.map( searchItem => {
@@ -42,12 +40,8 @@ export default class example extends React.Component {
                       }
                     })
                     this.setState( { data: newElements})                    
-                }}
-                onChange= {(event) => console.log(event.nativeEvent) }
-                onEndEditing= {(event) => console.log(event.nativeEvent) }
-                color = {'black'}
-                maxImagesWidth = {200} 
-              />
+                }}                
+              />              
             )
     }
 

example/editor.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import {StyleSheet, Button, View} from 'react-native';
+import AztecView from 'react-native-aztec'
+
+const _minHeight = 100;
+
+export default class Editor extends Component {
+    constructor(props) {
+        super(props);
+        this.formatPressed = this.formatPressed.bind(this)        
+    }
+
+    formatPressed( format ) {
+      const { _aztec } = this.refs;
+      _aztec.applyFormat(format)
+    }
+
+    render() {
+      const { item, onContentSizeChange } = this.props;
+      let myMinHeight = Math.max(_minHeight, item.height);      
+      return (
+              <View>
+              <View style={{flex: 1, flexDirection: 'row'}}>
+                <Button title="Bold" onPress={ () => { this.formatPressed("bold") } }/>
+                <Button title="Italic" onPress={ () => { this.formatPressed("italic") } }/>
+                <Button title="Strikethrough" onPress={ () => { this.formatPressed("strikethrough") } }/>
+              </View>
+              <AztecView
+                ref="_aztec"
+                style={[styles.aztec_editor, {minHeight: myMinHeight}]}
+                text = { { text: item.text } } 
+                placeholder = {'This is the placeholder text'}
+                placeholderTextColor = {'lightgray'} // See http://facebook.github.io/react-native/docs/colors                
+                onContentSizeChange= { onContentSizeChange }
+                onChange= {(event) => console.log(event.nativeEvent) }
+                onEndEditing= {(event) => console.log(event.nativeEvent) }
+                color = {'black'}
+                maxImagesWidth = {200} 
+              />
+              </View>
+            )
+    }    
+}
+
+var styles = StyleSheet.create({
+    container: {
+     flex: 1
+    },
+    aztec_editor: {
+    minHeight: _minHeight,
+    margin: 10,
+  },
+});

ios/RNTAztecView/RCTAztecView.swift

@@ -127,5 +127,17 @@ class RCTAztecView: Aztec.TextView {
     func updatePlaceholderVisibility() {
         placeholderLabel.isHidden = !self.text.isEmpty
     }
+
+    // MARK: Format interface
+
+    @objc func apply(format: String) {
+        switch format {
+        case "bold": toggleBold(range: selectedRange)
+        case "italic": toggleItalic(range: selectedRange)
+        case "strikethrough": toggleStrikethrough(range: selectedRange)
+        default: print("Format not recognized")
+        }
+
+    }
 }
 

ios/RNTAztecView/RCTAztecViewManager.m

@@ -2,6 +2,8 @@
 #import "RNTAztecView-Swift.h"
 #import <React/RCTViewManager.h>
 
+typedef void (^ActionBlock)(RCTAztecView *aztecView);
+
 @implementation RCTAztecViewManager (RCTExternModule)
 RCT_EXPORT_MODULE(RCTAztecView)
 
@@ -12,4 +14,27 @@ @implementation RCTAztecViewManager (RCTExternModule)
 RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
 
+- (void)executeBlock:(ActionBlock)block onNode:(NSNumber *)node {
+
+    [self.bridge.uiManager addUIBlock:^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+        id view = viewRegistry[node];
+        if (![view isKindOfClass:[RCTAztecView class]]) {
+            RCTLogError(@"Invalid view returned from registry, expecting RCTAztecView, got: %@", view);
+            return;
+        }
+        RCTAztecView *listView = view;
+        if (block) {
+            block(listView);
+        }
+    }];
+}
+
+RCT_EXPORT_METHOD(applyFormat:(nonnull NSNumber *)node format:(NSString *)format)
+{
+    RCTLogInfo(@"Apply format: %@", format);
+    [self executeBlock:^(RCTAztecView *aztecView) {
+        [aztecView applyWithFormat:format];
+    } onNode:node];
+}
+
 @end

src/AztecView.js

@@ -1,20 +1,35 @@
 import PropTypes from 'prop-types';
-import {requireNativeComponent, ViewPropTypes} from 'react-native';
+import React from 'react';
+import ReactNative, {requireNativeComponent, ViewPropTypes, UIManager, ColorPropType} from 'react-native';
 
-var aztex = {
-  name: 'AztecView',
-  propTypes: {
+class AztecView extends React.Component {
+
+  static propTypes = {
     text: PropTypes.object,
     placeholder: PropTypes.string,
-    placeholderTextColor: PropTypes.number,
-    color: PropTypes.string,
+    placeholderTextColor: ColorPropType,
+    color: ColorPropType,
     maxImagesWidth: PropTypes.number,
     minImagesWidth: PropTypes.number,
     onChange: PropTypes.func,
     onContentSizeChange: PropTypes.func,
     onScroll: PropTypes.func,
     ...ViewPropTypes, // include the default view properties
-  },
-};
+  }
 
-module.exports = requireNativeComponent('RCTAztecView', aztex);
+  applyFormat(format) {   
+    UIManager.dispatchViewManagerCommand(
+                                          ReactNative.findNodeHandle(this),
+                                          UIManager.RCTAztecView.Commands.applyFormat,
+                                          [format],
+                                        );    
+  }
+
+  render() {
+    return (<RCTAztecView {...this.props} />);
+  }
+}
+
+const RCTAztecView = requireNativeComponent('RCTAztecView', AztecView);
+
+export default AztecView