All: Use Lerna to manage monorepo

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

@@ -0,0 +1,111 @@
+import { useRef, useMemo, useCallback } from 'react';
+
+import Setting from '@joplinapp/lib/models/Setting';
+import useSource from './hooks/useSource';
+import useOnMessage from './hooks/useOnMessage';
+import useOnResourceLongPress from './hooks/useOnResourceLongPress';
+
+const React = require('react');
+const { View } = require('react-native');
+const { WebView } = require('react-native-webview');
+const { themeStyle } = require('../global-style.js');
+const BackButtonDialogBox = require('../BackButtonDialogBox').default;
+const { reg } = require('@joplinapp/lib/registry.js');
+
+interface Props {
+	themeId: number,
+	style: any,
+	noteBody: string,
+	noteMarkupLanguage: number,
+	highlightedKeywords: string[],
+	noteResources: any,
+	paddingBottom: number,
+	noteHash: string,
+	onJoplinLinkClick: Function,
+	onCheckboxChange?: Function,
+	onMarkForDownload?: Function,
+	onLoadEnd?: Function,
+}
+
+export default function NoteBodyViewer(props:Props) {
+	const theme = themeStyle(props.themeId);
+
+	const webViewStyle:any = useMemo(() => {
+		return { backgroundColor: theme.backgroundColor };
+	}, [theme.backgroundColor]);
+
+	const dialogBoxRef = useRef(null);
+
+	const { source, injectedJs } = useSource(
+		props.noteBody,
+		props.noteMarkupLanguage,
+		props.themeId,
+		props.highlightedKeywords,
+		props.noteResources,
+		props.paddingBottom,
+		props.noteHash
+	);
+
+	const onResourceLongPress = useOnResourceLongPress(
+		props.onJoplinLinkClick,
+		dialogBoxRef
+	);
+
+	const onMessage = useOnMessage(
+		props.onCheckboxChange,
+		props.noteBody,
+		props.onMarkForDownload,
+		props.onJoplinLinkClick,
+		onResourceLongPress
+	);
+
+	const onLoadEnd = useCallback(() => {
+		if (props.onLoadEnd) props.onLoadEnd();
+	}, [props.onLoadEnd]);
+
+	function onError() {
+		reg.logger().error('WebView error');
+	}
+
+	// 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.
+
+	return (
+		<View style={props.style}>
+			<WebView
+				theme={theme}
+				useWebKit={true}
+				allowingReadAccessToURL={`file://${Setting.value('resourceDir')}`}
+				style={webViewStyle}
+				source={source}
+				injectedJavaScript={injectedJs.join('\n')}
+				originWhitelist={['file://*', './*', 'http://*', 'https://*']}
+				mixedContentMode="always"
+				allowFileAccess={true}
+				onLoadEnd={onLoadEnd}
+				onError={onError}
+				onMessage={onMessage}
+			/>
+			<BackButtonDialogBox ref={dialogBoxRef}/>
+		</View>
+	);
+}