Merge pull request #1502 from esteemapp/custom-script

fix for comment links click

android/app/src/main/java/app/esteem/mobile/android/MainApplication.java

@@ -9,6 +9,9 @@ import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.soloader.SoLoader;
 
+//See below, Webview debugging
+//import android.webkit.WebView; 
+
 import com.microsoft.codepush.react.CodePush;
 import com.reactnativecommunity.viewpager.RNCViewPagerPackage;
 
@@ -17,29 +20,29 @@ import java.util.List;
 
 public class MainApplication extends Application implements ReactApplication {
 
-  private final ReactNativeHost mReactNativeHost =
-      new ReactNativeHost(this) {
-        @Override
-        public boolean getUseDeveloperSupport() {
-          return BuildConfig.DEBUG;
-        }
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+    @Override
+    public boolean getUseDeveloperSupport() {
+      return BuildConfig.DEBUG;
+    }
 
-        @Override
-        protected List<ReactPackage> getPackages() {
-          @SuppressWarnings("UnnecessaryLocalVariable")
-          List<ReactPackage> packages = new PackageList(this).getPackages();
-          // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
-          packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG));
-          packages.add(new RNCViewPagerPackage());
-          return packages;
-        }
+    @Override
+    protected List<ReactPackage> getPackages() {
+      @SuppressWarnings("UnnecessaryLocalVariable")
+      List<ReactPackage> packages = new PackageList(this).getPackages();
+      // Packages that cannot be autolinked yet can be added manually here, for
+      // example:
+      // packages.add(new MyReactNativePackage());
+      packages.add(new CodePush("hvFLmwFbA1yko829EQO_apTfdlCKSybps-jnWV", MainApplication.this, BuildConfig.DEBUG));
+      packages.add(new RNCViewPagerPackage());
+      return packages;
+    }
 
