Issue 331/mention support on @ keypress

packages/react-native-aztec/android/src/main/java/org/wordpress/mobile/ReactNativeAztec/AztecReactTextChangedEvent.kt

@@ -0,0 +1,34 @@
+package org.wordpress.mobile.ReactNativeAztec
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+/**
+ * This event includes all data contained in [com.facebook.react.views.textinput.ReactTextChangedEvent],
+ * plus some extra info Gutenberg needs from Aztec.
+ */
+class AztecReactTextChangedEvent(
+    viewId: Int,
+    private val mText: String,
+    private val mEventCount: Int,
+    private val mMostRecentChar: Char?
+) : Event<AztecReactTextChangedEvent>(viewId) {
+
+    override fun getEventName(): String = "topAztecChange"
+
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+        rctEventEmitter.receiveEvent(viewTag, eventName, serializeEventData())
+    }
+
+    private fun serializeEventData(): WritableMap =
+            Arguments.createMap().apply {
+                putString("text", mText)
+                putInt("eventCount", mEventCount)
+                putInt("target", viewTag)
+                if (mMostRecentChar != null) {
+                    putInt("keyCode", mMostRecentChar.toInt())
+                }
+            }
+}

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

@@ -139,7 +139,7 @@ public Map<String, Object> getExportedCustomBubblingEventTypeConstants() {
                                 MapBuilder.of(
                                         "bubbled", "onSubmitEditing", "captured", "onSubmitEditingCapture")))*/
                 .put(
-                        "topChange",
+                        "topAztecChange",
                         MapBuilder.of(
                                 "phasedRegistrationNames",
                                 MapBuilder.of("bubbled", "onChange")))
