Fix mobile build

packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx

@@ -396,7 +396,9 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				color: inherit !important;
 				background-color: inherit !important;
 				position: absolute !important;
-				-webkit-box-shadow: none !important; // Some themes add a box shadow for some reason
+				/* Some themes add a box shadow for some reason */
+				-webkit-box-shadow: none !important;
+				line-height: ${theme.lineHeight} !important;
 			}
 
 			.CodeMirror-lines {
@@ -422,20 +424,54 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				font-family: ${monospaceFonts.join(', ')} !important;
 			}
 
-			.cm-header-1 {
+			.CodeMirror .cm-header-1 {
 				font-size: 1.5em;
+				color: ${theme.color};
 			}
 
-			.cm-header-2 {
+			.CodeMirror .cm-header-2 {
 				font-size: 1.3em;
+				color: ${theme.color};
 			}
 
-			.cm-header-3 {
+			.CodeMirror .cm-header-3 {
 				font-size: 1.1em;
+				color: ${theme.color};
 			}
 
-			.cm-header-4, .cm-header-5, .cm-header-6 {
+			.CodeMirror .cm-header-4, .CodeMirror .cm-header-5, .CodeMirror .cm-header-6 {
 				font-size: 1em;
+				color: ${theme.color};
+			}
+
+			.CodeMirror .cm-quote {
+				color: ${theme.color};
+				opacity: ${theme.blockQuoteOpacity};
+			}
+
+			div.CodeMirror span.cm-link-text {
+				color: ${theme.urlColor};
+			}
+
+			div.CodeMirror span.cm-url {
+				color: ${theme.urlColor};
+				opacity: 0.5;
+			}
+
+			.CodeMirror .cm-variable-2, .CodeMirror .cm-variable-3, .CodeMirror .cm-keyword {
+				color: ${theme.color};
+			}
+
+			div.CodeMirror span.cm-comment {
+				color: ${theme.codeColor};
+			}
+
+			div.CodeMirror span.cm-strong {
+				color: ${theme.colorBright};
+			}
+
+			div.CodeMirror span.cm-hr {
+				color: ${theme.dividerColor};
 			}
 
 			.cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4, .cm-header-5, .cm-header-6 {
@@ -467,6 +503,8 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 			}
 
 			/* The default dark theme colors don't have enough contrast with the background */
+
+			/*
 			.cm-s-nord span.cm-comment {
 				color: #9aa4b6 !important;
 			}
@@ -486,6 +524,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 			.cm-s-solarized.cm-s-dark span.cm-comment {
 				color: #8ba1a7 !important;
 			}
+			*/
 
 			${selectionColorCss}
 		`));

packages/app-mobile/package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@joplin/lib": "^2.2.0",
     "@joplin/renderer": "^2.2.0",
-    "@joplin/tools": "^2.2.0",
     "@react-native-community/clipboard": "^1.5.0",
     "@react-native-community/datetimepicker": "^3.0.3",
     "@react-native-community/geolocation": "^2.0.2",

packages/app-mobile/tools/buildInjectedJs.js

@@ -4,7 +4,10 @@
 // is then loaded by eg. the Mermaid plugin, and finally injected in the WebView.
 
 const fs = require('fs-extra');
-const { execCommand2, rootDir } = require('@joplin/tools/tool-utils');
+const exec = require('child_process').exec;
+const path = require('path');
+
+const rootDir = path.dirname(path.dirname(path.dirname(__dirname)));
 const mobileDir = `${rootDir}/packages/app-mobile`;
 const outputDir = `${mobileDir}/lib/rnInjectedJs`;
 const codeMirrorBundleFile = `${mobileDir}/components/NoteEditor/CodeMirror.bundle.min.js`;
@@ -13,14 +16,15 @@ async function copyJs(name, filePath) {
 	const js = await fs.readFile(filePath, 'utf-8');
 	const json = `module.exports = ${JSON.stringify(js)};`;
 	const outputPath = `${outputDir}/${name}.js`;
+	console.info(`Creating: ${outputPath}`);
 	await fs.writeFile(outputPath, json);
 }
 
 async function buildCodeMirrorBundle() {
 	const sourceFile = `${mobileDir}/components/NoteEditor/CodeMirror.ts`;
 	const fullBundleFile = `${mobileDir}/components/NoteEditor/CodeMirror.bundle.js`;
-	await execCommand2(`./node_modules/rollup/dist/bin/rollup "${sourceFile}" --name codeMirrorBundle -f iife -o "${fullBundleFile}" -p @rollup/plugin-node-resolve -p @rollup/plugin-typescript`);
-	await execCommand2(`./node_modules/uglify-js/bin/uglifyjs --compress -o "${codeMirrorBundleFile}" -- "${fullBundleFile}"`);
+	await exec(`./node_modules/rollup/dist/bin/rollup "${sourceFile}" --name codeMirrorBundle -f iife -o "${fullBundleFile}" -p @rollup/plugin-node-resolve -p @rollup/plugin-typescript`, { stdio: 'pipe' });
+	await exec(`./node_modules/uglify-js/bin/uglifyjs --compress -o "${codeMirrorBundleFile}" -- "${fullBundleFile}"`, { stdio: 'pipe' });
 }
 
 async function main() {

packages/lib/models/Setting.ts

@@ -915,7 +915,7 @@ class Setting extends BaseModel {
 			// Deprecated in favour of windowContentZoomFactor
 			'style.zoom': { value: 100, type: SettingItemType.Int, public: false, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => '', minimum: 50, maximum: 500, step: 10 },
 
-			'style.editor.fontSize': { value: 13, type: SettingItemType.Int, public: true, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 },
+			'style.editor.fontSize': { value: 15, type: SettingItemType.Int, public: true, storage: SettingStorage.File, appTypes: [AppType.Desktop], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 },
 			'style.editor.fontFamily':
 				(mobilePlatform) ?
 					({

packages/lib/themes/dark.ts

@@ -1,7 +1,10 @@
 import { Theme, ThemeAppearance } from './type';
+import lightTheme from './light';
 
 // This is the default dark theme in Joplin
 const theme: Theme = {
+	...lightTheme,
+
 	appearance: ThemeAppearance.Dark,
 
 	// Color scheme "1" is the basic one, like used to display the note

packages/lib/themes/light.ts

@@ -50,6 +50,8 @@ const theme: Theme = {
 	codeBorderColor: 'rgb(220, 220, 220)',
 	codeColor: 'rgb(0,0,0)',
 
+	blockQuoteOpacity: 0.7,
+
 	codeMirrorTheme: 'default',
 	codeThemeCss: 'atom-one-light.css',
 };

packages/lib/themes/type.ts

@@ -52,6 +52,8 @@ export interface Theme {
 	codeBorderColor: string;
 	codeColor: string;
 
+	blockQuoteOpacity: number;
+
 	codeMirrorTheme: string;
 	codeThemeCss: string;
 

packages/renderer/noteStyle.ts

@@ -205,7 +205,7 @@ export default function(theme: any) {
 			border-left: 4px solid ${theme.codeBorderColor};
 			padding-left: 1.2em;
 			margin-left: 0;
-			opacity: .7;
+			opacity: ${theme.blockQuoteOpacity};
 		}
 
 		.jop-tinymce table,