-        @Override
-        protected String getJSMainModuleName() {
-          return "index";
-        }
-      };
+    @Override
+    protected String getJSMainModuleName() {
+      return "index";
+    }
+  };
 
   @Override
   public ReactNativeHost getReactNativeHost() {
@@ -50,6 +53,8 @@ public class MainApplication extends Application implements ReactApplication {
   public void onCreate() {
     super.onCreate();
     SoLoader.init(this, /* native exopackage */ false);
+    // Uncomment below line to Debug Webview
+    // WebView.setWebContentsDebuggingEnabled(true);
     initializeFlipper(this); // Remove this line if you don't want Flipper enabled
   }
 
@@ -62,9 +67,9 @@ public class MainApplication extends Application implements ReactApplication {
     if (BuildConfig.DEBUG) {
       try {
         /*
-         We use reflection here to pick up the class that initializes Flipper,
-        since Flipper library is not available in release mode
-        */
+         * We use reflection here to pick up the class that initializes Flipper, since
+         * Flipper library is not available in release mode
+         */
         Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
         aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
       } catch (ClassNotFoundException e) {

package.json

@@ -53,7 +53,7 @@
     "react-intl": "^3.9.2",
     "react-native": "0.61.5",
     "react-native-actionsheet": "esteemapp/react-native-actionsheet",
-    "react-native-autoheight-webview": "^1.4.0",
+    "react-native-autoheight-webview": "^1.4.1",
     "react-native-code-push": "esteemapp/react-native-code-push",
     "react-native-config": "luggit/react-native-config#master",
     "react-native-dark-mode": "^0.2.1",
@@ -76,7 +76,7 @@
     "react-native-vector-icons": "^6.6.0",
     "react-native-version": "^3.1.0",
     "react-native-version-number": "^0.3.5",
-    "react-native-webview": "^7.5.2",
+    "react-native-webview": "^8.0.4",
     "react-navigation": "^4.0.10",
     "react-navigation-drawer": "^2.3.3",
     "react-navigation-redux-helpers": "^4.0.1",

src/components/postElements/body/view/commentBodyView.js

@@ -14,7 +14,7 @@ import { navigate } from '../../../../navigation/service';
 import { default as ROUTES } from '../../../../constants/routeNames';
 
 import { CommentPlaceHolder } from '../../../basicUIElements';
-import { customBodyScript } from './config';
+import { customCommentScript } from './config';
 
 // Styles
 
@@ -328,7 +328,7 @@ const CommentBody = ({
   `;
   return (
     <Fragment>
-      <Modal visible={isImageModalOpen} transparent={true}>
+      <Modal key={`mkey-${created.toString()}`} visible={isImageModalOpen} transparent={true}>
         <ImageViewer
           imageUrls={postImages}
           enableSwipeDown
@@ -341,13 +341,13 @@ const CommentBody = ({
         />
       </Modal>
       <AutoHeightWebView
-        key={created.toString()}
+        key={`akey-${created.toString()}`}
         source={{ html }}
         allowsFullscreenVideo={true}
         style={{ width: WIDTH - (32 + 34 * (commentDepth % 6)) }}
         customStyle={customStyle}
         onMessage={__handleOnLinkPress}
-        customScript={customBodyScript}
+        customScript={customCommentScript}
         renderLoading={() => <CommentPlaceHolder />}
         startInLoadingState={true}
         onShouldStartLoadWithRequest={false}

src/components/postElements/body/view/config.js

@@ -1,14 +1,11 @@
-'use strict';
-
 const customBodyScript = `
 var images = document.getElementsByTagName("IMG");
-for (i = 0; i < images.length; i++) {  
+for (var i = 0; i < images.length; i++) {  
   var result = {
     type: 'image',
     href: images[i].getAttribute("src") || ''
-  }
+  };
   var resultStr = JSON.stringify(JSON.stringify(result));
-  
   var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
   if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
     images[i].setAttribute("onClick", message);
@@ -29,42 +26,39 @@ document.addEventListener('click', function(event) {
     var href = el.getAttribute('href');
     var result = {
       type: '_external',
-      href
-    }
+      href: href
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
-    
     return true;
   }
   if (el.classList.contains('markdown-external-link')) {
     var href = el.getAttribute('data-href');
     var result = {
       type: 'markdown-external-link',
-      href
-    }
+      href: href
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
-    
     return true;
   }
   if (el.classList.contains('markdown-author-link')) {
     var author = el.getAttribute('data-author');
     var result = {
       type: 'markdown-author-link',
-      author,
-    }
+      author: author
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
-
   if (el.classList.contains('markdown-post-link')) {
     var category = el.getAttribute('data-tag');
     var author = el.getAttribute('data-author');
     var permlink = el.getAttribute('data-permlink');
     var result = {
       type: 'markdown-post-link',
-      category,
-      author,
-      permlink,
-    }
+      category: category,
+      author: author,
+      permlink: permlink
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
@@ -72,26 +66,24 @@ document.addEventListener('click', function(event) {
     var tag = el.getAttribute('data-tag');
     var result = {
       type: 'markdown-tag-link',
-      tag
-    }
+      tag: tag
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
   if (el.classList.contains('markdown-witnesses-link')) {
-    
     var result = {
       type: 'markdown-witnesses-link'
-    }
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
   if (el.classList.contains('markdown-proposal-link')) {
-    
     var proposal = el.getAttribute('data-proposal');
     var result = {
       type: 'markdown-proposal-link',
-      proposal
-    }
+      proposal: proposal
+    };
     window.ReactNativeWebView.postMessage(JSON.stringify(result));
     return false;
   }
@@ -105,17 +97,125 @@ document.addEventListener('click', function(event) {
     if (videoHref) {
       var result = {
         type: 'markdown-video-link',
-        videoHref
-      }
+        videoHref: videoHref
+      };
       window.ReactNativeWebView.postMessage(JSON.stringify(result));
-      
       return false;
     }
   }
   var author = el.getAttribute('data-author').toString();
   window.ReactNativeWebView.postMessage(JSON.stringify(author));
-})
+});
 true;
 `;
 
-export { customBodyScript };
+const customCommentScript = `
+var images = document.getElementsByTagName("IMG");
+for (var i = 0; i < images.length; i++) {  
+  var result = {
+    type: 'image',
+    href: images[i].getAttribute("src") || ''
+  };
+  var resultStr = JSON.stringify(JSON.stringify(result));
+  var message = 'window.ReactNativeWebView.postMessage(' + resultStr + ')';
+  if (!images[i].classList.contains("video-thumbnail") && !images[i].parentNode.classList.contains("markdown-external-link")) {
+    images[i].setAttribute("onClick", message);
+  }
+}
+document.addEventListener('touchstart', function(event) {
+  var el = event.target;
+  while (el.tagName !== 'A') {
+    if (!el.parentNode) {
+      break;
+    }
+    el = el.parentNode;
+  }
+  if (!el || el.tagName !== 'A') {
+    return;
+  }
+  if (el.getAttribute('target') === '_external') {
+    var href = el.getAttribute('href');
+    var result = {
+      type: '_external',
+      href: href
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return true;
+  }
+  if (el.classList.contains('markdown-external-link')) {
+    var href = el.getAttribute('data-href');
+    var result = {
+      type: 'markdown-external-link',
+      href: href
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return true;
+  }
+  if (el.classList.contains('markdown-author-link')) {
+    var author = el.getAttribute('data-author');
+    var result = {
+      type: 'markdown-author-link',
+      author: author
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return false;
+  }
+  if (el.classList.contains('markdown-post-link')) {
+    var category = el.getAttribute('data-tag');
+    var author = el.getAttribute('data-author');
+    var permlink = el.getAttribute('data-permlink');
+    var result = {
+      type: 'markdown-post-link',
+      category: category,
+      author: author,
+      permlink: permlink
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return false;
+  }
+  if (el.classList.contains('markdown-tag-link')) {
+    var tag = el.getAttribute('data-tag');
+    var result = {
+      type: 'markdown-tag-link',
+      tag: tag
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return false;
+  }
+  if (el.classList.contains('markdown-witnesses-link')) {
+    var result = {
+      type: 'markdown-witnesses-link'
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return false;
+  }
+  if (el.classList.contains('markdown-proposal-link')) {
+    var proposal = el.getAttribute('data-proposal');
+    var result = {
+      type: 'markdown-proposal-link',
+      proposal: proposal
+    };
+    window.ReactNativeWebView.postMessage(JSON.stringify(result));
+    return false;
+  }
+  if (el.classList.contains('markdown-video-link')) {
+    var embedSrc = '<iframe frameborder="0" allowfullscreen src="' + el.getAttribute('data-embed-src') + '"></iframe>';
+    if (embedSrc) {
+      el.innerHTML = embedSrc;
+      return;
+    }
+    var videoHref = el.getAttribute('data-video-href');
+    if (videoHref) {
+      var result = {
+        type: 'markdown-video-link',
+        videoHref: videoHref
+      };
+      window.ReactNativeWebView.postMessage(JSON.stringify(result));
+      return false;
+    }
+  }
+});
+true;
+`;
+
+export { customBodyScript, customCommentScript };

yarn.lock

@@ -7562,10 +7562,10 @@ react-native-autoheight-webview@^1.3.4:
   dependencies:
     prop-types "^15.7.2"
 
-react-native-autoheight-webview@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.0.tgz#03274b8cd5d2e4fdf25511f10cfe3321864460a0"
-  integrity sha512-JhyzEL5eAKPN2VtbA6kL6f3Zphmmx1XcEnIluE+Fed3iwQxXJ1GwrvQb+ENGTZhDKtTdh39sfqadpm+2/h9V0A==
+react-native-autoheight-webview@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/react-native-autoheight-webview/-/react-native-autoheight-webview-1.4.1.tgz#be92b7be8a8691d60865e4ad6a8523ff4221207a"
+  integrity sha512-mBx74NP7Sa6/8j46eDdm68z6Yw5YcvN3WkJNUHoCCJ36rQURFhSfhKm+aqbciqlXE8Jr5PrRA1oZSBeZzDb0bA==
   dependencies:
     prop-types "^15.7.2"
 
@@ -7783,10 +7783,10 @@ react-native-version@^3.1.0:
     resolve-from "^5.0.0"
     semver "^6.0.0"
 
-react-native-webview@^7.5.2:
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-7.6.0.tgz#6bae76430200be5e5ead7d986af2fa341b650186"
-  integrity sha512-IQWtIpCTYb4dTshAJO3hMM9Ms5T6KRpk6qWqgBTGMdmgeEvSxWz9l7Og1ALhb7T7NoAnPy8w/dQmD9LlbGGs5g==
+react-native-webview@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.0.4.tgz#4951df32bd54f6fa16bc0eda5e6e6762d8b83ba8"
+  integrity sha512-XEatna1wwF43Rg500HaDIC/MS2IAob/PvjkTePCevs9wQz90SwERTjGZNuM2WxH+JwrZrxoilGBOn34vQTTJkw==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"