Electron release v1.0.203

Squashed commit of the following:

commit 5fde36f5c3fa7c7efbce6d81f48fe841c823e88c
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 18:43:20 2020 +0100

    Cannot fix for now

commit 251284db3c8b7da6db83f3e06fd19bfdc8b8dd3f
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 18:31:08 2020 +0100

    Fixed print to multiple PDFs logic

commit 00d9557996fb984b400fe650594150ae2681e03f
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 17:49:20 2020 +0100

    Fixed local search in TinyMCE

commit 46778bf0a79f3bba9ddbc27389fadce4f8944507
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 17:37:31 2020 +0100

    Restored note toolbar buttons

commit 3e623c98f0a1cf08bf7d0136f0c8982c5e1ddcd8
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 12:30:57 2020 +0100

    Various fixes and moved note toolbar to left of title

commit 790262fe9df5b08d4a619e5244d2906047b39855
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 11:21:11 2020 +0100

    Clean up

commit cea30f42e69014ecabda6fa5083199a1ba7b7510
Author: Laurent Cozic <laurent@cozic.net>
Date:   Sun May 3 11:08:23 2020 +0100

    Fixed note loading in TinyMCE

.eslintignore

@@ -22,12 +22,13 @@ Clipper/dist
 Clipper/icons
 Clipper/popup/build
 Clipper/popup/config/webpack.config.js
+Clipper/popup/config/webpack_config_at_eject_time.js
 Clipper/popup/node_modules
 Clipper/popup/scripts/build.js
 docs/
 ElectronClient/dist
-ElectronClient/gui/editors/TinyMCE/plugins/lists.js
 ElectronClient/lib
+ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/plugins/lists.js
 ElectronClient/lib/vendor/sjcl-rn.js
 ElectronClient/lib/vendor/sjcl.js
 ElectronClient/locales
@@ -58,15 +59,32 @@ Tools/PortableAppsLauncher
 Modules/TinyMCE/IconPack/postinstall.js
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
-ElectronClient/gui/editors/PlainEditor.js
-ElectronClient/gui/editors/TinyMCE.js
 ElectronClient/gui/MultiNoteActions.js
 ElectronClient/gui/NoteContentPropertiesDialog.js
-ElectronClient/gui/NoteText2.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/TinyMCE/TinyMCE.js
+ElectronClient/gui/NoteEditor/NoteEditor.js
+ElectronClient/gui/NoteEditor/styles/index.js
+ElectronClient/gui/NoteEditor/utils/index.js
+ElectronClient/gui/NoteEditor/utils/resourceHandling.js
+ElectronClient/gui/NoteEditor/utils/types.js
+ElectronClient/gui/NoteEditor/utils/useDropHandler.js
+ElectronClient/gui/NoteEditor/utils/useFormNote.js
+ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.js
+ElectronClient/gui/NoteEditor/utils/useMessageHandler.js
+ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.js
+ElectronClient/gui/NoteEditor/utils/useSearchMarkers.js
+ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.js
+ElectronClient/gui/NoteToolbar/NoteToolbar.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js
-ElectronClient/gui/utils/NoteText.js
 ReactNativeClient/lib/AsyncActionQueue.js
+ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.js
+ReactNativeClient/lib/hooks/usePrevious.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
 		"react/jsx-uses-react": "error",
 		"react/jsx-uses-vars": "error",
 		"no-unused-vars": "error",
+		"@typescript-eslint/no-unused-vars": "error",
 		"no-constant-condition": 0,
 		"no-prototype-builtins": 0,
 		// This error is always a false positive so far since it detects

.github/stale.yml

@@ -1,15 +1,11 @@
 # Configuration for probot-stale - https://github.com/probot/stale
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 90
+daysUntilStale: 45
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 7
 # Issues with these labels will never be considered stale
 exemptLabels:
   - "good first issue"
-  - "essential"
-  - "essential-reviewed"
-  - "help wanted"
-  - "nice to have"
   - "upstream"
   - "backlog"
   - "high"

.gitignore

@@ -50,15 +50,32 @@ Tools/commit_hook.txt
 *.map
 
 # AUTO-GENERATED - EXCLUDED TYPESCRIPT BUILD
-ElectronClient/gui/editors/PlainEditor.js
-ElectronClient/gui/editors/TinyMCE.js
 ElectronClient/gui/MultiNoteActions.js
 ElectronClient/gui/NoteContentPropertiesDialog.js
-ElectronClient/gui/NoteText2.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/TinyMCE/TinyMCE.js
+ElectronClient/gui/NoteEditor/NoteEditor.js
+ElectronClient/gui/NoteEditor/styles/index.js
+ElectronClient/gui/NoteEditor/utils/index.js
+ElectronClient/gui/NoteEditor/utils/resourceHandling.js
+ElectronClient/gui/NoteEditor/utils/types.js
+ElectronClient/gui/NoteEditor/utils/useDropHandler.js
+ElectronClient/gui/NoteEditor/utils/useFormNote.js
+ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.js
+ElectronClient/gui/NoteEditor/utils/useMessageHandler.js
+ElectronClient/gui/NoteEditor/utils/useNoteSearchBar.js
+ElectronClient/gui/NoteEditor/utils/useSearchMarkers.js
+ElectronClient/gui/NoteEditor/utils/useWindowCommandHandler.js
+ElectronClient/gui/NoteToolbar/NoteToolbar.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js
-ElectronClient/gui/utils/NoteText.js
 ReactNativeClient/lib/AsyncActionQueue.js
+ReactNativeClient/lib/hooks/useImperativeHandlerDebugger.js
+ReactNativeClient/lib/hooks/usePrevious.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/fence.js
 ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/mermaid.js

BUILD.md

@@ -34,8 +34,8 @@ First you need to setup React Native to build projects with native code. For thi
 Then:
 
 	cd ReactNativeClient
-	npm start-android
-	# Or: npm start-ios
+	npm run start-android
+	# Or: npm run start-ios
 
 To run the iOS application, it might be easier to open the file `ios/Joplin.xcworkspace` on XCode and run the app from there.
 

CliClient/locales-build/index.js

@@ -37,41 +37,41 @@ 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":89};
+stats['ar'] = {"percentDone":87};
 stats['eu'] = {"percentDone":37};
-stats['bs_BA'] = {"percentDone":82};
-stats['bg_BG'] = {"percentDone":74};
+stats['bs_BA'] = {"percentDone":81};
+stats['bg_BG'] = {"percentDone":73};
 stats['ca'] = {"percentDone":58};
 stats['hr_HR'] = {"percentDone":31};
-stats['cs_CZ'] = {"percentDone":91};
-stats['da_DK'] = {"percentDone":82};
-stats['de_DE'] = {"percentDone":99};
-stats['et_EE'] = {"percentDone":73};
+stats['cs_CZ'] = {"percentDone":90};
+stats['da_DK'] = {"percentDone":81};
+stats['de_DE'] = {"percentDone":97};
+stats['et_EE'] = {"percentDone":72};
 stats['en_GB'] = {"percentDone":100};
 stats['en_US'] = {"percentDone":100};
