Keyboard shortcut settings

res/core.js

@@ -130,6 +130,9 @@ define([
         utils.setInputValue("#textarea-settings-publish-pdf-template", settings.pdfTemplate);
         // SSH proxy
         utils.setInputValue("#input-settings-ssh-proxy", settings.sshProxy);
+        
+        // Load shortcuts settings
+        shortcutMgr.loadSettings();
 
         // Load extension settings
         eventMgr.onLoadSettings();
@@ -584,6 +587,9 @@ define([
         else {
             document.body.innerHTML = bodyIndexHTML;
         }
+        
+        // Populate shortcuts in settings
+        shortcutMgr.addSettingEntries();
 
         // listen to online/offline events
         $(window).on('offline', core.setOffline);

res/eventMgr.js

@@ -34,7 +34,6 @@ define([
     "extensions/buttonHtmlCode",
     "extensions/buttonViewer",
     "extensions/welcomeTour",
-    "extensions/shortcutRecorder",
     "extensions/userCustom",
     "bootstrap",
     "jquery-waitforimages"

res/extensions/shortcutRecorder.js

@@ -1,24 +0,0 @@
-define([
-    "jquery",
-    "underscore",
-    "classes/Extension",
-    "mousetrap",
-    "mousetrap-record",
-], function($, _, Extension, mousetrap) {
-	
-    var shortcutRecorder = new Extension("shortcutRecorder", "Shortcut recorder");
-    
-    shortcutRecorder.onReady = function() {
-    	$('.button-record-shortcut').click(function() {
-    		var $button = $(this);
-    		Mousetrap.record(function(sequence) {
-    			$button.before(['<div class="alert alert-dismissable">',
-'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>',
-sequence.join(' '),
-'</div>'].join());
-            });
-    	});
-    };
-
-    return shortcutRecorder;
-});

res/html/bodyIndex.html

@@ -886,11 +886,11 @@
 					<li class="active"><a class="action-load-settings"
 						href="#tabpane-settings-editor" data-toggle="tab">Editor</a></li>
 					<li><a class="action-load-settings"
-						href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li>
+						href="#tabpane-settings-services" data-toggle="tab">Services</a></li>
-					<li><a class="action-load-settings"
-						href="#tabpane-settings-publish" data-toggle="tab">Publish</a></li>
 					<li><a class="action-load-settings"
 						href="#tabpane-settings-extensions" data-toggle="tab">Extensions</a></li>
+					<li><a class="action-load-settings"
+						href="#tabpane-settings-shortcuts" data-toggle="tab">Shortcuts</a></li>
 					<li><a class="action-load-settings"
 						href="#tabpane-settings-utils" data-toggle="tab">Utils</a></li>
 				</ul>
@@ -969,18 +969,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="tab-pane" id="tabpane-settings-shortcuts">
+					<div class="tab-pane" id="tabpane-settings-services">
-						<div class="form-horizontal">
-							<div class="form-group">
-								<label class="col-lg-4 control-label"
-									for="input-settings-shortcut">Shortcut</label>
-								<div class="col-lg-7">
-									<button class="btn btn-default button-record-shortcut">Click to record</button>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="tab-pane" id="tabpane-settings-publish">
 						<div class="form-horizontal">
 							<div class="form-group">
 								<label class="col-lg-4 control-label"
@@ -1026,6 +1015,10 @@
 							href="https://github.com/benweet/stackedit/blob/master/doc/developer-guide.md#architecture">Create
 								your own extension...</a></span>
 					</div>
+					<div class="tab-pane" id="tabpane-settings-shortcuts">
+						<div class="form-horizontal">
+						</div>
+					</div>
 					<div class="tab-pane" id="tabpane-settings-utils">
 						<div class="tab-pane-button-container">
 							<a href="#"

res/html/settingsShortcutEntry.html

@@ -0,0 +1,13 @@
+<div class="form-group">
+	<label class="col-lg-4 control-label"
+		for="input-settings-shortcut-<%= shortcut.name %>"><%= shortcut.title %></label>
+	<div class="col-lg-8 form-inline">
+		<input type="text" id="input-settings-shortcut-<%= shortcut.name %>"
+			class="form-control col-lg-4">
+		<label class="col-lg-2 control-label"
+		    for="input-settings-shortcut-<%= shortcut.name %>-mac">Mac</label>
+        <input type="text"
+			id="input-settings-shortcut-<%= shortcut.name %>-mac"
+			class="form-control col-lg-4">
+	</div>
+</div>

res/shortcutMgr.js

@@ -2,7 +2,9 @@ define([
     "underscore",
     "eventMgr",
     "settings",
-    ], function(_, eventMgr, settings) {
+    "utils",
+    "text!html/settingsShortcutEntry.html",
+    ], function(_, eventMgr, settings, utils, settingsShortcutEntryHTML) {
 
     var shortcutMgr = {};
 
@@ -16,7 +18,7 @@ define([
             isPageDown: true
         },
         'italic': {
-            name: 'Emphasis',
+            title: 'Emphasis',
             defaultKey: {
                 win: 'Ctrl-I',
                 mac: 'Command-I|Ctrl-I',
@@ -24,7 +26,7 @@ define([
             isPageDown: true
         },
         'link': {
-            name: 'Hyperlink',
+            title: 'Hyperlink',
             defaultKey: {
                 win: 'Ctrl-L',
                 mac: 'Command-L|Ctrl-L',
@@ -32,7 +34,7 @@ define([
             isPageDown: true
         },
         'quote': {
-            name: 'Blockquote',
+            title: 'Blockquote',
             defaultKey: {
                 win: 'Ctrl-Q',
                 mac: 'Command-Q|Ctrl-Q',
@@ -40,7 +42,7 @@ define([
             isPageDown: true
         },
         'code': {
-            name: 'Code Sample',
+            title: 'Code Sample',
             defaultKey: {
                 win: 'Ctrl-K',
                 mac: 'Command-K|Ctrl-K',
@@ -48,7 +50,7 @@ define([
             isPageDown: true
         },
         'image': {
-            name: 'Image',
+            title: 'Image',
             defaultKey: {
                 win: 'Ctrl-G',
                 mac: 'Command-G|Ctrl-G',
@@ -56,7 +58,7 @@ define([
             isPageDown: true
         },
         'olist': {
-            name: 'Numbered List',
+            title: 'Numbered List',
             defaultKey: {
                 win: 'Ctrl-O',
                 mac: 'Command-O|Ctrl-O',
@@ -64,7 +66,7 @@ define([
             isPageDown: true
         },
         'ulist': {
-            name: 'Bulleted List',
+            title: 'Bulleted List',
             defaultKey: {
                 win: 'Ctrl-U',
                 mac: 'Command-U|Ctrl-U',
@@ -72,7 +74,7 @@ define([
             isPageDown: true
         },
         'heading': {
-            name: 'Heading',
+            title: 'Heading',
             defaultKey: {
                 win: 'Ctrl-H',
                 mac: 'Command-H|Ctrl-H',
@@ -80,7 +82,7 @@ define([
             isPageDown: true
         },
         'hr': {
-            name: 'Horizontal Rule',
+            title: 'Horizontal Rule',
             defaultKey: {
                 win: 'Ctrl-R',
                 mac: 'Command-R|Ctrl-R',
@@ -88,7 +90,7 @@ define([
             isPageDown: true
         },
         'undo': {
-            name: 'Undo',
+            title: 'Undo',
             defaultKey: {
                 win: 'Ctrl-Z',
                 mac: 'Command-Z',
@@ -101,8 +103,8 @@ define([
         'redo': {
             title: 'Redo',
             defaultKey: {
-                win: 'Ctrl-Shift-Z|Ctrl-Y',
+                win: 'Ctrl-Y|Ctrl-Shift-Z',
-                mac: 'Command-Shift-Z|Command-Y',
+                mac: 'Command-Y|Command-Shift-Z',
             },
             exec: function(editor) {
                 editor.redo();
@@ -153,17 +155,6 @@ define([
             },
             multiSelectAction: "forEachLine"
         },
-        'indent': {
-            title: 'Sort Lines',
-            defaultKey: {
-                win: 'Ctrl-Alt-S',
-                mac: 'Command-Alt-S',
-            },
-            exec: function(editor) {
-                editor.sortLines();
-            },
-            multiSelectAction: "forEachLine"
-        },
         'modifyNumberUp': {
             title: 'Number Up',
             defaultKey: {
@@ -214,6 +205,28 @@ define([
             },
             readOnly: true
         },
+        'findnext': {
+            title: 'Find Next',
+            defaultKey: {
+                win: 'Ctrl-P',
+                mac: 'Command-P',
+            },
+            exec: function(editor) {
+                editor.findNext();
+            },
+            readOnly: true
+        },
+        'findprevious': {
+            title: 'Find Previous',
+            defaultKey: {
+                win: 'Ctrl-Shift-P',
+                mac: 'Command-Shift-P',
+            },
+            exec: function(editor) {
+                editor.findPrevious();
+            },
+            readOnly: true
+        },
         'togglerecording': {
             title: 'Toggle Recording',
             defaultKey: {
@@ -249,5 +262,22 @@ define([
         });
     };
 
+    shortcutMgr.addSettingEntries = function() {
+        var shortcutEntries = _.reduce(shortcuts, function(result, shortcut) {
+            return result + _.template(settingsShortcutEntryHTML, {
+                shortcut: shortcut
+            });
+        }, '');
+        var settingsFormElement = document.querySelector('#tabpane-settings-shortcuts .form-horizontal');
+        settingsFormElement && (settingsFormElement.innerHTML = shortcutEntries);
+    };
+
+    shortcutMgr.loadSettings = function() {
+        _.each(shortcuts, function(shortcut) {
+            utils.setInputValue("#input-settings-shortcut-" + shortcut.name, shortcut.bindKey.win);
+            utils.setInputValue("#input-settings-shortcut-" + shortcut.name + '-mac', shortcut.bindKey.mac);
+        });
+    };
+
     return shortcutMgr;
 });

res/styles/main.less

@@ -455,9 +455,9 @@ body {
 		.close {
 		    position: absolute;
 		    float: none;
-			line-height: 10px;
+			line-height: 34px;
 		    margin: 2px 0 2px -30px;
-			padding: 0 8px 4px;
+			padding: 0 8px;
 			font-weight: normal;
 			height: 34px;
 		}