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

Mobile: Improve image editor load performance (#9281)

Browse Source
This commit is contained in:
Henry Heino
2023-11-12 07:06:16 -08:00
committed by GitHub
parent bd1ddb8522
commit bcbba0973f
5 changed files with 50 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx
View File

@ -19,12 +19,9 @@ const logger = Logger.create('ImageEditor');
type OnSaveCallback = (svgData: string)=> void;
type OnCancelCallback = ()=> void;
// Returns the empty string to load from a template.
type LoadInitialSVGCallback = ()=> Promise<string>;
interface Props {
themeId: number;
loadInitialSVGData: LoadInitialSVGCallback;
resourceFilename: string|null;
onSave: OnSaveCallback;
onExit: OnCancelCallback;
}
@ -178,7 +175,13 @@ const ImageEditor = (props: Props) => {
const injectedJavaScript = useMemo(() => `
window.onerror = (message, source, lineno) => {
window.ReactNativeWebView.postMessage(
"error: " + message + " in file://" + source + ", line " + lineno
"error: " + message + " in file://" + source + ", line " + lineno,
);
};
window.onunhandledrejection = (error) => {
window.ReactNativeWebView.postMessage(
"error: " + error.reason,
);
};
@ -265,19 +268,17 @@ const ImageEditor = (props: Props) => {
}, [css]);
const onReadyToLoadData = useCallback(async () => {
const initialSVGData = await props.loadInitialSVGData?.() ?? '';
// It can take some time for initialSVGData to be transferred to the WebView.
// Thus, do so after the main content has been loaded.
webviewRef.current.injectJS(`(async () => {
if (window.editorControl) {
const initialSVGData = ${JSON.stringify(initialSVGData)};
const initialSVGPath = ${JSON.stringify(props.resourceFilename)};
const initialTemplateData = ${JSON.stringify(Setting.value('imageeditor.imageTemplate'))};
editorControl.loadImageOrTemplate(initialSVGData, initialTemplateData);
editorControl.loadImageOrTemplate(initialSVGPath, initialTemplateData);
}
})();`);
}, [webviewRef, props.loadInitialSVGData]);
}, [webviewRef, props.resourceFilename]);
const onMessage = useCallback(async (event: WebViewMessageEvent) => {
const data = event.nativeEvent.data;
@ -316,6 +317,7 @@ const ImageEditor = (props: Props) => {
themeId={props.themeId}
html={html}
injectedJavaScript={injectedJavaScript}
allowFileAccessFromJs={true}
onMessage={onMessage}
onError={onError}
ref={webviewRef}