-stats['es_ES'] = {"percentDone":91};
-stats['eo'] = {"percentDone":42};
-stats['fr_FR'] = {"percentDone":92};
-stats['gl_ES'] = {"percentDone":48};
-stats['it_IT'] = {"percentDone":97};
-stats['nl_NL'] = {"percentDone":94};
-stats['nl_BE'] = {"percentDone":38};
-stats['nb_NO'] = {"percentDone":99};
+stats['es_ES'] = {"percentDone":90};
+stats['eo'] = {"percentDone":41};
+stats['fr_FR'] = {"percentDone":91};
+stats['gl_ES'] = {"percentDone":47};
+stats['it_IT'] = {"percentDone":96};
+stats['nl_NL'] = {"percentDone":92};
+stats['nl_BE'] = {"percentDone":37};
+stats['nb_NO'] = {"percentDone":97};
 stats['fa'] = {"percentDone":36};
-stats['pl_PL'] = {"percentDone":85};
-stats['pt_PT'] = {"percentDone":87};
-stats['pt_BR'] = {"percentDone":89};
-stats['ro'] = {"percentDone":38};
+stats['pl_PL'] = {"percentDone":84};
+stats['pt_PT'] = {"percentDone":98};
+stats['pt_BR'] = {"percentDone":98};
+stats['ro'] = {"percentDone":37};
 stats['sl_SI'] = {"percentDone":47};
-stats['sv'] = {"percentDone":65};
-stats['th_TH'] = {"percentDone":59};
-stats['vi'] = {"percentDone":95};
-stats['tr_TR'] = {"percentDone":98};
-stats['el_GR'] = {"percentDone":90};
-stats['ru_RU'] = {"percentDone":98};
-stats['sr_RS'] = {"percentDone":80};
-stats['zh_CN'] = {"percentDone":98};
-stats['zh_TW'] = {"percentDone":88};
-stats['ja_JP'] = {"percentDone":99};
-stats['ko'] = {"percentDone":96};
+stats['sv'] = {"percentDone":78};
+stats['th_TH'] = {"percentDone":58};
+stats['vi'] = {"percentDone":94};
+stats['tr_TR'] = {"percentDone":100};
+stats['el_GR'] = {"percentDone":89};
+stats['ru_RU'] = {"percentDone":97};
+stats['sr_RS'] = {"percentDone":78};
+stats['zh_CN'] = {"percentDone":97};
+stats['zh_TW'] = {"percentDone":98};
+stats['ja_JP'] = {"percentDone":100};
+stats['ko'] = {"percentDone":95};
 module.exports = { locales: locales, stats: stats };

CliClient/package-lock.json

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

CliClient/package.json

@@ -27,7 +27,7 @@
     ],
     "owner": "Laurent Cozic"
   },
-  "version": "1.0.162",
+  "version": "1.0.163",
   "bin": {
     "joplin": "./main.js"
   },

CliClient/tests/integration_ForwardBackwardNoteHistory.js

@@ -1,138 +0,0 @@
-require('app-module-path').addPath(__dirname);
-const { asyncTest, id, ids, createNTestFolders, createNTestNotes, TestApp } = require('test-utils.js');
-
-const { time } = require('lib/time-utils.js');
-
-
-let testApp = null;
-
-const goBackWard = (state) => {
-	const lastItem = state.backwardHistoryNotes[state.backwardHistoryNotes.length - 1];
-	testApp.dispatch({ type: 'FOLDER_AND_NOTE_SELECT', noteId: lastItem.id, folderId: lastItem.parent_id, historyAction: 'pop' });
-};
-
-const goForward = (state) => {
-	const lastItem = state.forwardHistoryNotes[state.forwardHistoryNotes.length - 1];
-	testApp.dispatch({ type: 'FOLDER_AND_NOTE_SELECT', noteId: lastItem.id, folderId: lastItem.parent_id, historyAction: 'push' });
-};
-
-describe('integration_ForwardBackwardNoteHistory', function() {
-
-	beforeEach(async (done) => {
-		testApp = new TestApp();
-		await testApp.start(['--no-welcome']);
-		done();
-	});
-
-	afterEach(async (done) => {
-		if (testApp !== null) await testApp.destroy();
-		testApp = null;
-		done();
-	});
-
-	it('should save history when navigating through notes', asyncTest(async () => {
-		// setup
-		const folders = await createNTestFolders(2);
-		await time.msleep(100);
-		const notes0 = await createNTestNotes(5, folders[0]);
-		// let notes1 = await createNTestNotes(5, folders[1]);
-		await time.msleep(100);
-
-		testApp.dispatch({ type: 'FOLDER_SELECT', id: id(folders[0]) });
-		await time.msleep(100);
-
-		let state = testApp.store().getState();
-		expect(state.backwardHistoryNotes).toEqual([]);
-		expect(state.forwardHistoryNotes).toEqual([]);
-
-		testApp.dispatch({ type: 'NOTE_SELECT', id: notes0[3].id, historyAction: 'goto' });
-		await time.msleep(100);
-		testApp.dispatch({ type: 'NOTE_SELECT', id: notes0[2].id, historyAction: 'goto' });
-		await time.msleep(100);
-		testApp.dispatch({ type: 'NOTE_SELECT', id: notes0[1].id, historyAction: 'goto' });
-		await time.msleep(100);
-		testApp.dispatch({ type: 'NOTE_SELECT', id: notes0[0].id, historyAction: 'goto' });
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes0[3], notes0[2], notes0[1]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual([]);
-
-		goBackWard(state);
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes0[3], notes0[2]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual(ids([notes0[0]]));
-
-		goBackWard(state);
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes0[3]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual(ids([notes0[0], notes0[1]]));
-
-		goForward(state);
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes0[3], notes0[2]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual(ids([notes0[0]]));
-
-		testApp.dispatch({ type: 'NOTE_SELECT', id: notes0[4].id, historyAction: 'goto' });
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes0[3], notes0[2], notes0[1]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual([]);
-
-
-	}));
-
-
-	it('should save history when navigating through notebooks', asyncTest(async () => {
-		const folders = await createNTestFolders(2);
-		await time.msleep(100);
-		const notes0 = await createNTestNotes(5, folders[0]);
-		const notes1 = await createNTestNotes(5, folders[1]);
-		await time.msleep(100);
-
-		testApp.dispatch({ type: 'FOLDER_SELECT', id: id(folders[0]) });
-		await time.msleep(100);
-
-		let state = testApp.store().getState();
-		expect(state.backwardHistoryNotes).toEqual([]);
-		expect(state.forwardHistoryNotes).toEqual([]);
-
-		testApp.dispatch({ type: 'FOLDER_SELECT', id: id(folders[1]), historyAction: 'goto' });
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4]])); // notes0[4] was last created
-		expect(ids(state.forwardHistoryNotes)).toEqual([]);
-
-		testApp.dispatch({ type: 'FOLDER_SELECT', id: id(folders[0]), historyAction: 'goto' });
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes1[4]]));
-		expect(state.forwardHistoryNotes).toEqual([]);
-
-		goBackWard(state);
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4]]));
-		expect(ids(state.forwardHistoryNotes)).toEqual(ids([notes0[4]]));
-
-		goForward(state);
-		await time.msleep(100);
-
-		state = testApp.store().getState();
-		expect(ids(state.backwardHistoryNotes)).toEqual(ids([notes0[4], notes1[4]]));
-		expect(state.forwardHistoryNotes).toEqual([]);
-
-
-	}));
-
-});

CliClient/tests/models_BaseItem.js

@@ -69,4 +69,39 @@ describe('models_BaseItem', function() {
 		expect(unserialized.user_created_time).toEqual(note.user_created_time);
 		expect(unserialized.user_updated_time).toEqual(note.user_updated_time);
 	}));
