[editor] add misc toggle commands to the view menu

packages/core/src/browser/common-frontend-contribution.ts

@@ -68,6 +68,7 @@ export namespace CommonMenus {
     export const VIEW_PRIMARY = [...VIEW, '0_primary'];
     export const VIEW_VIEWS = [...VIEW, '1_views'];
     export const VIEW_LAYOUT = [...VIEW, '2_layout'];
+    export const VIEW_TOGGLE = [...VIEW, '3_toggle'];
 
     // last menu item
     export const HELP = [...MAIN_MENU_BAR, '9_help'];

packages/editor/src/browser/editor-command.ts

@@ -117,6 +117,22 @@ export namespace EditorCommands {
         category: 'View',
         label: 'Toggle Minimap'
     };
+    /**
+     * Command that toggles the rendering of whitespace characters in the editor.
+     */
+    export const TOGGLE_RENDER_WHITESPACE: Command = {
+        id: 'editor.action.toggleRenderWhitespace',
+        category: 'View',
+        label: 'Toggle Render Whitespace'
+    };
+    /**
+     * Command that toggles the word wrap.
+     */
+    export const TOGGLE_WORD_WRAP: Command = {
+        id: 'editor.action.toggleWordWrap',
+        category: 'View',
+        label: 'Toggle Word Wrap'
+    };
 }
 
 @injectable()
@@ -169,6 +185,8 @@ export class EditorCommandContribution implements CommandContribution {
         registry.registerCommand(EditorCommands.GO_LAST_EDIT);
         registry.registerCommand(EditorCommands.CLEAR_EDITOR_HISTORY);
         registry.registerCommand(EditorCommands.TOGGLE_MINIMAP);
+        registry.registerCommand(EditorCommands.TOGGLE_RENDER_WHITESPACE);
+        registry.registerCommand(EditorCommands.TOGGLE_WORD_WRAP);
 
         registry.registerCommand(CommonCommands.AUTO_SAVE, {
             isToggled: () => this.isAutoSaveOn(),

packages/editor/src/browser/editor-keybinding.ts

@@ -35,6 +35,10 @@ export class EditorKeybindingContribution implements KeybindingContribution {
             {
                 command: EditorCommands.GO_LAST_EDIT.id,
                 keybinding: 'ctrl+alt+q'
+            },
+            {
+                command: EditorCommands.TOGGLE_WORD_WRAP.id,
+                keybinding: 'alt+z'
             }
         );
     }

packages/editor/src/browser/editor-menu.ts

@@ -16,7 +16,7 @@
 
 import { injectable } from 'inversify';
 import { MenuContribution, MenuModelRegistry, MenuPath, MAIN_MENU_BAR } from '@theia/core';
-import { CommonCommands } from '@theia/core/lib/browser';
+import { CommonCommands, CommonMenus } from '@theia/core/lib/browser';
 import { EditorCommands } from './editor-command';
 
 export const EDITOR_CONTEXT_MENU: MenuPath = ['editor_context_menu'];
@@ -85,6 +85,23 @@ export class EditorMenuContribution implements MenuContribution {
             commandId: EditorCommands.GO_LAST_EDIT.id,
             label: 'Last Edit Location'
         });
+
+        // Toggle Commands.
+        registry.registerMenuAction(CommonMenus.VIEW_TOGGLE, {
+            commandId: EditorCommands.TOGGLE_WORD_WRAP.id,
+            label: EditorCommands.TOGGLE_WORD_WRAP.label,
+            order: '0'
+        });
+        registry.registerMenuAction(CommonMenus.VIEW_TOGGLE, {
+            commandId: EditorCommands.TOGGLE_MINIMAP.id,
+            label: 'Show Minimap',
+            order: '1',
+        });
+        registry.registerMenuAction(CommonMenus.VIEW_TOGGLE, {
+            commandId: EditorCommands.TOGGLE_RENDER_WHITESPACE.id,
+            label: 'Render Whitespace',
+            order: '2'
+        });
     }
 
 }

packages/editor/src/browser/editor-navigation-contribution.ts

@@ -79,7 +79,17 @@ export class EditorNavigationContribution implements Disposable, FrontendApplica
         });
         this.commandRegistry.registerHandler(EditorCommands.TOGGLE_MINIMAP.id, {
             execute: () => this.toggleMinimap(),
-            isEnabled: () => true
+            isEnabled: () => true,
+            isToggled: () => this.isMinimapEnabled()
+        });
+        this.commandRegistry.registerHandler(EditorCommands.TOGGLE_RENDER_WHITESPACE.id, {
+            execute: () => this.toggleRenderWhitespace(),
+            isEnabled: () => true,
+            isToggled: () => this.isRenderWhitespaceEnabled()
+        });
+        this.commandRegistry.registerHandler(EditorCommands.TOGGLE_WORD_WRAP.id, {
+            execute: () => this.toggleWordWrap(),
+            isEnabled: () => true,
         });
     }
 
@@ -96,6 +106,24 @@ export class EditorNavigationContribution implements Disposable, FrontendApplica
         this.toDispose.dispose();
     }
 
+    /**
+     * Toggle the editor word wrap behavior.
+     */
+    protected async toggleWordWrap(): Promise<void> {
+        // Get the current word wrap.
+        const wordWrap: string | undefined = this.preferenceService.get('editor.wordWrap');
+        if (wordWrap === undefined) {
+            return;
+        }
+        // The list of allowed word wrap values.
+        const values: string[] = ['off', 'on', 'wordWrapColumn', 'bounded'];
+        // Get the index of the current value, and toggle to the next available value.
+        const index = values.indexOf(wordWrap) + 1;
+        if (index > -1) {
+            this.preferenceService.set('editor.wordWrap', values[index % values.length], PreferenceScope.User);
+        }
+    }
+
     /**
      * Toggle the display of minimap in the editor.
      */
@@ -104,6 +132,20 @@ export class EditorNavigationContribution implements Disposable, FrontendApplica
         this.preferenceService.set('editor.minimap.enabled', !value, PreferenceScope.User);
     }
 
+    /**
+     * Toggle the rendering of whitespace in the editor.
+     */
+    protected async toggleRenderWhitespace(): Promise<void> {
+        const renderWhitespace: string | undefined = this.preferenceService.get('editor.renderWhitespace');
+        let updatedRenderWhitespace: string;
+        if (renderWhitespace === 'none') {
+            updatedRenderWhitespace = 'all';
+        } else {
+            updatedRenderWhitespace = 'none';
+        }
+        this.preferenceService.set('editor.renderWhitespace', updatedRenderWhitespace, PreferenceScope.User);
+    }
+
     protected onCurrentEditorChanged(editorWidget: EditorWidget | undefined): void {
         this.toDisposePerCurrentEditor.dispose();
         if (editorWidget) {
@@ -167,4 +209,13 @@ export class EditorNavigationContribution implements Disposable, FrontendApplica
         }
     }
 
+    private isMinimapEnabled(): boolean {
+        return !!this.preferenceService.get('editor.minimap.enabled');
+    }
+
+    private isRenderWhitespaceEnabled(): boolean {
+        const renderWhitespace = this.preferenceService.get('editor.renderWhitespace');
+        return renderWhitespace === 'none' ? false : true;
+    }
+
 }