Add media edit icon to image block

.gitmodules

@@ -1,6 +1,6 @@
 [submodule "gutenberg"]
 	path = gutenberg
-	url = ../../WordPress/gutenberg.git
+	url = ../../leandroalonso/gutenberg.git
 [submodule "react-native-aztec"]
 	path = react-native-aztec-old-submodule
 	url = ../react-native-aztec.git

android/app/src/main/java/com/gutenberg/MainApplication.java

@@ -95,6 +95,11 @@ public void requestImageFullscreenPreview(String mediaUrl) {
 
             }
 
+            @Override
+            public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String mediaUrl) {
+
+            }
+
             @Override
             public void editorDidEmitLog(String message, LogLevel logLevel) {
                 switch (logLevel) {

ios/gutenberg/GutenbergViewController.swift

@@ -185,6 +185,10 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
     func gutenbergDidRequestImagePreview(with fullSizeUrl: URL, thumbUrl: URL?) {
         print("Gutenberg requested fullscreen image preview for " + fullSizeUrl.absoluteString)
     }
+
+    func gutenbergDidRequestMediaEditor(with mediaUrl: URL, callback: @escaping MediaPickerDidPickMediaCallback) {
+        print("Gutenberg requested media editor for " + mediaUrl.absoluteString)
+    }
 }
 
 extension GutenbergViewController: GutenbergBridgeDataSource {

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

@@ -106,4 +106,6 @@ public static MediaType getEnum(String value) {
     void requestMediaPickFrom(String mediaSource, MediaUploadCallback mediaUploadCallback, Boolean allowMultipleSelection);
 
     void requestImageFullscreenPreview(String mediaUrl);
+
+    void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String mediaUrl);
 }

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

@@ -52,6 +52,7 @@ public class RNReactNativeGutenbergBridgeModule extends ReactContextBaseJavaModu
     private static final String MEDIA_SOURCE_MEDIA_LIBRARY = "SITE_MEDIA_LIBRARY";
     private static final String MEDIA_SOURCE_DEVICE_LIBRARY = "DEVICE_MEDIA_LIBRARY";
     private static final String MEDIA_SOURCE_DEVICE_CAMERA = "DEVICE_CAMERA";
+    private static final String MEDIA_SOURCE_MEDIA_EDITOR = "MEDIA_EDITOR";
 
 
     public RNReactNativeGutenbergBridgeModule(ReactApplicationContext reactContext,
@@ -170,6 +171,11 @@ public void requestImageFullscreenPreview(String mediaUrl) {
         mGutenbergBridgeJS2Parent.requestImageFullscreenPreview(mediaUrl);
     }
 
+    @ReactMethod
+    public void requestMediaEditor(String mediaUrl, final Callback onUploadMediaSelected) {
+        mGutenbergBridgeJS2Parent.requestMediaEditor(getNewUploadMediaCallback(false, onUploadMediaSelected), mediaUrl);
+    }
+
     @ReactMethod
     public void editorDidEmitLog(String message, int logLevel) {
         mGutenbergBridgeJS2Parent.editorDidEmitLog(message, GutenbergBridgeJS2Parent.LogLevel.valueOf(logLevel));

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

@@ -74,6 +74,7 @@ public class WPAndroidGlueCode {
     private OnEditorMountListener mOnEditorMountListener;
     private OnEditorAutosaveListener mOnEditorAutosaveListener;
     private OnImageFullscreenPreviewListener mOnImageFullscreenPreviewListener;
+    private OnMediaEditorListener mOnMediaEditorListener;
     private boolean mIsEditorMounted;
 
     private String mContentHtml = "";
@@ -149,6 +150,10 @@ public interface OnEditorAutosaveListener {
         void onEditorAutosave();
     }
 
+    public interface OnMediaEditorListener {
+        void onMediaEditorClicked(String mediaUrl);
+    }
+
     public void mediaSelectionCancelled() {
         mAppendsMultipleSelectedToSiblingBlocks = false;
     }
@@ -305,6 +310,13 @@ public void performRequest(String pathFromJS, Consumer<String> onSuccess, Consum
             public void requestImageFullscreenPreview(String mediaUrl) {
                 mOnImageFullscreenPreviewListener.onImageFullscreenPreviewClicked(mediaUrl);
             }
+
+            @Override
+            public void requestMediaEditor(MediaUploadCallback mediaUploadCallback, String mediaUrl) {
+                mMediaPickedByUserOnBlock = true;
+                mPendingMediaUploadCallback = mediaUploadCallback;
+                mOnMediaEditorListener.onMediaEditorClicked(mediaUrl);
+            }
         });
 
         return Arrays.asList(
@@ -378,7 +390,8 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
                                   OnEditorAutosaveListener onEditorAutosaveListener,
                                   OnAuthHeaderRequestedListener onAuthHeaderRequestedListener,
                                   RequestExecutor fetchExecutor,
-                                  OnImageFullscreenPreviewListener onImageFullscreenPreviewListener) {
+                                  OnImageFullscreenPreviewListener onImageFullscreenPreviewListener,
+                                  OnMediaEditorListener onMediaEditorListener) {
         MutableContextWrapper contextWrapper = (MutableContextWrapper) mReactRootView.getContext();
         contextWrapper.setBaseContext(viewGroup.getContext());
 
@@ -388,6 +401,7 @@ public void attachToContainer(ViewGroup viewGroup, OnMediaLibraryButtonListener
         mOnEditorAutosaveListener = onEditorAutosaveListener;
         mRequestExecutor = fetchExecutor;
         mOnImageFullscreenPreviewListener = onImageFullscreenPreviewListener;
+        mOnMediaEditorListener = onMediaEditorListener;
 
         sAddCookiesInterceptor.setOnAuthHeaderRequestedListener(onAuthHeaderRequestedListener);
 

react-native-gutenberg-bridge/index.js

@@ -14,8 +14,11 @@ export const mediaSources = {
 	deviceLibrary: 'DEVICE_MEDIA_LIBRARY',
 	deviceCamera: 'DEVICE_CAMERA',
 	siteMediaLibrary: 'SITE_MEDIA_LIBRARY',
+	mediaEditor: 'MEDIA_EDITOR',
 };
 
+export const showMediaEditorButton = isIOS;
+
 // Console polyfill from react-native
 
 export function nativeLoggingHook( message, logLevel ) {
@@ -108,6 +111,10 @@ export function requestImageFullscreenPreview( currentImageUrl, originalImageUrl
 	return RNReactNativeGutenbergBridge.requestImageFullscreenPreview( originalImageUrl || currentImageUrl );
 }
 
+export function requestMediaEditor( mediaUrl, callback ) {
+	return RNReactNativeGutenbergBridge.requestMediaEditor( mediaUrl, callback );
+}
+
 export function fetchRequest( path ) {
 	return RNReactNativeGutenbergBridge.fetchRequest( path );
 }

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

@@ -20,12 +20,14 @@ extension Gutenberg.MediaSource {
     public static let mediaLibrary = Gutenberg.MediaSource(id: "SITE_MEDIA_LIBRARY", label: "", types: [.image, .video])
     public static let deviceLibrary = Gutenberg.MediaSource(id: "DEVICE_MEDIA_LIBRARY", label: "", types: [.image, .video])
     public static let deviceCamera = Gutenberg.MediaSource(id: "DEVICE_CAMERA", label: "", types: [.image, .video])
+    public static let mediaEditor = Gutenberg.MediaSource(id: "MEDIA_EDITOR", label: "", types: [.image])
 
     static var registeredInternalSources: [Gutenberg.MediaSource] {
         return [
             .deviceCamera,
             .deviceLibrary,
             .mediaLibrary,
+            .mediaEditor,
         ]
     }
 }
@@ -133,7 +135,11 @@ public protocol GutenbergBridgeDelegate: class {
 
     /// Tells the delegate to display a fullscreen image from a given URL
     ///
-    func gutenbergDidRequestImagePreview(with fullSizeUrl: URL, thumbUrl: URL?)
+    func gutenbergDidRequestImagePreview(with mediaUrl: URL, thumbUrl: URL?)
+
+    /// Tells the delegate to display the media editor from a given URL
+    ///
+    func gutenbergDidRequestMediaEditor(with mediaUrl: URL, callback: @escaping MediaPickerDidPickMediaCallback)
 }
 
 // MARK: - Optional GutenbergBridgeDelegate methods

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

@@ -17,5 +17,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(editorDidAutosave)
 RCT_EXTERN_METHOD(fetchRequest:(NSString *)path resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject)
 RCT_EXTERN_METHOD(requestImageFullscreenPreview:(NSString *)currentImageUrlString originalImageUrlString:(NSString *)originalImageUrlString)
+RCT_EXTERN_METHOD(requestMediaEditor:(NSString *)mediaUrl callback:(RCTResponseSenderBlock)callback)
 
 @end

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

@@ -155,6 +155,31 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
         }
     }
 
+    @objc
+    func requestMediaEditor(_ urlString: String, callback: @escaping RCTResponseSenderBlock) {
+        guard let url = URL(string: urlString) else {
+            assertionFailure("Given String is not a URL")
+            return
+        }
+
+        DispatchQueue.main.async {
+            self.delegate?.gutenbergDidRequestMediaEditor(with: url) { media in
+                guard let media = media else {
+                    callback(nil)
+                    return
+                }
+
+                let mediaToReturn = media
+
+                let jsFormattedMedia = mediaToReturn.map { mediaInfo in
+                    return mediaInfo.encodeForJS()
+                }
+
+                callback(jsFormattedMedia)
+            }
+        }
+    }
+
     private func shouldLog(with level: Int) -> Bool {
         return level >= RCTGetLogThreshold().rawValue
     }