focus last editor when saveditemspane closes

src/components/ContentWrap.jsx

@@ -676,6 +676,9 @@ export default class ContentWrap extends Component {
 	getDemoFrame(callback) {
 		callback(this.frame);
 	}
+	editorFocusHandler(editor) {
+		this.props.onEditorFocus(editor);
+	}
 
 	render() {
 		return (
@@ -750,6 +753,7 @@ export default class ContentWrap extends Component {
 							}}
 							onChange={this.onHtmlCodeChange.bind(this)}
 							onCreation={el => (this.cm.html = el)}
+							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 					</div>
 					<div
@@ -813,6 +817,7 @@ export default class ContentWrap extends Component {
 							}}
 							onChange={this.onCssCodeChange.bind(this)}
 							onCreation={el => (this.cm.css = el)}
+							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 					</div>
 					<div
@@ -863,6 +868,7 @@ export default class ContentWrap extends Component {
 							autoComplete={this.props.prefs.autoComplete}
 							onChange={this.onJsCodeChange.bind(this)}
 							onCreation={el => (this.cm.js = el)}
+							onFocus={this.editorFocusHandler.bind(this)}
 						/>
 						{/* Inlet(scope.cm.js); */}
 					</div>

src/components/SavedItemPane.jsx

@@ -69,6 +69,7 @@ export default class SavedItemPane extends Component {
 			const item = this.props.items[selectedItemElement.dataset.itemId];
 			console.log('opening', item);
 			this.props.itemClickHandler(item);
+			trackEvent('ui', 'openItemKeyboardShortcut');
 		}
 
 		// Fork shortcut inside saved creations panel with Ctrl/⌘ + F

src/components/UserCodeMirror.jsx

@@ -12,7 +12,6 @@ import 'codemirror/addon/fold/xml-fold.js';
 import 'codemirror/addon/fold/indent-fold.js';
 import 'codemirror/addon/fold/comment-fold.js';
 import 'codemirror/addon/fold/brace-fold.js';
-// import 'codemirror/addon/mode/loadmode.js';
 import 'codemirror/addon/hint/show-hint.js';
 import 'codemirror/addon/hint/javascript-hint.js';
 import 'codemirror/addon/hint/xml-hint.js';
@@ -106,7 +105,7 @@ export default class UserCodeMirror extends Component {
 			}
 		});
 		this.cm.on('focus', editor => {
-			// editorWithFocus = editor;
+			if (typeof this.props.onFocus === 'function') this.props.onFocus(editor);
 		});
 		this.cm.on('change', this.props.onChange);
 		this.cm.addKeyMap({

src/components/app.jsx

@@ -413,6 +413,9 @@ export default class App extends Component {
 		this.setState({ isAddLibraryModalOpen: true });
 	}
 	closeSavedItemsPane() {
+		if (this.editorWithFocus) {
+			this.editorWithFocus.focus();
+		}
 		this.setState({
 			isSavedItemPaneOpen: false
 		});
@@ -462,7 +465,7 @@ export default class App extends Component {
 
 	closeAllOverlays() {
 		if (this.state.isSavedItemPaneOpen) {
-			this.setState({ isSavedItemPaneOpen: false });
+			this.closeSavedItemsPane();
 		}
 	}
 	onExternalLibChange(newValues) {
@@ -926,6 +929,10 @@ export default class App extends Component {
 		});
 	}
 
+	editorFocusHandler(editor) {
+		this.editorWithFocus = editor;
+	}
+
 	render() {
 		return (
 			<div>
@@ -954,6 +961,7 @@ export default class App extends Component {
 						onCodeModeChange={this.onCodeModeChange.bind(this)}
 						onRef={comp => (this.contentWrap = comp)}
 						prefs={this.state.prefs}
+						onEditorFocus={this.editorFocusHandler.bind(this)}
 					/>
 					<div class="global-console-container" id="globalConsoleContainerEl" />
 					<Footer