Android: Add support for renderer plugins (#10135)

packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx

@@ -1,14 +1,19 @@
-import { useRef, useCallback } from 'react';
+import * as React from 'react';
 
-import useSource from './hooks/useSource';
-import useOnMessage, { HandleMessageCallback, HandleScrollCallback, OnMarkForDownloadCallback } from './hooks/useOnMessage';
-import useOnResourceLongPress from './hooks/useOnResourceLongPress';
-
-const React = require('react');
+import useOnMessage, { HandleMessageCallback, OnMarkForDownloadCallback } from './hooks/useOnMessage';
+import { useRef, useCallback, useState, useMemo } from 'react';
 import { View } from 'react-native';
 import BackButtonDialogBox from '../BackButtonDialogBox';
-import { reg } from '@joplin/lib/registry';
 import ExtendedWebView, { WebViewControl } from '../ExtendedWebView';
+import useOnResourceLongPress from './hooks/useOnResourceLongPress';
+import useRenderer from './hooks/useRenderer';
+import { OnWebViewMessageHandler } from './types';
+import useRerenderHandler from './hooks/useRerenderHandler';
+import useSource from './hooks/useSource';
+import Setting from '@joplin/lib/models/Setting';
+import uuid from '@joplin/lib/uuid';
+import { PluginStates } from '@joplin/lib/services/plugins/reducer';
+import useContentScripts from './hooks/useContentScripts';
 
 interface Props {
 	themeId: number;
@@ -24,24 +29,18 @@ interface Props {
 	onCheckboxChange?: HandleMessageCallback;
 	onRequestEditResource?: HandleMessageCallback;
 	onMarkForDownload?: OnMarkForDownloadCallback;
-	onScroll: HandleScrollCallback;
+	onScroll: (scrollTop: number)=> void;
 	onLoadEnd?: ()=> void;
+	pluginStates: PluginStates;
 }
 
 export default function NoteBodyViewer(props: Props) {
 	const dialogBoxRef = useRef(null);
 	const webviewRef = useRef<WebViewControl>(null);
 
-	const { html, injectedJs } = useSource(
-		props.noteBody,
-		props.noteMarkupLanguage,
-		props.themeId,
-		props.highlightedKeywords,
-		props.noteResources,
-		props.paddingBottom,
-		props.noteHash,
-		props.initialScroll,
-	);
+	const onScroll = useCallback(async (scrollTop: number) => {
+		props.onScroll(scrollTop);
+	}, [props.onScroll]);
 
 	const onResourceLongPress = useOnResourceLongPress(
 		{
@@ -51,60 +50,70 @@ export default function NoteBodyViewer(props: Props) {
 		dialogBoxRef,
 	);
 
-	const onMessage = useOnMessage(
-		props.noteBody,
-		{
-			onCheckboxChange: props.onCheckboxChange,
-			onMarkForDownload: props.onMarkForDownload,
-			onJoplinLinkClick: props.onJoplinLinkClick,
-			onRequestEditResource: props.onRequestEditResource,
-			onResourceLongPress,
-			onMainContainerScroll: props.onScroll,
-		},
-	);
+	const onPostMessage = useOnMessage(props.noteBody, {
+		onMarkForDownload: props.onMarkForDownload,
+		onJoplinLinkClick: props.onJoplinLinkClick,
+		onRequestEditResource: props.onRequestEditResource,
+		onCheckboxChange: props.onCheckboxChange,
+		onResourceLongPress,
+	});
+
+	const [webViewLoaded, setWebViewLoaded] = useState(false);
+	const [onWebViewMessage, setOnWebViewMessage] = useState<OnWebViewMessageHandler>(()=>()=>{});
+
+
+	// The renderer can write to whichever temporary directory we choose. As such,
+	// we use a subdirectory of the main temporary directory for security reasons.
+	const tempDir = useMemo(() => {
+		return `${Setting.value('tempDir')}/${uuid.createNano()}`;
+	}, []);
+
+	const renderer = useRenderer({
+		webViewLoaded,
+		onScroll,
+		webviewRef,
+		onPostMessage,
+		setOnWebViewMessage,
+		tempDir,
+	});
+
+	const contentScripts = useContentScripts(props.pluginStates);
+
+	useRerenderHandler({
+		renderer,
+		noteBody: props.noteBody,
+		noteMarkupLanguage: props.noteMarkupLanguage,
+		themeId: props.themeId,
+		highlightedKeywords: props.highlightedKeywords,
+		noteResources: props.noteResources,
+		noteHash: props.noteHash,
+		initialScroll: props.initialScroll,
+
+		paddingBottom: props.paddingBottom,
+
+		contentScripts,
+	});
 
 	const onLoadEnd = useCallback(() => {
+		setWebViewLoaded(true);
 		if (props.onLoadEnd) props.onLoadEnd();
 	}, [props.onLoadEnd]);
 
-	function onError() {
-		reg.logger().error('WebView error');
-	}
-
 	const BackButtonDialogBox_ = BackButtonDialogBox as any;
 
-	// On iOS scalesPageToFit work like this:
-	//
-	// Find the widest image, resize it *and everything else* by x% so that
-	// the image fits within the viewport. The problem is that it means if there's
-	// a large image, everything is going to be scaled to a very small size, making
-	// the text unreadable.
-	//
-	// On Android:
-	//
-	// Find the widest elements and scale them (and them only) to fit within the viewport
-	// It means it's going to scale large images, but the text will remain at the normal
-	// size.
-	//
-	// That means we can use scalesPageToFix on Android but not on iOS.
-	// The weird thing is that on iOS, scalesPageToFix=false along with a CSS
-	// rule "img { max-width: 100% }", works like scalesPageToFix=true on Android.
-	// So we use scalesPageToFix=false on iOS along with that CSS rule.
-	//
-	// 2020-10-15: As we've now fully switched to WebKit for iOS (useWebKit=true) and
-	// since the WebView package went through many versions it's possible that
-	// the above no longer applies.
+	const { html, injectedJs } = useSource(tempDir, props.themeId);
+
 	return (
 		<View style={props.style}>
 			<ExtendedWebView
 				ref={webviewRef}
 				webviewInstanceId='NoteBodyViewer'
 				html={html}
-				injectedJavaScript={injectedJs.join('\n')}
+				allowFileAccessFromJs={true}
+				injectedJavaScript={injectedJs}
 				mixedContentMode="always"
 				onLoadEnd={onLoadEnd}
-				onError={onError}
-				onMessage={onMessage}
+				onMessage={onWebViewMessage}
 			/>
 			<BackButtonDialogBox_ ref={dialogBoxRef}/>
 		</View>