Mobile: Resolves #9377: Don't attach empty drawings when a user exits…

… without saving (#9386)

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

@@ -157,10 +157,6 @@ export const createJsDrawEditor = (
 			// 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);
 			}

packages/app-mobile/components/screens/Note.tsx

@@ -799,7 +799,11 @@ class NoteScreenComponent extends BaseScreenComponent {
 			if (this.useEditorBeta()) {
 				// The beta editor needs to be explicitly informed of changes
 				// to the note's body
-				this.editorRef.current.insertText(newText);
+				if (this.editorRef.current) {
+					this.editorRef.current.insertText(newText);
+				} else {
+					logger.error(`Tried to attach resource ${resource.id} to the note when the editor is not visible!`);
+				}
 			}
 		} else {
 			newNote.body += `\n${resourceTag}`;
@@ -864,31 +868,34 @@ class NoteScreenComponent extends BaseScreenComponent {
 		}, 'image');
 	}
 
-	private drawPicture_onPress = async () => {
-		// Create a new empty drawing and attach it now.
-		const resource = await this.attachNewDrawing('');
-		await this.editDrawing(resource);
-	};
-
 	private async updateDrawing(svgData: string) {
 		let resource: ResourceEntity|null = this.state.imageEditorResource;
 
 		if (!resource) {
-			throw new Error('No resource is loaded in the editor');
-		}
-
-		logger.info('Saving drawing to resource', resource.id);
+			resource = await this.attachNewDrawing(svgData);
+
+			// Set resouce and file path to allow
+			// 1. subsequent saves to update the resource
+			// 2. the editor to load from the resource's filepath (can happen
+			//    if the webview is reloaded).
+			this.setState({
+				imageEditorResourceFilepath: Resource.fullPath(resource),
+				imageEditorResource: resource,
+			});
+		} else {
+			logger.info('Saving drawing to resource', resource.id);
 
-		const tempFilePath = join(Setting.value('tempDir'), uuid.createNano());
-		await shim.fsDriver().writeFile(tempFilePath, svgData, 'utf8');
+			const tempFilePath = join(Setting.value('tempDir'), uuid.createNano());
+			await shim.fsDriver().writeFile(tempFilePath, svgData, 'utf8');
 
-		resource = await Resource.updateResourceBlobContent(
-			resource.id,
-			tempFilePath,
-		);
-		await shim.fsDriver().remove(tempFilePath);
+			resource = await Resource.updateResourceBlobContent(
+				resource.id,
+				tempFilePath,
+			);
+			await shim.fsDriver().remove(tempFilePath);
 
-		await this.refreshResource(resource);
+			await this.refreshResource(resource);
+		}
 	}
 
 	private onSaveDrawing = async (svgData: string) => {
@@ -899,6 +906,23 @@ class NoteScreenComponent extends BaseScreenComponent {
 		this.setState({ showImageEditor: false });
 	};
 
+	private drawPicture_onPress = async () => {
+		if (this.state.mode === 'edit') {
+			// Create a new empty drawing and attach it now, before the image editor is opened.
+			// With the present structure of Note.tsx, the we can't use this.editorRef while
+			// the image editor is open, and thus can't attach drawings at the cursor locaiton.
+			const resource = await this.attachNewDrawing('');
+			await this.editDrawing(resource);
+		} else {
+			logger.info('Showing image editor...');
+			this.setState({
+				showImageEditor: true,
+				imageEditorResourceFilepath: null,
+				imageEditorResource: null,
+			});
+		}
+	};
+
 	private async editDrawing(item: BaseItem) {
 		const filePath = Resource.fullPath(item);
 		this.setState({