Android: Fix image editor fails to load on older WebView versions

Android 11 ships with a WebView based on Chromium 83. Although some devices update their WebView version through the PlayStore, not all devices do.
This commit fixes an issue that prevented the image editor from running in these older WebView versions.

.eslintignore

@@ -641,6 +641,7 @@ packages/app-mobile/components/NoteEditor/ImageEditor/isEditableResource.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.js
+packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.js

.gitignore

@@ -616,6 +616,7 @@ packages/app-mobile/components/NoteEditor/ImageEditor/isEditableResource.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/applyTemplateToEditor.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.test.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/createJsDrawEditor.js
+packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/polyfills.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/startAutosaveLoop.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/types.js
 packages/app-mobile/components/NoteEditor/ImageEditor/js-draw/watchEditorForTemplateChanges.js

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

@@ -7,6 +7,8 @@ import watchEditorForTemplateChanges from './watchEditorForTemplateChanges';
 import { ImageEditorCallbacks, ImageEditorControl, LocalizedStrings } from './types';
 import startAutosaveLoop from './startAutosaveLoop';
 import WebViewToRNMessenger from '../../../../utils/ipc/WebViewToRNMessenger';
+import './polyfills';
+
 
 const restoreToolbarState = (toolbar: AbstractToolbar, state: string) => {
 	if (state) {

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

@@ -0,0 +1,11 @@
+// .replaceChildren is not supported in Chromium 83, which is the default for Android 11
+// (unless auto-updated from the Google Play store).
+HTMLElement.prototype.replaceChildren ??= function(this: HTMLElement, ...nodes: Node[]) {
+	while (this.children.length) {
+		this.children[0].remove();
+	}
+
+	for (const node of nodes) {
+		this.appendChild(node);
+	}
+};

packages/app-mobile/tools/buildInjectedJs/BundledFile.ts

@@ -58,18 +58,18 @@ export default class BundledFile {
 							// Some libraries don't work with older browsers/WebViews.
 							// Because Babel transpilation can be slow, we only transpile
 							// these libraries.
-							// For now, it's just Replit's CodeMirror-vim library. This library
-							// uses `a?.b` syntax, which seems to be unsupported in iOS 12 Safari.
-							const moduleNeedsTranspilation = !!(/.*node_modules.*replit.*\.[mc]?js$/.exec(value));
+							const moduleNeedsTranspilation = !!(
+								// Replit's CodeMirror-vim library uses a?.b syntax which seems to be unsupported in iOS 12 Safari.
+								/.*node_modules.*replit.*\.[mc]?js$/.exec(value) ||
+								// js-draw uses a ??= b syntax, which is unsupported in old Android WebView versions
+								/.*node_modules.*js-draw.*\.[mc]?js$/.exec(value)
+							);
 
 							if (isModuleFile && !moduleNeedsTranspilation) {
 								return false;
 							}
 
 							const isJsFile = !!(/\.[cm]?js$/.exec(value));
-							if (isJsFile) {
-								console.log('Compiling with Babel:', value);
-							}
 							return isJsFile;
 						},
 						use: {