mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
import { useRef, useMemo, useCallback } from 'react';
|
|
|
|
import Setting from '@joplin/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('@joplin/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>
|
|
);
|
|
}
|