[FEATURE] Add some pizzazz to our menu bar component

public/app/components/codeEditor/codeEditor.js

@@ -65,6 +65,16 @@ angular.module('kibibitCodeEditor')
       vm.undoManager = editor.getSession().getUndoManager();
       SettingsService.settings.currentUndoManager = vm.undoManager;
       SettingsService.settings.currentEditor = editor;
+      /* This is temporarily needed to remove the console.warning ace.js shows
+       * that will be removed in the next version.
+       *
+       * This message is:
+       *
+       * "Automatically scrolling cursor into view after selection change
+       * this will be disabled in the next version
+       * set editor.$blockScrolling = Infinity to disable this message"
+       */
+      editor.$blockScrolling = Infinity;
       initEditor(editor, editorSettings);
     }
 
@@ -139,7 +149,8 @@ angular.module('kibibitCodeEditor')
         'fontSize': settings.fontSize,
         'showGutter': settings.isGutter,
         'useSoftTabs': settings.isSoftTabs,
-        'showPrintMargin': settings.ruler
+        'showPrintMargin': settings.ruler,
+        'scrollPastEnd': true
       });
     }
 

public/app/components/menuBar/menuBar.js

@@ -13,21 +13,24 @@ angular.module('kibibitCodeEditor')
     if (!str) { return; }
     var keys = str.split('-');
     var isOSX = /Mac OS X/.test($window.navigator.userAgent);
-    var seperator = (!isOSX || keys.length > 2) ? '+' : '';
+    var seperator =
+      (!isOSX || keys.length > 2 || keys[0] === '_Ctrl') ? '+' : '';
     var abbreviations = {
       M: isOSX ? '⌘' : 'Ctrl',
       A: isOSX ? 'Option' : 'Alt',
       S: 'Shift'
     };
     return keys.map(function(key, index) {
       var last = index == keys.length - 1;
-      return last ? key : abbreviations[key];
+      return key.startsWith('_') ?
+        key.slice(1) : (last ? key : abbreviations[key]);
     }).join(seperator);
   };
 })
 
 .controller('menuBarController', function(
   $window,
+  $timeout,
   SettingsService,
   ngDialog,
   FileService,
@@ -106,4 +109,128 @@ angular.module('kibibitCodeEditor')
     editorSettings.isGutter = !editorSettings.isGutter;
   };
 
+  vm.changeSelectionToCamelCase = function() {
+    var editor = vm.settings.currentEditor;
+    var selectionText = editor.getSelectedText();
+    var selection = vm.settings.currentEditor.selection.getRange();
+    var camelCased = selectionText.replace(
+      /[_-\s]([a-zA-Z])/g,
+      function(g) {
+        return g[1].toUpperCase();
+      }
+    );
+    camelCased = camelCased[0].toLowerCase() + camelCased.substring(1);
+    vm.settings.currentEditor.session.replace(
+    selection, camelCased);
+
+    editor.focus();
+  };
+
+  vm.changeSelectionToTitleCase = function() {
+    var editor = vm.settings.currentEditor;
+    var selectionText = editor.getSelectedText();
+    var selection = vm.settings.currentEditor.selection.getRange();
+    var titleCased = selectionText.replace(
+      /[_-\s]([a-zA-Z])|([a-z])([A-Z])/g,
+      function(g, singleLetter, firstLetter, secondLetter) {
+        return secondLetter ?
+          firstLetter + ' ' + secondLetter.toUpperCase() :
+          ' ' + singleLetter.toUpperCase();
+      }
+    );
+
+    titleCased = titleCased[0].toUpperCase() + titleCased.substring(1);
+    vm.settings.currentEditor.session.replace(
+    selection, titleCased);
+
+    editor.focus();
+  };
+
+  vm.changeSelectionToKebabCase = function() {
+    var editor = vm.settings.currentEditor;
+    var selectionText = editor.getSelectedText();
+    var selection = vm.settings.currentEditor.selection.getRange();
+    var kebabCased = selectionText.replace(
+      /[_-\s]([a-zA-Z])|([a-z])([A-Z])/g,
+      function(g, singleLetter, firstLetter, secondLetter) {
+        return secondLetter ?
+          firstLetter + '-' + secondLetter.toLowerCase() :
+          '-' + singleLetter.toLowerCase();
+      }
+    );
+
+    kebabCased = kebabCased.toLowerCase();
+    vm.settings.currentEditor.session.replace(
+    selection, kebabCased);
+
+    editor.focus();
+  };
+
+  vm.changeSelectionToSnakeCase = function() {
+    var editor = vm.settings.currentEditor;
+    var selectionText = editor.getSelectedText();
+    var selection = vm.settings.currentEditor.selection.getRange();
+    var snakeCased = selectionText.replace(
+      /[_-\s]([a-zA-Z])|([a-z])([A-Z])/g,
+      function(g, singleLetter, firstLetter, secondLetter) {
+        return secondLetter ?
+          firstLetter + '_' + secondLetter.toLowerCase() :
+          '_' + singleLetter.toLowerCase();
+      }
+    );
+
+    snakeCased = snakeCased.toLowerCase();
+    vm.settings.currentEditor.session.replace(
+    selection, snakeCased);
+
+    editor.focus();
+  };
+
+  vm.execEditorCommand = function(command) {
+    var editor = vm.settings.currentEditor;
+    if (editor) {
+      editor.execCommand(command);
+      editor.focus();
+    }
+  };
+
+  vm.isSelectionExists = function() {
+    var editor = vm.settings.currentEditor;
+    return editor ? editor.getSelectedText() !== '' : false;
+  };
+
+  vm.canChangeCase = function() {
+    var selectionText = vm.settings.currentEditor ?
+      vm.settings.currentEditor.getSelectedText() : '';
+
+    return /[-_\sA-Z]/.test(selectionText);
+
+  };
+
+  vm.isMultiLineSelection = function() {
+    var selectionRange = vm.settings.currentEditor ?
+      vm.settings.currentEditor.getSelectionRange() : undefined;
+
+    if (!selectionRange) {
+      return;
+    }
+
+    var startLine = selectionRange.start.row;
+    var endLine = selectionRange.end.row;
+
+    return endLine > startLine;
+  };
+
+  vm.openPrintDialog = function() {
+    // timeout to let the menu close before the print dialog appears
+    $timeout(function() {
+      $window.print();
+    });
+  };
+
+  vm.focusEditor = function() {
+    var editor = vm.settings.currentEditor;
+    editor.focus();
+  };
+
 });

