Problem: when editing sections, last editing section received all keyboard shortcuts

Solution: implement per section keyboard shortcuts

app/app/components/document/document-heading.js

@@ -22,18 +22,27 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 	editMode: false,
 	docName: '',
 	docExcerpt: '',
-
 	hasNameError: computed.empty('docName'),
 	hasExcerptError: computed.empty('docExcerpt'),
 
+	keyUp(e) {
+		if (e.keyCode === 27) { // escape key
+			this.send('onCancel');
+		}
+	},
+
 	actions: {
 		toggleEdit() {
 			this.set('docName', this.get('document.name'));
 			this.set('docExcerpt', this.get('document.excerpt'));
 			this.set('editMode', true);
+
+			Ember.run.schedule('afterRender', () => {
+				$('#document-name').select();
+			});
 		},
 
-		onSaveDocument() {
+		onSave() {
 			if (this.get('hasNameError') || this.get('hasExcerptError')) {
 				return;
 			}
@@ -46,7 +55,7 @@ export default Ember.Component.extend(NotifierMixin, TooltipMixin, {
 			this.set('editMode', false);
 		},
 
-		cancel() {
+		onCancel() {
 			this.set('editMode', false);
 		}
 	}

app/app/components/section/base-editor-inline.js

@@ -19,8 +19,12 @@ const {
 export default Ember.Component.extend({
 	drop: null,
 	busy: false,
-
+	mousetrap: null,
 	hasNameError: computed.empty('page.title'),
+	containerId: Ember.computed('page', function () {
+		let page = this.get('page');
+		return `base-editor-inline-container-${page.id}`;
+	}),
 	pageId: Ember.computed('page', function () {
 		let page = this.get('page');
 		return `page-editor-${page.id}`;
@@ -43,16 +47,20 @@ export default Ember.Component.extend({
 	}),
 
 	didRender() {
-		let self = this;
+		let msContainer = document.getElementById(this.get('containerId'));
-		Mousetrap.bind('esc', function () {
+		let mousetrap = new Mousetrap(msContainer);
-			self.send('onCancel');
+
+		mousetrap.bind('esc', () => {
+			this.send('onCancel');
 			return false;
 		});
-		Mousetrap.bind(['ctrl+s', 'command+s'], function () {
+		mousetrap.bind(['ctrl+s', 'command+s'], () => {
-			self.send('onAction');
+			this.send('onAction');
 			return false;
 		});
 
+		this.set('mousetrap', mousetrap);
+
 		$('#' + this.get('pageId')).focus(function() {
 			$(this).select();
 		});
@@ -65,8 +73,11 @@ export default Ember.Component.extend({
 			drop.destroy();
 		}
 
-		Mousetrap.unbind('esc');
+		let mousetrap = this.get('mousetrap');
-		Mousetrap.unbind(['ctrl+s', 'command+s']);
+		if (is.not.null(mousetrap)) {
+			mousetrap.unbind('esc');
+			mousetrap.unbind(['ctrl+s', 'command+s']);
+		}
 	},
 
 	actions: {

app/app/styles/widget/widget-button.scss

@@ -39,6 +39,8 @@
 }
 
 .round-button-mono {
+	@extend .no-select;
+	@include ease-in();
     display: inline-block;
     position: relative;
     overflow: hidden;
@@ -52,9 +54,8 @@
     vertical-align: middle;
     border: 1px solid $color-stroke;
     text-align: center;
-	@extend .no-select;
-	@include ease-in();
     font-size: 1.2rem;
+    background-color: transparent;
 
     &:hover {
         @extend .z-depth-tiny;

app/app/templates/components/document/document-heading.hbs

@@ -4,20 +4,22 @@
 		<div class="doc-excerpt">{{document.excerpt}}</div>
 	</div>
 {{else}}
-	<div class="edit-document-heading">
+	<form {{action "onSave" on="submit"}}>
-		<div class="input-inline input-transparent edit-doc-title">
+		<div class="edit-document-heading">
-			{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
+			<div class="input-inline input-transparent edit-doc-title">
-		</div>
+				{{focus-input id="document-name" type="text" value=docName class=(if hasNameError 'error-inline') placeholder="Name" autocomplete="off"}}
-		<div class="input-inline input-transparent edit-doc-excerpt">
-			{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt" autocomplete="off"}}
-		</div>
-		<div>
-			<div class="round-button-mono" {{action 'onSaveDocument'}}>
-				<i class="material-icons color-green">check</i>
 			</div>
-			<div class="round-button-mono" {{action 'cancel'}}>
+			<div class="input-inline input-transparent edit-doc-excerpt">
-				<i class="material-icons color-gray">close</i>
+				{{input id="document-excerpt" type="text" value=docExcerpt class=(if hasExcerptError 'error-inline') placeholder="Excerpt" autocomplete="off"}}
+			</div>
+			<div>
+				<button type="submit" class="round-button-mono" {{action 'onSave'}}>
+					<i class="material-icons color-green">check</i>
+				</button>
+				<div class="round-button-mono" {{action 'onCancel'}}>
+					<i class="material-icons color-gray">close</i>
+				</div>
 			</div>
 		</div>
-	</div>
+	</form>
 {{/unless}}

app/app/templates/components/dropdown-dialog.hbs

@@ -5,18 +5,12 @@
 	    </div>
 	    <div class="actions">
 	        {{#if showCancel}}
-	            <div class="flat-button" {{action 'onCancel'}}>
+	            <div class="flat-button" {{action 'onCancel'}}>cancel</div>
-	                cancel
-	            </div>
 	        {{/if}}
 			{{#if hasSecondButton}}
-				<div class="flat-button {{color2}}" {{action 'onAction2'}}>
+				<div class="flat-button {{color2}}" {{action 'onAction2'}}>{{button2}}</div>
-		            {{button2}}
-		        </div>
 			{{/if}}
-	        <div class="flat-button {{color}} dropdown-dialog-action-button" {{action 'onAction'}}>
+	        <div class="flat-button {{color}} dropdown-dialog-action-button" {{action 'onAction'}}>{{button}}</div>
-	            {{button}}
-	        </div>
 	    </div>
 	    <div class="clearfix"></div>
 	</form>

app/app/templates/components/section/base-editor-inline.hbs

@@ -1,4 +1,4 @@
-<div class="document-editor {{if blockMode 'document-editor-full'}}">
+<div id={{containerId}} class="document-editor {{if blockMode 'document-editor-full'}}">
 	<div class="toolbar">
 		<div class="buttons pull-right">
 			{{#if busy}}