Desktop: Simplified and improve command service, and added command palette

- Commands "enabled" state is now expressed using a "when-clause" like in VSCode
- A command palette has been added to the Tools menu

ReactNativeClient/lib/services/commands/MenuUtils.ts

@@ -87,9 +87,9 @@ export default class MenuUtils {
 		return item;
 	}
 
-	public commandToStatefulMenuItem(commandName:string, props:any = null):MenuItem {
+	public commandToStatefulMenuItem(commandName:string, ...args:any[]):MenuItem {
 		return this.commandToMenuItem(commandName, () => {
-			return this.service.execute(commandName, props ? props : {});
+			return this.service.execute(commandName, ...args);
 		});
 	}
 
@@ -108,11 +108,14 @@ export default class MenuUtils {
 		return output;
 	}
 
-	public commandsToMenuItemProps(state:any, commandNames:string[]):MenuItemProps {
+	public commandsToMenuItemProps(commandNames:string[], whenClauseContext:any):MenuItemProps {
 		const output:MenuItemProps = {};
 
 		for (const commandName of commandNames) {
-			const newProps = this.service.commandMapStateToProps(commandName, state);
+			const newProps = {
+				enabled: this.service.isEnabled(commandName, whenClauseContext),
+			};
+
 			if (newProps === null || propsHaveChanged(this.menuItemPropsCache_[commandName], newProps)) {
 				output[commandName] = newProps;
 				this.menuItemPropsCache_[commandName] = newProps;

ReactNativeClient/lib/services/commands/ToolbarButtonUtils.ts

@@ -1,5 +1,4 @@
-import CommandService from '../CommandService';
-import propsHaveChanged from './propsHaveChanged';
+import CommandService from 'lib/services/CommandService';
 import { stateUtils } from 'lib/reducer';
 
 const separatorItem = { type: 'separator' };
@@ -14,7 +13,6 @@ export interface ToolbarButtonInfo {
 }
 
 interface ToolbarButtonCacheItem {
-	props: any,
 	info: ToolbarButtonInfo,
 }
 
@@ -35,8 +33,15 @@ export default class ToolbarButtonUtils {
 		return this.service_;
 	}
 
-	private commandToToolbarButton(commandName:string, props:any):ToolbarButtonInfo {
-		if (this.toolbarButtonCache_[commandName] && !propsHaveChanged(this.toolbarButtonCache_[commandName].props, props)) {
+	private commandToToolbarButton(commandName:string, whenClauseContext:any):ToolbarButtonInfo {
+		const newEnabled = this.service.isEnabled(commandName, whenClauseContext);
+		const newTitle = this.service.title(commandName);
+
+		if (
+			this.toolbarButtonCache_[commandName] &&
+			this.toolbarButtonCache_[commandName].info.enabled === newEnabled &&
+			this.toolbarButtonCache_[commandName].info.title === newTitle
+		) {
 			return this.toolbarButtonCache_[commandName].info;
 		}
 
@@ -46,15 +51,14 @@ export default class ToolbarButtonUtils {
 			name: commandName,
 			tooltip: this.service.label(commandName),
 			iconName: command.declaration.iconName,
-			enabled: this.service.isEnabled(commandName, props),
+			enabled: newEnabled,
 			onClick: async () => {
-				this.service.execute(commandName, props);
+				this.service.execute(commandName);
 			},
-			title: this.service.title(commandName, props),
+			title: newTitle,
 		};
 
 		this.toolbarButtonCache_[commandName] = {
-			props: props,
 			info: output,
 		};
 
@@ -64,7 +68,7 @@ export default class ToolbarButtonUtils {
 	// This method ensures that if the provided commandNames and state hasn't changed
 	// the output also won't change. Invididual toolbarButtonInfo also won't changed
 	// if the state they use hasn't changed. This is to avoid useless renders of the toolbars.
-	public commandsToToolbarButtons(state:any, commandNames:string[]):ToolbarButtonInfo[] {
+	public commandsToToolbarButtons(commandNames:string[], whenClauseContext:any):ToolbarButtonInfo[] {
 		const output:ToolbarButtonInfo[] = [];
 
 		for (const commandName of commandNames) {
@@ -73,8 +77,7 @@ export default class ToolbarButtonUtils {
 				continue;
 			}
 
-			const props = this.service.commandMapStateToProps(commandName, state);
-			output.push(this.commandToToolbarButton(commandName, props));
+			output.push(this.commandToToolbarButton(commandName, whenClauseContext));
 		}
 
 		return stateUtils.selectArrayShallow({ array: output }, commandNames.join('_'));

ReactNativeClient/lib/services/commands/commandsToMarkdownTable.ts

@@ -0,0 +1,32 @@
+import markdownUtils, { MarkdownTableHeader, MarkdownTableRow } from 'lib/markdownUtils';
+
+export default function commandsToMarkdownTable():string {
+	const headers:MarkdownTableHeader[] = [
+		{
+			name: 'commandName',
+			label: 'Name',
+		},
+		{
+			name: 'description',
+			label: 'Description',
+		},
+		{
+			name: 'props',
+			label: 'Props',
+		},
+	];
+
+	const rows:MarkdownTableRow[] = [];
+
+	for (const commandName in this.commands_) {
+
+		const row:MarkdownTableRow = {
+			commandName: commandName,
+			description: this.label(commandName),
+		};
+
+		rows.push(row);
+	}
+
+	return markdownUtils.createMarkdownTable(headers, rows);
+}

ReactNativeClient/lib/services/commands/propsHaveChanged.ts

@@ -1,5 +1,7 @@
 export default function propsHaveChanged(previous:any, next:any):boolean {
 	if (!previous && next) return true;
+	if (previous && !next) return true;
+	if (!previous && !next) return false;
 
 	if (Object.keys(previous).length !== Object.keys(next).length) return true;
 

ReactNativeClient/lib/services/commands/stateToWhenClauseContext.ts

@@ -0,0 +1,47 @@
+import { stateUtils } from 'lib/reducer';
+
+const BaseModel = require('lib/BaseModel');
+const Folder = require('lib/models/Folder');
+const MarkupToHtml = require('lib/joplin-renderer/MarkupToHtml');
+
+export default function stateToWhenClauseContext(state:any) {
+	const noteId = state.selectedNoteIds.length === 1 ? state.selectedNoteIds[0] : null;
+	const note = noteId ? BaseModel.byId(state.notes, noteId) : null;
+
+	return {
+		// UI elements
+		markdownEditorVisible: !!state.settings['editor.codeView'],
+		richTextEditorVisible: !state.settings['editor.codeView'],
+		markdownEditorPaneVisible: state.settings['editor.codeView'] && state.noteVisiblePanes.includes('editor'),
+		markdownViewerPaneVisible: state.settings['editor.codeView'] && state.noteVisiblePanes.includes('viewer'),
+		modalDialogVisible: !!Object.keys(state.visibleDialogs).length,
+		sideBarVisible: !!state.sidebarVisibility,
+		noteListHasNotes: !!state.notes.length,
+
+		// Application state
+		notesAreBeingSaved: stateUtils.hasNotesBeingSaved(state),
+		syncStarted: state.syncStarted,
+
+		// Current location
+		inConflictFolder: state.selectedFolderId === Folder.conflictFolderId(),
+
+		// Note selection
+		oneNoteSelected: !!note,
+		someNotesSelected: state.selectedNoteIds.length > 0,
+		multipleNotesSelected: state.selectedNoteIds.length > 1,
+		noNotesSelected: !state.selectedNoteIds.length,
+
+		// Note history
+		historyhasBackwardNotes: state.backwardHistoryNotes.length > 0,
+		historyhasForwardNotes: state.forwardHistoryNotes.length > 0,
+
+		// Folder selection
+		oneFolderSelected: !!state.selectedFolderId,
+
+		// Current note properties
+		noteIsTodo: note ? !!note.is_todo : false,
+		noteTodoCompleted: note ? !!note.todo_completed : false,
+		noteIsMarkdown: note ? note.markup_language === MarkupToHtml.MARKUP_LANGUAGE_MARKDOWN : false,
+		noteIsHtml: note ? note.markup_language === MarkupToHtml.MARKUP_LANGUAGE_HTML : false,
+	};
+}