Desktop: Resolves #51: Add way to manually order notes by dragging them (#3235)

* Allow custom sorting

* Implement UI

* Set order from message box

* Fixed mistake

* Update NoteListItem.tsx

* Desktop: Fixed date popup dialog overflow issue inside info dialog

.eslintignore

@@ -84,6 +84,7 @@ 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/NoteListItem.js
 ElectronClient/gui/NoteToolbar/NoteToolbar.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js

.gitignore

@@ -74,6 +74,7 @@ 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/NoteListItem.js
 ElectronClient/gui/NoteToolbar/NoteToolbar.js
 ElectronClient/gui/ResourceScreen.js
 ElectronClient/gui/ShareNoteDialog.js

CliClient/tests/models_Note_CustomSortOrder.js

@@ -0,0 +1,188 @@
+/* eslint-disable no-unused-vars */
+
+require('app-module-path').addPath(__dirname);
+
+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');
+
+process.on('unhandledRejection', (reason, p) => {
+	console.log('Unhandled Rejection at: Promise', p, 'reason:', reason);
+});
+
+async function allItems() {
+	const folders = await Folder.all();
+	const notes = await Note.all();
+	return folders.concat(notes);
+}
+
+describe('models_Note_CustomSortOrder', function() {
+	beforeEach(async (done) => {
+		await setupDatabaseAndSynchronizer(1);
+		await switchClient(1);
+		done();
+	});
+
+	it('should set the order property when saving a note', asyncTest(async () => {
+		const now = Date.now();
+		const n1 = await Note.save({ title: 'testing' });
+		expect(n1.order).toBeGreaterThanOrEqual(now);
+
+		const n2 = await Note.save({ title: 'testing', order: 0 });
+		expect(n2.order).toBe(0);
+	}));
+
+	it('should insert notes at the specified position (order 0)', asyncTest(async () => {
+		// Notes always had an "order" property, but for a long time it wasn't used, and
+		// set to 0. For custom sorting to work though, it needs to be set to some number
+		// (which normally is the creation timestamp). So if the user tries to move notes
+		// in the middle of other notes with order = 0, the order of all these notes is
+		// initialised at this point.
+
+		const folder1 = await Folder.save({});
+		const folder2 = await Folder.save({});
+
+		const notes1 = [];
+		notes1.push(await Note.save({ order: 0, parent_id: folder1.id })); await time.msleep(2);
+		notes1.push(await Note.save({ order: 0, parent_id: folder1.id })); await time.msleep(2);
+		notes1.push(await Note.save({ order: 0, parent_id: folder1.id })); await time.msleep(2);
+
+		const notes2 = [];
+		notes2.push(await Note.save({ parent_id: folder2.id })); await time.msleep(2);
+		notes2.push(await Note.save({ parent_id: folder2.id })); await time.msleep(2);
+
+		const originalTimestamps = {};
+		for (const n of notes1) {
+			originalTimestamps[n.id] = {
+				user_created_time: n.user_created_time,
+				user_updated_time: n.user_updated_time,
+			};
+		}
+
+		await Note.insertNotesAt(folder1.id, notes2.map(n => n.id), 1);
+
+		const newNotes1 = [
+			await Note.load(notes1[0].id),
+			await Note.load(notes1[1].id),
+			await Note.load(notes1[2].id),
+		];
+
+		// Check that timestamps haven't changed - moving a note should not change the user timestamps
+		for (let i = 0; i < newNotes1.length; i++) {
+			const n = newNotes1[i];
+			expect(n.user_created_time).toBe(originalTimestamps[n.id].user_created_time);
+			expect(n.user_updated_time).toBe(originalTimestamps[n.id].user_updated_time);
+		}
+
+		const sortedNotes = await Note.previews(folder1.id, {
+			order: Note.customOrderByColumns(),
+		});
+
+		expect(sortedNotes.length).toBe(5);
+		expect(sortedNotes[0].id).toBe(notes1[2].id);
+		expect(sortedNotes[1].id).toBe(notes2[0].id);
+		expect(sortedNotes[2].id).toBe(notes2[1].id);
+		expect(sortedNotes[3].id).toBe(notes1[1].id);
+		expect(sortedNotes[4].id).toBe(notes1[0].id);
+	}));
+
+	it('should insert notes at the specified position (targets with same orders)', asyncTest(async () => {
+		// If the target notes all have the same order, inserting a note should work
+		// anyway, because the order of the other notes will be updated as needed.
+
+		const folder1 = await Folder.save({});
+
+		const notes = [];
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+
+		await Note.insertNotesAt(folder1.id, [notes[0].id], 1);
+
+		const sortedNotes = await Note.previews(folder1.id, {
+			order: Note.customOrderByColumns(),
+		});
+
+		expect(sortedNotes.length).toBe(4);
+		expect(sortedNotes[0].id).toBe(notes[3].id);
+		expect(sortedNotes[1].id).toBe(notes[0].id);
+		expect(sortedNotes[2].id).toBe(notes[2].id);
+		expect(sortedNotes[3].id).toBe(notes[1].id);
+	}));
+
+	it('should insert notes at the specified position (insert at end)', asyncTest(async () => {
+		const folder1 = await Folder.save({});
+
+		const notes = [];
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+
+		await Note.insertNotesAt(folder1.id, [notes[1].id], 4);
+
+		const sortedNotes = await Note.previews(folder1.id, {
+			fields: ['id', 'order', 'user_created_time'],
+			order: Note.customOrderByColumns(),
+		});
+
+		expect(sortedNotes.length).toBe(4);
+		expect(sortedNotes[0].id).toBe(notes[3].id);
+		expect(sortedNotes[1].id).toBe(notes[2].id);
+		expect(sortedNotes[2].id).toBe(notes[0].id);
+		expect(sortedNotes[3].id).toBe(notes[1].id);
+	}));
+
+	it('should insert notes at the specified position (insert at beginning)', asyncTest(async () => {
+		const folder1 = await Folder.save({});
+
+		const notes = [];
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+
+		await Note.insertNotesAt(folder1.id, [notes[2].id], 0);
+
+		const sortedNotes = await Note.previews(folder1.id, {
+			fields: ['id', 'order', 'user_created_time'],
+			order: Note.customOrderByColumns(),
+		});
+
+		expect(sortedNotes.length).toBe(4);
+		expect(sortedNotes[0].id).toBe(notes[2].id);
+		expect(sortedNotes[1].id).toBe(notes[3].id);
+		expect(sortedNotes[2].id).toBe(notes[1].id);
+		expect(sortedNotes[3].id).toBe(notes[0].id);
+	}));
+
+	it('should insert notes even if sources are not adjacent', asyncTest(async () => {
+		const folder1 = await Folder.save({});
+
+		const notes = [];
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+		notes.push(await Note.save({ order: 1000, parent_id: folder1.id })); await time.msleep(2);
+
+		await Note.insertNotesAt(folder1.id, [notes[1].id, notes[3].id], 0);
+
+		const sortedNotes = await Note.previews(folder1.id, {
+			fields: ['id', 'order', 'user_created_time'],
+			order: Note.customOrderByColumns(),
+		});
+
+		expect(sortedNotes.length).toBe(4);
+		expect(sortedNotes[0].id).toBe(notes[1].id);
+		expect(sortedNotes[1].id).toBe(notes[3].id);
+		expect(sortedNotes[2].id).toBe(notes[2].id);
+		expect(sortedNotes[3].id).toBe(notes[0].id);
+	}));
+
+});

