Merge pull request #2380 from wordpress-mobile/issue/content_info

Display content information metrics
WordPress · Jun 16, 2020 · cde02f8 · cde02f8
2 parents ec775dd + ae266d0
commit cde02f8
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 12 deletions.
diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
@@ -1,3 +1,7 @@
+1.31.0
+------
+* [*] Show content information (block, word and characters counts).
+
 1.30.0
 ------
 * [**] Adds editor support for theme defined colors and theme defined gradients on cover and button blocks.

diff --git a/android/app/src/main/java/com/gutenberg/MainApplication.java b/android/app/src/main/java/com/gutenberg/MainApplication.java
@@ -46,7 +46,7 @@ public class MainApplication extends Application implements ReactApplication, Gu
     private ReactNativeHost createReactNativeHost() {
         mRnReactNativeGutenbergBridgePackage = new RNReactNativeGutenbergBridgePackage(new GutenbergBridgeJS2Parent() {
             @Override
-            public void responseHtml(String title, String html, boolean changed) {
+            public void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo) {
             }
 
             @Override

diff --git a/gutenberg b/gutenberg
diff --git a/ios/gutenberg/GutenbergViewController.swift b/ios/gutenberg/GutenbergViewController.swift
@@ -13,6 +13,7 @@ class GutenbergViewController: UIViewController {
         return mediaUploadCoordinator
     }()
     fileprivate var longPressGesture: UILongPressGestureRecognizer!
+    fileprivate var contentInfo: ContentInfo?
 
     override func loadView() {
         view = gutenberg.rootView
@@ -62,13 +63,16 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
 
     func gutenbergDidMount(unsupportedBlockNames: [String]) {
         print("gutenbergDidMount(unsupportedBlockNames: \(unsupportedBlockNames))")
+        gutenberg.requestHTML()
     }
 
-    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool) {
+    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool, contentInfo: ContentInfo?) {
         print("didProvideHTML:")
         print("↳ Content changed: \(changed)")
         print("↳ Title: \(title)")
         print("↳ HTML: \(html)")
+        print("↳ Content Info: \(contentInfo)")
+        self.contentInfo = contentInfo
     }
 
     func gutenbergDidRequestMedia(from source: Gutenberg.MediaSource, filter: [Gutenberg.MediaType], allowMultipleSelection: Bool, with callback: @escaping MediaPickerDidPickMediaCallback) {
@@ -298,7 +302,9 @@ extension GutenbergViewController {
     func showMoreSheet() {
         let alert = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
         alert.popoverPresentationController?.barButtonItem = navigationItem.rightBarButtonItem
-
+        if let contentInfo = contentInfo {
+            alert.title = "Content Structure\nBlocks: \(contentInfo.blockCount), Words: \(contentInfo.wordCount), Characters: \(contentInfo.characterCount)"
+        }
         let cancelAction = UIAlertAction(title: "Keep Editing", style: .cancel)
         alert.addAction(toggleHTMLModeAction)
         alert.addAction(updateHtmlAction)

diff --git a/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java b/...c/main/java/org/wordpress/mobile/ReactNativeGutenbergBridge/GutenbergBridgeJS2Parent.java
@@ -15,7 +15,7 @@
 
 public interface GutenbergBridgeJS2Parent extends RequestExecutor {
 
-    void responseHtml(String title, String html, boolean changed);
+    void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo);
 
     void editorDidMount(ReadableArray unsupportedBlockNames);
 

diff --git a/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java b/...a/org/wordpress/mobile/ReactNativeGutenbergBridge/RNReactNativeGutenbergBridgeModule.java
@@ -155,8 +155,8 @@ public void updateTheme(@Nullable Bundle editorTheme) {
     }
 
     @ReactMethod
-    public void provideToNative_Html(String html, String title, boolean changed) {
-        mGutenbergBridgeJS2Parent.responseHtml(title, html, changed);
+    public void provideToNative_Html(String html, String title, boolean changed, ReadableMap contentInfo) {
+        mGutenbergBridgeJS2Parent.responseHtml(title, html, changed, contentInfo);
     }
 
     @ReactMethod

diff --git a/...rg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java b/...rg-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/WPAndroidGlueCode.java
@@ -92,6 +92,7 @@ public class WPAndroidGlueCode {
     private String mTitle = "";
     private boolean mTitleInitialized;
     private boolean mContentChanged;
+    private ReadableMap mContentInfo;
     private boolean mShouldUpdateContent;
     private CountDownLatch mGetContentCountDownLatch;
     private WeakReference<View> mLastFocusedView = null;
@@ -185,20 +186,28 @@ public interface OnStarterPageTemplatesTooltipShownEventListener {
         boolean onRequestStarterPageTemplatesTooltipShown();
     }
 
+    public interface OnContentInfoReceivedListener {
+        void onContentInfoFailed();
+        void onEditorNotReady();
+        void onContentInfoReceived(HashMap<String, Object> contentInfo);
+    }
+
     public void mediaSelectionCancelled() {
         mAppendsMultipleSelectedToSiblingBlocks = false;
     }
 
     protected List<ReactPackage> getPackages() {
         mRnReactNativeGutenbergBridgePackage = new RNReactNativeGutenbergBridgePackage(new GutenbergBridgeJS2Parent() {
             @Override
-            public void responseHtml(String title, String html, boolean changed) {
+            public void responseHtml(String title, String html, boolean changed, ReadableMap contentInfo) {
                 mContentHtml = html;
                 mTitle = title;
                 // This code is called twice. When getTitle and getContent are called.
                 // Make sure mContentChanged has the correct value (true) if one of the call returned with changes.
                 mContentChanged = mContentChanged || changed;
 
+                mContentInfo = contentInfo;
+
                 // Gutenberg mobile sends us html response even without we asking for it so, check if the latch is there.
                 //  This is probably an indication of a bug on the RN side of things though.
                 //  Related: https://github.com/WordPress/gutenberg/pull/16260#issuecomment-506727286
@@ -730,6 +739,38 @@ public CharSequence getTitle(OnGetContentTimeout onGetContentTimeout) {
         return "";
     }
 
+    public boolean triggerGetContentInfo(OnContentInfoReceivedListener onContentInfoReceivedListener) {
+        if (mReactContext != null && (mGetContentCountDownLatch == null || mGetContentCountDownLatch.getCount() == 0)) {
+            if (!mIsEditorMounted) {
+                onContentInfoReceivedListener.onEditorNotReady();
+                return false;
+            }
+
+            mGetContentCountDownLatch = new CountDownLatch(1);
+
+            mRnReactNativeGutenbergBridgePackage.getRNReactNativeGutenbergBridgeModule().getHtmlFromJS();
+
+            new Thread(new Runnable() {
+                @Override public void run() {
+                    try {
+                        mGetContentCountDownLatch.await(5, TimeUnit.SECONDS);
+                        if (mContentInfo == null) {
+                            onContentInfoReceivedListener.onContentInfoFailed();
+                        } else {
+                            onContentInfoReceivedListener.onContentInfoReceived(mContentInfo.toHashMap());
+                        }
+                    } catch (InterruptedException ie) {
+                        onContentInfoReceivedListener.onContentInfoFailed();
+                    }
+                }
+            }).start();
+
+            return true;
+        }
+
+        return false;
+    }
+
     private String getMediaType(final boolean isVideo) {
         return isVideo ? "video" : "image";
     }

diff --git a/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift b/react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift
@@ -22,6 +22,26 @@ public struct Block {
     }
 }
 
+public struct ContentInfo {
+    public let characterCount: Int
+    public let wordCount: Int
+    public let paragraphCount: Int
+    public let blockCount: Int
+}
+
+extension ContentInfo {
+
+    static func decode(from dict: [String: Int]) -> ContentInfo? {
+        guard  let characters = dict["characterCount"],
+            let words = dict["wordCount"],
+            let paragraphs = dict["paragraphCount"],
+            let blocks = dict["blockCount"] else {
+                return nil
+        }
+        return ContentInfo(characterCount: characters, wordCount: words, paragraphCount: paragraphs, blockCount: blocks)
+    }
+}
+
 public typealias MediaPickerDidPickMediaCallback = (_ media: [MediaInfo]?) -> Void
 public typealias MediaImportCallback = (_ media: MediaInfo?) -> Void
 
@@ -103,7 +123,8 @@ public protocol GutenbergBridgeDelegate: class {
     ///     - title: the title as shown by the editor.
     ///     - html: The current HTML presented by the editor.
     ///     - changed: True if the given HTML presents changes from the last request or initial value.
-    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool)
+    ///     - contentInfo: Information about the post content: characters, words, paragraphs, blocks.
+    func gutenbergDidProvideHTML(title: String, html: String, changed: Bool, contentInfo: ContentInfo?)
 
     /// Tells the delegate that an image block requested an image from the media picker.
     ///

diff --git a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m
@@ -3,7 +3,7 @@
 
 @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 
-RCT_EXTERN_METHOD(provideToNative_Html:(NSString *)html title:(NSString *)title changed:(BOOL)changed)
+RCT_EXTERN_METHOD(provideToNative_Html:(NSString *)html title:(NSString *)title changed:(BOOL)changed contentInfo:(NSDictionary *)info)
 RCT_EXTERN_METHOD(requestMediaPickFrom:(NSString *)source filter:(NSArray<NSString *> *)filter allowMultipleSelection:(BOOL)allowMultipleSelection callback:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(getOtherMediaOptions:(NSArray<NSString *> *)filter callback:(RCTResponseSenderBlock)callback)
 RCT_EXTERN_METHOD(mediaUploadSync)

diff --git a/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift b/react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift
@@ -8,9 +8,10 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     // MARK: - Messaging methods
 
     @objc
-    func provideToNative_Html(_ html: String, title: String, changed: Bool) {
+    func provideToNative_Html(_ html: String, title: String, changed: Bool, contentInfo: [String:Int]) {
         DispatchQueue.main.async {
-            self.delegate?.gutenbergDidProvideHTML(title: title, html: html, changed: changed)
+            let info = ContentInfo.decode(from: contentInfo)            
+            self.delegate?.gutenbergDidProvideHTML(title: title, html: html, changed: changed, contentInfo: info)
         }
     }
 

diff --git a/symlinked-packages/@wordpress/wordcount b/symlinked-packages/@wordpress/wordcount
@@ -0,0 +1 @@
+../../gutenberg/packages/wordcount/src/