Mobile: Improve image editor load performance (#9281)

packages/app-mobile/components/NoteEditor/ImageEditor/ImageEditor.tsx

@@ -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}

packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.ts

@@ -57,7 +57,7 @@ describe('createJsDrawEditor', () => {
 		});
 
 		// Load no image and an empty template so that autosave can start
-		await editorControl.loadImageOrTemplate(undefined, '{}');
+		await editorControl.loadImageOrTemplate('', '{}');
 
 		expect(calledAutosaveCount).toBe(0);
 

packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.ts

@@ -120,20 +120,48 @@ export const createJsDrawEditor = (
 	editor.showLoadingWarning(0);
 	editor.setReadOnly(true);
 
+	const fetchInitialSvgData = (resourceUrl: string) => {
+		return new Promise<string>((resolve, reject) => {
+			if (!resourceUrl) {
+				resolve('');
+			}
+
+			// fetch seems to be unable to request file:// URLs.
+			// https://github.com/react-native-webview/react-native-webview/issues/1560#issuecomment-1783611805
+			const request = new XMLHttpRequest();
+
+			const onError = () => {
+				reject(`Failed to load initial SVG data: ${request.status}, ${request.statusText}, ${request.responseText}`);
+			};
+
+			request.addEventListener('load', _ => {
+				resolve(request.responseText);
+			});
+			request.addEventListener('error', onError);
+			request.addEventListener('abort', onError);
+
+			request.open('GET', resourceUrl);
+			request.send();
+		});
+	};
+
 	const editorControl = {
 		editor,
-		loadImageOrTemplate: async (svgData: string|undefined, templateData: string) => {
+		loadImageOrTemplate: async (resourceUrl: string, templateData: string) => {
 			// loadFromSVG shows its own loading message. Hide the original.
 			editor.hideLoadingWarning();
 
-			if (svgData && svgData.length > 0) {
-				await editor.loadFromSVG(svgData);
-			} else {
+			const svgData = await fetchInitialSvgData(resourceUrl);
+
+			// Load from a template if no initial data
+			if (svgData === '') {
 				await applyTemplateToEditor(editor, templateData);
 
 				// The editor expects to be saved initially (without
 				// unsaved changes). Save now.
 				saveNow();
+			} else {
+				await editor.loadFromSVG(svgData);
 			}
 
 			// We can now edit and save safely (without data loss).