Add support for xpost suggestions on mobile

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java

@@ -150,7 +150,9 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
 
     void gutenbergDidSendButtonPressedAction(String buttonType);
 
-    void onAddMention(Consumer<String> onSuccess);
+    void onShowUserSuggestions(Consumer<String> onResult);
+
+    void onShowXpostSuggestions(Consumer<String> onResult);
 
     void setStarterPageTemplatesTooltipShown(boolean tooltipShown);
 

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java

@@ -296,8 +296,13 @@ private OtherMediaOptionsReceivedCallback getNewOtherMediaReceivedCallback(final
     }
 
     @ReactMethod
-    public void addMention(Promise promise) {
-        mGutenbergBridgeJS2Parent.onAddMention(promise::resolve);
+    public void showUserSuggestions(Promise promise) {
+        mGutenbergBridgeJS2Parent.onShowUserSuggestions(promise::resolve);
+    }
+
+    @ReactMethod
+    public void showXpostSuggestions(Promise promise) {
+        mGutenbergBridgeJS2Parent.onShowXpostSuggestions(promise::resolve);
     }
 
     @ReactMethod

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/ShowSuggestionsUtil.java

@@ -0,0 +1,8 @@
+package org.wordpress.mobile.WPAndroidGlue;
+
+import androidx.core.util.Consumer;
+
+public interface ShowSuggestionsUtil {
+    void showUserSuggestions(Consumer<String> onResult);
+    void showXpostSuggestions(Consumer<String> onResult);
+}

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java

@@ -105,7 +105,7 @@ public class WPAndroidGlueCode {
     private CountDownLatch mGetContentCountDownLatch;
     private WeakReference<View> mLastFocusedView = null;
     private RequestExecutor mRequestExecutor;
-    private AddMentionUtil mAddMentionUtil;
+    private ShowSuggestionsUtil mShowSuggestionsUtil;
     private @Nullable Bundle mEditorTheme = null;
 
     private static OkHttpHeaderInterceptor sAddCookiesInterceptor = new OkHttpHeaderInterceptor();
@@ -384,8 +384,12 @@ public void gutenbergDidSendButtonPressedAction(String buttonType) {
             }
 
             @Override
-            public void onAddMention(Consumer<String> onSuccess) {
-                mAddMentionUtil.getMention(onSuccess);
+            public void onShowUserSuggestions(Consumer<String> onResult) {
+                mShowSuggestionsUtil.showUserSuggestions(onResult);
+            }
+
+            @Override public void onShowXpostSuggestions(Consumer<String> onResult) {
+                mShowSuggestionsUtil.showXpostSuggestions(onResult);
             }
 
             @Override
@@ -471,7 +475,7 @@ public void attachToContainer(ViewGroup viewGroup,
                                   OnLogGutenbergUserEventListener onLogGutenbergUserEventListener,
                                   OnGutenbergDidRequestUnsupportedBlockFallbackListener onGutenbergDidRequestUnsupportedBlockFallbackListener,
                                   OnGutenbergDidSendButtonPressedActionListener onGutenbergDidSendButtonPressedActionListener,
-                                  AddMentionUtil addMentionUtil,
+                                  ShowSuggestionsUtil showSuggestionsUtil,
                                   OnStarterPageTemplatesTooltipShownEventListener onStarterPageTemplatesTooltipListener,
                                   boolean isDarkMode) {
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
@@ -487,7 +491,7 @@ public void attachToContainer(ViewGroup viewGroup,
         mOnLogGutenbergUserEventListener = onLogGutenbergUserEventListener;
         mOnGutenbergDidRequestUnsupportedBlockFallbackListener = onGutenbergDidRequestUnsupportedBlockFallbackListener;
         mOnGutenbergDidSendButtonPressedActionListener = onGutenbergDidSendButtonPressedActionListener;
-        mAddMentionUtil = addMentionUtil;
+        mShowSuggestionsUtil = showSuggestionsUtil;
         mOnStarterPageTemplatesTooltipShownListener = onStarterPageTemplatesTooltipListener;
 
         sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener);

packages/react-native-bridge/index.js

@@ -228,8 +228,12 @@ export function logUserEvent( event, properties ) {
 	return RNReactNativeGutenbergBridge.logUserEvent( event, properties );
 }
 
-export function addMention() {
-	return RNReactNativeGutenbergBridge.addMention();
+export function showUserSuggestions() {
+	return RNReactNativeGutenbergBridge.showUserSuggestions();
+}
+
+export function showXpostSuggestions() {
+	return RNReactNativeGutenbergBridge.showXpostSuggestions();
 }
 
 export function requestStarterPageTemplatesTooltipShown( callback ) {

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -167,14 +167,17 @@ public void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockC
             }
 
             @Override
-            public void onAddMention(Consumer<String> onSuccess) {
-                onSuccess.accept("matt");
+            public void onShowUserSuggestions(Consumer<String> onResult) {
+                onResult.accept("matt");
             }
 
             @Override
-            public void gutenbergDidSendButtonPressedAction(String buttonType) {
-
+            public void onShowXpostSuggestions(Consumer<String> onResult) {
+                onResult.accept("ma.tt");
             }
+
+            @Override
+            public void gutenbergDidSendButtonPressedAction(String buttonType) {}
 
         }, isDarkMode());
 

packages/rich-text/src/component/index.native.js

@@ -8,7 +8,10 @@
  */
 import RCTAztecView from '@wordpress/react-native-aztec';
 import { View, Platform } from 'react-native';
-import { addMention } from '@wordpress/react-native-bridge';
+import {
+	showUserSuggestions,
+	showXpostSuggestions,
+} from '@wordpress/react-native-bridge';
 import { get, pickBy, debounce } from 'lodash';
 import memize from 'memize';
 
@@ -82,7 +85,6 @@ export class RichText extends Component {
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.handleEnter = this.handleEnter.bind( this );
 		this.handleDelete = this.handleDelete.bind( this );
-		this.handleMention = this.handleMention.bind( this );
 		this.onPaste = this.onPaste.bind( this );
 		this.onFocus = this.onFocus.bind( this );
 		this.onBlur = this.onBlur.bind( this );
@@ -100,7 +102,16 @@ export class RichText extends Component {
 		);
 		this.valueToFormat = this.valueToFormat.bind( this );
 		this.getHtmlToRender = this.getHtmlToRender.bind( this );
-		this.showMention = this.showMention.bind( this );
+		this.handleSuggestionFunc = this.handleSuggestionFunc.bind( this );
+		this.handleUserSuggestion = this.handleSuggestionFunc(
+			showUserSuggestions,
+			'@'
+		).bind( this );
+		this.handleXpostSuggestion = this.handleSuggestionFunc(
+			showXpostSuggestions,
+			'+'
+		).bind( this );
+		this.triggerKeyCodeHandlers = this.triggerKeyCodeHandlers.bind( this );
 		this.insertString = this.insertString.bind( this );
 		this.state = {
 			activeFormats: [],
@@ -321,7 +332,7 @@ export class RichText extends Component {
 
 		this.handleDelete( event );
 		this.handleEnter( event );
-		this.handleMention( event );
+		this.handleTriggerKeyCodes( event );
 	}
 
 	handleEnter( event ) {
@@ -400,33 +411,53 @@ export class RichText extends Component {
 		this.lastAztecEventType = 'input';
 	}
 
-	handleMention( event ) {
+	handleTriggerKeyCodes( event ) {
+		const keyCodeHandlers = this.triggerKeyCodeHandlers();
+
 		const { keyCode } = event;
+		const triggeredKeyCodeChar = Object.keys( keyCodeHandlers ).find(
+			( charKey ) => charKey.charCodeAt( 0 ) === keyCode
+		);
 
-		if ( keyCode !== '@'.charCodeAt( 0 ) ) {
-			return;
+		if ( triggeredKeyCodeChar ) {
+			const record = this.getRecord();
+			const text = getTextContent( record );
+			// Only respond to the trigger if the selection is on the start of text or the character before is a space
+			const useTrigger =
+				text.length === 0 ||
+				record.start === 0 ||
+				text.charAt( record.start - 1 ) === ' ';
+
+			if ( useTrigger ) {
+				keyCodeHandlers[ triggeredKeyCodeChar ]();
+			} else {
+				this.insertString( record, triggeredKeyCodeChar );
+			}
 		}
-		const record = this.getRecord();
-		const text = getTextContent( record );
-		// Only start the mention UI if the selection is on the start of text or the character before is a space
-		if (
-			text.length === 0 ||
-			record.start === 0 ||
-			text.charAt( record.start - 1 ) === ' '
-		) {
-			this.showMention();
-		} else {
-			this.insertString( record, '@' );
+	}
+
+	triggerKeyCodeHandlers() {
+		if ( this.props.disableEditingMenu ) {
+			return {};
 		}
+
+		return {
+			'+': this.handleXpostSuggestion,
+			...( this.props.isMentionsSupported && {
+				'@': this.handleUserSuggestion,
+			} ),
+		};
 	}
 
-	showMention() {
-		const record = this.getRecord();
-		addMention()
-			.then( ( mentionUserId ) => {
-				this.insertString( record, `@${ mentionUserId } ` );
-			} )
-			.catch( () => {} );
+	handleSuggestionFunc( suggestionFunction, prefix ) {
+		return () => {
+			const record = this.getRecord();
+			suggestionFunction()
+				.then( ( suggestion ) => {
+					this.insertString( record, `${ prefix }${ suggestion } ` );
+				} )
+				.catch( () => {} );
+		};
 	}
 
 	/**
@@ -868,11 +899,9 @@ export class RichText extends Component {
 					onFocus={ this.onFocus }
 					onBlur={ this.onBlur }
 					onKeyDown={ this.onKeyDown }
-					triggerKeyCodes={
-						disableEditingMenu === false && isMentionsSupported
-							? [ '@' ]
-							: []
-					}
+					triggerKeyCodes={ Object.keys(
+						this.triggerKeyCodeHandlers()
+					) }
 					onPaste={ this.onPaste }
 					activeFormats={ this.getActiveFormatNames( record ) }
 					onContentSizeChange={ this.onContentSizeChange }