+
+	it('should serialize geolocation fields', asyncTest(async () => {
+		const folder = await Folder.save({ title: 'folder' });
+		let note = await Note.save({ title: 'note', parent_id: folder.id });
+		note = await Note.load(note.id);
+
+		let serialized = await Note.serialize(note);
+		let unserialized = await Note.unserialize(serialized);
+
+		expect(unserialized.latitude).toEqual('0.00000000');
+		expect(unserialized.longitude).toEqual('0.00000000');
+		expect(unserialized.altitude).toEqual('0.0000');
+
+		await Note.updateGeolocation(note.id);
+		note = await Note.load(note.id);
+
+		serialized = await Note.serialize(note);
+		unserialized = await Note.unserialize(serialized);
+
+		expect(unserialized.latitude).toEqual(note.latitude);
+		expect(unserialized.longitude).toEqual(note.longitude);
+		expect(unserialized.altitude).toEqual(note.altitude);
+	}));
+
+	it('should serialize and unserialize notes', asyncTest(async () => {
+		const folder = await Folder.save({ title: 'folder' });
+		const note = await Note.save({ title: 'note', parent_id: folder.id });
+		await Note.updateGeolocation(note.id);
+
+		const noteBefore = await Note.load(note.id);
+		const serialized = await Note.serialize(noteBefore);
+		const noteAfter = await Note.unserialize(serialized);
+
+		expect(noteAfter).toEqual(noteBefore);
+	}));
 });

CliClient/tests/models_Note.js

@@ -6,6 +6,7 @@ const { time } = require('lib/time-utils.js');
 const { sortedIds, createNTestNotes, asyncTest, fileContentEqual, setupDatabase, setupDatabaseAndSynchronizer, db, synchronizer, fileApi, sleep, clearDatabase, switchClient, syncTargetId, objectsEqual, checkThrowAsync } = require('test-utils.js');
 const Folder = require('lib/models/Folder.js');
 const Note = require('lib/models/Note.js');
+const Setting = require('lib/models/Setting.js');
 const BaseModel = require('lib/BaseModel.js');
 const ArrayUtils = require('lib/ArrayUtils.js');
 const { shim } = require('lib/shim');
@@ -216,4 +217,54 @@ describe('models_Note', function() {
 		const hasThrown = await checkThrowAsync(async () => await Folder.copyToFolder(note1.id, folder2.id));
 		expect(hasThrown).toBe(true);
 	}));
+
+	it('should convert resource paths from internal to external paths', asyncTest(async () => {
+		const resourceDirName = Setting.value('resourceDirName');
+		const resourceDir = Setting.value('resourceDir');
+		const r1 = await shim.createResourceFromPath(`${__dirname}/../tests/support/photo.jpg`);
+		const r2 = await shim.createResourceFromPath(`${__dirname}/../tests/support/photo.jpg`);
+
+		const testCases = [
+			[
+				false,
+				'',
+				'',
+			],
+			[
+				true,
+				'',
+				'',
+			],
+			[
+				false,
+				`![](:/${r1.id})`,
+				`![](${resourceDirName}/${r1.id}.jpg)`,
+			],
+			[
+				false,
+				`![](:/${r1.id}) ![](:/${r1.id}) ![](:/${r2.id})`,
+				`![](${resourceDirName}/${r1.id}.jpg) ![](${resourceDirName}/${r1.id}.jpg) ![](${resourceDirName}/${r2.id}.jpg)`,
+			],
+			[
+				true,
+				`![](:/${r1.id})`,
+				`![](file://${resourceDir}/${r1.id}.jpg)`,
+			],
+			[
+				true,
+				`![](:/${r1.id}) ![](:/${r1.id}) ![](:/${r2.id})`,
+				`![](file://${resourceDir}/${r1.id}.jpg) ![](file://${resourceDir}/${r1.id}.jpg) ![](file://${resourceDir}/${r2.id}.jpg)`,
+			],
+		];
+
+		for (const testCase of testCases) {
+			const [useAbsolutePaths, input, expected] = testCase;
+			const internalToExternal = await Note.replaceResourceInternalToExternalLinks(input, { useAbsolutePaths });
+			expect(expected).toBe(internalToExternal);
+
+			const externalToInternal = await Note.replaceResourceExternalToInternalLinks(internalToExternal, { useAbsolutePaths });
+			expect(externalToInternal).toBe(input);
+		}
+	}));
+
 });

CliClient/tests/reducer.js

@@ -36,41 +36,6 @@ function initTestState(folders, selectedFolderIndex, notes, selectedNoteIndexes,
 	return state;
 }
 
-function goToNote(notes, selectedNoteIndexes, state) {
-	if (selectedNoteIndexes != null) {
-		const selectedIds = [];
-		for (let i = 0; i < selectedNoteIndexes.length; i++) {
-			selectedIds.push(notes[selectedNoteIndexes[i]].id);
-		}
-		state = reducer(state, { type: 'NOTE_SELECT', ids: selectedIds, historyAction: 'goto' });
-	}
-	return state;
-}
-
-function goBackWard(state) {
-	if (!state.backwardHistoryNotes.length)	return state;
-	const lastItem = state.backwardHistoryNotes[state.backwardHistoryNotes.length - 1];
-	state = reducer(state, {
-		type: 'FOLDER_AND_NOTE_SELECT',
-		noteId: lastItem.id ,
-		folderId: lastItem.parent_id ,
-		historyAction: 'pop',
-	});
-	return state;
-}
-
-function goForward(state) {
-	if (!state.forwardHistoryNotes.length)	return state;
-	const nextItem = state.forwardHistoryNotes[state.forwardHistoryNotes.length - 1];
-	state = reducer(state, {
-		type: 'FOLDER_AND_NOTE_SELECT',
-		noteId: nextItem.id ,
-		folderId: nextItem.parent_id ,
-		historyAction: 'push',
-	});
-	return state;
-}
-
 function createExpectedState(items, keepIndexes, selectedIndexes) {
 	const expected = { items: [], selectedIds: [] };
 
@@ -380,118 +345,4 @@ describe('Reducer', function() {
 		expect(state.selectedNoteIds).toEqual(expected.selectedIds);
 	}));
 
