mulesoft · jcenturion · Sep 23, 2015
diff --git a/.jshintrc b/.jshintrc
@@ -47,6 +47,7 @@
     "should": false,
     "sinon": false,
     "xdescribe": false,
-    "xit": false
+    "xit": false,
+    "Firebase": false
   }
 }
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -86,7 +86,7 @@ module.exports = function (grunt) {
 
     connect: {
       options: {
-        hostname: 'localhost',
+        hostname: '0.0.0.0',
         port:      grunt.option('port') || 9013
       },
 

diff --git a/app/index.html b/app/index.html
@@ -9,14 +9,16 @@
 
     <!-- build:css({.,.tmp,app}) styles/api-designer-vendor.css -->
     <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
-
-    <link rel="stylesheet" href="vendor/styles/codemirror.css">
+    <!-- <link rel="stylesheet" href="vendor/styles/codemirror.css"> -->
+    <link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="vendor/styles/solarized.css">
     <link rel="stylesheet" href="vendor/styles/show-hint.css">
-
+    <link rel="stylesheet" href="bower_components/angular-hotkeys/build/hotkeys.css">
     <link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css">
 
-    <link rel="stylesheet" href="bower_components/api-console/dist/styles/api-console-light-theme.css">
+    <!--API Console-->
+    <link rel="stylesheet" href="bower_components/api-console/dist/styles/api-console-dark-theme.css">
+    <!--API Console-->
     <!-- endbuild -->
 
     <!-- build:css({.,.tmp,app}) styles/api-designer.css -->
@@ -27,9 +29,15 @@
     <link rel="stylesheet" href="styles/file-browser.css">
     <link rel="stylesheet" href="styles/code-mirror-overrides.css">
     <link rel="stylesheet" href="styles/api-console-overrides.css">
-    <link rel="stylesheet" href="styles/font-awesome-overrides.css">
     <link rel="stylesheet" href="styles/modal.css">
     <link rel="stylesheet" href="styles/menubar.css">
+    <link rel="stylesheet" href="styles/omnisearch.css">
+    <link rel="stylesheet" href="styles/bottom-bar.css">
+    <link rel="stylesheet" href="styles/try-it.css">
+    <link rel="stylesheet" href="styles/resource-list.css">
+    <link rel="stylesheet" href="styles/breadcrumb.css">
+    <link rel="stylesheet" href="styles/editor-design.css">
+    <link rel="stylesheet" href="styles/hotkeys-overrides.css">
     <!-- endbuild -->
   </head>
   <body ng-app="ramlEditorApp">
@@ -43,11 +51,11 @@
       which isn't enough for API Console to work properly
     -->
     <script src="bower_components/jquery/dist/jquery.js"></script>
-    <script src="bower_components/velocity/velocity.js"></script>
 
     <script src="bower_components/angular/angular.js"></script>
-    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    <script src="vendor/scripts/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
+    <script src="bower_components/angular-hotkeys/build/hotkeys.js"></script>
     <script src="bower_components/es5-shim/es5-shim.js"></script>
 
     <script src="bower_components/raml-js-parser/dist/raml-parser.js"></script>
@@ -59,39 +67,43 @@
     <script src="bower_components/jszip/jszip-deflate.js"></script>
     <script src="bower_components/jszip/jszip-inflate.js"></script>
 
-    <script src="bower_components/marked/lib/marked.js"></script>
-    <script src="bower_components/highlightjs/highlight.pack.js"></script>
-    <script src="bower_components/vkbeautify/vkbeautify.js"></script>
-    <script src="bower_components/crypto-js/rollups/hmac-sha1.js"></script>
-    <script src="bower_components/crypto-js/components/enc-base64.js"></script>
     <script src="bower_components/codemirror/lib/codemirror.js"></script>
     <script src="bower_components/codemirror/mode/javascript/javascript.js"></script>
     <script src="bower_components/codemirror/mode/xml/xml.js"></script>
     <script src="bower_components/codemirror/mode/yaml/yaml.js"></script>
-    <script src="bower_components/codemirror/addon/dialog/dialog.js"></script>
-    <script src="bower_components/codemirror/addon/search/search.js"></script>
+    <script src="bower_components/codemirror/mode/markdown/markdown.js"></script>
+    <script src="bower_components/codemirror/mode/gfm/gfm.js"></script>
+
+    <script src="bower_components/codemirror/addon/selection/active-line.js"></script>
     <script src="bower_components/codemirror/addon/search/searchcursor.js"></script>
     <script src="bower_components/codemirror/addon/lint/lint.js"></script>
-    <script src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
-    <script src="bower_components/angular-marked/angular-marked.js"></script>
-    <script src="bower_components/angular-highlightjs/angular-highlightjs.js"></script>
-    <script src="bower_components/slug/slug.js"></script>
+
     <script src="bower_components/FileSaver/FileSaver.js"></script>
+    <script src="bower_components/file-saver.js/FileSaver.js"></script>
+
+    <!--API Console-->
+    <script src="bower_components/highlightjs/highlight.pack.js"></script>
+    <script src="bower_components/crypto-js/rollups/hmac-sha1.js"></script>
+    <script src="bower_components/crypto-js/components/enc-base64.js"></script>
+    <script src="bower_components/marked/lib/marked.js"></script>
     <script src="bower_components/raml-client-generator/dist/raml-client-generator.js"></script>
+    <script src="bower_components/slug/slug.js"></script>
+    <script src="bower_components/velocity/velocity.js"></script>
+    <script src="bower_components/vkbeautify/vkbeautify.js"></script>
+    <script src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
+    <script src="bower_components/angular-highlightjs/angular-highlightjs.js"></script>
+    <script src="bower_components/angular-marked/angular-marked.js"></script>
+    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/api-console/dist/scripts/api-console.js"></script>
-    <script src="bower_components/file-saver.js/FileSaver.js"></script>
+    <!--API Console-->
     <!-- endbuild -->
 
     <!-- build:js({.,.tmp,app}) scripts/api-designer.js -->
-    <script src="vendor/scripts/codemirror.js"></script>
     <script src="vendor/scripts/foldcode.js"></script>
     <script src="vendor/scripts/foldgutter.js"></script>
-    <script src="vendor/scripts/gfm.js"></script>
-    <script src="vendor/scripts/javascript.js"></script>
-    <script src="vendor/scripts/markdown.js"></script>
     <script src="vendor/scripts/overlay.js"></script>
     <script src="vendor/scripts/show-hint.js"></script>
-    <script src="vendor/scripts/xml.js"></script>
+    <script src="vendor/scripts/keymap.js"></script>
 
     <script src="scripts/app.js"></script>
     <script src="scripts/services/utils.js"></script>
@@ -118,9 +130,11 @@
     <script src="scripts/services/swagger-to-raml.js"></script>
     <script src="scripts/services/import-service.js"></script>
     <script src="scripts/services/import-service-conflict-modal.js"></script>
+    <script src="scripts/services/event-emitter.js"></script>
+    <script src="scripts/services/raml-editor-context.js"></script>
     <script src="scripts/filters/string-filters.js"></script>
     <script src="scripts/controllers/raml-editor-main.js"></script>
-    <script src="scripts/controllers/raml-editor-shelf.js"></script>
+    <!--<script src="scripts/controllers/raml-editor-shelf.js"></script>-->
     <script src="scripts/controllers/notifications.js"></script>
     <script src="scripts/controllers/mocking-service-controller.js"></script>
     <script src="scripts/directives/splitter.js"></script>
@@ -136,7 +150,16 @@
     <script src="scripts/directives/raml-editor-new-file-button.js"></script>
     <script src="scripts/directives/raml-editor-export-files-button.js"></script>
     <script src="scripts/directives/raml-editor-import-button.js"></script>
+    <script src="scripts/directives/raml-editor-omnisearch.js"></script>
+    <script src="scripts/directives/raml-editor-bottom-bar.js"></script>
+    <script src="scripts/directives/raml-editor-try-it.js"></script>
+    <script src="scripts/directives/raml-editor-resource-list.js"></script>
+    <script src="scripts/directives/raml-editor-breadcrumb.js"></script>
+    <script src="scripts/directives/raml-editor-design.js"></script>
     <script src="scripts/directives/ui-tree-node.js"></script>
     <!-- endbuild -->
+
+    <!-- build:js({.,.tmp,app}) scripts/api-designer.js -->
+    <!-- endbuild -->
   </body>
 </html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -1,15 +1,28 @@
 (function () {
   'use strict';
 
+  if (typeof String.prototype.startsWith !== 'function') {
+    String.prototype.startsWith = function (str){
+      return this.slice(0, str.length) === str;
+    };
+  }
+
+  (function () {
+    angular.module('raml', [])
+      .factory('ramlParser', function () {
+        return RAML.Parser;
+      });
+
+    RAML.Settings = RAML.Settings || {};
+  })();
+
   angular.module('ramlEditorApp', [
     // angular-ui
     'ui.bootstrap.modal',
     'ui.bootstrap.tpls',
     'ui.tree',
-
     // console
     'ramlConsoleApp',
-
     // project
     'codeMirror',
     'fs',
@@ -21,11 +34,116 @@
     'validate',
     'autoFocus',
     'rightClick',
-    'dragAndDrop'
+    'dragAndDrop',
+    'cfp.hotkeys'
   ])
-    .run(function ($window) {
+    .run(function ($window, hotkeys) {
       // Adding proxy settings for api console
-      $window.RAML.Settings.proxy = '/proxy/';
+      $window.RAML.Settings.proxy    = '/proxy/';
+
+      hotkeys.add({
+        combo: 'mod+S',
+        description: 'Save current file'
+      });
+      hotkeys.add({
+        combo: 'shift+mod+S',
+        description: 'Save All'
+      });
+      hotkeys.add({
+        combo: 'mod+E',
+        description: 'Extract to'
+      });
+      hotkeys.add({
+        combo: 'mod + p',
+        description: 'Show global search'
+      });
+      hotkeys.add({
+        combo: 'Ctrl+Space',
+        description: 'Start autocomplete'
+      });
+      hotkeys.add({
+        combo: 'mod+/',
+        description: 'Toggle Comment'
+      });
+      hotkeys.add({
+        combo: 'shift+mod+A',
+        description: 'Select Resource'
+      });
+      hotkeys.add({
+        combo: 'mod+Ctrl+down',
+        description: 'Swap line down'
+      });
+      hotkeys.add({
+        combo: 'mod+Ctrl+up',
+        description: 'Swap line up'
+      });
+      hotkeys.add({
+        combo: 'mod+D',
+        description: 'Select next occurrence'
+      });
+      hotkeys.add({
+        combo: 'mod+K mod+K',
+        description: 'Delete line right'
+      });
+      hotkeys.add({
+        combo: 'mod+K mod+L',
+        description: 'Down case at cursor'
+      });
+      hotkeys.add({
+        combo: 'mod+K mod+U',
+        description: 'Up case at cursor'
+      });
+      hotkeys.add({
+        combo: 'mod+L',
+        description: 'Select line'
+      });
+      // hotkeys.add({
+      //   combo: 'shift+Alt+down',
+      //   description: 'Select lines downward'
+      // });
+      // hotkeys.add({
+      //   combo: 'shift+Alt+up',
+      //   description: 'Select lines upward'
+      // });
+      hotkeys.add({
+        combo: 'shift+mod+D',
+        description: 'Duplicate line'
+      });
+      // hotkeys.add({
+      //   combo: 'shift + Ctrl + T',
+      //   description: 'toggleTheme'
+      // });
+      hotkeys.add({
+        combo: 'shift+Tab',
+        description: 'Indent less'
+      });
+
+      hotkeys.del('?');
+    })
+    .config(function(hotkeysProvider) {
+      hotkeysProvider.templateTitle = 'Keyboard Shortcuts';
+
+      var template = [
+        '<div class="cfp-container" ng-class="{in: helpVisible}" style="display: none;">',
+        '  <h4 class="cfp-hotkeys-title" ng-if="!header">{{ title }}</h4>',
+        '  <div ng-bind-html="header" ng-if="header"></div>',
+        '  <div>',
+        '    <table>',
+        '      <tbody>',
+        '        <tr ng-repeat="hotkey in hotkeys | filter:{ description: \'!$$undefined$$\' }">',
+        '          <td class="cfp-hotkeys-keys">',
+        '            <span ng-repeat="key in hotkey.format() track by $index" class="cfp-hotkeys-key">{{ key }}</span>',
+        '          </td>',
+        '          <td class="cfp-hotkeys-text">{{ hotkey.description }}</td>',
+        '        </tr>',
+        '      </tbody>',
+        '    </table>',
+        '  </div>',
+        '</div>',
+        '<div class="cfp-overlay" ng-class="{in: helpVisible}" style="display: none;"></div>'
+      ];
+
+      hotkeysProvider.template = template.join('\n');
     })
   ;
 })();
diff --git a/app/scripts/controllers/mocking-service-controller.js b/app/scripts/controllers/mocking-service-controller.js
@@ -9,7 +9,10 @@
     ) {
       function addBaseUri() {
         function setLine(lineNumber, line, prefix) {
-          $scope.editor.setLine(lineNumber, (prefix || '') + $scope.editor.getLine(lineNumber) + '\n' + line);
+          var from = {line: lineNumber, ch: 0};
+          var to   = {line: lineNumber, ch: $scope.editor.getLine(lineNumber).length};
+
+          $scope.editor.replaceRange((prefix || '') + $scope.editor.getLine(lineNumber) + '\n' + line, from, to);
         }
 
         var baseUri = 'baseUri: ' + $scope.mock.baseUri;
@@ -41,14 +44,18 @@
         var baseUriLine = 'baseUri: ' + $scope.mock.baseUri;
         var lineNumber  = void(0);
         var line        = void(0);
+        var from, to;
 
         // trying to find mocked baseUri
         // and remove it
         for (lineNumber = 0; lineNumber < $scope.editor.lineCount(); lineNumber++) {
           line = $scope.editor.getLine(lineNumber).trim();
 
           if (line === baseUriLine) {
-            $scope.editor.removeLine(lineNumber);
+            from = {line: lineNumber, ch: 0};
+            to   = {line: lineNumber, ch: $scope.editor.getLine(lineNumber).length};
+
+            $scope.editor.replaceRange('', from, to);
             break;
           }
         }
@@ -59,7 +66,9 @@
           line = $scope.editor.getLine(lineNumber).trim();
 
           if (line.indexOf('#') === 0 && line.slice(1).trim().indexOf('baseUri: ') === 0) {
-            $scope.editor.setLine(lineNumber, line.slice(1).trim());
+            from = {line: lineNumber, ch: 0};
+            to   = {line: lineNumber, ch: $scope.editor.getLine(lineNumber).length};
+            $scope.editor.replaceRange(line.slice(1).trim(), from, to);
             break;
           }
         }

diff --git a/app/scripts/controllers/notifications.js b/app/scripts/controllers/notifications.js
@@ -3,7 +3,7 @@
 
   angular.module('ramlEditorApp')
     .constant('NOTIFICATION_TIMEOUT', 3000)
-    .controller('notifications', function (NOTIFICATION_TIMEOUT, $scope, $timeout) {
+    .controller('notifications', function (NOTIFICATION_TIMEOUT, $scope, $timeout, eventEmitter) {
       var notifications = [];
       $scope.shouldDisplayNotifications = false;
 
@@ -28,7 +28,7 @@
         }
       }
 
-      $scope.$on('event:notification', function (e, args) {
+      eventEmitter.subscribe('event:notification', function (args) {
         notifications.push(JSON.parse(JSON.stringify(args)));
         processNotifications();
       });