[RNMobile] Using deferredEventEmitter to wait for the Editor to be mounted before issuing replaceBlock signal

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

@@ -41,16 +41,13 @@ interface MediaSaveEventEmitter {
         void onMediaFileSaveFailed(String mediaId);
         void onMediaCollectionSaveResult(String firstMediaIdInCollection, boolean success);
         void onMediaIdChanged(final String oldId, final String newId, final String oldUrl);
+        void onReplaceMediaFilesEditedBlock(final String mediaFiles, final String blockId);
     }
 
     interface ReplaceUnsupportedBlockCallback {
         void replaceUnsupportedBlock(String content, String blockId);
     }
 
-    interface ReplaceMediaFilesEditedBlockCallback {
-        void replaceMediaFilesEditedBlock(String mediaFiles, String blockId);
-    }
-
     // Ref: https://github.com/facebook/react-native/blob/master/Libraries/polyfills/console.js#L376
     enum LogLevel {
         TRACE(0),
@@ -166,14 +163,13 @@ void gutenbergDidRequestUnsupportedBlockFallback(ReplaceUnsupportedBlockCallback
 
     void onShowXpostSuggestions(Consumer<String> onResult);
 
-    void requestMediaFilesEditorLoad(ReplaceMediaFilesEditedBlockCallback replaceMediaFilesEditedBlockCallback,
-                                                     ReadableArray mediaFiles,
-                                                     String blockId
-    );
+    void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId);
 
     void requestMediaFilesFailedRetryDialog(ReadableArray mediaFiles);
 
     void requestMediaFilesUploadCancelDialog(ReadableArray mediaFiles);
 
     void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles);
+
+    void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId);
 }

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

@@ -237,8 +237,7 @@ public void requestMediaEditor(String mediaUrl, final Callback onUploadMediaSele
 
     @ReactMethod
     public void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId) {
-        mGutenbergBridgeJS2Parent.requestMediaFilesEditorLoad((savedMediaFiles, savedBlockId) ->
-                replaceBlock(savedMediaFiles, savedBlockId), mediaFiles, blockId);
+        mGutenbergBridgeJS2Parent.requestMediaFilesEditorLoad(mediaFiles, blockId);
     }
 
     @ReactMethod
@@ -256,6 +255,11 @@ public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
         mGutenbergBridgeJS2Parent.requestMediaFilesSaveCancelDialog(mediaFiles);
     }
 