-	it('should remove deleted note from history', asyncTest(async () => {
-
-		// create 1 folder
-		const folders = await createNTestFolders(1);
-		// create 5 notes
-		const notes = await createNTestNotes(5, folders[0]);
-		// select the 1st folder and the 1st note
-		let state = initTestState(folders, 0, notes, [0]);
-
-		// select second note
-		state = goToNote(notes, [1], state);
-		// select third note
-		state = goToNote(notes, [2], state);
-		// select fourth note
-		state = goToNote(notes, [3], state);
-
-		// expect history to contain first, second and third note
-		expect(state.backwardHistoryNotes.length).toEqual(3);
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0, 3)));
-
-		// delete third note
-		state = reducer(state, { type: 'NOTE_DELETE', id: notes[2].id });
-
-		// expect history to not contain third note
-		expect(getIds(state.backwardHistoryNotes)).not.toContain(notes[2].id);
-	}));
-
-	it('should remove all notes of a deleted notebook from history', asyncTest(async () => {
-		const folders = await createNTestFolders(2);
-		const notes = [];
-		for (let i = 0; i < folders.length; i++) {
-			notes.push(...await createNTestNotes(3, folders[i]));
-		}
-
-		let state = initTestState(folders, 0, notes.slice(0,3), [0]);
-		state = goToNote(notes, [1], state);
-		state = goToNote(notes, [2], state);
-
-
-		// go to second folder
-		state = reducer(state, { type: 'FOLDER_SELECT', id: folders[1].id, historyAction: 'goto' });
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0, 3)));
-
-		// delete the first folder
-		state = reducer(state, { type: 'FOLDER_DELETE', id: folders[0].id });
-
-		expect(getIds(state.backwardHistoryNotes)).toEqual([]);
-	}));
-
-	it('should maintain history correctly when going backward and forward', asyncTest(async () => {
-		const folders = await createNTestFolders(2);
-		const notes = [];
-		for (let i = 0; i < folders.length; i++) {
-			notes.push(...await createNTestNotes(5, folders[i]));
-		}
-
-		let state = initTestState(folders, 0, notes.slice(0,5), [0]);
-		state = goToNote(notes, [1], state);
-		state = goToNote(notes, [2], state);
-		state = goToNote(notes, [3], state);
-		state = goToNote(notes, [4], state);
-
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0, 4)));
-
-		state = goBackWard(state);
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0,3)));
-		expect(getIds(state.forwardHistoryNotes)).toEqual(getIds(notes.slice(4, 5)));
-
-		state = goBackWard(state);
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0,2)));
-		// because we push the last seen note to stack.
-		expect(getIds(state.forwardHistoryNotes)).toEqual(getIds([notes[4], notes[3]]));
-
-		state = goForward(state);
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0,3)));
-		expect(getIds(state.forwardHistoryNotes)).toEqual(getIds([notes[4]]));
-
-		state = goForward(state);
-		expect(getIds(state.backwardHistoryNotes)).toEqual(getIds(notes.slice(0,4)));
-		expect(getIds(state.forwardHistoryNotes)).toEqual([]);
-	}));
-
-	it('should remember the last seen note of a notebook', asyncTest(async () => {
-		const folders = await createNTestFolders(2);
-		const notes = [];
-		for (let i = 0; i < folders.length; i++) {
-			notes.push(...await createNTestNotes(5, folders[i]));
-		}
-
-		let state = initTestState(folders, 0, notes.slice(0,5), [0]);
-
-		state = goToNote(notes, [1], state);
-		state = goToNote(notes, [2], state);
-		state = goToNote(notes, [3], state);
-		state = goToNote(notes, [4], state); // last seen note is notes[4]
-
-
-		// go to second folder
-		state = reducer(state, { type: 'FOLDER_SELECT', id: folders[1].id, historyAction: 'goto' });
-		state = goToNote(notes, [5], state);
-		state = goToNote(notes, [6], state);
-
-
-		// return to first folder
-		state = reducer(state, { type: 'FOLDER_SELECT', id: folders[0].id, historyAction: 'goto' });
-
-		expect(state.lastSelectedNotesIds.Folder[folders[0].id]).toEqual([notes[4].id]);
-
-		// return to second folder
-		state = reducer(state, { type: 'FOLDER_SELECT', id: folders[1].id, historyAction: 'goto' });
-		expect(state.lastSelectedNotesIds.Folder[folders[1].id]).toEqual([notes[6].id]);
-
-	}));
-
 });

CliClient/tests/services_SearchEngine.js

@@ -92,6 +92,32 @@ describe('services_SearchEngine', function() {
 		expect(rows[2].id).toBe(n1.id);
 	}));
 
