Allow CodeEditor to be focused via the focus prop

blocks/library/html/index.js

@@ -60,7 +60,11 @@ registerBlockType( 'core/html', {
 			{ preview ? (
 				<SandBox html={ attributes.content } />
 			) : (
-				<CodeEditor value={ attributes.content } onChange={ content => setAttributes( { content } ) } />
+				<CodeEditor
+					value={ attributes.content }
+					focus={ !! focus }
+					onChange={ content => setAttributes( { content } ) }
+				/>
 			) }
 		</div>
 	) ),

components/code-editor/README.md

@@ -33,6 +33,13 @@ The source code to load into the code editor.
 - Type: `string`
 - Required: Yes
 
+### focus
+
+Whether or not the code editor should be focused.
+
+- Type: `boolean`
+- Required: No
+
 ### onChange
 
 The function called when the user has modified the source code via the

components/code-editor/index.js

@@ -17,11 +17,20 @@ class CodeEditor extends Component {
 
 		this.editor.on( 'blur', this.onBlur );
 		this.editor.on( 'keyHandled', this.onKeyHandled );
+
+		// TODO: We shouldn't need this RAF...
+		window.requestAnimationFrame( () => {
+			this.updateFocus();
+		} );
 	}
 
-	componentWillReceiveProps( { value } ) {
-		if ( this.props.value !== value && this.editor.getValue() !== value ) {
-			this.editor.setValue( value );
+	componentDidUpdate( prevProps ) {
+		if ( this.props.value !== prevProps.value && this.editor.getValue() !== this.props.value ) {
+			this.editor.setValue( this.props.value );
+		}
+
+		if ( this.props.focus !== prevProps.focus ) {
+			this.updateFocus();
 		}
 	}
 
@@ -46,6 +55,12 @@ class CodeEditor extends Component {
 		event.stopImmediatePropagation();
 	}
 
+	updateFocus() {
+		if ( this.props.focus && ! this.editor.hasFocus() ) {
+			this.editor.focus();
+		}
+	}
+
 	render() {
 		return <textarea ref={ ref => this.textarea = ref } value={ this.props.value } />;
 	}