+    @ReactMethod
+    public void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId) {
+        mGutenbergBridgeJS2Parent.mediaFilesBlockReplaceSync(mediaFiles, blockId);
+    }
+
     @ReactMethod
     public void editorDidEmitLog(String message, int logLevel) {
         mGutenbergBridgeJS2Parent.editorDidEmitLog(message, GutenbergBridgeJS2Parent.LogLevel.valueOf(logLevel));

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

@@ -38,12 +38,15 @@ public interface JSEventEmitter {
 
     private static final String EVENT_NAME_MEDIA_UPLOAD = "mediaUpload";
     private static final String EVENT_NAME_MEDIA_SAVE = "mediaSave";
+    private static final String EVENT_NAME_MEDIA_REPLACE_BLOCK = "replaceBlock";
 
     private static final String MAP_KEY_MEDIA_FILE_STATE = "state";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_ACTION_PROGRESS = "progress";
     private static final String MAP_KEY_MEDIA_FILE_MEDIA_SERVER_ID = "mediaServerId";
     private static final String MAP_KEY_UPDATE_CAPABILITIES = "updateCapabilities";
 
+    private static final String MAP_KEY_REPLACE_BLOCK_HTML = "html";
+    private static final String MAP_KEY_REPLACE_BLOCK_BLOCK_ID = "clientId";
 
     /**
      * Used for storing deferred actions prior to editor mounting
@@ -202,6 +205,14 @@ public void onMediaCollectionSaveResult(String firstMediaIdInCollection, boolean
         }
     }
 
+    @Override public void onReplaceMediaFilesEditedBlock(String mediaFiles, String blockId) {
+        WritableMap writableMap = new WritableNativeMap();
+        writableMap.putString(MAP_KEY_REPLACE_BLOCK_HTML, mediaFiles);
+        writableMap.putString(MAP_KEY_REPLACE_BLOCK_BLOCK_ID, blockId);
+        // this is a critical message so, always enqueue
+        queueActionToJS(EVENT_NAME_MEDIA_REPLACE_BLOCK, writableMap);
+    }
+
     public void updateCapabilities(GutenbergProps gutenbergProps) {
         queueActionToJS(MAP_KEY_UPDATE_CAPABILITIES, Arguments.makeNativeMap(gutenbergProps.getUpdatedCapabilitiesProps()));
     }

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

@@ -49,7 +49,6 @@
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.GutenbergUserEvent;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.MediaSelectedCallback;
-import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ReplaceMediaFilesEditedBlockCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.GutenbergBridgeJS2Parent.ReplaceUnsupportedBlockCallback;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.RNMedia;
 import org.wordpress.mobile.ReactNativeGutenbergBridge.RNReactNativeGutenbergBridgePackage;
@@ -94,7 +93,6 @@ public class WPAndroidGlueCode {
     private OnGutenbergDidSendButtonPressedActionListener mOnGutenbergDidSendButtonPressedActionListener;
     private ReplaceUnsupportedBlockCallback mReplaceUnsupportedBlockCallback;
     private OnMediaFilesCollectionBasedBlockEditorListener mOnMediaFilesCollectionBasedBlockEditorListener;
-    private ReplaceMediaFilesEditedBlockCallback mReplaceMediaFilesEditedBlockCallback;
     private boolean mIsEditorMounted;
 
     private String mContentHtml = "";
@@ -156,6 +154,7 @@ public interface OnMediaFilesCollectionBasedBlockEditorListener {
         void onCancelUploadForMediaCollection(ArrayList<Object> mediaFiles);
         void onRetryUploadForMediaCollection(ArrayList<Object> mediaFiles);
         void onCancelSaveForMediaCollection(ArrayList<Object> mediaFiles);
+        void onMediaFilesBlockReplaceSync(ArrayList<Object> mediaFiles, String blockId);
     }
 
     public interface OnImageFullscreenPreviewListener {
@@ -414,12 +413,7 @@ public void onShowUserSuggestions(Consumer<String> onResult) {
             }
 
             @Override
-            public void requestMediaFilesEditorLoad(
-                    ReplaceMediaFilesEditedBlockCallback replaceMediaFilesEditedBlockCallback,
-                    ReadableArray mediaFiles,
-                    String blockId
-            ) {
-                mReplaceMediaFilesEditedBlockCallback = replaceMediaFilesEditedBlockCallback;
+            public void requestMediaFilesEditorLoad(ReadableArray mediaFiles, String blockId) {
                 mOnMediaFilesCollectionBasedBlockEditorListener
                         .onRequestMediaFilesEditorLoad(mediaFiles.toArrayList(), blockId);
             }
@@ -444,6 +438,14 @@ public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
                         mediaFiles.toArrayList()
                 );
             }
+
+            @Override
+            public void mediaFilesBlockReplaceSync(ReadableArray mediaFiles, String blockId) {
+                mOnMediaFilesCollectionBasedBlockEditorListener.onMediaFilesBlockReplaceSync(
+                    mediaFiles.toArrayList(), blockId
+                );
+            }
+
         }, mIsDarkMode);
 
         return Arrays.asList(
@@ -935,11 +937,8 @@ public void replaceUnsupportedBlock(String content, String blockId) {
         }
     }
 
-    public void replaceMediaFilesEditedBlock(String mediaFiles, String blockId) {
-        if (mReplaceMediaFilesEditedBlockCallback != null) {
-            mReplaceMediaFilesEditedBlockCallback.replaceMediaFilesEditedBlock(mediaFiles, blockId);
-            mReplaceMediaFilesEditedBlockCallback = null;
-        }
+    public void replaceMediaFilesEditedBlock(final String mediaFiles, final String blockId) {
+        mDeferredEventEmitter.onReplaceMediaFilesEditedBlock(mediaFiles, blockId);
     }
 
     private boolean isMediaSelectedCallbackRegistered() {

packages/react-native-bridge/index.js

@@ -346,4 +346,18 @@ export function requestMediaFilesSaveCancelDialog( mediaFiles ) {
 	);
 }
 
+/**
+ * Request the host app to listen to mediaFiles collection based block replacement signals
+ * in case such an event was enqueued
+ *
+ * @param {Array<Map>} mediaFiles the mediaFiles attribute of the block, containing data about each media item.
+ * @param {string} blockClientId the clientId of the block.
+ */
+export function mediaFilesBlockReplaceSync( mediaFiles, blockClientId ) {
+	RNReactNativeGutenbergBridge.mediaFilesBlockReplaceSync(
+		mediaFiles,
+		blockClientId
+	);
+}
+
 export default RNReactNativeGutenbergBridge;

packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift

@@ -261,4 +261,5 @@ public extension GutenbergBridgeDelegate {
     func gutenbergDidRequestMediaFilesFailedRetryDialog(_ mediaFiles: [String]) { }
     func gutenbergDidRequestMediaFilesUploadCancelDialog(_ mediaFiles: [String]) { }
     func gutenbergDidRequestMediaFilesSaveCancelDialog(_ mediaFiles: [String]) { }
+    func gutenbergDidRequestMediaFilesBlockReplaceSync() {}
 }

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -29,5 +29,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(onCancelUploadForMediaCollection:(NSArray<NSString *> *)mediaFiles)
 RCT_EXTERN_METHOD(actionButtonPressed:(NSString *)buttonType)
 RCT_EXTERN_METHOD(mediaSaveSync)
+RCT_EXTERN_METHOD(mediaFilesBlockReplaceSync)
 
 @end

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -327,6 +327,15 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
         }
     }
 
