Merge pull request #46 from wordpress-mobile/feature/on_formats_activ…

…e_event Add event to RCTAztecView to propagate format changes.
WordPress · Aug 21, 2018 · 370db2c · 370db2c
2 parents 5731b69 + 519955f
commit 370db2c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 7 deletions.
diff --git a/example/editor.js b/example/editor.js
@@ -7,12 +7,25 @@ const _minHeight = 100;
 export default class Editor extends Component {
     constructor(props) {
         super(props);
-        this.formatPressed = this.formatPressed.bind(this)        
+        this.onFormatPress = this.onFormatPress.bind(this) 
+        this.onActiveFormatsChange = this.onActiveFormatsChange.bind(this)
+        this.isFormatActive = this.isFormatActive.bind(this)
+        this.state = { activeFormats: [] };       
     }
 
-    formatPressed( format ) {
+    onFormatPress( format ) {
       const { _aztec } = this.refs;
-      _aztec.applyFormat(format)
+      _aztec.applyFormat(format);
+    }
+
+    onActiveFormatsChange( formats ) {      
+      this.setState( { activeFormats: formats });
+    }
+
+    isFormatActive( format ) {
+      const { activeFormats } = this.state;
+      console.log(activeFormats);
+      return activeFormats.indexOf(format) != -1;
     }
 
     render() {
@@ -21,9 +34,9 @@ export default class Editor extends Component {
       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") } }/>
+                <Button title="Bold" color={ this.isFormatActive("bold") ? 'black' : 'gray' } onPress={ () => { this.onFormatPress("bold") } }/>
+                <Button title="Italic" color={ this.isFormatActive("italic") ? 'black' : 'gray' } onPress={ () => { this.onFormatPress("italic") } }/>
+                <Button title="Strikethrough" color={ this.isFormatActive("strikethrough") ? 'black' : 'gray' } onPress={ () => { this.onFormatPress("strikethrough") } }/>
               </View>
               <AztecView
                 ref="_aztec"
@@ -34,6 +47,7 @@ export default class Editor extends Component {
                 onContentSizeChange= { onContentSizeChange }
                 onChange= {(event) => console.log(event.nativeEvent) }
                 onEndEditing= {(event) => console.log(event.nativeEvent) }
+                onActiveFormatsChange = { this.onActiveFormatsChange }
                 color = {'black'}
                 maxImagesWidth = {200} 
               />

diff --git a/ios/RNTAztecView/RCTAztecView.swift b/ios/RNTAztecView/RCTAztecView.swift
@@ -5,6 +5,8 @@ import UIKit
 class RCTAztecView: Aztec.TextView {
     @objc var onChange: RCTBubblingEventBlock? = nil
     @objc var onContentSizeChange: RCTBubblingEventBlock? = nil
+
+    @objc var onActiveFormatsChange: RCTBubblingEventBlock? = nil
 
     private var previousContentSize: CGSize = .zero
 
@@ -24,6 +26,7 @@ class RCTAztecView: Aztec.TextView {
     }
 
     func commonInit() {
+        delegate = self
         addSubview(placeholderLabel)
         placeholderLabel.textAlignment = .natural
         placeholderLabel.translatesAutoresizingMaskIntoConstraints = false
@@ -137,7 +140,37 @@ class RCTAztecView: Aztec.TextView {
         case "strikethrough": toggleStrikethrough(range: selectedRange)
         default: print("Format not recognized")
         }
+        propagateFormatChanges()
+    }
+
+    func propagateFormatChanges() {
+        guard let onActiveFormatsChange = onActiveFormatsChange else {
+            return
+        }
+        let identifiers: Set<FormattingIdentifier>
+        if selectedRange.length > 0 {
+            identifiers = formatIdentifiersSpanningRange(selectedRange)
+        } else {
+            identifiers = formatIdentifiersForTypingAttributes()
+        }
+        let formats = identifiers.compactMap( { (identifier) -> String? in
+            switch identifier {
+            case .bold: return "bold"
+            case .italic: return "italic"
+            case .strikethrough: return "strikethrough"
+            default: return nil
+            }
+        })
+        onActiveFormatsChange(["formats": formats])
+    }
+}
 
+// MARK: UITextView Delegate Methods
+extension RCTAztecView: UITextViewDelegate {
+
+    func textViewDidChangeSelection(_ textView: UITextView) {
+        propagateFormatChanges()
     }
+
 }
 
diff --git a/ios/RNTAztecView/RCTAztecViewManager.m b/ios/RNTAztecView/RCTAztecViewManager.m
@@ -11,6 +11,8 @@ @implementation RCTAztecViewManager (RCTExternModule)
 RCT_EXPORT_VIEW_PROPERTY(onContentSizeChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 
+RCT_EXPORT_VIEW_PROPERTY(onActiveFormatsChange, RCTBubblingEventBlock)
+
 RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_VIEW_PROPERTY(placeholderTextColor, UIColor)
 

diff --git a/src/AztecView.js b/src/AztecView.js
@@ -14,6 +14,7 @@ class AztecView extends React.Component {
     onChange: PropTypes.func,
     onContentSizeChange: PropTypes.func,
     onScroll: PropTypes.func,
+    onActiveFormatsChange: PropTypes.func,
     ...ViewPropTypes, // include the default view properties
   }
 
@@ -25,8 +26,18 @@ class AztecView extends React.Component {
                                         );    
   }
 
+  _onActiveFormatsChange = (event) => {
+    if (!this.props.onActiveFormatsChange) {
+      return;
+    }
+    const formats = event.nativeEvent.formats;
+    const { onActiveFormatsChange } = this.props;
+    onActiveFormatsChange(formats);
+  }
+
   render() {
-    return (<RCTAztecView {...this.props} />);
+    const { onActiveFormatsChange, ...otherProps } = this.props    
+    return (<RCTAztecView {...otherProps} onActiveFormatsChange={ this._onActiveFormatsChange } />);
   }
 }