+	it('should tell where the results are found', asyncTest(async () => {
+		const notes = [
+			await Note.save({ title: 'abcd efgh', body: 'abcd' }),
+			await Note.save({ title: 'abcd' }),
+			await Note.save({ title: 'efgh', body: 'abcd' }),
+		];
+
+		await engine.syncTables();
+
+		const testCases = [
+			['abcd', ['title', 'body'], ['title'], ['body']],
+			['efgh', ['title'], [], ['title']],
+		];
+
+		for (const testCase of testCases) {
+			const rows = await engine.search(testCase[0]);
+
+			for (let i = 0; i < notes.length; i++) {
+				const row = rows.find(row => row.id === notes[i].id);
+				const actual = row ? row.fields.sort().join(',') : '';
+				const expected = testCase[i + 1].sort().join(',');
+				expect(expected).toBe(actual);
+			}
+		}
+	}));
+
 	it('should order search results by relevance (2)', asyncTest(async () => {
 		// 1
 		const n1 = await Note.save({ title: 'abcd efgh', body: 'XX abcd XX efgh' });
@@ -318,7 +344,11 @@ describe('services_SearchEngine', function() {
 		let rows;
 
 		const testCases = [
-			['did-not-match', 'did-not-match'],
+			// "-" is considered a word delimiter so it is stripped off
+			// when indexing the notes. "did-not-match" is translated to
+			// three word "did", "not", "match"
+			['did-not-match', 'did not match'],
+			['did-not-match', '"did-not-match"'],
 			['does match', 'does match'],
 		];
 
@@ -332,8 +362,20 @@ describe('services_SearchEngine', function() {
 			rows = await engine.search(query);
 			expect(rows.length).toBe(1);
 
+
 			await Note.delete(n.id);
 		}
 	}));
 
+	it('should allow using basic search', asyncTest(async () => {
+		const n1 = await Note.save({ title: '- [ ] abcd' });
+		const n2 = await Note.save({ title: '[ ] abcd' });
+
+		await engine.syncTables();
+
+		expect((await engine.search('"- [ ]"', { searchType: SearchEngine.SEARCH_TYPE_FTS })).length).toBe(0);
+		expect((await engine.search('"- [ ]"', { searchType: SearchEngine.SEARCH_TYPE_BASIC })).length).toBe(1);
+		expect((await engine.search('"[ ]"', { searchType: SearchEngine.SEARCH_TYPE_BASIC })).length).toBe(2);
+	}));
+
 });

CliClient/tests/test-utils.js

@@ -143,6 +143,7 @@ async function switchClient(id) {
 	Resource.encryptionService_ = encryptionServices_[id];
 	BaseItem.revisionService_ = revisionServices_[id];
 
+	Setting.setConstant('resourceDirName', resourceDirName(id));
 	Setting.setConstant('resourceDir', resourceDir(id));
 
 	await Setting.load();
@@ -213,9 +214,14 @@ async function setupDatabase(id = null) {
 	if (!Setting.value('clientId')) Setting.setValue('clientId', uuid.create());
 }
 
+function resourceDirName(id = null) {
+	if (id === null) id = currentClient_;
+	return `resources-${id}`;
+}
+
 function resourceDir(id = null) {
 	if (id === null) id = currentClient_;
-	return `${__dirname}/data/resources-${id}`;
+	return `${__dirname}/data/${resourceDirName(id)}`;
 }
 
 async function setupDatabaseAndSynchronizer(id = null) {

Clipper/popup/config/webpack_config_at_eject_time.js

@@ -0,0 +1,676 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const safePostCssParser = require('postcss-safe-parser');
+const ManifestPlugin = require('webpack-manifest-plugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const paths = require('./paths');
+const modules = require('./modules');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+
+const postcssNormalize = require('postcss-normalize');
+
+const appPackageJson = require(paths.appPackageJson);
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+const imageInlineSizeLimit = parseInt(
+  process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
+);
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+  const isEnvDevelopment = webpackEnv === 'development';
+  const isEnvProduction = webpackEnv === 'production';
+
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
+  // Webpack uses `publicPath` to determine where the app is being served from.
+  // It requires a trailing slash, or the file assets will get an incorrect path.
+  // In development, we always serve from the root. This makes config easier.
+  const publicPath = isEnvProduction
+    ? paths.servedPath
+    : isEnvDevelopment && '/';
+  // Some apps do not use client-side routing with pushState.
+  // For these, "homepage" can be set to "." to enable relative asset paths.
+  const shouldUseRelativeAssetPaths = publicPath === './';
+
+  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+  const publicUrl = isEnvProduction
+    ? publicPath.slice(0, -1)
+    : isEnvDevelopment && '';
+  // Get environment variables to inject into our app.
+  const env = getClientEnvironment(publicUrl);
+
+  // common function to get style loaders
+  const getStyleLoaders = (cssOptions, preProcessor) => {
+    const loaders = [
+      isEnvDevelopment && require.resolve('style-loader'),
+      isEnvProduction && {
+        loader: MiniCssExtractPlugin.loader,
+        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
+      },
+      {
+        loader: require.resolve('css-loader'),
+        options: cssOptions,
+      },
+      {
+        // Options for PostCSS as we reference these options twice
+        // Adds vendor prefixing based on your specified browser support in
+        // package.json
+        loader: require.resolve('postcss-loader'),
+        options: {
+          // Necessary for external CSS imports to work
+          // https://github.com/facebook/create-react-app/issues/2677
+          ident: 'postcss',
+          plugins: () => [
+            require('postcss-flexbugs-fixes'),
+            require('postcss-preset-env')({
+              autoprefixer: {
+                flexbox: 'no-2009',
+              },
+              stage: 3,
+            }),
+            // Adds PostCSS Normalize as the reset css with default options,
+            // so that it honors browserslist config in package.json
+            // which in turn let's users customize the target behavior as per their needs.
+            postcssNormalize(),
+          ],
+          sourceMap: isEnvProduction && shouldUseSourceMap,
+        },
+      },
+    ].filter(Boolean);
+    if (preProcessor) {
+      loaders.push(
+        {
+          loader: require.resolve('resolve-url-loader'),
+          options: {
+            sourceMap: isEnvProduction && shouldUseSourceMap,
+          },
+        },
+        {
+          loader: require.resolve(preProcessor),
+          options: {
+            sourceMap: true,
+          },
+        }
+      );
+    }
+    return loaders;
+  };
+
+  return {
+    mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+    // Stop compilation early in production
+    bail: isEnvProduction,
+    devtool: isEnvProduction
+      ? shouldUseSourceMap
+        ? 'source-map'
+        : false
+      : isEnvDevelopment && 'cheap-module-source-map',
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    entry: [
+      // Include an alternative client for WebpackDevServer. A client's job is to
+      // connect to WebpackDevServer by a socket and get notified about changes.
+      // When you save a file, the client will either apply hot updates (in case
+      // of CSS changes), or refresh the page (in case of JS changes). When you
+      // make a syntax error, this client will display a syntax error overlay.
+      // Note: instead of the default WebpackDevServer client, we use a custom one
+      // to bring better experience for Create React App users. You can replace
+      // the line below with these two lines if you prefer the stock client:
+      // require.resolve('webpack-dev-server/client') + '?/',
+      // require.resolve('webpack/hot/dev-server'),
+      isEnvDevelopment &&
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+      // Finally, this is your app's code:
+      paths.appIndexJs,
+      // We include the app code last so that if there is a runtime error during
+      // initialization, it doesn't blow up the WebpackDevServer client, and
+      // changing JS code would still trigger a refresh.
+    ].filter(Boolean),
+    output: {
+      // The build folder.
+      path: isEnvProduction ? paths.appBuild : undefined,
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: isEnvDevelopment,
+      // There will be one main bundle, and one file per asynchronous chunk.
+      // In development, it does not produce real files.
+      filename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].js'
+        : isEnvDevelopment && 'static/js/bundle.js',
+      // TODO: remove this when upgrading to webpack 5
+      futureEmitAssets: true,
+      // There are also additional JS chunk files if you use code splitting.
+      chunkFilename: isEnvProduction
+        ? 'static/js/[name].[contenthash:8].chunk.js'
+        : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      // We use "/" in development.
+      publicPath: publicPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: isEnvProduction
+        ? info =>
+            path
+              .relative(paths.appSrc, info.absoluteResourcePath)
+              .replace(/\\/g, '/')
+        : isEnvDevelopment &&
+          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+      // Prevents conflicts when multiple Webpack runtimes (from different apps)
+      // are used on the same page.
+      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
+      // this defaults to 'window', but by setting it to 'this' then
+      // module chunks which are built will work in web workers as well.
+      globalObject: 'this',
+    },
+    optimization: {
+      minimize: isEnvProduction,
+      minimizer: [
+        // This is only used in production mode
+        new TerserPlugin({
+          terserOptions: {
+            parse: {
+              // We want terser to parse ecma 8 code. However, we don't want it
+              // to apply any minification steps that turns valid ecma 5 code
+              // into invalid ecma 5 code. This is why the 'compress' and 'output'
+              // sections only apply transformations that are ecma 5 safe
+              // https://github.com/facebook/create-react-app/pull/4234
+              ecma: 8,
+            },
+            compress: {
+              ecma: 5,
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebook/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+              // Disabled because of an issue with Terser breaking valid code:
+              // https://github.com/facebook/create-react-app/issues/5250
+              // Pending further investigation:
+              // https://github.com/terser-js/terser/issues/120
+              inline: 2,
+            },
+            mangle: {
+              safari10: true,
+            },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
+            output: {
+              ecma: 5,
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebook/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          sourceMap: shouldUseSourceMap,
+        }),
+        // This is only used in production mode
+        new OptimizeCSSAssetsPlugin({
+          cssProcessorOptions: {
+            parser: safePostCssParser,
+            map: shouldUseSourceMap
+              ? {
+                  // `inline: false` forces the sourcemap to be output into a
+                  // separate file
+                  inline: false,
+                  // `annotation: true` appends the sourceMappingURL to the end of
+                  // the css file, helping the browser find the sourcemap
+                  annotation: true,
+                }
+              : false,
+          },
+          cssProcessorPluginOptions: {
+              preset: ['default', { minifyFontValues: { removeQuotes: false } }]
+          }
+        }),
+      ],
+      // Automatically split vendor and commons
+      // https://twitter.com/wSokra/status/969633336732905474
+      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+      splitChunks: {
+        chunks: 'all',
+        name: false,
+      },
+      // Keep the runtime chunk separated to enable long term caching
+      // https://twitter.com/wSokra/status/969679223278505985
+      // https://github.com/facebook/create-react-app/issues/5358
+      runtimeChunk: {
+        name: entrypoint => `runtime-${entrypoint.name}`,
+      },
+    },
+    resolve: {
+      // This allows you to set a fallback for where Webpack should look for modules.
+      // We placed these paths second because we want `node_modules` to "win"
+      // if there are any conflicts. This matches Node resolution mechanism.
+      // https://github.com/facebook/create-react-app/issues/253
+      modules: ['node_modules', paths.appNodeModules].concat(
+        modules.additionalModulePaths || []
+      ),
+      // These are the reasonable defaults supported by the Node ecosystem.
+      // We also include JSX as a common component filename extension to support
+      // some tools, although we do not recommend using it, see:
+      // https://github.com/facebook/create-react-app/issues/290
+      // `web` extension prefixes have been added for better support
+      // for React Native Web.
+      extensions: paths.moduleFileExtensions
+        .map(ext => `.${ext}`)
+        .filter(ext => useTypeScript || !ext.includes('ts')),
+      alias: {
+        // Support React Native Web
+        // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+        'react-native': 'react-native-web',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
+        ...(modules.webpackAliases || {}),
+      },
+      plugins: [
+        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+        // guards against forgotten dependencies and such.
+        PnpWebpackPlugin,
+        // Prevents users from importing files from outside of src/ (or node_modules/).
+        // This often causes confusion because we only process files within src/ with babel.
+        // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+        // please link the files into your node_modules/ and let module-resolution kick in.
+        // Make sure your source files are compiled, as they will not be processed in any way.
+        new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      ],
+    },
+    resolveLoader: {
+      plugins: [
+        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // from the current package.
+        PnpWebpackPlugin.moduleLoader(module),
+      ],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        { parser: { requireEnsure: false } },
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        {
+          test: /\.(js|mjs|jsx|ts|tsx)$/,
+          enforce: 'pre',
+          use: [
+            {
+              options: {
+                cache: true,
+                formatter: require.resolve('react-dev-utils/eslintFormatter'),
+                eslintPath: require.resolve('eslint'),
+                resolvePluginsRelativeTo: __dirname,
+                
+              },
+              loader: require.resolve('eslint-loader'),
+            },
+          ],
+          include: paths.appSrc,
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // Process application JS with Babel.
+            // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+            {
+              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              include: paths.appSrc,
+              loader: require.resolve('babel-loader'),
+              options: {
+                customize: require.resolve(
+                  'babel-preset-react-app/webpack-overrides'
+                ),
+                
+                plugins: [
+                  [
+                    require.resolve('babel-plugin-named-asset-import'),
+                    {
+                      loaderMap: {
+                        svg: {
+                          ReactComponent:
+                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                        },
+                      },
+                    },
+                  ],
+                ],
+                // This is a feature of `babel-loader` for webpack (not Babel itself).
+                // It enables caching results in ./node_modules/.cache/babel-loader/
+                // directory for faster rebuilds.
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                compact: isEnvProduction,
+              },
+            },
+            // Process any JS outside of the app with Babel.
+            // Unlike the application JS, we only compile the standard ES features.
+            {
+              test: /\.(js|mjs)$/,
+              exclude: /@babel(?:\/|\\{1,2})runtime/,
+              loader: require.resolve('babel-loader'),
+              options: {
+                babelrc: false,
+                configFile: false,
+                compact: false,
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app/dependencies'),
+                    { helpers: true },
+                  ],
+                ],
+                cacheDirectory: true,
+                // See #6846 for context on why cacheCompression is disabled
+                cacheCompression: false,
+                
+                // Babel sourcemaps are needed for debugging into node_modules
+                // code.  Without the options below, debuggers like VSCode
+                // show incorrect code and set breakpoints on the wrong lines.
+                sourceMaps: shouldUseSourceMap,
+                inputSourceMap: shouldUseSourceMap,
+              },
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use MiniCSSExtractPlugin to extract that CSS
+            // to a file, but in development "style" loader enables hot editing
+            // of CSS.
+            // By default we support CSS Modules with the extension .module.css
+            {
+              test: cssRegex,
+              exclude: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+              }),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+            // using the extension .module.css
+            {
+              test: cssModuleRegex,
+              use: getStyleLoaders({
+                importLoaders: 1,
+                sourceMap: isEnvProduction && shouldUseSourceMap,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
+              }),
+            },
+            // Opt-in support for SASS (using .scss or .sass extensions).
+            // By default we support SASS Modules with the
+            // extensions .module.scss or .module.sass
+            {
+              test: sassRegex,
+              exclude: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                },
+                'sass-loader'
+              ),
+              // Don't consider CSS imports dead code even if the
+              // containing package claims to have no side effects.
+              // Remove this when webpack adds a warning or an error for this.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+            },
+            // Adds support for CSS Modules, but using SASS
+            // using the extension .module.scss or .module.sass
+            {
+              test: sassModuleRegex,
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+                'sass-loader'
+              ),
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              loader: require.resolve('file-loader'),
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise be processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+              options: {
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
+            // ** STOP ** Are you adding a new loader?
+            // Make sure to add the new loader(s) before the "file" loader.
+          ],
+        },
+      ],
+    },
+    plugins: [
+      // Generates an `index.html` file with the <script> injected.
+      new HtmlWebpackPlugin(
+        Object.assign(
+          {},
+          {
+            inject: true,
+            template: paths.appHtml,
+          },
+          isEnvProduction
+            ? {
+                minify: {
+                  removeComments: true,
+                  collapseWhitespace: true,
+                  removeRedundantAttributes: true,
+                  useShortDoctype: true,
+                  removeEmptyAttributes: true,
+                  removeStyleLinkTypeAttributes: true,
+                  keepClosingSlash: true,
+                  minifyJS: true,
+                  minifyCSS: true,
+                  minifyURLs: true,
+                },
+              }
+            : undefined
+        )
+      ),
+      // Inlines the webpack runtime script. This script is too small to warrant
+      // a network request.
+      // https://github.com/facebook/create-react-app/issues/5358
+      isEnvProduction &&
+        shouldInlineRuntimeChunk &&
+        new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
+      // Makes some environment variables available in index.html.
+      // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In production, it will be an empty string unless you specify "homepage"
+      // in `package.json`, in which case it will be the pathname of that URL.
+      // In development, this will be an empty string.
+      new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+      // This gives some necessary context to module not found errors, such as
+      // the requesting resource.
+      new ModuleNotFoundPlugin(paths.appPath),
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+      // It is absolutely essential that NODE_ENV is set to production
+      // during a production build.
+      // Otherwise React will be compiled in the very slow development mode.
+      new webpack.DefinePlugin(env.stringified),
+      // This is necessary to emit hot updates (currently CSS only):
+      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Watcher doesn't work well if you mistype casing in a path so we use
+      // a plugin that prints an error when you attempt to do this.
+      // See https://github.com/facebook/create-react-app/issues/240
+      isEnvDevelopment && new CaseSensitivePathsPlugin(),
+      // If you require a missing module and then `npm install` it, you still have
+      // to restart the development server for Webpack to discover it. This plugin
+      // makes the discovery automatic so you don't have to restart.
+      // See https://github.com/facebook/create-react-app/issues/186
+      isEnvDevelopment &&
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      isEnvProduction &&
+        new MiniCssExtractPlugin({
+          // Options similar to the same options in webpackOptions.output
+          // both options are optional
+          filename: 'static/css/[name].[contenthash:8].css',
+          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+        }),
+      // Generate an asset manifest file with the following content:
+      // - "files" key: Mapping of all asset filenames to their corresponding
+      //   output file so that tools can pick it up without having to parse
+      //   `index.html`
+      // - "entrypoints" key: Array of files which are included in `index.html`,
+      //   can be used to reconstruct the HTML if necessary
+      new ManifestPlugin({
+        fileName: 'asset-manifest.json',
+        publicPath: publicPath,
+        generate: (seed, files, entrypoints) => {
+          const manifestFiles = files.reduce((manifest, file) => {
+            manifest[file.name] = file.path;
+            return manifest;
+          }, seed);
+          const entrypointFiles = entrypoints.main.filter(
+            fileName => !fileName.endsWith('.map')
+          );
+
+          return {
+            files: manifestFiles,
+            entrypoints: entrypointFiles,
+          };
+        },
+      }),
+      // Moment.js is an extremely popular library that bundles large locale files
+      // by default due to how Webpack interprets its code. This is a practical
+      // solution that requires the user to opt into importing specific locales.
+      // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+      // You can remove this if you don't use Moment.js:
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      // Generate a service worker script that will precache, and keep up to date,
+      // the HTML & assets that are part of the Webpack build.
+      isEnvProduction &&
+        new WorkboxWebpackPlugin.GenerateSW({
+          clientsClaim: true,
+          exclude: [/\.map$/, /asset-manifest\.json$/],
+          importWorkboxFrom: 'cdn',
+          navigateFallback: publicUrl + '/index.html',
+          navigateFallbackBlacklist: [
+            // Exclude URLs starting with /_, as they're likely an API call
+            new RegExp('^/_'),
+            // Exclude any URLs whose last part seems to be a file extension
+            // as they're likely a resource and not a SPA route.
+            // URLs containing a "?" character won't be blacklisted as they're likely
+            // a route with query params (e.g. auth callbacks).
+            new RegExp('/[^/?]+\\.[^/]+$'),
+          ],
+        }),
+      // TypeScript type checking
+      useTypeScript &&
+        new ForkTsCheckerWebpackPlugin({
+          typescript: resolve.sync('typescript', {
+            basedir: paths.appNodeModules,
+          }),
+          async: isEnvDevelopment,
+          useTypescriptIncrementalApi: true,
+          checkSyntacticErrors: true,
+          resolveModuleNameModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
+          resolveTypeReferenceDirectiveModule: process.versions.pnp
+            ? `${__dirname}/pnpTs.js`
+            : undefined,
+          tsconfig: paths.appTsConfig,
+          reportFiles: [
+            '**',
+            '!**/__tests__/**',
+            '!**/?(*.)(spec|test).*',
+            '!**/src/setupProxy.*',
+            '!**/src/setupTests.*',
+          ],
+          silent: true,
+          // The formatter is invoked directly in WebpackDevServerUtils during development
+          formatter: isEnvProduction ? typescriptFormatter : undefined,
+        }),
+    ].filter(Boolean),
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      module: 'empty',
+      dgram: 'empty',
+      dns: 'mock',
+      fs: 'empty',
+      http2: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty',
+    },
+    // Turn off performance processing because we utilize
+    // our own hints via the FileSizeReporter
+    performance: false,
+  };
+};

