Desktop: Added toolbar button to switch spell checker language

packages/app-desktop/gui/MainScreen/MainScreen.tsx

@@ -60,6 +60,7 @@ const commands = [
 	require('./commands/showNoteContentProperties'),
 	require('./commands/showNoteProperties'),
 	require('./commands/showShareNoteDialog'),
+	require('./commands/showSpellCheckerMenu'),
 	require('./commands/toggleEditors'),
 	require('./commands/toggleNoteList'),
 	require('./commands/toggleSideBar'),

packages/app-desktop/gui/MainScreen/commands/showSpellCheckerMenu.ts

@@ -0,0 +1,34 @@
+import { CommandContext, CommandDeclaration, CommandRuntime } from '@joplin/lib/services/CommandService';
+import { _ } from '@joplin/lib/locale';
+import bridge from '../../../services/bridge';
+import SpellCheckerService from '@joplin/lib/services/spellChecker/SpellCheckerService';
+import { AppState } from '../../../app';
+
+const Menu = bridge().Menu;
+
+export const declaration:CommandDeclaration = {
+	name: 'showSpellCheckerMenu',
+	label: () => _('Spell checker'),
+	iconName: 'fas fa-globe',
+};
+
+export const runtime = ():CommandRuntime => {
+	return {
+		execute: async (context:CommandContext, selectedLanguage:string = null, useSpellChecker:boolean = null) => {
+			selectedLanguage = selectedLanguage === null ? context.state.settings['spellChecker.language'] : selectedLanguage;
+			useSpellChecker = useSpellChecker === null ? context.state.settings['spellChecker.enabled'] : useSpellChecker;
+
+			const menuItems = SpellCheckerService.instance().spellCheckerConfigMenuItems(selectedLanguage, useSpellChecker);
+			const menu = Menu.buildFromTemplate(menuItems);
+			menu.popup(bridge().window());
+		},
+
+		mapStateToTitle(state:AppState):string {
+			if (!state.settings['spellChecker.enabled']) return null;
+			const language = state.settings['spellChecker.language'];
+			if (!language) return null;
+			const s = language.split('-');
+			return s[0];
+		},
+	};
+};

packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/utils/setupContextMenu.ts

@@ -35,9 +35,6 @@ export default function(editor:any) {
 		const element = contextMenuElement(editor, params.x, params.y);
 		if (!element) return;
 
-		const Menu = bridge().Menu;
-		const MenuItem = bridge().MenuItem;
-
 		let itemType:ContextMenuItemType = ContextMenuItemType.None;
 		let resourceId = '';
 		let linkToCopy = null;
@@ -65,27 +62,28 @@ export default function(editor:any) {
 			isReadOnly: false,
 		};
 
-		const menu = new Menu();
+		const template = [];
 
 		for (const itemName in contextMenuItems) {
 			const item = contextMenuItems[itemName];
 
 			if (!item.isActive(itemType, contextMenuActionOptions.current)) continue;
 
-			menu.append(new MenuItem({
+			template.push({
 				label: item.label,
 				click: () => {
 					item.onAction(contextMenuActionOptions.current);
 				},
-			}));
+			});
 		}
 
 		const spellCheckerMenuItems = SpellCheckerService.instance().contextMenuItems(params.misspelledWord, params.dictionarySuggestions);
 
 		for (const item of spellCheckerMenuItems) {
-			menu.append(item);
+			template.push(item);
 		}
 
-		menu.popup();
+		const menu = bridge().Menu.buildFromTemplate(template);
+		menu.popup(bridge().window());
 	});
 }

packages/app-desktop/gui/NoteToolbar/NoteToolbar.tsx

@@ -37,6 +37,7 @@ const mapStateToProps = (state:any) => {
 
 	return {
 		toolbarButtonInfos: toolbarButtonUtils.commandsToToolbarButtons([
+			'showSpellCheckerMenu',
 			'editAlarm',
 			'toggleVisiblePanes',
 			'showNoteProperties',

packages/app-desktop/gui/ToolbarButton/styles/index.ts

@@ -21,6 +21,8 @@ export const StyledRoot = styled.a<RootProps>`
 	box-sizing: border-box;
 	color: ${(props:RootProps) => props.theme.color3};
 	font-size: ${(props:RootProps) => props.theme.toolbarIconSize * 0.8}px;
+	padding-left: 5px;
+	padding-right: 5px;
 
 	&:hover {
 		background-color: ${(props:RootProps) => props.disabled ? 'none' : props.theme.backgroundColorHover3};