ElectronClient/app.js

@@ -369,6 +369,7 @@ class Application extends BaseApplication {
 			sortItems.push({ type: 'separator' });
 
 			sortItems.push({
+				id: `sort:${type}:reverse`,
 				label: Setting.settingMetadata(`${type}.sortOrder.reverse`).label(),
 				type: 'checkbox',
 				checked: Setting.value(`${type}.sortOrder.reverse`),
@@ -1275,6 +1276,9 @@ class Application extends BaseApplication {
 			menuItem.enabled = selectedNoteIds.length === 1;
 		}
 
+		const sortNoteReverseItem = Menu.getApplicationMenu().getMenuItemById('sort:notes:reverse');
+		sortNoteReverseItem.enabled = state.settings['notes.sortOrder.field'] !== 'order';
+
 		const menuItem = Menu.getApplicationMenu().getMenuItemById('help:toggleDevTools');
 		menuItem.checked = state.devToolsVisible;
 	}

ElectronClient/gui/ItemList.jsx

@@ -32,6 +32,10 @@ class ItemList extends React.Component {
 		});
 	}
 
+	offsetTop() {
+		return this.listRef.current ? this.listRef.current.offsetTop : 0;
+	}
+
 	UNSAFE_componentWillMount() {
 		this.updateStateItemIndexes();
 	}
@@ -70,6 +74,22 @@ class ItemList extends React.Component {
 		this.updateStateItemIndexes();
 	}
 