@@ -623,13 +623,15 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {
             // the text (minus the Enter char itself).
             if (!mEditText.isEnterPressedUnderway()) {
                 int currentEventCount = mEditText.incrementAndGetEventCounter();
+                boolean singleCharacterHasBeenAdded = count - before == 1;
                 // The event that contains the event counter and updates it must be sent first.
                 // TODO: t7936714 merge these events
                 mEventDispatcher.dispatchEvent(
-                        new ReactTextChangedEvent(
+                        new AztecReactTextChangedEvent(
                                 mEditText.getId(),
                                 mEditText.toHtml(mEditText.getText(), false),
-                                currentEventCount));
+                                currentEventCount,
+                                singleCharacterHasBeenAdded ? s.charAt(start + before) : null));
 
                 mEventDispatcher.dispatchEvent(
                         new ReactTextInputEvent(
@@ -657,8 +659,7 @@ public void onTextChanged(CharSequence s, int start, int before, int count) {
         }
 
         @Override
-        public void afterTextChanged(Editable s) {
-        }
+        public void afterTextChanged(Editable s) {}
     }
 
     private class AztecContentSizeWatcher implements com.facebook.react.views.textinput.ContentSizeWatcher {

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

@@ -6,6 +6,7 @@ import UIKit
 class RCTAztecView: Aztec.TextView {
     @objc var onBackspace: RCTBubblingEventBlock? = nil
     @objc var onChange: RCTBubblingEventBlock? = nil
+    @objc var onKeyDown: RCTBubblingEventBlock? = nil
     @objc var onEnter: RCTBubblingEventBlock? = nil
     @objc var onFocus: RCTBubblingEventBlock? = nil
     @objc var onBlur: RCTBubblingEventBlock? = nil
@@ -14,6 +15,7 @@ class RCTAztecView: Aztec.TextView {
     @objc var onSelectionChange: RCTBubblingEventBlock? = nil
     @objc var minWidth: CGFloat = 0
     @objc var maxWidth: CGFloat = 0
+    @objc var triggerKeyCodes: NSArray?
 
     @objc var activeFormats: NSSet? = nil {
         didSet {
@@ -304,7 +306,7 @@ class RCTAztecView: Aztec.TextView {
     // MARK: - Edits
 
     open override func insertText(_ text: String) {
-        guard !interceptEnter(text) else {
+        guard !interceptEnter(text), !interceptTriggersKeyCodes(text) else {
             return
         }
 
@@ -342,12 +344,13 @@ class RCTAztecView: Aztec.TextView {
         }
 
         guard text == "\n",
-            let onEnter = onEnter else {
+            let onKeyDown = onKeyDown else {
                 return false
         }
 
-        let caretData = packCaretDataForRN()
-        onEnter(caretData)
+        var eventData = packCaretDataForRN()
+        eventData = add(keyTrigger: "\r", to: eventData)
+        onKeyDown(eventData)
         return true
     }
 
@@ -356,19 +359,45 @@ class RCTAztecView: Aztec.TextView {
             || (selectedRange.location == 0 && selectedRange.length == 0)
             || text.count == 1 // send backspace event when cleaning all characters
             || selectedRange == NSRange(location: 0, length: textStorage.length), // send backspace event when deleting all the text
-            let onBackspace = onBackspace else {
+            let onKeyDown = onKeyDown else {
                 return false
         }
         var range = selectedRange
         if text.count == 1 {
             range = NSRange(location: 0, length: textStorage.length)
         }
-        let caretData = packCaretDataForRN(overrideRange: range)
+        var caretData = packCaretDataForRN(overrideRange: range)
         onSelectionChange?(caretData)
-        onBackspace(caretData)
+        let backSpaceKeyCode:UInt8 = 8
+        caretData = add(keyCode: backSpaceKeyCode, to: caretData)
+        onKeyDown(caretData)
         return true
     }
 
+    private func interceptTriggersKeyCodes(_ text: String) -> Bool {
+        guard let keyCodes = triggerKeyCodes,
+            keyCodes.count > 0,
+            let onKeyDown = onKeyDown,
+            text.count == 1
+        else {
+            return false
+        }
+        for value in keyCodes {
+            guard let keyString = value as? String,
+                let keyCode = keyString.first?.asciiValue,
+                text.contains(keyString)
+            else {
+                continue
+            }
+
+            var eventData = [AnyHashable:Any]()
+            eventData = add(keyCode: keyCode, to: eventData)
+            onKeyDown(eventData)
+            return true
+        }
+        return false;
+    }
+
     private func isNewLineBeforeSelectionAndNotEndOfContent() -> Bool {
         guard let currentLocation = text.indexFromLocation(selectedRange.location) else {
             return false
@@ -429,6 +458,19 @@ class RCTAztecView: Aztec.TextView {
         return result
     }
 
+    func add(keyTrigger: String, to pack:[AnyHashable: Any]) -> [AnyHashable: Any] {
+        guard let keyCode = keyTrigger.first?.asciiValue else {
+            return pack
+        }
+        return add(keyCode: keyCode, to: pack)
+    }
+
+    func add(keyCode: UInt8, to pack:[AnyHashable: Any]) -> [AnyHashable: Any] {
+        var result = pack
+        result["keyCode"] = keyCode
+        return result
+    }
+
     // MARK: - RN Properties
 
     @objc

packages/react-native-aztec/ios/RNTAztecView/RCTAztecViewManager.m

@@ -7,6 +7,8 @@ @interface RCT_EXTERN_MODULE(RCTAztecViewManager, NSObject)
 RCT_EXPORT_VIEW_PROPERTY(onBackspace, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onEnter, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onKeyDown, RCTBubblingEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(triggerKeyCodes, NSArray)
 RCT_EXPORT_VIEW_PROPERTY(onFocus, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onBlur, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPaste, RCTBubblingEventBlock)

packages/react-native-aztec/src/AztecView.js

@@ -11,13 +11,15 @@ import ReactNative, {
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
 
 const AztecManager = UIManager.getViewManagerConfig( 'RCTAztecView' );
-
+const BACKSPACE = 8;
 class AztecView extends React.Component {
 	constructor() {
 		super( ...arguments );
 		this._onContentSizeChange = this._onContentSizeChange.bind( this );
 		this._onEnter = this._onEnter.bind( this );
 		this._onBackspace = this._onBackspace.bind( this );
+		this._onKeyDown = this._onKeyDown.bind( this );
+		this._onChange = this._onChange.bind( this );
 		this._onHTMLContentWithCursor = this._onHTMLContentWithCursor.bind(
 			this
 		);
@@ -57,21 +59,43 @@ class AztecView extends React.Component {
 			return;
 		}
 
-		if ( ! this.props.onEnter ) {
+		if ( ! this.props.onKeyDown ) {
 			return;
 		}
 
-		const { onEnter } = this.props;
-		onEnter( event );
+		const { onKeyDown } = this.props;
+
+		const newEvent = { ...event, keyCode: 13 };
+		onKeyDown( newEvent );
 	}
 
 	_onBackspace( event ) {
-		if ( ! this.props.onBackspace ) {
+		if ( ! this.props.onKeyDown ) {
 			return;
 		}
 
-		const { onBackspace } = this.props;
-		onBackspace( event );
+		const { onKeyDown } = this.props;
+
+		const newEvent = {
+			...event,
+			keyCode: BACKSPACE,
+			preventDefault: () => {},
+		};
+		onKeyDown( newEvent );
+	}
+
+	_onKeyDown( event ) {
+		if ( ! this.props.onKeyDown ) {
+			return;
+		}
+
+		const { onKeyDown } = this.props;
+		const newEvent = {
+			...event,
+			keyCode: event.nativeEvent.keyCode,
+			preventDefault: () => {},
+		};
+		onKeyDown( newEvent );
 	}
 
 	_onHTMLContentWithCursor( event ) {
@@ -107,6 +131,26 @@ class AztecView extends React.Component {
 		onBlur( event );
 	}
 
+	_onChange( event ) {
+		// iOS uses the the onKeyDown prop directly from native only when one of the triggerKeyCodes is entered, but
+		// Android includes the information needed for onKeyDown in the event passed to onChange.
+		if ( Platform.OS === 'android' ) {
+			const triggersIncludeEventKeyCode =
+				this.props.triggerKeyCodes &&
+				this.props.triggerKeyCodes
+					.map( ( char ) => char.charCodeAt( 0 ) )
+					.includes( event.nativeEvent.keyCode );
+			if ( triggersIncludeEventKeyCode ) {
+				this._onKeyDown( event );
+			}
+		}
+
+		const { onChange } = this.props;
+		if ( onChange ) {
+			onChange( event );
+		}
+	}
+
 	_onSelectionChange( event ) {
 		if ( this.props.onSelectionChange ) {
 			const { selectionStart, selectionEnd, text } = event.nativeEvent;
@@ -182,15 +226,17 @@ class AztecView extends React.Component {
 					style={ style }
 					onContentSizeChange={ this._onContentSizeChange }
 					onHTMLContentWithCursor={ this._onHTMLContentWithCursor }
+					onChange={ this._onChange }
 					onSelectionChange={ this._onSelectionChange }
-					onEnter={ this.props.onEnter && this._onEnter }
+					onEnter={ this.props.onKeyDown && this._onEnter }
+					onBackspace={ this.props.onKeyDown && this._onBackspace }
+					onKeyDown={ this.props.onKeyDown && this._onKeyDown }
 					deleteEnter={ this.props.deleteEnter }
 					// IMPORTANT: the onFocus events are thrown away as these are handled by onPress() in the upper level.
 					// It's necessary to do this otherwise onFocus may be set by `{...otherProps}` and thus the onPress + onFocus
 					// combination generate an infinite loop as described in https://github.com/wordpress-mobile/gutenberg-mobile/issues/302
 					onFocus={ this._onAztecFocus }
 					onBlur={ this._onBlur }
-					onBackspace={ this._onBackspace }
 				/>
 			</TouchableWithoutFeedback>
 		);