self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-06-15 23:00:36 +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

57
packages/app-mobile/components/NoteEditor/NoteEditor.tsx
View File

@ -3,11 +3,11 @@ import shim from '@joplin/lib/shim';
import { themeStyle } from '@joplin/lib/theme';
import EditLinkDialog from './EditLinkDialog';
import { defaultSearchState, SearchPanel } from './SearchPanel';
import ExtendedWebView from '../ExtendedWebView';
const React = require('react');
import { forwardRef, RefObject, useImperativeHandle } from 'react';
import { useEffect, useMemo, useState, useCallback, useRef } from 'react';
const { WebView } = require('react-native-webview');
import { View, ViewStyle } from 'react-native';
const { editorFont } = require('../global-style');
@ -207,7 +207,6 @@ const useEditorControl = (
};
function NoteEditor(props: Props, ref: any) {
const [source, setSource] = useState(undefined);
const webviewRef = useRef(null);
const setInitialSelectionJS = props.initialSelection ? `
@ -284,18 +283,9 @@ function NoteEditor(props: Props, ref: any) {
searchStateRef.current = searchState;
}, [searchState]);
// Runs [js] in the context of the CodeMirror frame.
// / Runs [js] in the context of the CodeMirror frame.
const injectJS = (js: string) => {
webviewRef.current.injectJavaScript(`
try {
${js}
}
catch(e) {
logMessage('Error in injected JS:' + e, e);
throw e;
};
true;`);
webviewRef.current.injectJS(js);
};
const editorControl = useEditorControl(
@ -306,26 +296,6 @@ function NoteEditor(props: Props, ref: any) {
return editorControl;
});
useEffect(() => {
let cancelled = false;
async function createHtmlFile() {
const tempFile = `${Setting.value('resourceDir')}/NoteEditor.html`;
await shim.fsDriver().writeFile(tempFile, html, 'utf8');
if (cancelled) return;
setSource({
uri: `file://${tempFile}?r=${Math.round(Math.random() * 100000000)}`,
baseUrl: `file://${Setting.value('resourceDir')}/`,
});
}
void createHtmlFile();
return () => {
cancelled = true;
};
}, [html]);
const onMessage = useCallback((event: any) => {
const data = event.nativeEvent.data;
@ -382,16 +352,10 @@ function NoteEditor(props: Props, ref: any) {
}
}, [props.onSelectionChange, props.onUndoRedoDepthChange, props.onChange, editorControl]);
// eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied
const onError = useCallback(() => {
console.error('NoteEditor: webview error');
}, []);
// - `setSupportMultipleWindows` must be `true` for security reasons:
// https://github.com/react-native-webview/react-native-webview/releases/tag/v11.0.0
// - `scrollEnabled` prevents iOS from scrolling the document (has no effect on Android)
// when the editor is focused.
return (
<View style={{
...props.style,
@ -409,19 +373,10 @@ function NoteEditor(props: Props, ref: any) {
minHeight: '30%',
...props.contentStyle,
}}>
<WebView
style={{
backgroundColor: editorSettings.themeData.backgroundColor,
}}
<ExtendedWebView
themeId={props.themeId}
ref={webviewRef}
scrollEnabled={false}
useWebKit={true}
source={source}
setSupportMultipleWindows={true}
hideKeyboardAccessoryView={true}
allowingReadAccessToURL={`file://${Setting.value('resourceDir')}`}
originWhitelist={['file://*', './*', 'http://*', 'https://*']}
allowFileAccess={true}
html={html}
injectedJavaScript={injectedJavaScript}
onMessage={onMessage}
onError={onError}