Android release v1.1.2

Issue https://github.com/laurent22/joplin/issues/3711

This patch replaces the 'isLinux' check by a more restrictive version
which fixes the false positive in BSD systems. This was causing Joplin
not to load due to the lack of X11 in headless mode.

.eslintignore

@@ -71,6 +71,12 @@ ElectronClient/commands/stopExternalEditing.js
 ElectronClient/global.d.js
 ElectronClient/gui/ErrorBoundary.js
 ElectronClient/gui/Header/commands/focusSearch.js
+ElectronClient/gui/KeymapConfig/KeymapConfigScreen.js
+ElectronClient/gui/KeymapConfig/ShortcutRecorder.js
+ElectronClient/gui/KeymapConfig/styles/index.js
+ElectronClient/gui/KeymapConfig/utils/getLabel.js
+ElectronClient/gui/KeymapConfig/utils/useCommandStatus.js
+ElectronClient/gui/KeymapConfig/utils/useKeymap.js
 ElectronClient/gui/MainScreen/commands/editAlarm.js
 ElectronClient/gui/MainScreen/commands/exportPdf.js
 ElectronClient/gui/MainScreen/commands/hideModalMessage.js
@@ -98,12 +104,6 @@ ElectronClient/gui/NoteEditor/commands/focusElementNoteBody.js
 ElectronClient/gui/NoteEditor/commands/focusElementNoteTitle.js
 ElectronClient/gui/NoteEditor/commands/showLocalSearch.js
 ElectronClient/gui/NoteEditor/commands/showRevisions.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
@@ -152,6 +152,7 @@ ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/sanitize_html.js
 ReactNativeClient/lib/JoplinServerApi.js
+ReactNativeClient/lib/ntpDate.js
 ReactNativeClient/lib/services/CommandService.js
 ReactNativeClient/lib/services/keychain/KeychainService.js
 ReactNativeClient/lib/services/keychain/KeychainServiceDriver.dummy.js

.gitignore