public/app/components/menuBar/menuBarTemplate.html

@@ -29,19 +29,10 @@ <h2 class="md-toolbar-tools">{{ main.projectName }}</h2>
                                 <md-button ng-click="$mdOpenMenu()">New</md-button>
                                 <md-menu-content>
                                     <md-menu-item>
-                                        <md-button ng-click="main.emptyEditor()">Empty Editor</md-button>
+                                        <md-button ng-click="main.openFile = ''; menuBarCtrl.focusEditor();">File</md-button>
                                     </md-menu-item>
                                     <md-menu-item>
-                                        <md-button ng-click="menuBarCtrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button>
-                                    </md-menu-item>
-                                    <md-menu-item>
-                                        <md-button ng-click="menuBarCtrl.sampleAction('New Presentation', $event)">Presentation</md-button>
-                                    </md-menu-item>
-                                    <md-menu-item>
-                                        <md-button ng-click="menuBarCtrl.sampleAction('New Form', $event)">Form</md-button>
-                                    </md-menu-item>
-                                    <md-menu-item>
-                                        <md-button ng-click="menuBarCtrl.sampleAction('New Drawing', $event)">Drawing</md-button>
+                                        <md-button ng-click="main.emptyEditor(); menuBarCtrl.focusEditor();">Empty Editor</md-button>
                                     </md-menu-item>
                                 </md-menu-content>
                             </md-menu>
@@ -62,7 +53,7 @@ <h2 class="md-toolbar-tools">{{ main.projectName }}</h2>
                         <md-menu-divider></md-menu-divider>
                         <md-menu-item class="md-indent">
                             <md-icon class="material-icons">print</md-icon>
-                            <md-button ng-click="menuBarCtrl.sampleAction('Print', $event)">
+                            <md-button ng-click="menuBarCtrl.openPrintDialog()">
                                 Print
                                 <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                             </md-button>
@@ -113,16 +104,32 @@ <h2 class="md-toolbar-tools">{{ main.projectName }}</h2>
                         <md-menu-item class="md-indent">
                             <md-icon class="material-icons" style="color: rgba(0, 0, 0, 0.258824)">content_paste</md-icon>
                             <md-button ng-click="menuBarCtrl.paste()" disabled="disabled">
-                                Paste
+                                Paste 
+                                <md-icon
+                                class="material-icons"
+                                ng-mouseenter="infoHover = true"
+                                ng-mouseleave="infoHover = false">
+                                    {{ infoHover ? 'info' : 'info_outline' }}
+                                    <md-tooltip md-direction="right">
+                                        Web browsers don't allow sites to paste content. You can use the keyboard shortcut
+                                    </md-tooltip>
+                                </md-icon>
                                 <span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
                             </md-button>
                         </md-menu-item>
+                        <md-menu-item class="md-indent">
+                            <md-icon class="material-icons">select_all</md-icon>
+                            <md-button ng-click="menuBarCtrl.execEditorCommand('selectall')">
+                                Select All
+                                <span class="md-alt-text">{{ 'M-A' | keyboardShortcut }}</span>
+                            </md-button>
+                        </md-menu-item>
                         <md-menu-divider></md-menu-divider>
                         <md-menu-item class="md-indent">
                             <md-icon class="material-icons">find_in_page</md-icon>
