self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-07-16 00:14:34 +02:00
Code Issues Releases Activity

Chore: Factor duplicate WebView code into ExtendedWebView.tsx (#6771)

Browse Source
This commit is contained in:
Henry Heino
2022-09-05 04:46:13 -07:00
committed by GitHub
parent b5b281c276
commit 7e1c34b769
6 changed files with 169 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/app-mobile/components/NoteBodyViewer/NoteBodyViewer.tsx
View File

@ -1,16 +1,14 @@
import { useRef, 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');
import { View } from 'react-native';
import BackButtonDialogBox from '../BackButtonDialogBox';
import { reg } from '@joplin/lib/registry';
import ExtendedWebView from '../ExtendedWebView';
interface Props {
themeId: number;
@ -32,11 +30,9 @@ const webViewStyle = {
};
export default function NoteBodyViewer(props: Props) {
const theme = themeStyle(props.themeId);
const dialogBoxRef = useRef(null);
const { source, injectedJs } = useSource(
const { html, injectedJs } = useSource(
props.noteBody,
props.noteMarkupLanguage,
props.themeId,
@ -67,6 +63,8 @@ export default function NoteBodyViewer(props: Props) {
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
@ -88,21 +86,14 @@ export default function NoteBodyViewer(props: Props) {
// 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 BackButtonDialogBox_ = BackButtonDialogBox as any;
return (
<View style={props.style}>
<WebView
theme={theme}
useWebKit={true}
allowingReadAccessToURL={`file://${Setting.value('resourceDir')}`}
<ExtendedWebView
themeId={props.themeId}
style={webViewStyle}
source={source}
html={html}
injectedJavaScript={injectedJs.join('\n')}
originWhitelist={['file://*', './*', 'http://*', 'https://*']}
mixedContentMode="always"
allowFileAccess={true}
onLoadEnd={onLoadEnd}
onError={onError}
onMessage={onMessage}

29
packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts
View File

@ -5,13 +5,9 @@ const { themeStyle } = require('../../global-style.js');
import markupLanguageUtils from '@joplin/lib/markupLanguageUtils';
const { assetsToHeaders } = require('@joplin/renderer');
interface Source {
uri: string;
baseUrl: string;
}
interface UseSourceResult {
source: Source;
// [html] can be null if the note is still being rendered.
html: string|null;
injectedJs: string[];
}
@ -24,7 +20,7 @@ function usePrevious(value: any, initialValue: any = null): any {
}
export default function useSource(noteBody: string, noteMarkupLanguage: number, themeId: number, highlightedKeywords: string[], noteResources: any, paddingBottom: number, noteHash: string): UseSourceResult {
const [source, setSource] = useState<Source>(undefined);
const [html, setHtml] = useState<string>('');
const [injectedJs, setInjectedJs] = useState<string[]>([]);
const [resourceLoadedTime, setResourceLoadedTime] = useState(0);
const [isFirstRender, setIsFirstRender] = useState(true);
@ -169,20 +165,7 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
</html>
`;
const tempFile = `${Setting.value('resourceDir')}/NoteBodyViewer.html`;
await shim.fsDriver().writeFile(tempFile, html, 'utf8');
if (cancelled) return;
// Now that we are sending back a file instead of an HTML string, we're always sending back the
// same file. So we add a cache busting query parameter to it, to make sure that the WebView re-renders.
//
// `baseUrl` is where the images will be loaded from. So images must use a path relative to resourceDir.
setSource({
uri: `file://${tempFile}?r=${Math.round(Math.random() * 100000000)}`,
baseUrl: `file://${Setting.value('resourceDir')}/`,
});
setHtml(html);
setInjectedJs(js);
}
@ -194,7 +177,7 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
if (isFirstRender) {
setIsFirstRender(false);
setSource(undefined);
setHtml('');
setInjectedJs([]);
} else {
void renderNote();
@ -206,5 +189,5 @@ export default function useSource(noteBody: string, noteMarkupLanguage: number,
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
}, effectDependencies);
return { source, injectedJs };
return { html, injectedJs };
}