+	// shouldComponentUpdate(nextProps, nextState) {
+	// 	for (const n in this.props) {
+	// 		if (this.props[n] !== nextProps[n]) {
+	// 			console.info('Props', n, nextProps[n]);
+	// 		}
+	// 	}
+
+	// 	for (const n in this.state) {
+	// 		if (this.state[n] !== nextState[n]) {
+	// 			console.info('State', n, nextState[n]);
+	// 		}
+	// 	}
+
+	// 	return true;
+	// }
+
 	render() {
 		const items = this.props.items;
 		const style = Object.assign({}, this.props.style, {
@@ -77,6 +97,8 @@ class ItemList extends React.Component {
 			overflowY: 'auto',
 		});
 
+		// if (this.props.disabled) style.opacity = 0.5;
+
 		if (!this.props.itemHeight) throw new Error('itemHeight is required');
 
 		const blankItem = function(key, height) {
@@ -86,7 +108,7 @@ class ItemList extends React.Component {
 		const itemComps = [blankItem('top', this.state.topItemIndex * this.props.itemHeight)];
 
 		for (let i = this.state.topItemIndex; i <= this.state.bottomItemIndex; i++) {
-			const itemComp = this.props.itemRenderer(items[i]);
+			const itemComp = this.props.itemRenderer(items[i], i);
 			itemComps.push(itemComp);
 		}
 

ElectronClient/gui/NoteList.jsx

@@ -4,43 +4,52 @@ const { connect } = require('react-redux');
 const { time } = require('lib/time-utils.js');
 const { themeStyle } = require('../theme.js');
 const BaseModel = require('lib/BaseModel');
-const markJsUtils = require('lib/markJsUtils');
 const { _ } = require('lib/locale.js');
 const { bridge } = require('electron').remote.require('./bridge');
 const eventManager = require('../eventManager');
-const Mark = require('mark.js/dist/mark.min.js');
 const SearchEngine = require('lib/services/SearchEngine');
 const Note = require('lib/models/Note');
+const Setting = require('lib/models/Setting');
 const NoteListUtils = require('./utils/NoteListUtils');
-const { replaceRegexDiacritics, pregQuote } = require('lib/string-utils');
+const NoteListItem = require('./NoteListItem').default;
 
 class NoteListComponent extends React.Component {
 	constructor() {
 		super();
 
+		this.itemHeight = 34;
+
+		this.state = {
+			dragOverTargetNoteIndex: null,
+		};
+
 		this.itemListRef = React.createRef();
 		this.itemAnchorRefs_ = {};
 
 		this.itemRenderer = this.itemRenderer.bind(this);
 		this.onKeyDown = this.onKeyDown.bind(this);
+		this.noteItem_titleClick = this.noteItem_titleClick.bind(this);
+		this.noteItem_noteDragOver = this.noteItem_noteDragOver.bind(this);
+		this.noteItem_noteDrop = this.noteItem_noteDrop.bind(this);
+		this.noteItem_checkboxClick = this.noteItem_checkboxClick.bind(this);
+		this.noteItem_dragStart = this.noteItem_dragStart.bind(this);
+		this.onGlobalDrop_ = this.onGlobalDrop_.bind(this);
+		this.registerGlobalDragEndEvent_ = this.registerGlobalDragEndEvent_.bind(this);
+		this.unregisterGlobalDragEndEvent_ = this.unregisterGlobalDragEndEvent_.bind(this);
 	}
 
 	style() {
+		if (this.styleCache_ && this.styleCache_[this.props.theme]) return this.styleCache_[this.props.theme];
+
 		const theme = themeStyle(this.props.theme);
 
-		const itemHeight = 34;
-
-		// Note: max-width is used to specifically prevent horizontal scrolling on Linux when the scrollbar is present in the note list.
-		// Pull request: https://github.com/laurent22/joplin/pull/2062
-		const itemWidth = '100%';
-
 		const style = {
 			root: {
 				backgroundColor: theme.backgroundColor,
 			},
 			listItem: {
-				maxWidth: itemWidth,
+				maxWidth: '100%',
-				height: itemHeight,
+				height: this.itemHeight,
 				boxSizing: 'border-box',
 				display: 'flex',
 				alignItems: 'stretch',
@@ -68,6 +77,9 @@ class NoteListComponent extends React.Component {
 			},
 		};
 
+		this.styleCache_ = {};
+		this.styleCache_[this.props.theme] = style;
+
 		return style;
 	}
 
@@ -93,160 +105,152 @@ class NoteListComponent extends React.Component {
 		menu.popup(bridge().window());
 	}
 
-	itemRenderer(item) {
+	onGlobalDrop_() {
-		const theme = themeStyle(this.props.theme);
+		this.unregisterGlobalDragEndEvent_();
-		const width = this.props.style.width;
+		this.setState({ dragOverTargetNoteIndex: null });
+	}
 
-		const onTitleClick = async (event, item) => {
+	registerGlobalDragEndEvent_() {
-			if (event.ctrlKey || event.metaKey) {
+		if (this.globalDragEndEventRegistered_) return;
-				event.preventDefault();
+		this.globalDragEndEventRegistered_ = true;
-				this.props.dispatch({
+		document.addEventListener('dragend', this.onGlobalDrop_);
-					type: 'NOTE_SELECT_TOGGLE',
+	}
-					id: item.id,
-				});
-			} else if (event.shiftKey) {
-				event.preventDefault();
-				this.props.dispatch({
-					type: 'NOTE_SELECT_EXTEND',
-					id: item.id,
-				});
-			} else {
-				this.props.dispatch({
-					type: 'NOTE_SELECT',
-					id: item.id,
-				});
-			}
-		};
 
-		const onDragStart = event => {
+	unregisterGlobalDragEndEvent_() {
-			let noteIds = [];
+		this.globalDragEndEventRegistered_ = false;
+		document.removeEventListener('dragend', this.onGlobalDrop_);
+	}
 
-			// Here there is two cases:
+	dragTargetNoteIndex_(event) {
-			// - If multiple notes are selected, we drag the group
+		return Math.abs(Math.round((event.clientY - this.itemListRef.current.offsetTop()) / this.itemHeight));
-			// - If only one note is selected, we drag the note that was clicked on (which might be different from the currently selected note)
+	}
-			if (this.props.selectedNoteIds.length >= 2) {
-				noteIds = this.props.selectedNoteIds;
-			} else {
-				const clickedNoteId = event.currentTarget.getAttribute('data-id');
-				if (clickedNoteId) noteIds.push(clickedNoteId);
-			}
 
-			if (!noteIds.length) return;
+	noteItem_noteDragOver(event) {
+		if (this.props.notesParentType !== 'Folder') return;
 
-			event.dataTransfer.setDragImage(new Image(), 1, 1);
+		const dt = event.dataTransfer;
-			event.dataTransfer.clearData();
-			event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
-		};
 
-		const onCheckboxClick = async event => {
+		if (dt.types.indexOf('text/x-jop-note-ids') >= 0) {
-			const checked = event.target.checked;
+			event.preventDefault();
-			const newNote = {
+			const newIndex = this.dragTargetNoteIndex_(event);
-				id: item.id,
+			if (this.state.dragOverTargetNoteIndex === newIndex) return;
-				todo_completed: checked ? time.unixMs() : 0,
+			this.registerGlobalDragEndEvent_();
-			};
+			this.setState({ dragOverTargetNoteIndex: newIndex });
-			await Note.save(newNote, { userSideValidation: true });
-			eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
-		};
-
-		const hPadding = 10;
-
-		let highlightedWords = [];
-		if (this.props.notesParentType === 'Search') {
-			const query = BaseModel.byId(this.props.searches, this.props.selectedSearchId);
-			if (query) {
-				const parsedQuery = SearchEngine.instance().parseQuery(query.query_pattern);
-				highlightedWords = SearchEngine.instance().allParsedQueryTerms(parsedQuery);
-			}
 		}
+	}
 
-		let style = Object.assign({ width: width, opacity: this.props.provisionalNoteIds.includes(item.id) ? 0.5 : 1 }, this.style().listItem);
+	async noteItem_noteDrop(event) {
+		if (this.props.notesParentType !== 'Folder') return;
 
-		if (this.props.selectedNoteIds.indexOf(item.id) >= 0) {
+		if (this.props.noteSortOrder !== 'order') {
-			style = Object.assign(style, this.style().listItemSelected);
+			const doIt = await bridge().showConfirmMessageBox(_('To manually sort the notes, the sort order must be changed to "%s" in the menu "%s" > "%s"', _('Custom order'), _('View'), _('Sort notes by')), {
-		}
+				buttons: [_('Do it now'), _('Cancel')],
-
-		// Setting marginBottom = 1 because it makes the checkbox looks more centered, at least on Windows
-		// but don't know how it will look in other OSes.
-		const checkbox = item.is_todo ? (
-			<div style={{ display: 'flex', height: style.height, alignItems: 'center', paddingLeft: hPadding }}>
-				<input
-					style={{ margin: 0, marginBottom: 1, marginRight: 5 }}
-					type="checkbox"
-					defaultChecked={!!item.todo_completed}
-					onClick={event => {
-						onCheckboxClick(event, item);
-					}}
-				/>
-			</div>
-		) : null;
-
-		let listItemTitleStyle = Object.assign({}, this.style().listItemTitle);
-		listItemTitleStyle.paddingLeft = !checkbox ? hPadding : 4;
-		if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, this.style().listItemTitleCompleted);
-
-		const displayTitle = Note.displayTitle(item);
-		let titleComp = null;
-
-		if (highlightedWords.length) {
-			const titleElement = document.createElement('span');
-			titleElement.textContent = displayTitle;
-			const mark = new Mark(titleElement, {
-				exclude: ['img'],
-				acrossElements: true,
 			});
+			if (!doIt) return;
 
-			mark.unmark();
+			Setting.setValue('notes.sortOrder.field', 'order');
-
+			return;
-			for (let i = 0; i < highlightedWords.length; i++) {
-				const w = highlightedWords[i];
-
-				markJsUtils.markKeyword(mark, w, {
-					pregQuote: pregQuote,
-					replaceRegexDiacritics: replaceRegexDiacritics,
-				});
-			}
-
-			// Note: in this case it is safe to use dangerouslySetInnerHTML because titleElement
-			// is a span tag that we created and that contains data that's been inserted as plain text
-			// with `textContent` so it cannot contain any XSS attacks. We use this feature because
-			// mark.js can only deal with DOM elements.
-			// https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
-			titleComp = <span dangerouslySetInnerHTML={{ __html: titleElement.outerHTML }}></span>;
-		} else {
-			titleComp = <span>{displayTitle}</span>;
 		}
 
-		const watchedIconStyle = {
+		// TODO: check that parent type is folder
-			paddingRight: 4,
+
-			color: theme.color,
+		const dt = event.dataTransfer;
+		this.unregisterGlobalDragEndEvent_();
+		this.setState({ dragOverTargetNoteIndex: null });
+
+		const targetNoteIndex = this.dragTargetNoteIndex_(event);
+		const noteIds = JSON.parse(dt.getData('text/x-jop-note-ids'));
+
+		Note.insertNotesAt(this.props.selectedFolderId, noteIds, targetNoteIndex);
+	}
+
+
+	async noteItem_checkboxClick(event, item) {
+		const checked = event.target.checked;
+		const newNote = {
+			id: item.id,
+			todo_completed: checked ? time.unixMs() : 0,
+		};
+		await Note.save(newNote, { userSideValidation: true });
+		eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
+	}
+
+	async noteItem_titleClick(event, item) {
+		if (event.ctrlKey || event.metaKey) {
+			event.preventDefault();
+			this.props.dispatch({
+				type: 'NOTE_SELECT_TOGGLE',
+				id: item.id,
+			});
+		} else if (event.shiftKey) {
+			event.preventDefault();
+			this.props.dispatch({
+				type: 'NOTE_SELECT_EXTEND',
+				id: item.id,
+			});
+		} else {
+			this.props.dispatch({
+				type: 'NOTE_SELECT',
+				id: item.id,
+			});
+		}
+	}
+
+	noteItem_dragStart(event) {
+		let noteIds = [];
+
+		// Here there is two cases:
+		// - If multiple notes are selected, we drag the group
+		// - If only one note is selected, we drag the note that was clicked on (which might be different from the currently selected note)
+		if (this.props.selectedNoteIds.length >= 2) {
+			noteIds = this.props.selectedNoteIds;
+		} else {
+			const clickedNoteId = event.currentTarget.getAttribute('data-id');
+			if (clickedNoteId) noteIds.push(clickedNoteId);
+		}
+
+		if (!noteIds.length) return;
+
+		event.dataTransfer.setDragImage(new Image(), 1, 1);
+		event.dataTransfer.clearData();
+		event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
+	}
+
+	itemRenderer(item, index) {
+		const highlightedWords = () => {
+			if (this.props.notesParentType === 'Search') {
+				const query = BaseModel.byId(this.props.searches, this.props.selectedSearchId);
+				if (query) {
+					const parsedQuery = SearchEngine.instance().parseQuery(query.query_pattern);
+					return SearchEngine.instance().allParsedQueryTerms(parsedQuery);
+				}
+			}
+			return [];
 		};
-		const watchedIcon = this.props.watchedNoteFiles.indexOf(item.id) < 0 ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
 
 		if (!this.itemAnchorRefs_[item.id]) this.itemAnchorRefs_[item.id] = React.createRef();
 		const ref = this.itemAnchorRefs_[item.id];
 
-		// Need to include "todo_completed" in key so that checkbox is updated when
+		return <NoteListItem
-		// item is changed via sync.
+			ref={ref}
-		return (
+			key={item.id}
-			<div key={`${item.id}_${item.todo_completed}`} className="list-item-container" style={style}>
+			style={this.style(this.props.theme)}
-				{checkbox}
+			item={item}
-				<a
+			index={index}
-					ref={ref}
+			theme={this.props.theme}
-					onContextMenu={event => this.itemContextMenu(event)}
+			width={this.props.style.width}
-					href="#"
+			dragItemIndex={this.state.dragOverTargetNoteIndex}
-					draggable={true}
+			highlightedWords={highlightedWords()}
-					style={listItemTitleStyle}
+			isProvisional={this.props.provisionalNoteIds.includes(item.id)}
-					onClick={event => {
+			isSelected={this.props.selectedNoteIds.indexOf(item.id) >= 0}
-						onTitleClick(event, item);
+			isWatched={this.props.watchedNoteFiles.indexOf(item.id) < 0}
-					}}
+			itemCount={this.props.notes.length}
-					onDragStart={event => onDragStart(event)}
+			onCheckboxClick={this.noteItem_checkboxClick}
-					data-id={item.id}
+			onDragStart={this.noteItem_dragStart}
-				>
+			onNoteDragOver={this.noteItem_noteDragOver}
-					{watchedIcon}
+			onNoteDrop={this.noteItem_noteDrop}
-					{titleComp}
+			onTitleClick={this.noteItem_titleClick}
-				</a>
+		/>;
-			</div>
-		);
 	}
 
 	itemAnchorRef(itemId) {
@@ -434,9 +438,8 @@ class NoteListComponent extends React.Component {
 	render() {
 		const theme = themeStyle(this.props.theme);
 		const style = this.props.style;
-		const notes = this.props.notes.slice();
 
-		if (!notes.length) {
+		if (!this.props.notes.length) {
 			const padding = 10;
 			const emptyDivStyle = Object.assign(
 				{
@@ -453,7 +456,16 @@ class NoteListComponent extends React.Component {
 			return <div style={emptyDivStyle}>{this.props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
 		}
 
-		return <ItemList ref={this.itemListRef} itemHeight={this.style().listItem.height} className={'note-list'} items={notes} style={style} itemRenderer={this.itemRenderer} onKeyDown={this.onKeyDown} />;
+		return <ItemList
+			ref={this.itemListRef}
+			disabled={this.props.isInsertingNotes}
+			itemHeight={this.style(this.props.theme).listItem.height}
+			className={'note-list'}
+			items={this.props.notes}
+			style={style}
+			itemRenderer={this.itemRenderer}
+			onKeyDown={this.onKeyDown}
+		/>;
 	}
 }
 
@@ -462,6 +474,7 @@ const mapStateToProps = state => {
 		notes: state.notes,
 		folders: state.folders,
 		selectedNoteIds: state.selectedNoteIds,
+		selectedFolderId: state.selectedFolderId,
 		theme: state.settings.theme,
 		notesParentType: state.notesParentType,
 		searches: state.searches,
@@ -469,6 +482,8 @@ const mapStateToProps = state => {
 		watchedNoteFiles: state.watchedNoteFiles,
 		windowCommand: state.windowCommand,
 		provisionalNoteIds: state.provisionalNoteIds,
+		isInsertingNotes: state.isInsertingNotes,
+		noteSortOrder: state.settings['notes.sortOrder.field'],
 	};
 };
 

ElectronClient/gui/NoteListItem.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
+const { themeStyle } = require('../theme.js');
+const Mark = require('mark.js/dist/mark.min.js');
+const markJsUtils = require('lib/markJsUtils');
+const Note = require('lib/models/Note');
+const { replaceRegexDiacritics, pregQuote } = require('lib/string-utils');
+
+interface NoteListItemProps {
+	theme: number,
+	width: number,
+	style: any,
+	dragItemIndex: number,
+	highlightedWords: string[],
+	index: number,
+	isProvisional: boolean,
+	isSelected: boolean,
+	isWatched: boolean
+	item: any,
+	itemCount: number,
+	onCheckboxClick: any,
+	onDragStart: any,
+	onNoteDragOver: any,
+	onNoteDrop: any,
+	onTitleClick: any,
+}
+
+function NoteListItem(props:NoteListItemProps, ref:any) {
+	const item = props.item;
+	const theme = themeStyle(props.theme);
+	const hPadding = 10;
+
+	const anchorRef = useRef(null);
+
+	useImperativeHandle(ref, () => {
+		return {
+			focus: function() {
+				if (anchorRef.current) anchorRef.current.focus();
+			},
+		};
+	});
+
+	let rootStyle = Object.assign({ width: props.width, opacity: props.isProvisional ? 0.5 : 1 }, props.style.listItem);
+
+	if (props.isSelected) rootStyle = Object.assign(rootStyle, props.style.listItemSelected);
+
+	if (props.dragItemIndex === props.index) {
+		rootStyle.borderTop = `2px solid ${theme.color}`;
+	} else if (props.index === props.itemCount - 1 && props.dragItemIndex >= props.itemCount) {
+		rootStyle.borderBottom = `2px solid ${theme.color}`;
+	}
+
+	const onTitleClick = useCallback((event) => {
+		props.onTitleClick(event, props.item);
+	}, [props.onTitleClick, props.item]);
+
+	const onCheckboxClick = useCallback((event) => {
+		props.onCheckboxClick(event, props.item);
+	}, [props.onCheckboxClick, props.item]);
+
+	// Setting marginBottom = 1 because it makes the checkbox looks more centered, at least on Windows
+	// but don't know how it will look in other OSes.
+	function renderCheckbox() {
+		if (!item.is_todo) return null;
+
+		return (
+			<div style={{ display: 'flex', height: rootStyle.height, alignItems: 'center', paddingLeft: hPadding }}>
+				<input
+					style={{ margin: 0, marginBottom: 1, marginRight: 5 }}
+					type="checkbox"
+					checked={!!item.todo_completed}
+					onChange={onCheckboxClick}
+				/>
+			</div>
+		);
+	}
+
+	let listItemTitleStyle = Object.assign({}, props.style.listItemTitle);
+	listItemTitleStyle.paddingLeft = !item.is_todo ? hPadding : 4;
+	if (item.is_todo && !!item.todo_completed) listItemTitleStyle = Object.assign(listItemTitleStyle, props.style.listItemTitleCompleted);
+
+	const displayTitle = Note.displayTitle(item);
+	let titleComp = null;
+
+	if (props.highlightedWords.length) {
+		const titleElement = document.createElement('span');
+		titleElement.textContent = displayTitle;
+		const mark = new Mark(titleElement, {
+			exclude: ['img'],
+			acrossElements: true,
+		});
+
+		mark.unmark();
+
+		for (let i = 0; i < props.highlightedWords.length; i++) {
+			const w = props.highlightedWords[i];
+
+			markJsUtils.markKeyword(mark, w, {
+				pregQuote: pregQuote,
+				replaceRegexDiacritics: replaceRegexDiacritics,
+			});
+		}
+
+		// Note: in this case it is safe to use dangerouslySetInnerHTML because titleElement
+		// is a span tag that we created and that contains data that's been inserted as plain text
+		// with `textContent` so it cannot contain any XSS attacks. We use this feature because
+		// mark.js can only deal with DOM elements.
+		// https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
+		titleComp = <span dangerouslySetInnerHTML={{ __html: titleElement.outerHTML }}></span>;
+	} else {
+		titleComp = <span>{displayTitle}</span>;
+	}
+
+	const watchedIconStyle = {
+		paddingRight: 4,
+		color: theme.color,
+	};
+	const watchedIcon = props.isWatched ? null : <i style={watchedIconStyle} className={'fa fa-share-square'}></i>;
+
+	// key={`${item.id}_${item.todo_completed}`}
+
+	// Need to include "todo_completed" in key so that checkbox is updated when
+	// item is changed via sync.
+	return (
+		<div className="list-item-container" style={rootStyle} onDragOver={props.onNoteDragOver} onDrop={props.onNoteDrop}>
+			{renderCheckbox()}
+			<a
+				ref={anchorRef}
+				onContextMenu={event => this.itemContextMenu(event)}
+				href="#"
+				draggable={true}
+				style={listItemTitleStyle}
+				onClick={onTitleClick}
+				onDragStart={props.onDragStart}
+				data-id={item.id}
+			>
+				{watchedIcon}
+				{titleComp}
+			</a>
+		</div>
+	);
+}
+
+export default forwardRef(NoteListItem);

ElectronClient/theme.js

@@ -128,7 +128,7 @@ function addExtraStyles(style) {
 	};
 
 	style.textStyle2 = Object.assign({}, style.textStyle,
-		{ color: style.color2 }
+		{ color: style.color2 },
 	);
 
 	style.textStyleMinor = Object.assign({}, style.textStyle,
@@ -142,7 +142,7 @@ function addExtraStyles(style) {
 		{
 			textDecoration: 'underline',
 			color: style.urlColor,
-		}
+		},
 	);
 
 	style.h1Style = Object.assign({},
@@ -151,7 +151,7 @@ function addExtraStyles(style) {
 			color: style.color,
 			fontSize: style.textStyle.fontSize * 1.5,
 			fontWeight: 'bold',
-		}
+		},
 	);
 
 	style.h2Style = Object.assign({},
@@ -160,7 +160,7 @@ function addExtraStyles(style) {
 			color: style.color,
 			fontSize: style.textStyle.fontSize * 1.3,
 			fontWeight: 'bold',
-		}
+		},
 	);
 
 	style.dialogModalLayer = {
@@ -203,7 +203,6 @@ function addExtraStyles(style) {
 		maxHeight: '80%',
 		display: 'flex',
 		flexDirection: 'column',
-		overflow: 'auto',
 	};
 
 	style.buttonIconStyle = {
@@ -275,7 +274,7 @@ function themeStyle(theme) {
 
 	output.icon = Object.assign({},
 		output.icon,
-		{ color: output.color }
+		{ color: output.color },
 	);
 
 	output.lineInput = Object.assign({},
@@ -283,7 +282,7 @@ function themeStyle(theme) {
 		{
 			color: output.color,
 			backgroundColor: output.backgroundColor,
-		}
+		},
 	);
 
 	output.headerStyle = Object.assign({},
@@ -291,7 +290,7 @@ function themeStyle(theme) {
 		{
 			color: output.color,
 			backgroundColor: output.backgroundColor,
-		}
+		},
 	);
 
 	output.inputStyle = Object.assign({},
@@ -300,7 +299,7 @@ function themeStyle(theme) {
 			color: output.color,
 			backgroundColor: output.backgroundColor,
 			borderColor: output.dividerColor,
-		}
+		},
 	);
 
 	output.containerStyle = Object.assign({},
@@ -308,7 +307,7 @@ function themeStyle(theme) {
 		{
 			color: output.color,
 			backgroundColor: output.backgroundColor,
-		}
+		},
 	);
 
 	output.buttonStyle = Object.assign({},
@@ -318,7 +317,7 @@ function themeStyle(theme) {
 			backgroundColor: output.backgroundColor,
 			borderColor: output.dividerColor,
 			userSelect: 'none',
-		}
+		},
 	);
 
 	output = addExtraStyles(output);

ReactNativeClient/lib/BaseApplication.js

@@ -459,6 +459,10 @@ class BaseApplication {
 			}
 		}
 
+		if (this.hasGui() && (action.type == 'NOTE_IS_INSERTING_NOTES' && !action.value)) {
+			refreshNotes = true;
+		}
+
 		if (this.hasGui() && ((action.type == 'SETTING_UPDATE_ONE' && action.key == 'uncompletedTodosOnTop') || action.type == 'SETTING_UPDATE_ALL')) {
 			refreshNotes = true;
 		}

ReactNativeClient/lib/BaseModel.js

@@ -182,7 +182,7 @@ class BaseModel {
 			const items = [];
 			for (let i = 0; i < options.order.length; i++) {
 				const o = options.order[i];
-				let item = o.by;
+				let item = `\`${o.by}\``;
 				if (options.caseInsensitive === true) item += ' COLLATE NOCASE';
 				if (o.dir) item += ` ${o.dir}`;
 				items.push(item);

ReactNativeClient/lib/joplin-database.js

@@ -314,7 +314,7 @@ class JoplinDatabase extends Database {
 		// must be set in the synchronizer too.
 
 		// Note: v16 and v17 don't do anything. They were used to debug an issue.
-		const existingDatabaseVersions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29];
+		const existingDatabaseVersions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30];
 
 		let currentVersionIndex = existingDatabaseVersions.indexOf(fromVersion);
 
@@ -686,6 +686,43 @@ class JoplinDatabase extends Database {
 				queries.push('ALTER TABLE version ADD COLUMN table_fields_version INT NOT NULL DEFAULT 0');
 			}
 
+			if (targetVersion == 30) {
+				// Change the type of the "order" field from INT to NUMERIC
+				// Making it a float provides a much bigger range when inserting notes.
+				// For example, with an INT, inserting a note C between note A with order 1000 and
+				// note B with order 1001 wouldn't be possible without changing the order
+				// value of note A or B. But with a float, we can set the order of note C to 1000.5
+				queries = queries.concat(
+					this.alterColumnQueries('notes', {
+						id: 'TEXT PRIMARY KEY',
+						parent_id: 'TEXT NOT NULL DEFAULT ""',
+						title: 'TEXT NOT NULL DEFAULT ""',
+						body: 'TEXT NOT NULL DEFAULT ""',
+						created_time: 'INT NOT NULL',
+						updated_time: 'INT NOT NULL',
+						is_conflict: 'INT NOT NULL DEFAULT 0',
+						latitude: 'NUMERIC NOT NULL DEFAULT 0',
+						longitude: 'NUMERIC NOT NULL DEFAULT 0',
+						altitude: 'NUMERIC NOT NULL DEFAULT 0',
+						author: 'TEXT NOT NULL DEFAULT ""',
+						source_url: 'TEXT NOT NULL DEFAULT ""',
+						is_todo: 'INT NOT NULL DEFAULT 0',
+						todo_due: 'INT NOT NULL DEFAULT 0',
+						todo_completed: 'INT NOT NULL DEFAULT 0',
+						source: 'TEXT NOT NULL DEFAULT ""',
+						source_application: 'TEXT NOT NULL DEFAULT ""',
+						application_data: 'TEXT NOT NULL DEFAULT ""',
+						order: 'NUMERIC NOT NULL DEFAULT 0', // that's the change!
+						user_created_time: 'INT NOT NULL DEFAULT 0',
+						user_updated_time: 'INT NOT NULL DEFAULT 0',
+						encryption_cipher_text: 'TEXT NOT NULL DEFAULT ""',
+						encryption_applied: 'INT NOT NULL DEFAULT 0',
+						markup_language: 'INT NOT NULL DEFAULT 1',
+						is_shared: 'INT NOT NULL DEFAULT 0',
+					})
+				);
+			}
+
 			queries.push({ sql: 'UPDATE version SET version = ?', params: [targetVersion] });
 
 			try {

ReactNativeClient/lib/models/Note.js

@@ -25,6 +25,7 @@ class Note extends BaseItem {
 			title: _('title'),
 			user_updated_time: _('updated date'),
 			user_created_time: _('created date'),
+			order: _('custom order'),
 		};
 
 		return field in fieldsToLabels ? fieldsToLabels[field] : field;
@@ -553,8 +554,10 @@ class Note extends BaseItem {
 	static async save(o, options = null) {
 		const isNew = this.isNew(o, options);
 		const isProvisional = options && !!options.provisional;
+		const dispatchUpdateAction = options ? options.dispatchUpdateAction !== false : true;
 		if (isNew && !o.source) o.source = Setting.value('appName');
 		if (isNew && !o.source_application) o.source_application = Setting.value('appId');
+		if (isNew && !('order' in o)) o.order = Date.now();
 
 		// We only keep the previous note content for "old notes" (see Revision Service for more info)
 		// In theory, we could simply save all the previous note contents, and let the revision service
@@ -572,11 +575,13 @@ class Note extends BaseItem {
 		const changeSource = options && options.changeSource ? options.changeSource : null;
 		ItemChange.add(BaseModel.TYPE_NOTE, note.id, isNew ? ItemChange.TYPE_CREATE : ItemChange.TYPE_UPDATE, changeSource, beforeNoteJson);
 
-		this.dispatch({
+		if (dispatchUpdateAction) {
-			type: 'NOTE_UPDATE_ONE',
+			this.dispatch({
-			note: note,
+				type: 'NOTE_UPDATE_ONE',
-			provisional: isProvisional,
+				note: note,
-		});
+				provisional: isProvisional,
+			});
+		}
 
 		if ('todo_due' in o || 'todo_completed' in o || 'is_todo' in o || 'is_conflict' in o) {
 			this.dispatch({
@@ -653,6 +658,138 @@ class Note extends BaseItem {
 		if (markupLanguageId === MarkupToHtml.MARKUP_LANGUAGE_HTML) return 'HTML';
 		throw new Error(`Invalid markup language ID: ${markupLanguageId}`);
 	}
+
+	// When notes are sorted in "custom order", they are sorted by the "order" field first and,
+	// in those cases, where the order field is the same for some notes, by created time.
+	static customOrderByColumns(type = null) {
+		if (!type) type = 'object';
+		if (type === 'object') return [{ by: 'order', dir: 'DESC' }, { by: 'user_created_time', dir: 'DESC' }];
+		if (type === 'string') return 'ORDER BY `order` DESC, user_created_time DESC';
+		throw new Error(`Invalid type: ${type}`);
+	}
+
+	// Update the note "order" field without changing the user timestamps,
+	// which is generally what we want.
+	static async updateNoteOrder_(note, order) {
+		return Note.save(Object.assign({}, note, {
+			order: order,
+			user_updated_time: note.user_updated_time,
+		}), { autoTimestamp: false, dispatchUpdateAction: false });
+	}
+
+	// This method will disable the NOTE_UPDATE_ONE action to prevent a lot
+	// of unecessary updates, so it's the caller's responsability to update
+	// the UI once the call is finished. This is done by listening to the
+	// NOTE_IS_INSERTING_NOTES action in the application middleware.
+	static async insertNotesAt(folderId, noteIds, index) {
+		if (!noteIds.length) return;
+
+		const defer = () => {
+			this.dispatch({
+				type: 'NOTE_IS_INSERTING_NOTES',
+				value: false,
+			});
+		};
+
+		this.dispatch({
+			type: 'NOTE_IS_INSERTING_NOTES',
+			value: true,
+		});
+
+		try {
+			const noteSql = `
+				SELECT id, \`order\`, user_created_time, user_updated_time
+				FROM notes
+				WHERE is_conflict = 0 AND parent_id = ?
+			${this.customOrderByColumns('string')}`;
+
+			let notes = await this.modelSelectAll(noteSql, [folderId]);
+
+			// If the target index is the same as the source note index, exit now
+			for (let i = 0; i < notes.length; i++) {
+				const note = notes[i];
+				if (note.id === noteIds[0] && index === i) return defer();
+			}
+
+			// If some of the target notes have order = 0, set the order field to user_created_time
+			// (historically, all notes had the order field set to 0)
+			let hasSetOrder = false;
+			for (let i = 0; i < notes.length; i++) {
+				const note = notes[i];
+				if (!note.order) {
+					const updatedNote = await this.updateNoteOrder_(note, note.user_created_time);
+					notes[i] = updatedNote;
+					hasSetOrder = true;
+				}
+			}
+
+			if (hasSetOrder) notes = await this.modelSelectAll(noteSql, [folderId]);
+
+			// Find the order value for the first note to be inserted,
+			// and the increment between the order values of each inserted notes.
+			let newOrder = 0;
+			let intervalBetweenNotes = 0;
+			const defaultIntevalBetweeNotes = 60 * 60 * 1000;
+
+			if (!notes.length) { // If there's no notes in the target notebook
+				newOrder = Date.now();
+				intervalBetweenNotes = defaultIntevalBetweeNotes;
+			} else if (index >= notes.length) { // Insert at the end
+				intervalBetweenNotes = notes[notes.length - 1].order / (noteIds.length + 1);
+				newOrder = notes[notes.length - 1].order - intervalBetweenNotes;
+			} else if (index === 0) { // Insert at the beginning
+				const firstNoteOrder = notes[0].order;
+				if (firstNoteOrder >= Date.now()) {
+					intervalBetweenNotes = defaultIntevalBetweeNotes;
+					newOrder = firstNoteOrder + defaultIntevalBetweeNotes;
+				} else {
+					intervalBetweenNotes = (Date.now() - firstNoteOrder) / (noteIds.length + 1);
+					newOrder = firstNoteOrder + intervalBetweenNotes * noteIds.length;
+				}
+			} else { // Normal insert
+				let noteBefore = notes[index - 1];
+				let noteAfter = notes[index];
+
+				if (noteBefore.order === noteAfter.order) {
+					let previousOrder = noteBefore.order;
+					for (let i = index; i >= 0; i--) {
+						const n = notes[i];
+						if (n.order <= previousOrder) {
+							const o = previousOrder + defaultIntevalBetweeNotes;
+							const updatedNote = await this.updateNoteOrder_(n, o);
+							notes[i] = Object.assign({}, n, updatedNote);
+							previousOrder = o;
+						} else {
+							previousOrder = n.order;
+						}
+					}
+
+					noteBefore = notes[index - 1];
+					noteAfter = notes[index];
+				}
+
+				intervalBetweenNotes = (noteBefore.order - noteAfter.order) / (noteIds.length + 1);
+				newOrder = noteAfter.order + intervalBetweenNotes * noteIds.length;
+			}
+
+			// Set the order value for all the notes to be inserted
+			for (const noteId of noteIds) {
+				const note = await Note.load(noteId);
+				if (!note) throw new Error(`No such note: ${noteId}`);
+
+				await this.updateNoteOrder_({
+					id: noteId,
+					parent_id: folderId,
+					user_updated_time: note.user_updated_time,
+				}, newOrder);
+
+				newOrder -= intervalBetweenNotes;
+			}
+		} finally {
+			defer();
+		}
+	}
+
 }
 
 Note.updateGeolocationEnabled_ = true;

ReactNativeClient/lib/models/Setting.js

@@ -321,7 +321,7 @@ class Setting extends BaseModel {
 				label: () => _('Sort notes by'),
 				options: () => {
 					const Note = require('lib/models/Note');
-					const noteSortFields = ['user_updated_time', 'user_created_time', 'title'];
+					const noteSortFields = ['user_updated_time', 'user_created_time', 'title', 'order'];
 					const options = {};
 					for (let i = 0; i < noteSortFields.length; i++) {
 						options[noteSortFields[i]] = toTitleCase(Note.fieldToLabel(noteSortFields[i]));

ReactNativeClient/lib/reducer.js

@@ -58,6 +58,7 @@ const defaultState = {
 	plugins: {},
 	provisionalNoteIds: [],
 	editorNoteStatuses: {},
+	isInsertingNotes: false,
 };
 
 const MAX_HISTORY = 200;
@@ -77,12 +78,25 @@ const cacheEnabledOutput = (key, output) => {
 };
 
 stateUtils.notesOrder = function(stateSettings) {
-	return cacheEnabledOutput('notesOrder', [
+	if (stateSettings['notes.sortOrder.field'] === 'order') {
-		{
+		return cacheEnabledOutput('notesOrder', [
-			by: stateSettings['notes.sortOrder.field'],
+			{
-			dir: stateSettings['notes.sortOrder.reverse'] ? 'DESC' : 'ASC',
+				by: 'order',
-		},
+				dir: 'DESC',
-	]);
+			},
+			{
+				by: 'user_created_time',
+				dir: 'DESC',
+			},
+		]);
+	} else {
+		return cacheEnabledOutput('notesOrder', [
+			{
+				by: stateSettings['notes.sortOrder.field'],
+				dir: stateSettings['notes.sortOrder.reverse'] ? 'DESC' : 'ASC',
+			},
+		]);
+	}
 };
 
 stateUtils.foldersOrder = function(stateSettings) {
@@ -716,6 +730,14 @@ const reducer = (state = defaultState, action) => {
 			}
 			break;
 
+		case 'NOTE_IS_INSERTING_NOTES':
+
+			if (state.isInsertingNotes !== action.value) {
+				newState = Object.assign({}, state);
+				newState.isInsertingNotes = action.value;
+			}
+			break;
+
 		case 'TAG_DELETE':
 			newState = handleItemDelete(state, action);
 			newState.selectedNoteTags = removeItemFromArray(newState.selectedNoteTags.splice(0), 'id', action.id);