-                            <md-button ng-click="menuBarCtrl.sampleAction('Find and replace', $event)">
+                            <md-button ng-click="menuBarCtrl.execEditorCommand('replace')">
                                 Find and replace...
-                                <span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span>
+                                <span class="md-alt-text">{{ 'M-A-H' | keyboardShortcut }}</span>
                             </md-button>
                         </md-menu-item>
                     </md-menu-content>
@@ -229,50 +236,70 @@ <h2 class="md-toolbar-tools">{{ main.projectName }}</h2>
                         </md-menu-item>
                     </md-menu-content>
                 </md-menu>
-                <md-menu>
-                    <button ng-click="$mdOpenMenu()">
-                        Format
+                <md-menu
+                ng-if="menuBarCtrl.isSelectionExists()">
+                    <button ng-click="$mdOpenMenu();
+                    canChangeCase = menuBarCtrl.canChangeCase();
+                    isMultiLineSelection = menuBarCtrl.isMultiLineSelection();">
+                        Selection
                     </button>
                     <md-menu-content>
                         <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('bold', $event)">
-                                Bold
-                                <span class="md-alt-text"> {{ 'M-B' | keyboardShortcut }}</span>
+                            <md-button ng-click="menuBarCtrl.execEditorCommand('touppercase')">
+                                UPPERCASE
+                                <span class="md-alt-text"> {{ '_Ctrl-U' | keyboardShortcut }}</span>
                             </md-button>
                         </md-menu-item>
                         <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('italic', $event)">
-                                Italic
-                                <span class="md-alt-text">{{ 'M-I' | keyboardShortcut }}</span>
+                            <md-button ng-click="menuBarCtrl.execEditorCommand('tolowercase')">
+                                lowercase
+                                <span class="md-alt-text">{{ '_Ctrl-S-U' | keyboardShortcut }}</span>
                             </md-button>
                         </md-menu-item>
-                        <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('underline', $event)">
-                                Underline
-                                <span class="md-alt-text">{{ 'M-U' | keyboardShortcut }}</span>
+                        <md-menu-item ng-if="canChangeCase">
+                            <md-button
+                            ng-click="menuBarCtrl.changeSelectionToCamelCase()">
+                                camelCase
                             </md-button>
                         </md-menu-item>
-                        <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('strikethrough', $event)">
-                                Strikethrough
-                                <span class="md-alt-text">{{ 'A-S-5' | keyboardShortcut }}</span>
+                        <md-menu-item ng-if="canChangeCase">
+                            <md-button
+                            ng-click="menuBarCtrl.changeSelectionToTitleCase()">
+                                Title Case
                             </md-button>
                         </md-menu-item>
-                        <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('superscript', $event)">
-                                Superscript
-                                <span class="md-alt-text">{{ 'M-.' | keyboardShortcut }}</span>
+                        <md-menu-item ng-if="canChangeCase">
+                            <md-button
+                            ng-click="menuBarCtrl.changeSelectionToKebabCase()">
+                                kebab-case
                             </md-button>
                         </md-menu-item>
+                        <md-menu-item ng-if="canChangeCase">
+                            <md-button
+                            ng-click="menuBarCtrl.changeSelectionToSnakeCase()">snake_case</md-button>
+                        </md-menu-item>
+                        <md-menu-divider></md-menu-divider>
                         <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.sampleAction('subscript', $event)">
-                                Subscript
-                                <span class="md-alt-text">{{ 'M-,' | keyboardShortcut }}</span>
+                            <md-button
+                            ng-click="menuBarCtrl.execEditorCommand('togglecomment')">
+                                Toggle Comment
+                                <span class="md-alt-text">{{ 'M-/' | keyboardShortcut }}</span>
                             </md-button>
                         </md-menu-item>
-                        <md-menu-divider></md-menu-divider>
                         <md-menu-item>
-                            <md-button ng-click="menuBarCtrl.toggleSetting('clearFormatting')">Clear Formatting</md-button>
+                            <md-button
+                            ng-click="menuBarCtrl.execEditorCommand('toggleBlockComment')">
+                                Toggle Block Comment
+                                <span class="md-alt-text">{{ 'M-S-/' | keyboardShortcut }}</span>
+                            </md-button>
+                        </md-menu-item>
+                        <md-menu-divider ng-if="isMultiLineSelection"></md-menu-divider>
+                        <md-menu-item ng-if="isMultiLineSelection">
+                            <md-button
+                            ng-click="menuBarCtrl.execEditorCommand('sortlines')">
+                                Sort Lines
+                                <span class="md-alt-text">{{ 'M-A-S' | keyboardShortcut }}</span>
+                            </md-button>
                         </md-menu-item>
                     </md-menu-content>
                 </md-menu>

public/app/services/settingsService.js

@@ -287,7 +287,7 @@ angular.module('kibibitCodeEditor')
               var session = settings.currentEditor.getSession();
               session.setMode(matchedMode.mode);
             }
-            syntaxMode = newValue;
+            syntaxMode = matchedMode.name;
           }
         });