@@ -50,6 +50,8 @@ joplin-webclipper-source.zip
 Tools/commit_hook.txt
 .vscode/*
 *.map
+ReactNativeClient/lib/sql-extensions/spellfix.so
+ReactNativeClient/lib/sql-extensions/spellfix.dylib
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
 CliClient/app/LinkSelector.js
@@ -62,6 +64,12 @@ ElectronClient/commands/stopExternalEditing.js
 ElectronClient/global.d.js
 ElectronClient/gui/ErrorBoundary.js
 ElectronClient/gui/Header/commands/focusSearch.js
+ElectronClient/gui/KeymapConfig/KeymapConfigScreen.js
+ElectronClient/gui/KeymapConfig/ShortcutRecorder.js
+ElectronClient/gui/KeymapConfig/styles/index.js
+ElectronClient/gui/KeymapConfig/utils/getLabel.js
+ElectronClient/gui/KeymapConfig/utils/useCommandStatus.js
+ElectronClient/gui/KeymapConfig/utils/useKeymap.js
 ElectronClient/gui/MainScreen/commands/editAlarm.js
 ElectronClient/gui/MainScreen/commands/exportPdf.js
 ElectronClient/gui/MainScreen/commands/hideModalMessage.js
@@ -89,12 +97,6 @@ ElectronClient/gui/NoteEditor/commands/focusElementNoteBody.js
 ElectronClient/gui/NoteEditor/commands/focusElementNoteTitle.js
 ElectronClient/gui/NoteEditor/commands/showLocalSearch.js
 ElectronClient/gui/NoteEditor/commands/showRevisions.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/AceEditor.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/index.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/types.js
-ElectronClient/gui/NoteEditor/NoteBody/AceEditor/utils/useListIdent.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.js
 ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.js
@@ -143,6 +145,7 @@ ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/sanitize_html.js
 ReactNativeClient/lib/JoplinServerApi.js
+ReactNativeClient/lib/ntpDate.js
 ReactNativeClient/lib/services/CommandService.js
 ReactNativeClient/lib/services/keychain/KeychainService.js
 ReactNativeClient/lib/services/keychain/KeychainServiceDriver.dummy.js

BUILD.md

@@ -87,6 +87,10 @@ It still requires you to quit the application each time you want it to rebuild,
 2. Switch to the Electron app and <kbd>cmd</kbd>+<kbd>Q</kbd> to quit it.
 3. `watchman` immediately restarts the app for you (whereas usually you'd have to switch back to the terminal, type `"npm start"`, and hit enter).
 
+# Updating Markdown renderer packages
+
+The Markdown renderer is located under ReactNativeClient/lib/joplin-renderer. Whenever updating one of its dependencies, such as Mermaid or Katex, please run `npm run buildAssets` to make sure all assets such as fonts or CSS files are deployed correctly.
+
 # Troubleshooting
 
 Please read for the [Build Troubleshooting Document](https://github.com/laurent22/joplin/blob/master/readme/build_troubleshooting.md) for various tips on how to get the build working.

CliClient/gulpfile.js

@@ -2,6 +2,9 @@ const gulp = require('gulp');
 const fs = require('fs-extra');
 const utils = require('../Tools/gulp/utils');
 const tasks = {
+	compileExtensions: {
+		fn: require('../Tools/gulp/tasks/compileExtensions.js'),
+	},
 	copyLib: require('../Tools/gulp/tasks/copyLib'),
 	tsc: require('../Tools/gulp/tasks/tsc'),
 	updateIgnoredTypeScriptBuild: require('../Tools/gulp/tasks/updateIgnoredTypeScriptBuild'),
@@ -53,10 +56,12 @@ utils.registerGulpTasks(gulp, tasks);
 
 gulp.task('build', gulp.series([
 	'prepareBuild',
+	'compileExtensions',
 	'copyLib',
 ]));
 
 gulp.task('buildTests', gulp.series([
 	'prepareTestBuild',
+	'compileExtensions',
 	'copyLib',
 ]));

CliClient/locales-build/index.js

@@ -38,42 +38,42 @@ locales['tr_TR'] = require('./tr_TR.json');
 locales['vi'] = require('./vi.json');
 locales['zh_CN'] = require('./zh_CN.json');
 locales['zh_TW'] = require('./zh_TW.json');
-stats['ar'] = {"percentDone":82};
-stats['eu'] = {"percentDone":35};
-stats['bs_BA'] = {"percentDone":85};
-stats['bg_BG'] = {"percentDone":68};
-stats['ca'] = {"percentDone":54};
+stats['ar'] = {"percentDone":80};
+stats['eu'] = {"percentDone":34};
+stats['bs_BA'] = {"percentDone":83};
+stats['bg_BG'] = {"percentDone":66};
+stats['ca'] = {"percentDone":53};
 stats['hr_HR'] = {"percentDone":28};
-stats['cs_CZ'] = {"percentDone":84};
-stats['da_DK'] = {"percentDone":76};
-stats['de_DE'] = {"percentDone":99};
-stats['et_EE'] = {"percentDone":68};
+stats['cs_CZ'] = {"percentDone":82};
+stats['da_DK'] = {"percentDone":74};
+stats['de_DE'] = {"percentDone":95};
+stats['et_EE'] = {"percentDone":66};
 stats['en_GB'] = {"percentDone":100};
 stats['en_US'] = {"percentDone":100};
-stats['es_ES'] = {"percentDone":91};
-stats['eo'] = {"percentDone":39};
-stats['fr_FR'] = {"percentDone":97};
-stats['gl_ES'] = {"percentDone":44};
-stats['id_ID'] = {"percentDone":95};
-stats['it_IT'] = {"percentDone":93};
-stats['nl_NL'] = {"percentDone":99};
-stats['nl_BE'] = {"percentDone":35};
-stats['nb_NO'] = {"percentDone":91};
-stats['fa'] = {"percentDone":34};
-stats['pl_PL'] = {"percentDone":87};
-stats['pt_PT'] = {"percentDone":91};
-stats['pt_BR'] = {"percentDone":98};
-stats['ro'] = {"percentDone":35};
-stats['sl_SI'] = {"percentDone":44};
-stats['sv'] = {"percentDone":73};
-stats['th_TH'] = {"percentDone":54};
-stats['vi'] = {"percentDone":88};
-stats['tr_TR'] = {"percentDone":99};
-stats['el_GR'] = {"percentDone":93};
-stats['ru_RU'] = {"percentDone":90};
-stats['sr_RS'] = {"percentDone":74};
-stats['zh_CN'] = {"percentDone":99};
-stats['zh_TW'] = {"percentDone":98};
-stats['ja_JP'] = {"percentDone":99};
-stats['ko'] = {"percentDone":89};
+stats['es_ES'] = {"percentDone":95};
+stats['eo'] = {"percentDone":38};
+stats['fr_FR'] = {"percentDone":94};
+stats['gl_ES'] = {"percentDone":43};
+stats['id_ID'] = {"percentDone":93};
+stats['it_IT'] = {"percentDone":91};
+stats['nl_NL'] = {"percentDone":96};
+stats['nl_BE'] = {"percentDone":34};
+stats['nb_NO'] = {"percentDone":88};
+stats['fa'] = {"percentDone":80};
+stats['pl_PL'] = {"percentDone":96};
+stats['pt_PT'] = {"percentDone":89};
+stats['pt_BR'] = {"percentDone":96};
+stats['ro'] = {"percentDone":78};
+stats['sl_SI'] = {"percentDone":42};
+stats['sv'] = {"percentDone":71};
+stats['th_TH'] = {"percentDone":52};
+stats['vi'] = {"percentDone":85};
+stats['tr_TR'] = {"percentDone":96};
+stats['el_GR'] = {"percentDone":96};
+stats['ru_RU'] = {"percentDone":95};
+stats['sr_RS'] = {"percentDone":72};
+stats['zh_CN'] = {"percentDone":96};
+stats['zh_TW'] = {"percentDone":95};
+stats['ja_JP'] = {"percentDone":96};
+stats['ko'] = {"percentDone":86};
 module.exports = { locales: locales, stats: stats };

CliClient/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "joplin",
-  "version": "1.0.166",
+  "version": "1.1.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

CliClient/package.json

@@ -28,7 +28,7 @@
     ],
     "owner": "Laurent Cozic"
   },
-  "version": "1.0.166",
+  "version": "1.1.8",
   "bin": {
     "joplin": "./main.js"
   },

CliClient/tests/filterParser.js

@@ -4,7 +4,12 @@ require('app-module-path').addPath(__dirname);
 const filterParser = require('lib/services/searchengine/filterParser.js').default;
 // import filterParser from 'lib/services/searchengine/filterParser.js';
 
-const makeTerm = (name, value, negated) => { return { name, value, negated }; };
+const makeTerm = (name, value, negated, quoted = false, wildcard = false) => {
+	if (name === 'text') { return { name, value, negated, quoted, wildcard }; }
+	if (name === 'title' | name === 'body') { return { name, value, negated, wildcard }; }
+	return { name, value, negated };
+};
+
 describe('filterParser should be correct filter for keyword', () => {
 	it('title', () => {
 		const searchString = 'title: something';
@@ -65,7 +70,7 @@ describe('filterParser should be correct filter for keyword', () => {
 
 	it('phrase text search', () => {
 		const searchString = '"scott joplin"';
-		expect(filterParser(searchString)).toContain(makeTerm('text', '"scott joplin"', false));
+		expect(filterParser(searchString)).toContain(makeTerm('text', '"scott joplin"', false, true));
 	});
 
 	it('multi word body', () => {
@@ -105,6 +110,9 @@ describe('filterParser should be correct filter for keyword', () => {
 
 		searchString = 'tag:bl*sphemy';
 		expect(filterParser(searchString)).toContain(makeTerm('tag', 'bl%sphemy', false));
+
+		searchString = 'tag:"space travel"';
+		expect(filterParser(searchString)).toContain(makeTerm('tag', 'space travel', false));
 	});
 
 	it('wildcard notebooks', () => {

CliClient/tests/pathUtils.js

@@ -24,7 +24,7 @@ describe('pathUtils', function() {
 			['no space at the end ', 'no space at the end'],
 			['nor dots...', 'nor dots'],
 			['  no space before either', 'no space before either'],
-			['thatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylong', 'thatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylong'],
+			['thatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylongthatsreallylong', 'thatsreallylongthatsreallylongthatsreallylongthats'],
 		];
 
 		for (let i = 0; i < testCases.length; i++) {

CliClient/tests/services_InteropService.js

@@ -3,7 +3,7 @@
 require('app-module-path').addPath(__dirname);
 
 const { time } = require('lib/time-utils.js');
-const { asyncTest, fileContentEqual, setupDatabase, setupDatabaseAndSynchronizer, db, synchronizer, fileApi, sleep, clearDatabase, switchClient, syncTargetId, objectsEqual, checkThrowAsync } = require('test-utils.js');
+const { asyncTest, fileContentEqual, expectNotThrow, setupDatabase, setupDatabaseAndSynchronizer, db, synchronizer, fileApi, sleep, clearDatabase, switchClient, syncTargetId, objectsEqual, checkThrowAsync } = require('test-utils.js');
 const InteropService = require('lib/services/InteropService.js');
 const Folder = require('lib/models/Folder.js');
 const Note = require('lib/models/Note.js');
@@ -442,4 +442,26 @@ describe('services_InteropService', function() {
 		expect(await shim.fsDriver().exists(`${exportDir()}/testexportfolder/textexportnote2.md`)).toBe(true);
 	}));
 
+	it('should not try to export folders with a non-existing parent', asyncTest(async () => {
+		// Handles and edge case where user has a folder but this folder with a parent
+		// that doesn't exist. Can happen for example in this case:
+		//
+		// - folder1/folder2
+		// - Client 1 sync folder2, but not folder1
+		// - Client 2 sync and get folder2 only
+		// - Client 2 export data
+		// => Crash if we don't handle this case
+
+		await Folder.save({ title: 'orphan', parent_id: '0c5bbd8a1b5a48189484a412a7e534cc' });
+
+		const service = new InteropService();
+
+		const result = await service.export({
+			path: exportDir(),
+			format: 'md',
+		});
+
+		expect(result.warnings.length).toBe(0);
+	}));
+
 });

CliClient/tests/services_KeymapService.js

@@ -115,6 +115,7 @@ describe('services_KeymapService', () => {
 				{ command: 'focusElementNoteTitle', accelerator: 'Option+Shift+Cmd+T' },
 				{ command: 'focusElementNoteBody', accelerator: 'Ctrl+Option+Shift+Cmd+B' },
 			];
+
 			testCases_Darwin.forEach(({ command, accelerator }) => {
 				keymapService.setAccelerator(command, accelerator);
 				expect(keymapService.getAccelerator(command)).toEqual(accelerator);
@@ -131,6 +132,7 @@ describe('services_KeymapService', () => {
 				{ command: 'focusElementNoteTitle', accelerator: 'Ctrl+Alt+Shift+T' },
 				{ command: 'focusElementNoteBody', accelerator: 'Ctrl+Alt+Shift+B' },
 			];
+
 			testCases_Linux.forEach(({ command, accelerator }) => {
 				keymapService.setAccelerator(command, accelerator);
 				expect(keymapService.getAccelerator(command)).toEqual(accelerator);
@@ -138,10 +140,10 @@ describe('services_KeymapService', () => {
 		});
 	});
 
-	describe('resetAccelerator', () => {
+	describe('getDefaultAccelerator', () => {
 		beforeEach(() => keymapService.initialize());
 
-		it('should reset the Accelerator', () => {
+		it('should return the default accelerator', () => {
 			const testCases = [
 				{ command: 'newNote', accelerator: 'Ctrl+Alt+Shift+N' },
 				{ command: 'synchronize', accelerator: null /* Disabled */ },
