Mobile: Fixes #9521: Note editor: Support older WebView versions (#9986)

packages/app-mobile/components/NoteEditor/CodeMirror/demo.html

@@ -26,9 +26,8 @@
 			const initialText = 'Testing...';
 
 			const settings = {
-				katexEnabled: true,
 				themeData: {
-					fontSize: 1, // em
+					fontSize: 12, // px
 					fontFamily: 'serif',
 					backgroundColor: 'black',
 					color: 'white',
@@ -40,6 +39,19 @@
 					color4: '#0ff',
 					appearance: 'dark',
 				},
+				themeId: 0,
+				spellcheckEnabled: true,
+				language: 'markdown',
+				katexEnabled: true,
+				useExternalSearch: false,
+				readOnly: false,
+
+				keymap: 'default',
+
+				automatchBraces: false,
+				ignoreModifiers: false,
+
+				indentWithTabs: false,
 			};
 
 			window.cm = codeMirrorBundle.initCodeMirror(parent, initialText, settings);

packages/app-mobile/package.json

@@ -99,6 +99,7 @@
     "@types/react-redux": "7.1.33",
     "@types/tar-stream": "3.1.3",
     "babel-jest": "29.7.0",
+    "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "4.1.0",
     "fs-extra": "11.2.0",
     "gulp": "4.0.2",

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

@@ -28,6 +28,11 @@ export default class BundledFile {
 		const config: webpack.Configuration = {
 			mode,
 			entry: this.sourceFilePath,
+
+			// es5: Have Webpack's generated code target ES5. This doesn't apply to code not
+			//      generated by Webpack.
+			target: ['web', 'es5'],
+
 			output: {
 				path: this.rootFileDirectory,
 				filename: `${this.bundleBaseName}.bundle.js`,
@@ -46,6 +51,43 @@ export default class BundledFile {
 						use: 'ts-loader',
 						exclude: /node_modules/,
 					},
+					{
+						test: (value) => {
+							const isModuleFile = !!(/node_modules/.exec(value));
+
+							// 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));
+
+							if (isModuleFile && !moduleNeedsTranspilation) {
+								return false;
+							}
+
+							const isJsFile = !!(/\.[cm]?js$/.exec(value));
+							if (isJsFile) {
+								console.log('Compiling with Babel:', value);
+							}
+							return isJsFile;
+						},
+						use: {
+							loader: 'babel-loader',
+							options: {
+								cacheDirectory: false,
+
+								// Disable using babel.config.js to prevent conflicts with React Native's
+								// Babel configuration.
+								babelrc: false,
+								configFile: false,
+
+								presets: [
+									['@babel/preset-env', { targets: { ios: 12, chrome: 80 } }],
+								],
+							},
+						},
+					},
 				],
 			},
 			// Increase the minimum size required

packages/editor/types.ts

@@ -99,8 +99,8 @@ export interface EditorControl {
 }
 
 export enum EditorLanguageType {
-	Markdown,
-	Html,
+	Markdown = 'markdown',
+	Html = 'html',
 }
 
 export enum EditorKeymap {

yarn.lock

@@ -6633,6 +6633,7 @@ __metadata:
     "@types/tar-stream": 3.1.3
     assert-browserify: 2.0.0
     babel-jest: 29.7.0
+    babel-loader: 9.1.3
     babel-plugin-module-resolver: 4.1.0
     buffer: 6.0.3
     constants-browserify: 1.0.0
@@ -13678,6 +13679,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"babel-loader@npm:9.1.3":
+  version: 9.1.3
+  resolution: "babel-loader@npm:9.1.3"
+  dependencies:
+    find-cache-dir: ^4.0.0
+    schema-utils: ^4.0.0
+  peerDependencies:
+    "@babel/core": ^7.12.0
+    webpack: ">=5"
+  checksum: b168dde5b8cf11206513371a79f86bb3faa7c714e6ec9fffd420876b61f3d7f5f4b976431095ef6a14bc4d324505126deb91045fd41e312ba49f4deaa166fe28
+  languageName: node
+  linkType: hard
+
 "babel-loader@npm:^8.2.5":
   version: 8.3.0
   resolution: "babel-loader@npm:8.3.0"