Mobile: Custom mobile editor font (#1797)

* Make editor font "Menlo"

* Add .vscode/* to .gitignore

* Add "editor font" config UI

* Render "editor font" chosen in config

* Add shim.mobilePlatform()

* Use style.editor.fontFamily rather than editorFont

* Add default font option

* Fixed for Android

ReactNativeClient/lib/components/global-style.js

@@ -98,9 +98,25 @@ function addExtraStyles(style) {
 	return style;
 }
 
+function editorFont(fontId) {
+	// IMPORTANT: The font mapping must match the one in Setting.js
+	const fonts = {
+		[Setting.FONT_DEFAULT]: null,
+		[Setting.FONT_MENLO]: 'Menlo',
+		[Setting.FONT_COURIER_NEW]: 'Courier New',
+		[Setting.FONT_AVENIR]: 'Avenir',
+		[Setting.FONT_MONOSPACE]: 'monospace',
+	};
+	if (!fontId) {
+		console.warn('Editor font not set! Falling back to default font."');
+		fontId = Setting.FONT_DEFAULT;
+	}
+	return fonts[fontId];
+}
+
 function themeStyle(theme) {
 	if (!theme) {
-		console.warn('Theme not set!! Defaulting to Light theme');
+		console.warn('Theme not set! Defaulting to Light theme.');
 		theme = Setting.THEME_LIGHT;
 	}
 
@@ -140,4 +156,4 @@ function themeStyle(theme) {
 	return addExtraStyles(themeCache_[theme]);
 }
 
-module.exports = { globalStyle, themeStyle };
+module.exports = { globalStyle, themeStyle, editorFont };

ReactNativeClient/lib/components/screens/note.js

@@ -24,7 +24,7 @@ const { reg } = require('lib/registry.js');
 const { shim } = require('lib/shim.js');
 const ResourceFetcher = require('lib/services/ResourceFetcher');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
-const { themeStyle } = require('lib/components/global-style.js');
+const { themeStyle, editorFont } = require('lib/components/global-style.js');
 const { dialogs } = require('lib/dialogs.js');
 const DialogBox = require('react-native-dialogbox').default;
 const { NoteBodyViewer } = require('lib/components/note-body-viewer.js');
@@ -209,6 +209,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 				color: theme.color,
 				backgroundColor: theme.backgroundColor,
 				fontSize: theme.fontSize,
+				fontFamily: editorFont(this.props.editorFont),
 			},
 			noteBodyViewer: {
 				flex: 1,
@@ -916,6 +917,7 @@ const NoteScreen = connect(state => {
 		folders: state.folders,
 		searchQuery: state.searchQuery,
 		theme: state.settings.theme,
+		editorFont: [state.settings['style.editor.fontFamily']],
 		ftsEnabled: state.settings['db.ftsEnabled'],
 		sharedData: state.sharedData,
 		showSideMenu: state.showSideMenu,

ReactNativeClient/lib/models/Setting.js

@@ -22,6 +22,7 @@ class Setting extends BaseModel {
 		if (this.metadata_) return this.metadata_;
 
 		const platform = shim.platformName();
+		const mobilePlatform = shim.mobilePlatform();
 
 		const emptyDirWarning = _('Attention: If you change this location, make sure you copy all your content to it before syncing, otherwise all files will be removed! See the FAQ for more details: %s', 'https://joplinapp.org/faq/');
 
@@ -334,7 +335,42 @@ class Setting extends BaseModel {
 			'encryption.passwordCache': { value: {}, type: Setting.TYPE_OBJECT, public: false, secure: true },
 			'style.zoom': { value: 100, type: Setting.TYPE_INT, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Global zoom percentage'), minimum: 50, maximum: 500, step: 10 },
 			'style.editor.fontSize': { value: 13, type: Setting.TYPE_INT, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Editor font size'), minimum: 4, maximum: 50, step: 1 },
-			'style.editor.fontFamily': { value: '', type: Setting.TYPE_STRING, public: true, appTypes: ['desktop'], section: 'appearance', label: () => _('Editor font family'), description: () => _('This must be *monospace* font or it will not work properly. If the font is incorrect or empty, it will default to a generic monospace font.') },
+			'style.editor.fontFamily':
+				(!!mobilePlatform) ?
+					({
+						value: Setting.FONT_DEFAULT,
+						type: Setting.TYPE_STRING,
+						isEnum: true,
+						public: true,
+						label: () => _('Editor font'),
+						appTypes: ['mobile'],
+						section: 'appearance',
+						options: () => {
+							// IMPORTANT: The font mapping must match the one in global-styles.js::editorFont()
+							if (mobilePlatform === 'ios') {
+								return {
+									[Setting.FONT_DEFAULT]: 'Default',
+									[Setting.FONT_MENLO]: 'Menlo',
+									[Setting.FONT_COURIER_NEW]: 'Courier New',
+									[Setting.FONT_AVENIR]: 'Avenir',
+								};
+							}
+							return {
+								[Setting.FONT_DEFAULT]: 'Default',
+								[Setting.FONT_MONOSPACE]: 'Monospace',
+							};
+						},
+					}) : {
+						value: '',
+						type: Setting.TYPE_STRING,
+						public: true,
+						appTypes: ['desktop'],
+						section: 'appearance',
+						label: () => _('Editor font family'),
+						description: () =>
+							_('This must be *monospace* font or it will not work properly. If the font ' +
+						'is incorrect or empty, it will default to a generic monospace font.'),
+					},
 			'style.sidebar.width': { value: 150, minimum: 80, maximum: 400, type: Setting.TYPE_INT, public: false, appTypes: ['desktop'] },
 			'style.noteList.width': { value: 150, minimum: 80, maximum: 400, type: Setting.TYPE_INT, public: false, appTypes: ['desktop'] },
 			autoUpdateEnabled: { value: true, type: Setting.TYPE_BOOL, section: 'application', public: true, appTypes: ['desktop'], label: () => _('Automatically update the application') },
@@ -847,6 +883,12 @@ Setting.THEME_DARK = 2;
 Setting.THEME_SOLARIZED_LIGHT = 3;
 Setting.THEME_SOLARIZED_DARK = 4;
 
+Setting.FONT_DEFAULT = 0;
+Setting.FONT_MENLO = 1;
+Setting.FONT_COURIER_NEW = 2;
+Setting.FONT_AVENIR = 3;
+Setting.FONT_MONOSPACE = 4;
+
 Setting.DATE_FORMAT_1 = 'DD/MM/YYYY';
 Setting.DATE_FORMAT_2 = 'DD/MM/YY';
 Setting.DATE_FORMAT_3 = 'MM/DD/YYYY';

ReactNativeClient/lib/shim-init-react.js

@@ -6,7 +6,7 @@ const { generateSecureRandom } = require('react-native-securerandom');
 const FsDriverRN = require('lib/fs-driver-rn.js').FsDriverRN;
 const urlValidator = require('valid-url');
 const { Buffer } = require('buffer');
-const { Linking } = require('react-native');
+const { Linking, Platform } = require('react-native');
 const mimeUtils = require('lib/mime-utils.js').mime;
 const { basename, fileExtension } = require('lib/path-utils.js');
 const { uuid } = require('lib/uuid.js');
@@ -145,6 +145,10 @@ function shimInit() {
 		});
 	};
 
+	shim.mobilePlatform = () => {
+		return Platform.OS;
+	};
+
 	// NOTE: This is a limited version of createResourceFromPath - unlike the Node version, it
 	// only really works with images. It does not resize the image either.
 	shim.createResourceFromPath = async function(filePath, defaultProps = null) {

ReactNativeClient/lib/shim.js

@@ -41,6 +41,10 @@ shim.platformName = function() {
 	throw new Error('Cannot determine platform');
 };
 
+shim.mobilePlatform = function() {
+	return ''; // Default if we're not on mobile (React Native)
+};
+
 // https://github.com/cheton/is-electron
 shim.isElectron = () => {
 	// Renderer process