@@ -154,28 +156,24 @@ describe('services_KeymapService', () => {
 			];
 
 			testCases.forEach(({ command, accelerator }) => {
-				// Remember the default Accelerator value
-				const prevAccelerator = keymapService.getAccelerator(command);
+				// Remember the real default Accelerator value
+				const defaultAccelerator = keymapService.getAccelerator(command);
 
-				// Update the Accelerator,
+				// Update the Accelerator and then retrieve the default accelerator
 				keymapService.setAccelerator(command, accelerator);
-				expect(keymapService.getAccelerator(command)).toEqual(accelerator);
-
-				// and then reset it..
-				keymapService.resetAccelerator(command);
-				expect(keymapService.getAccelerator(command)).toEqual(prevAccelerator);
+				expect(keymapService.getDefaultAccelerator(command)).toEqual(defaultAccelerator);
 			});
 		});
 	});
 
-	describe('setKeymap', () => {
+	describe('overrideKeymap', () => {
 		beforeEach(() => keymapService.initialize());
 
 		it('should update the keymap', () => {
 			keymapService.initialize('darwin');
-			const customKeymap_Darwin = [
+			const customKeymapItems_Darwin = [
 				{ command: 'newNote', accelerator: 'Option+Shift+Cmd+N' },
-				{ command: 'synchronize', accelerator: 'F11' },
+				{ command: 'synchronize', accelerator: 'Ctrl+F11' },
 				{ command: 'textBold', accelerator: 'Shift+F5' },
 				{ command: 'showLocalSearch', accelerator: 'Ctrl+Option+S' },
 				{ command: 'gotoAnything', accelerator: 'Ctrl+Shift+G' },
@@ -187,16 +185,16 @@ describe('services_KeymapService', () => {
 				{ command: 'focusElementNoteList', accelerator: 'Shift+Cmd+S' /* Default of focusElementSideBar */ },
 			];
 
-			expect(() => keymapService.setKeymap(customKeymap_Darwin)).not.toThrow();
-			customKeymap_Darwin.forEach(({ command, accelerator }) => {
+			expect(() => keymapService.overrideKeymap(customKeymapItems_Darwin)).not.toThrow();
+			customKeymapItems_Darwin.forEach(({ command, accelerator }) => {
 				// Also check if keymap is updated or not
 				expect(keymapService.getAccelerator(command)).toEqual(accelerator);
 			});
 
 			keymapService.initialize('win32');
-			const customKeymap_Win32 = [
+			const customKeymapItems_Win32 = [
 				{ command: 'newNote', accelerator: 'Ctrl+Alt+Shift+N' },
-				{ command: 'synchronize', accelerator: 'F11' },
+				{ command: 'synchronize', accelerator: 'Ctrl+F11' },
 				{ command: 'textBold', accelerator: 'Shift+F5' },
 				{ command: 'showLocalSearch', accelerator: 'Ctrl+Alt+S' },
 				{ command: 'gotoAnything', accelerator: 'Ctrl+Shift+G' },
@@ -208,8 +206,8 @@ describe('services_KeymapService', () => {
 				{ command: 'focusElementNoteList', accelerator: 'Ctrl+Shift+S' /* Default of focusElementSideBar */ },
 			];
 
-			expect(() => keymapService.setKeymap(customKeymap_Win32)).not.toThrow();
-			customKeymap_Win32.forEach(({ command, accelerator }) => {
+			expect(() => keymapService.overrideKeymap(customKeymapItems_Win32)).not.toThrow();
+			customKeymapItems_Win32.forEach(({ command, accelerator }) => {
 				// Also check if keymap is updated or not
 				expect(keymapService.getAccelerator(command)).toEqual(accelerator);
 			});
@@ -240,30 +238,30 @@ describe('services_KeymapService', () => {
 			];
 
 			for (let i = 0; i < customKeymaps.length; i++) {
-				const customKeymap = customKeymaps[i];
-				expect(() => keymapService.setKeymap(customKeymap)).toThrow();
+				const customKeymapItems = customKeymaps[i];
+				expect(() => keymapService.overrideKeymap(customKeymapItems)).toThrow();
 			}
 		});
 
 		it('should throw when the provided Accelerators are invalid', () => {
 			// Only one test case is provided since KeymapService.validateAccelerator() is already tested
-			const customKeymap = [
+			const customKeymapItems = [
 				{ command: 'gotoAnything', accelerator: 'Ctrl+Shift+G' },
 				{ command: 'print', accelerator: 'Alt+P' },
 				{ command: 'focusElementNoteTitle', accelerator: 'Ctrl+Alt+Shift+J+O+P+L+I+N' },
 			];
 
-			expect(() => keymapService.setKeymap(customKeymap)).toThrow();
+			expect(() => keymapService.overrideKeymap(customKeymapItems)).toThrow();
 		});
 
 		it('should throw when the provided commands are invalid', () => {
-			const customKeymap = [
+			const customKeymapItems = [
 				{ command: 'totallyInvalidCommand', accelerator: 'Ctrl+Shift+G' },
 				{ command: 'print', accelerator: 'Alt+P' },
 				{ command: 'focusElementNoteTitle', accelerator: 'Ctrl+Alt+Shift+J' },
 			];
 
-			expect(() => keymapService.setKeymap(customKeymap)).toThrow();
+			expect(() => keymapService.overrideKeymap(customKeymapItems)).toThrow();
 		});
 
 		it('should throw when duplicate accelerators are provided', () => {
@@ -281,14 +279,8 @@ describe('services_KeymapService', () => {
 			];
 
 			for (let i = 0; i < customKeymaps_Darwin.length; i++) {
-				const customKeymap = customKeymaps_Darwin[i];
-				const defaultAccelerators = customKeymap.map(({ command }) => keymapService.getAccelerator(command));
-
-				expect(() => keymapService.setKeymap(customKeymap)).toThrow();
-				// All items should be reset to default values
-				for (let j = 0; j < customKeymap.length; j++) {
-					expect(keymapService.getAccelerator(customKeymap[j].command)).toEqual(defaultAccelerators[j]);
-				}
+				const customKeymapItems = customKeymaps_Darwin[i];
+				expect(() => keymapService.overrideKeymap(customKeymapItems)).toThrow();
 			}
 
 			const customKeymaps_Linux = [
@@ -305,14 +297,8 @@ describe('services_KeymapService', () => {
 			];
 
 			for (let i = 0; i < customKeymaps_Linux.length; i++) {
-				const customKeymap = customKeymaps_Linux[i];
-				const defaultAccelerators = customKeymap.map(({ command }) => keymapService.getAccelerator(command));
-
-				expect(() => keymapService.setKeymap(customKeymap)).toThrow();
-
-				for (let j = 0; j < customKeymap.length; j++) {
-					expect(keymapService.getAccelerator(customKeymap[j].command)).toEqual(defaultAccelerators[j]);
-				}
+				const customKeymapItems = customKeymaps_Linux[i];
+				expect(() => keymapService.overrideKeymap(customKeymapItems)).toThrow();
 			}
 		});
 	});

CliClient/tests/services_SearchEngine.js

@@ -426,7 +426,7 @@ describe('services_SearchEngine', function() {
 			const t = testCases[i];
 			const input = t[0];
 			const expected = t[1];
-			const actual = engine.parseQuery(input);
+			const actual = await engine.parseQuery(input);
 
 			const _Values = actual.terms._ ? actual.terms._.map(v => v.value) : undefined;
 			const titleValues = actual.terms.title ? actual.terms.title.map(v => v.value) : undefined;

CliClient/tests/services_SearchFilter.js

@@ -268,7 +268,7 @@ describe('services_SearchFilter', function() {
 
 		await Tag.setNoteTagsByTitles(n1.id, ['tag1', 'tag2']);
 		await Tag.setNoteTagsByTitles(n2.id, ['tag2', 'tag3']);
-		await Tag.setNoteTagsByTitles(n3.id, ['tag3', 'tag4']);
+		await Tag.setNoteTagsByTitles(n3.id, ['tag3', 'tag4', 'space travel']);
 
 		await engine.syncTables();
 
@@ -304,6 +304,10 @@ describe('services_SearchFilter', function() {
 		expect(rows.length).toBe(2);
 		expect(ids(rows)).toContain(n1.id);
 		expect(ids(rows)).toContain(n3.id);
+
+		rows = await engine.search('tag:"space travel"');
+		expect(rows.length).toBe(1);
+		expect(ids(rows)).toContain(n3.id);
 	}));
 
 	it('should support filtering by notebook', asyncTest(async () => {

CliClient/tests/services_SearchFuzzy.js

@@ -0,0 +1,163 @@
+/* eslint-disable no-unused-vars */
+/* eslint prefer-const: 0*/
+
+require('app-module-path').addPath(__dirname);
+
+const { time } = require('lib/time-utils.js');
+const { fileContentEqual, setupDatabase, setupDatabaseAndSynchronizer, asyncTest, db, synchronizer, fileApi, sleep, createNTestNotes, switchClient, createNTestFolders } = require('test-utils.js');
+const SearchEngine = require('lib/services/searchengine/SearchEngine');
+const Note = require('lib/models/Note');
+const Folder = require('lib/models/Folder');
+const Tag = require('lib/models/Tag');
+const ItemChange = require('lib/models/ItemChange');
+const Setting = require('lib/models/Setting');
+const Resource = require('lib/models/Resource.js');
+const { shim } = require('lib/shim');
+const ResourceService = require('lib/services/ResourceService.js');
+
+
+process.on('unhandledRejection', (reason, p) => {
+	console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
+});
+
+let engine = null;
+
+const ids = (array) => array.map(a => a.id);
+
+describe('services_SearchFuzzy', function() {
+	beforeEach(async (done) => {
+		await setupDatabaseAndSynchronizer(1);
+		await switchClient(1);
+
+		engine = new SearchEngine();
+		engine.setDb(db());
+
+		Setting.setValue('db.fuzzySearchEnabled', 1);
+		done();
+	});
+
+
+	it('should return note almost matching title', asyncTest(async () => {
+		let rows;
+		const n1 = await Note.save({ title: 'If It Ain\'t Baroque, Don\'t Fix It' });
+		const n2 = await Note.save({ title: 'Important note' });
+
+		await engine.syncTables();
+		rows = await engine.search('Broke', { fuzzy: false });
+		expect(rows.length).toBe(0);
+
+		rows = await engine.search('Broke', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows[0].id).toBe(n1.id);
+
+
+		rows = await engine.search('title:Broke', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows[0].id).toBe(n1.id);
+
+		rows = await engine.search('title:"Broke"', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows[0].id).toBe(n1.id);
+
+		rows = await engine.search('Imprtant', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows[0].id).toBe(n2.id);
+	}));
+
+
+	it('should order results by min fuzziness', asyncTest(async () => {
+		let rows;
+		const n1 = await Note.save({ title: 'I demand you take me to him' });
+		const n2 = await Note.save({ title: 'He demanded an answer' });
+		const n3 = await Note.save({ title: 'Don\'t you make demands of me' });
+		const n4 = await Note.save({ title: 'No drama for me' });
+		const n5 = await Note.save({ title: 'Just minding my own business' });
+
+		await engine.syncTables();
+		rows = await engine.search('demand', { fuzzy: false });
+		expect(rows.length).toBe(1);
+		expect(rows[0].id).toBe(n1.id);
+
+
+		rows = await engine.search('demand', { fuzzy: true });
+		expect(rows.length).toBe(3);
+		expect(rows[0].id).toBe(n1.id);
+		expect(rows[1].id).toBe(n3.id);
+		expect(rows[2].id).toBe(n2.id);
+	}));
+
+	it('should consider any:1', asyncTest(async () => {
+		let rows;
+		const n1 = await Note.save({ title: 'cat' });
+		const n2 = await Note.save({ title: 'cats' });
+		const n3 = await Note.save({ title: 'cot' });
+
+		const n4 = await Note.save({ title: 'defenestrate' });
+		const n5 = await Note.save({ title: 'defenstrate' });
+		const n6 = await Note.save({ title: 'defenestrated' });
+
+		const n7 = await Note.save({ title: 'he defenestrated the cat' });
+
+		await engine.syncTables();
+
+		rows = await engine.search('defenestrated cat', { fuzzy: true });
+		expect(rows.length).toBe(1);
+
+		rows = await engine.search('any:1 defenestrated cat', { fuzzy: true });
+		expect(rows.length).toBe(7);
+	}));
+
+	it('should leave phrase searches alone', asyncTest(async () => {
+		let rows;
+		const n1 = await Note.save({ title: 'abc def' });
+		const n2 = await Note.save({ title: 'def ghi' });
+		const n3 = await Note.save({ title: 'ghi jkl' });
+		const n4 = await Note.save({ title: 'def abc' });
+		const n5 = await Note.save({ title: 'mno pqr ghi jkl' });
+
+		await engine.syncTables();
+
+		rows = await engine.search('abc def', { fuzzy: true });
+		expect(rows.length).toBe(2);
+		expect(rows.map(r=>r.id)).toContain(n1.id);
+		expect(rows.map(r=>r.id)).toContain(n4.id);
+
+		rows = await engine.search('"abc def"', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows.map(r=>r.id)).toContain(n1.id);
+
+		rows = await engine.search('"ghi jkl"', { fuzzy: true });
+		expect(rows.length).toBe(2);
+		expect(rows.map(r=>r.id)).toContain(n3.id);
+		expect(rows.map(r=>r.id)).toContain(n5.id);
+
+		rows = await engine.search('"ghi jkl" mno', { fuzzy: true });
+		expect(rows.length).toBe(1);
+		expect(rows.map(r=>r.id)).toContain(n5.id);
+
+		rows = await engine.search('any:1 "ghi jkl" mno', { fuzzy: true });
+		expect(rows.length).toBe(2);
+		expect(rows.map(r=>r.id)).toContain(n3.id);
+		expect(rows.map(r=>r.id)).toContain(n5.id);
+	}));
+
+	it('should leave wild card searches alone', asyncTest(async () => {
+		let rows;
+		const n1 = await Note.save({ title: 'abc def' });
+		const n2 = await Note.save({ title: 'abcc ghi' });
+		const n3 = await Note.save({ title: 'abccc ghi' });
+		const n4 = await Note.save({ title: 'abcccc ghi' });
+		const n5 = await Note.save({ title: 'wxy zzz' });
+
+		await engine.syncTables();
+
+		rows = await engine.search('abc*', { fuzzy: true });
+
+		expect(rows.length).toBe(4);
+		expect(rows.map(r=>r.id)).toContain(n1.id);
+		expect(rows.map(r=>r.id)).toContain(n2.id);
+		expect(rows.map(r=>r.id)).toContain(n3.id);
+		expect(rows.map(r=>r.id)).toContain(n4.id);
+	}));
+
+});

CliClient/tests/synchronizer_MigrationHandler.ts

@@ -1,5 +1,6 @@
 import LockHandler from 'lib/services/synchronizer/LockHandler';
 import MigrationHandler from 'lib/services/synchronizer/MigrationHandler';
+import { Dirnames } from 'lib/services/synchronizer/utils/types';
 
 // To create a sync target snapshot for the current syncVersion:
 // - In test-utils, set syncTargetName_ to "filesystem"
@@ -70,6 +71,14 @@ describe('synchronizer_MigrationHandler', function() {
 		done();
 	});
 
+	it('should init a new sync target', asyncTest(async () => {
+		// Check that basic folders "locks" and "temp" are created for new sync targets.
+		await migrationHandler().upgrade(1);
+		const result = await fileApi().list();
+		expect(result.items.filter((i:any) => i.path === Dirnames.Locks).length).toBe(1);
+		expect(result.items.filter((i:any) => i.path === Dirnames.Temp).length).toBe(1);
+	}), specTimeout);
+
 	it('should not allow syncing if the sync target is out-dated', asyncTest(async () => {
 		await synchronizer().start();
 		await fileApi().put('info.json', `{"version":${Setting.value('syncVersion') - 1}}`);

CliClient/tests/test-utils.js

@@ -50,6 +50,7 @@ const KeychainServiceDriver = require('lib/services/keychain/KeychainServiceDriv
 const KeychainServiceDriverDummy = require('lib/services/keychain/KeychainServiceDriver.dummy').default;
 const md5 = require('md5');
 const S3 = require('aws-sdk/clients/s3');
+const { Dirnames } = require('lib/services/synchronizer/utils/types');
 
 const databases_ = [];
 let synchronizers_ = [];
@@ -438,6 +439,7 @@ async function initFileApi() {
 
 	fileApi.setLogger(logger);
 	fileApi.setSyncTargetId(syncTargetId_);
+	fileApi.setTempDirName(Dirnames.Temp);
 	fileApi.requestRepeatCount_ = isNetworkSyncTarget_ ? 1 : 0;
 
 	fileApis_[syncTargetId_] = fileApi;

ElectronClient/ElectronAppWrapper.js

@@ -8,9 +8,10 @@ const { ipcMain } = require('electron');
 
 class ElectronAppWrapper {
 
-	constructor(electronApp, env, profilePath) {
+	constructor(electronApp, env, profilePath, isDebugMode) {
 		this.electronApp_ = electronApp;
 		this.env_ = env;
+		this.isDebugMode_ = isDebugMode;
 		this.profilePath_ = profilePath;
 		this.win_ = null;
 		this.willQuitApp_ = false;
@@ -41,7 +42,7 @@ class ElectronAppWrapper {
 
 	createWindow() {
 		// Set to true to view errors if the application does not start
-		const debugEarlyBugs = this.env_ === 'dev';
+		const debugEarlyBugs = this.env_ === 'dev' || this.isDebugMode_;
 
 		const windowStateKeeper = require('electron-window-state');
 
@@ -104,7 +105,17 @@ class ElectronAppWrapper {
 		// Waiting for one of the ready events might work but they might not be triggered if there's an error, so
 		// the easiest is to use a timeout. Keep in mind that if you get a white window on Windows it might be due
 		// to this line though.
-		if (debugEarlyBugs) setTimeout(() => this.win_.webContents.openDevTools(), 3000);
+		if (debugEarlyBugs) {
+			setTimeout(() => {
+				try {
+					this.win_.webContents.openDevTools();
+				} catch (error) {
+				// This will throw an exception "Object has been destroyed" if the app is closed
+				// in less that the timeout interval. It can be ignored.
+					console.warn('Error opening dev tools', error);
+				}
+			}, 3000);
+		}
 
 		this.win_.on('close', (event) => {
 			// If it's on macOS, the app is completely closed only if the user chooses to close the app (willQuitApp_ will be true)

ElectronClient/app.js

@@ -30,7 +30,7 @@ const PluginManager = require('lib/services/PluginManager');
 const RevisionService = require('lib/services/RevisionService');
 const MigrationService = require('lib/services/MigrationService');
 const CommandService = require('lib/services/CommandService').default;
-const KeymapService = require('lib/services/KeymapService.js').default;
+const KeymapService = require('lib/services/KeymapService').default;
 const TemplateUtils = require('lib/TemplateUtils');
 const CssUtils = require('lib/CssUtils');
 const resourceEditWatcherReducer = require('lib/services/ResourceEditWatcher/reducer').default;
@@ -110,6 +110,8 @@ class Application extends BaseApplication {
 
 		this.commandService_commandsEnabledStateChange = this.commandService_commandsEnabledStateChange.bind(this);
 		CommandService.instance().on('commandsEnabledStateChange', this.commandService_commandsEnabledStateChange);
+
+		KeymapService.instance().on('keymapChange', this.refreshMenu.bind(this));
 	}
 
 	commandService_commandsEnabledStateChange() {
@@ -569,7 +571,7 @@ class Application extends BaseApplication {
 		const toolsItemsWindowsLinux = toolsItemsFirst.concat([{
 			label: _('Options'),
 			visible: !shim.isMac(),
-			accelerator: shim.isMac() ? null : keymapService.getAccelerator('config'),
+			accelerator: !shim.isMac() && keymapService.getAccelerator('config'),
 			click: () => {
 				this.dispatch({
 					type: 'NAV_GO',
@@ -631,7 +633,7 @@ class Application extends BaseApplication {
 			}, {
 				label: _('Preferences...'),
 				visible: shim.isMac() ? true : false,
-				accelerator: shim.isMac() ? keymapService.getAccelerator('config') : null,
+				accelerator: shim.isMac() && keymapService.getAccelerator('config'),
 				click: () => {
 					this.dispatch({
 						type: 'NAV_GO',
@@ -663,7 +665,7 @@ class Application extends BaseApplication {
 				visible: shim.isMac() ? false : true,
 				submenu: importItems,
 			}, {
-				label: _('Export'),
+				label: _('Export all'),
 				visible: shim.isMac() ? false : true,
 				submenu: exportItems,
 			}, {
@@ -680,7 +682,7 @@ class Application extends BaseApplication {
 			}, {
 				label: _('Hide %s', 'Joplin'),
 				platforms: ['darwin'],
-				accelerator: shim.isMac() ? keymapService.getAccelerator('hideApp') : null,
+				accelerator: shim.isMac() && keymapService.getAccelerator('hideApp'),
 				click: () => { bridge().electronApp().hide(); },
 			}, {
 				type: 'separator',
@@ -700,7 +702,7 @@ class Application extends BaseApplication {
 				newNotebookItem, {
 					label: _('Close Window'),
 					platforms: ['darwin'],
-					accelerator: shim.isMac() ? keymapService.getAccelerator('closeWindow') : null,
+					accelerator: shim.isMac() && keymapService.getAccelerator('closeWindow'),
 					selector: 'performClose:',
 				}, {
 					type: 'separator',
@@ -1040,11 +1042,9 @@ class Application extends BaseApplication {
 		// https://github.com/laurent22/joplin/issues/155
 
 		const css = `.CodeMirror * { font-family: ${fontFamilies.join(', ')} !important; }`;
-		const ace_css = `.ace_editor * { font-family: ${fontFamilies.join(', ')} !important; }`;
 		const styleTag = document.createElement('style');
 		styleTag.type = 'text/css';
 		styleTag.appendChild(document.createTextNode(css));
-		styleTag.appendChild(document.createTextNode(ace_css));
 		document.head.appendChild(styleTag);
 	}
 
@@ -1074,10 +1074,16 @@ class Application extends BaseApplication {
 
 		argv = await super.start(argv);
 
+		await this.applySettingsSideEffects();
+
 		if (Setting.value('sync.upgradeState') === Setting.SYNC_UPGRADE_STATE_MUST_DO) {
+			reg.logger().info('app.start: doing upgradeSyncTarget action');
+			bridge().window().show();
 			return { action: 'upgradeSyncTarget' };
 		}
 
+		reg.logger().info('app.start: doing regular boot');
+
 		const dir = Setting.value('profileDir');
 
 		// Loads app-wide styles. (Markdown preview-specific styles loaded in app.js)
@@ -1087,7 +1093,7 @@ class Application extends BaseApplication {
 		const keymapService = KeymapService.instance();
 
 		try {
-			await KeymapService.instance().loadKeymap(`${dir}/keymap-desktop.json`);
+			await keymapService.loadCustomKeymap(`${dir}/keymap-desktop.json`);
 		} catch (err) {
 			bridge().showErrorMessageBox(err.message);
 		}
@@ -1206,7 +1212,7 @@ class Application extends BaseApplication {
 		if (Setting.value('env') === 'dev') {
 			AlarmService.updateAllNotifications();
 		} else {
-			reg.scheduleSync().then(() => {
+			reg.scheduleSync(1000).then(() => {
 				// Wait for the first sync before updating the notifications, since synchronisation
 				// might change the notifications.
 				AlarmService.updateAllNotifications();
@@ -1237,9 +1243,14 @@ class Application extends BaseApplication {
 		this.updateMenuItemStates();
 
 		// Make it available to the console window - useful to call revisionService.collectRevisions()
-		window.revisionService = RevisionService.instance();
-		window.migrationService = MigrationService.instance();
-		window.decryptionWorker = DecryptionWorker.instance();
+		window.joplin = () => {
+			return {
+				revisionService: RevisionService.instance(),
+				migrationService: MigrationService.instance(),
+				decryptionWorker: DecryptionWorker.instance(),
+				bridge: bridge(),
+			};
+		};
 
 		bridge().addEventListener('nativeThemeUpdated', this.bridge_nativeThemeUpdated);
 	}

ElectronClient/bridge.js

@@ -1,4 +1,5 @@
 const { _, setLocale } = require('lib/locale.js');
+const { shim } = require('lib/shim');
 const { dirname, toSystemSlashes } = require('lib/path-utils.js');
 const { BrowserWindow, nativeTheme } = require('electron');
 
@@ -187,7 +188,18 @@ class Bridge {
 		// to notify services and component that the app is about to close
 		// but for the current use-case it's not really needed.
 		const { app } = require('electron');
-		app.relaunch();
+
+		if (shim.isPortable()) {
+			const options = {
+				execPath: process.env.PORTABLE_EXECUTABLE_FILE,
+			};
+			app.relaunch(options);
+		} else if (shim.isLinux()) {
+			this.showInfoMessageBox(_('The app is now going to close. Please relaunch it to complete the process.'));
+		} else {
+			app.relaunch();
+		}
+
 		app.exit();
 	}
 

ElectronClient/gui/ConfigScreen.jsx

@@ -10,6 +10,7 @@ const shared = require('lib/components/shared/config-shared.js');
 const ConfigMenuBar = require('./ConfigMenuBar.min.js');
 const { EncryptionConfigScreen } = require('./EncryptionConfigScreen.min');
 const { ClipperConfigScreen } = require('./ClipperConfigScreen.min');
+const { KeymapConfigScreen } = require('./KeymapConfig/KeymapConfigScreen');
 
 class ConfigScreenComponent extends React.Component {
 	constructor() {
@@ -68,6 +69,7 @@ class ConfigScreenComponent extends React.Component {
 	screenFromName(screenName) {
 		if (screenName === 'encryption') return <EncryptionConfigScreen theme={this.props.theme}/>;
 		if (screenName === 'server') return <ClipperConfigScreen theme={this.props.theme}/>;
+		if (screenName === 'keymap') return <KeymapConfigScreen themeId={this.props.theme}/>;
 
 		throw new Error(`Invalid screen name: ${screenName}`);
 	}

ElectronClient/gui/Header/Header.jsx

@@ -4,6 +4,7 @@ const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { bridge } = require('electron').remote.require('./bridge');
 const CommandService = require('lib/services/CommandService').default;
+const Setting = require('lib/models/Setting.js');
 
 const commands = [
 	require('./commands/focusSearch'),
@@ -28,7 +29,7 @@ class HeaderComponent extends React.Component {
 
 		const triggerOnQuery = query => {
 			clearTimeout(this.scheduleSearchChangeEventIid_);
-			if (this.searchOnQuery_) this.searchOnQuery_(query);
+			if (this.searchOnQuery_) this.searchOnQuery_(query, Setting.value('db.fuzzySearchEnabled'));
 			this.scheduleSearchChangeEventIid_ = null;
 		};
 

ElectronClient/gui/KeymapConfig/KeymapConfigScreen.tsx

@@ -0,0 +1,192 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+import KeymapService, { KeymapItem } from '../../lib/services/KeymapService';
+import { ShortcutRecorder } from './ShortcutRecorder';
+import getLabel from './utils/getLabel';
+import useKeymap from './utils/useKeymap';
+import useCommandStatus from './utils/useCommandStatus';
+import styles_ from './styles';
+
+const { bridge } = require('electron').remote.require('./bridge');
+const { shim } = require('lib/shim');
+const { _ } = require('lib/locale');
+
+const keymapService = KeymapService.instance();
+
+export interface KeymapConfigScreenProps {
+	themeId: number
+}
+
+export const KeymapConfigScreen = ({ themeId }: KeymapConfigScreenProps) => {
+	const styles = styles_(themeId);
+
+	const [filter, setFilter] = useState('');
+	const [keymapItems, keymapError, overrideKeymapItems, setAccelerator, resetAccelerator] = useKeymap();
+	const [recorderError, setRecorderError] = useState<Error>(null);
+	const [editing, enableEditing, disableEditing] = useCommandStatus();
+	const [hovering, enableHovering, disableHovering] = useCommandStatus();
+
+	const handleSave = (event: { commandName: string, accelerator: string }) => {
+		const { commandName, accelerator } = event;
+		setAccelerator(commandName, accelerator);
+		disableEditing(commandName);
+	};
+
+	const handleReset = (event: { commandName: string }) => {
+		const { commandName } = event;
+		resetAccelerator(commandName);
+		disableEditing(commandName);
+	};
+
+	const handleCancel = (event: { commandName: string }) => {
+		const { commandName } = event;
+		disableEditing(commandName);
+	};
+
+	const handleError = (event: { recorderError: Error }) => {
+		const { recorderError } = event;
+		setRecorderError(recorderError);
+	};
+
+	const handleImport = async () => {
+		const filePath = bridge().showOpenDialog({
+			properties: ['openFile'],
+			defaultPath: 'keymap-desktop',
+			filters: [{ name: 'Joplin Keymaps (keymap-desktop.json)', extensions: ['json'] }],
+		});
+
+		if (filePath) {
+			const actualFilePath = filePath[0];
+			try {
+				const keymapFile = await shim.fsDriver().readFile(actualFilePath, 'utf-8');
+				overrideKeymapItems(JSON.parse(keymapFile));
+			} catch (err) {
+				bridge().showErrorMessageBox(_('Error: %s', err.message));
+			}
+		}
+	};
+
+	const handleExport = async () => {
+		const filePath = bridge().showSaveDialog({
+			defaultPath: 'keymap-desktop',
+			filters: [{ name: 'Joplin Keymaps (keymap-desktop.json)', extensions: ['json'] }],
+		});
+
+		if (filePath) {
+			try {
+				// KeymapService is already synchronized with the in-state keymap
+				await keymapService.saveCustomKeymap(filePath);
+			} catch (err) {
+				bridge().showErrorMessageBox(err.message);
+			}
+		}
+	};
+
+	const renderAccelerator = (accelerator: string) => {
+		return (
+			<div>
+				{accelerator.split('+').map(part => <kbd style={styles.kbd} key={part}>{part}</kbd>).reduce(
+					(accumulator, part) => (accumulator.length ? [...accumulator, ' + ', part] : [part]),
+					[]
+				)}
+			</div>
+		);
+	};
+
+	const renderStatus = (commandName: string) => {
+		if (editing[commandName]) {
+			return (recorderError && <i className="fa fa-exclamation-triangle" title={recorderError.message} />);
+		} else if (hovering[commandName]) {
+			return (<i className="fa fa-pen" />);
+		} else {
+			return null;
+		}
+	};
+
+	const renderError = (error: Error) => {
+		return (
+			<div style={styles.warning}>
+				<p style={styles.text}>
+					<span>
+						{error.message}
+					</span>
+				</p>
+			</div>
+		);
+	};
+
+	const renderKeymapRow = ({ command, accelerator }: KeymapItem) => {
+		const handleClick = () => enableEditing(command);
+		const handleMouseEnter = () => enableHovering(command);
+		const handleMouseLeave = () => disableHovering(command);
+		const cellContent =
+			<div style={styles.tableCell} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+				{editing[command] ?
+					<ShortcutRecorder
+						onSave={handleSave}
+						onReset={handleReset}
+						onCancel={handleCancel}
+						onError={handleError}
+						initialAccelerator={accelerator || '' /* Because accelerator is null if disabled */}
+						commandName={command}
+						themeId={themeId}
+					/> :
+					<div style={styles.tableCellContent} onClick={handleClick}>
+						{accelerator
+							? renderAccelerator(accelerator)
+							: <div style={styles.disabled}>{_('Disabled')}</div>
+						}
+					</div>
+				}
+				<div style={styles.tableCellStatus} onClick={handleClick}>
+					{renderStatus(command)}
+				</div>
+			</div>;
+
+		return (
+			<tr key={command}>
+				<td style={styles.tableCommandColumn}>
+					{getLabel(command)}
+				</td>
+				<td style={styles.tableShortcutColumn}>
+					{cellContent}
+				</td>
+			</tr>
+		);
+	};
+
+	return (
+		<div>
+			{keymapError && renderError(keymapError)}
+			<div style={styles.container}>
+				<div style={styles.actionsContainer}>
+					<input
+						value={filter}
+						onChange={event => setFilter(event.target.value)}
+						placeholder={_('Search...')}
+						style={styles.filterInput}
+					/>
+					<button style={styles.inlineButton} onClick={handleImport}>{_('Import')}</button>
+					<button style={styles.inlineButton} onClick={handleExport}>{_('Export')}</button>
+				</div>
+
+				<table style={styles.table}>
+					<thead>
+						<tr>
+							<th style={styles.tableCommandColumn}>{_('Command')}</th>
+							<th style={styles.tableShortcutColumn}>{_('Keyboard Shortcut')}</th>
+						</tr>
+					</thead>
+					<tbody>
+						{keymapItems.filter(({ command }) => {
+							const filterLowerCase = filter.toLowerCase();
+							return (command.toLowerCase().includes(filterLowerCase) || getLabel(command).toLowerCase().includes(filterLowerCase));
+						}).map(item => renderKeymapRow(item))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
+};
+

ElectronClient/gui/KeymapConfig/ShortcutRecorder.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { useState, useEffect, KeyboardEvent } from 'react';
+
+import KeymapService from '../../lib/services/KeymapService';
+import styles_ from './styles';
+
+const { _ } = require('lib/locale');
+const keymapService = KeymapService.instance();
+
+export interface ShortcutRecorderProps {
+	onSave: (event: { commandName: string, accelerator: string }) => void,
+	onReset: (event: { commandName: string }) => void,
+	onCancel: (event: { commandName: string }) => void,
+	onError: (event: { recorderError: Error }) => void,
+	initialAccelerator: string
+	commandName: string,
+	themeId: number
+}
+
+export const ShortcutRecorder = ({ onSave, onReset, onCancel, onError, initialAccelerator, commandName, themeId }: ShortcutRecorderProps) => {
+	const styles = styles_(themeId);
+
+	const [accelerator, setAccelerator] = useState(initialAccelerator);
+	const [saveAllowed, setSaveAllowed] = useState(true);
+
+	useEffect(() => {
+		try {
+			// Only perform validations if there's an accelerator provided
+			// Otherwise performing a save means that it's going to be disabled
+			if (accelerator) {
+				keymapService.validateAccelerator(accelerator);
+				keymapService.validateKeymap({ accelerator, command: commandName });
+			}
+
+			// Discard previous errors
+			onError({ recorderError: null });
+			setSaveAllowed(true);
+		} catch (recorderError) {
+			onError({ recorderError });
+			setSaveAllowed(false);
+		}
+	}, [accelerator]);
+
+	const handleKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
+		event.preventDefault();
+		const newAccelerator = keymapService.domToElectronAccelerator(event);
+
+		switch (newAccelerator) {
+		case 'Enter':
+			if (saveAllowed) return onSave({ commandName, accelerator });
+			break;
+		case 'Escape':
+			return onCancel({ commandName });
+		case 'Backspace':
+		case 'Delete':
+			return setAccelerator('');
+		default:
+			setAccelerator(newAccelerator);
+		}
+	};
+
+	return (
+		<div style={styles.recorderContainer}>
+			<input
+				value={accelerator}
+				placeholder={_('Press the shortcut')}
+				onKeyDown={handleKeydown}
+				style={styles.recorderInput}
+				title={_('Press the shortcut and then press ENTER. Or, press BACKSPACE to clear the shortcut.')}
+				readOnly
+				autoFocus
+			/>
+
+			<button style={styles.inlineButton} disabled={!saveAllowed} onClick={() => onSave({ commandName, accelerator })}>
+				{_('Save')}
+			</button>
+			<button style={styles.inlineButton} onClick={() => onReset({ commandName })}>
+				{_('Restore')}
+			</button>
+			<button style={styles.inlineButton} onClick={() => onCancel({ commandName })}>
+				{_('Cancel')}
+			</button>
+		</div>
+	);
+};