+    @objc
+    func mediaFilesBlockReplaceSync() {
+        DispatchQueue.main.async {
+            if self.hasObservers {
+                self.delegate?.gutenbergDidRequestMediaFilesBlockReplaceSync()
+            }
+        }
+    }
+
     @objc
     func actionButtonPressed(_ buttonType: String) {
         guard let button = Gutenberg.ActionButtonType(rawValue: buttonType) else {

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

@@ -192,7 +192,6 @@ public void onShowXpostSuggestions(Consumer<String> onResult) {
 
             @Override
             public void requestMediaFilesEditorLoad(
-                    ReplaceMediaFilesEditedBlockCallback replaceMediaFilesEditedBlockCallback,
                     ReadableArray mediaFiles,
                     String blockId
             ) {
@@ -214,6 +213,14 @@ public void requestMediaFilesSaveCancelDialog(ReadableArray mediaFiles) {
                 Toast.makeText(MainApplication.this, "requestMediaFilesSaveCancelDialog called", Toast.LENGTH_SHORT).show();
             }
 
+            @Override
+            public void mediaFilesBlockReplaceSync(
+                    ReadableArray mediaFiles,
+                    String blockId
+            ) {
+                Toast.makeText(MainApplication.this, "mediaFilesBlockReplaceSync called", Toast.LENGTH_SHORT).show();
+            }
+
             @Override
             public void gutenbergDidSendButtonPressedAction(String buttonType) {
 

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -233,6 +233,10 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         print(#function)
     }
 
+    func gutenbergDidRequestMediaFilesBlockReplaceSync() {
+        print(#function)
+    }
+
     func gutenbergDidRequestMediaFilesEditorLoad(_ mediaFiles: [String], blockId: String) {
         print(#function)
     }