Clipper/popup/package.json

@@ -62,7 +62,8 @@
   },
   "devDependencies": {
     "cra-build-watch": "^3.2.0",
-    "fs-extra": "^6.0.1"
+    "fs-extra": "^6.0.1",
+    "react-scripts": "^3.3.1"
   },
   "browserslist": [
     ">0.2%",

ElectronClient/ElectronAppWrapper.js

@@ -1,4 +1,4 @@
-const { BrowserWindow, Tray, screen, globalShortcut } = require('electron');
+const { BrowserWindow, Tray, screen } = require('electron');
 const { shim } = require('lib/shim');
 const url = require('url');
 const path = require('path');
@@ -277,15 +277,6 @@ class ElectronAppWrapper {
 		return false;
 	}
 
-	toggleWindowVisilibity() {
-		if (this.win_.isVisible()) {
-			this.win_.hide();
-		} else {
-			this.win_.setVisibleOnAllWorkspaces(true);
-			this.win_.show();
-		}
-	}
-
 	async start() {
 		// Since we are doing other async things before creating the window, we might miss
 		// the "ready" event. So we use the function below to make sure that the app is ready.
@@ -296,17 +287,8 @@ class ElectronAppWrapper {
 
 		this.createWindow();
 
-		const registerGlobalShortcut = globalShortcut.register('CommandOrControl+Alt+J', () => {
-			this.toggleWindowVisilibity();
-		});
-
-		if (!registerGlobalShortcut) {
-			console.warn('Could not register global shortcut');
-		}
-
 		this.electronApp_.on('before-quit', () => {
 			this.willQuitApp_ = true;
-			globalShortcut.unregisterAll();
 		});
 
 		this.electronApp_.on('window-all-closed', () => {

ElectronClient/InteropServiceHelper.js

@@ -3,7 +3,6 @@ const { bridge } = require('electron').remote.require('./bridge');
 const InteropService = require('lib/services/InteropService');
 const Setting = require('lib/models/Setting');
 const Note = require('lib/models/Note.js');
-const Folder = require('lib/models/Folder.js');
 const { friendlySafeFilename } = require('lib/path-utils');
 const md5 = require('md5');
 const url = require('url');
@@ -52,27 +51,40 @@ class InteropServiceHelper {
 			win = bridge().newBrowserWindow(windowOptions);
 
 			return new Promise((resolve, reject) => {
-				win.webContents.on('did-finish-load', async () => {
+				win.webContents.on('did-finish-load', () => {
 
-					if (target === 'pdf') {
-						try {
-							const data = await win.webContents.printToPDF(options);
-							resolve(data);
-						} catch (error) {
-							reject(error);
-						} finally {
-							cleanup();
+					// did-finish-load will trigger when most assets are done loading, probably
+					// images, JavaScript and CSS. However it seems it might trigger *before*
+					// all fonts are loaded, which will break for example Katex rendering.
+					// So we need to add an additional timer to make sure fonts are loaded
+					// as it doesn't seem there's any easy way to figure that out.
+					setTimeout(async () => {
+						if (target === 'pdf') {
+							try {
+								const data = await win.webContents.printToPDF(options);
+								resolve(data);
+							} catch (error) {
+								reject(error);
+							} finally {
+								cleanup();
+							}
+						} else {
+							// TODO: it is crashing at this point :(
+							// Appears to be a Chromium bug: https://github.com/electron/electron/issues/19946
+							// Maybe can be fixed by doing everything from main process?
+							// i.e. creating a function `print()` that takes the `htmlFile` variable as input.
+
+							win.webContents.print(options, (success, reason) => {
+								// TODO: This is correct but broken in Electron 4. Need to upgrade to 5+
+								// It calls the callback right away with "false" even if the document hasn't be print yet.
+
+								cleanup();
+								if (!success && reason !== 'cancelled') reject(new Error(`Could not print: ${reason}`));
+								resolve();
+							});
 						}
-					} else {
-						win.webContents.print(options, (success, reason) => {
-							// TODO: This is correct but broken in Electron 4. Need to upgrade to 5+
-							// It calls the callback right away with "false" even if the document hasn't be print yet.
+					}, 2000);
 
-							cleanup();
-							if (!success && reason !== 'cancelled') reject(new Error(`Could not print: ${reason}`));
-							resolve();
-						});
-					}
 				});
 
 				win.loadURL(url.format({
@@ -95,27 +107,12 @@ class InteropServiceHelper {
 		return this.exportNoteTo_('printer', noteId, options);
 	}
 
-	static async defaultFilename(noteIds, fileExtension) {
-		const note = await Note.load(noteIds[0]);
+	static async defaultFilename(noteId, fileExtension) {
+		if (!noteId) return '';
+		const note = await Note.load(noteId);
 		// In a rare case the passed not will be null, use the id for filename
-		if (note === null) {
-			const filename = friendlySafeFilename(noteIds[0], 100);
-
-			return `${filename}.${fileExtension}`;
-		}
-		const folder = await Folder.load(note.parent_id);
-
-		const filename = friendlySafeFilename(note.title, 100);
-
-		// In a less rare case the folder will be null, just ignore it
-		if (folder === null) {
-			return `${filename}.${fileExtension}`;
-		}
-
-		const foldername = friendlySafeFilename(folder.title, 100);
-
-		// friendlySafeFilename assumes that the file extension is added after
-		return `${foldername} - ${filename}.${fileExtension}`;
+		const filename = friendlySafeFilename(note ? note.title : noteId, 100);
+		return `${filename}.${fileExtension}`;
 	}
 
 	static async export(dispatch, module, options = null) {
@@ -124,9 +121,10 @@ class InteropServiceHelper {
 		let path = null;
 
 		if (module.target === 'file') {
+			const noteId = options.sourceNoteIds && options.sourceNoteIds.length ? options.sourceNoteIds[0] : null;
 			path = bridge().showSaveDialog({
 				filters: [{ name: module.description, extensions: module.fileExtensions }],
-				defaultPath: await this.defaultFilename(options.sourceNoteIds, module.fileExtensions[0]),
+				defaultPath: await this.defaultFilename(noteId, module.fileExtensions[0]),
 			});
 		} else {
 			path = bridge().showOpenDialog({

ElectronClient/app.js

@@ -134,8 +134,6 @@ class Application extends BaseApplication {
 							paneOptions = ['editor', 'both'];
 						} else if (state.settings.layoutButtonSequence === Setting.LAYOUT_VIEWER_SPLIT) {
 							paneOptions = ['viewer', 'both'];
-						} else if (state.settings.layoutButtonSequence === Setting.LAYOUT_SPLIT_WYSIWYG) {
-							paneOptions = ['both', 'wysiwyg'];
 						} else {
 							paneOptions = ['editor', 'viewer', 'both'];
 						}
@@ -547,6 +545,7 @@ class Application extends BaseApplication {
 				this.dispatch({
 					type: 'WINDOW_COMMAND',
 					name: 'print',
+					noteIds: this.store().getState().selectedNoteIds,
 				});
 			},
 		};
@@ -890,33 +889,6 @@ class Application extends BaseApplication {
 				}, {
 					type: 'separator',
 					screens: ['Main'],
-				}, {
-					id: 'edit:commandStartExternalEditing',
-					label: _('Edit in external editor'),
-					screens: ['Main'],
-					accelerator: 'CommandOrControl+E',
-					click: () => {
-						this.dispatch({
-							type: 'WINDOW_COMMAND',
-							name: 'commandStartExternalEditing',
-						});
-					},
-				}, {
-					id: 'edit:setTags',
-					label: _('Tags'),
-					screens: ['Main'],
-					accelerator: 'CommandOrControl+Alt+T',
-					click: () => {
-						const selectedNoteIds = this.store().getState().selectedNoteIds;
-						this.dispatch({
-							type: 'WINDOW_COMMAND',
-							name: 'setTags',
-							noteIds: selectedNoteIds,
-						});
-					},
-				}, {
-					type: 'separator',
-					screens: ['Main'],
 				}, {
 					id: 'edit:focusSearch',
 					label: _('Search in all the notes'),
@@ -1031,10 +1003,22 @@ class Application extends BaseApplication {
 					},
 					accelerator: 'CommandOrControl+0',
 				}, {
+					// There are 2 shortcuts for the action 'zoom in', mainly to increase the user experience.
+					// Most applications handle this the same way. These applications indicate Ctrl +, but actually mean Ctrl =.
+					// In fact they allow both: + and =. On the English keyboard layout - and = are used without the shift key.
+					// So to use Ctrl + would mean to use the shift key, but this is not the case in any of the apps that show Ctrl +.
+					// Additionally it allows the use of the plus key on the numpad.
 					label: _('Zoom In'),
 					click: () => {
 						Setting.incValue('windowContentZoomFactor', 10);
 					},
+					accelerator: 'CommandOrControl+Plus',
+				}, {
+					label: _('Zoom In'),
+					visible: false,
+					click: () => {
+						Setting.incValue('windowContentZoomFactor', 10);
+					},
 					accelerator: 'CommandOrControl+=',
 				}, {
 					label: _('Zoom Out'),
@@ -1044,6 +1028,46 @@ class Application extends BaseApplication {
 					accelerator: 'CommandOrControl+-',
 				}],
 			},
+			note: {
+				label: _('&Note'),
+				submenu: [{
+					id: 'edit:commandStartExternalEditing',
+					label: _('Edit in external editor'),
+					screens: ['Main'],
+					accelerator: 'CommandOrControl+E',
+					click: () => {
+						this.dispatch({
+							type: 'WINDOW_COMMAND',
+							name: 'commandStartExternalEditing',
+						});
+					},
+				}, {
+					id: 'edit:setTags',
+					label: _('Tags'),
+					screens: ['Main'],
+					accelerator: 'CommandOrControl+Alt+T',
+					click: () => {
+						const selectedNoteIds = this.store().getState().selectedNoteIds;
+						this.dispatch({
+							type: 'WINDOW_COMMAND',
+							name: 'setTags',
+							noteIds: selectedNoteIds,
+						});
+					},
+				}, {
+					type: 'separator',
+					screens: ['Main'],
+				}, {
+					label: _('Statistics...'),
+					click: () => {
+						this.dispatch({
+							type: 'WINDOW_COMMAND',
+							name: 'commandContentProperties',
+							// text: this.state.note.body,
+						});
+					},
+				}],
+			},
 			tools: {
 				label: _('&Tools'),
 				submenu: toolsItems,
@@ -1124,6 +1148,7 @@ class Application extends BaseApplication {
 			rootMenus.file,
 			rootMenus.edit,
 			rootMenus.view,
+			rootMenus.note,
 			rootMenus.tools,
 			rootMenus.help,
 		];

ElectronClient/eventManager.js

@@ -18,6 +18,10 @@ class EventManager {
 		return this.emitter_.removeListener(eventName, callback);
 	}
 
+	off(eventName, callback) {
+		return this.removeListener(eventName, callback);
+	}
+
 }
 
 const eventManager = new EventManager();

ElectronClient/gui/Header.jsx

@@ -134,6 +134,8 @@ class HeaderComponent extends React.Component {
 	}
 
 	makeButton(key, style, options) {
+		const theme = themeStyle(this.props.theme);
+
 		let icon = null;
 		if (options.iconName) {
 			const iconStyle = {
@@ -158,6 +160,20 @@ class HeaderComponent extends React.Component {
 
 		const title = options.title ? options.title : '';
 
+		if (options.type === 'checkbox' && options.checked) {
+			finalStyle.backgroundColor = theme.selectedColor;
+			finalStyle.borderWidth = 1;
+			finalStyle.borderTopColor = theme.selectedDividerColor;
+			finalStyle.borderLeftColor = theme.selectedDividerColor;
+			finalStyle.borderTopStyle = 'solid';
+			finalStyle.borderLeftStyle = 'solid';
+			finalStyle.paddingLeft++;
+			finalStyle.paddingTop++;
+			finalStyle.paddingBottom--;
+			finalStyle.paddingRight--;
+			finalStyle.boxSizing = 'border-box';
+		}
+
 		return (
 			<a
 				className={classes.join(' ')}
@@ -256,6 +272,8 @@ class HeaderComponent extends React.Component {
 			height: theme.headerHeight,
 			display: 'flex',
 			alignItems: 'center',
+			paddingTop: 1,
+			paddingBottom: 1,
 			paddingLeft: theme.headerButtonHPadding,
 			paddingRight: theme.headerButtonHPadding,
 			color: theme.color,