From 3269e1c58ada1a8a63617616093a954a0d813c41 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 8 Jan 2018 12:30:24 +1100
Subject: [PATCH 01/12] Use CodeMirror in Custom HTML block

Introduces a new <CodeEditor> component which wraps a CodeMirror
enhanced <textarea>. This component is then used to provide syntax
highliting in the Custom HTML block.
---
 blocks/library/html/editor.scss               | 16 ++---
 blocks/library/html/index.js                  | 59 +++++++++----------
 .../html/test/__snapshots__/index.js.snap     | 10 ++--
 components/code-editor/README.md              | 42 +++++++++++++
 components/code-editor/index.js               | 44 ++++++++++++++
 components/code-editor/test/index.js          | 23 ++++++++
 components/index.js                           |  1 +
 lib/client-assets.php                         |  3 +
 8 files changed, 154 insertions(+), 44 deletions(-)
 create mode 100644 components/code-editor/README.md
 create mode 100644 components/code-editor/index.js
 create mode 100644 components/code-editor/test/index.js

diff --git a/blocks/library/html/editor.scss b/blocks/library/html/editor.scss
index 40409e2c819c4a..89110a94cdcb10 100644
--- a/blocks/library/html/editor.scss
+++ b/blocks/library/html/editor.scss
@@ -1,9 +1,9 @@
-.wp-block-html.blocks-plain-text {
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	color: $dark-gray-800;
-	padding: .8em 1.6em;
-	overflow-x: auto !important;
-	border: 1px solid $light-gray-500;
-	border-radius: 4px;
+.gutenberg .wp-block-html {
+	iframe {
+		display: block;
+	}
+
+	.CodeMirror {
+		margin: -$block-padding;
+	}
 }
diff --git a/blocks/library/html/index.js b/blocks/library/html/index.js
index 9ed3e582b72944..a9fa2a171f7037 100644
--- a/blocks/library/html/index.js
+++ b/blocks/library/html/index.js
@@ -3,14 +3,13 @@
  */
 import { RawHTML } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { withState } from '@wordpress/components';
+import { withState, SandBox, CodeEditor } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import BlockControls from '../../block-controls';
-import PlainText from '../../plain-text';
 
 export const name = 'core/html';
 
@@ -49,35 +48,33 @@ export const settings = {
 
 	edit: withState( {
 		preview: false,
-	} )( ( { attributes, setAttributes, setState, isSelected, preview } ) => [
-		isSelected && (
-			<BlockControls key="controls">
-				<div className="components-toolbar">
-					<button
-						className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` }
-						onClick={ () => setState( { preview: false } ) }>
-						<span>HTML</span>
-					</button>
-					<button
-						className={ `components-tab-button ${ preview ? 'is-active' : '' }` }
-						onClick={ () => setState( { preview: true } ) }>
-						<span>{ __( 'Preview' ) }</span>
-					</button>
-				</div>
-			</BlockControls>
-		),
-		preview ?
-			<div
-				key="preview"
-				dangerouslySetInnerHTML={ { __html: attributes.content } } /> :
-			<PlainText
-				className="wp-block-html"
-				key="editor"
-				value={ attributes.content }
-				onChange={ ( content ) => setAttributes( { content } ) }
-				aria-label={ __( 'HTML' ) }
-			/>,
-	] ),
+	} )( ( { attributes, setAttributes, setState, isSelected, preview } ) => (
+		<div className="wp-block-html">
+			{ isSelected && (
+				<BlockControls>
+					<div className="components-toolbar">
+						<button
+							className={ `components-tab-button ${ ! preview ? 'is-active' : '' }` }
+							onClick={ () => setState( { preview: false } ) }
+						>
+							<span>HTML</span>
+						</button>
+						<button
+							className={ `components-tab-button ${ preview ? 'is-active' : '' }` }
+							onClick={ () => setState( { preview: true } ) }
+						>
+							<span>{ __( 'Preview' ) }</span>
+						</button>
+					</div>
+				</BlockControls>
+			) }
+			{ preview ? (
+				<SandBox html={ attributes.content } />
+			) : (
+				<CodeEditor value={ attributes.content } onChange={ content => setAttributes( { content } ) } />
+			) }
+		</div>
+	) ),
 
 	save( { attributes } ) {
 		return <RawHTML>{ attributes.content }</RawHTML>;
diff --git a/blocks/library/html/test/__snapshots__/index.js.snap b/blocks/library/html/test/__snapshots__/index.js.snap
index ab2e253b0e5722..230e7e9d9b8224 100644
--- a/blocks/library/html/test/__snapshots__/index.js.snap
+++ b/blocks/library/html/test/__snapshots__/index.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/html block edit matches snapshot 1`] = `
-<textarea
-  aria-label="HTML"
-  class="blocks-plain-text wp-block-html"
-  rows="1"
-/>
+<div
+  class="wp-block-html"
+>
+  <textarea />
+</div>
 `;
diff --git a/components/code-editor/README.md b/components/code-editor/README.md
new file mode 100644
index 00000000000000..92f56cab8448f4
--- /dev/null
+++ b/components/code-editor/README.md
@@ -0,0 +1,42 @@
+CodeEditor
+=======
+
+CodeEditor is a React component that provides the user with a code editor
+that has syntax highliting and linting.
+
+The components acts as a drop-in replacement for a <textarea>, and uses the
+CodeMirror library that is provided as part of WordPress Core.
+
+## Usage
+
+```jsx
+import { CodeEditor } from '@wordpress/components';
+
+function editCode() {
+	return (
+		<CodeEditor
+			value={ '<p>This is some <b>HTML</b> code that will have syntax highlighting!</p>' }
+		    onChange={ value => console.log( value ) }
+		/>
+	);
+}
+```
+
+## Props
+
+The component accepts the following props:
+
+### value
+
+The source code to load into the code editor.
+
+- Type: `string`
+- Required: Yes
+
+### onChange
+
+The function called when the user has modified the source code via the
+editor. It is passed the new value as an argument.
+
+- Type: `Function`
+- Required: No
diff --git a/components/code-editor/index.js b/components/code-editor/index.js
new file mode 100644
index 00000000000000..7f54f2f1278e1b
--- /dev/null
+++ b/components/code-editor/index.js
@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+class CodeEditor extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onBlur = this.onBlur.bind( this );
+	}
+
+	componentDidMount() {
+		const instance = wp.codeEditor.initialize( this.textarea );
+		this.editor = instance.codemirror;
+
+		this.editor.on( 'blur', this.onBlur );
+	}
+
+	componentWillReceiveProps( { value } ) {
+		if ( this.props.value !== value && this.editor.getValue() !== value ) {
+			this.editor.setValue( value );
+		}
+	}
+
+	componentWillUnmount() {
+		this.editor.off( 'blur', this.onBlur );
+
+		this.editor.toTextArea();
+		this.editor = null;
+	}
+
+	onBlur( editor ) {
+		if ( this.props.onChange ) {
+			this.props.onChange( editor.getValue() );
+		}
+	}
+
+	render() {
+		return <textarea ref={ ref => this.textarea = ref } value={ this.props.value } />;
+	}
+}
+
+export default CodeEditor;
diff --git a/components/code-editor/test/index.js b/components/code-editor/test/index.js
new file mode 100644
index 00000000000000..b1be6fa9ddeb0e
--- /dev/null
+++ b/components/code-editor/test/index.js
@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+import { set, noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import CodeEditor from '../';
+
+describe( 'CodeEditor', () => {
+	it( 'should render without an error', () => {
+		set( global, 'wp.codeEditor.initialize', () => ( {
+			codemirror: {
+				on: noop,
+			},
+		} ) );
+
+		const wrapper = shallow( <CodeEditor value={ '<b>wowee</b>' } /> );
+		expect( wrapper.find( 'textarea' ) ).toHaveLength( 1 );
+	} );
+} );
diff --git a/components/index.js b/components/index.js
index d56bdf3e1d53fe..1f1ed1f3c32e9d 100644
--- a/components/index.js
+++ b/components/index.js
@@ -5,6 +5,7 @@ export { default as BaseControl } from './base-control';
 export { default as Button } from './button';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
+export { default as CodeEditor } from './code-editor';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as DropZone } from './drop-zone';
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 87760b81fe1934..4d3e620e6036c4 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -899,6 +899,9 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'post' => $post_to_edit['id'],
 	) );
 	wp_enqueue_editor();
+	wp_enqueue_code_editor( array(
+		'type' => 'text/html',
+	) );
 
 	/**
 	 * Styles

From c78dc36a3ea0edc9f32e9cdaeac247481c12073c Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 8 Jan 2018 16:08:17 +1100
Subject: [PATCH 02/12] Prevent CodeEditor from propagating events

This prevents the cursor from moving around to different blocks while
editing code.
---
 components/code-editor/index.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/code-editor/index.js b/components/code-editor/index.js
index 7f54f2f1278e1b..032fdac179eb6e 100644
--- a/components/code-editor/index.js
+++ b/components/code-editor/index.js
@@ -8,6 +8,7 @@ class CodeEditor extends Component {
 		super( ...arguments );
 
 		this.onBlur = this.onBlur.bind( this );
+		this.onKeyHandled = this.onKeyHandled.bind( this );
 	}
 
 	componentDidMount() {
@@ -15,6 +16,7 @@ class CodeEditor extends Component {
 		this.editor = instance.codemirror;
 
 		this.editor.on( 'blur', this.onBlur );
+		this.editor.on( 'keyHandled', this.onKeyHandled );
 	}
 
 	componentWillReceiveProps( { value } ) {
@@ -25,6 +27,7 @@ class CodeEditor extends Component {
 
 	componentWillUnmount() {
 		this.editor.off( 'blur', this.onBlur );
+		this.editor.off( 'keyHandled', this.onKeyHandled );
 
 		this.editor.toTextArea();
 		this.editor = null;
@@ -36,6 +39,13 @@ class CodeEditor extends Component {
 		}
 	}
 
+	onKeyHandled( editor, name, event ) {
+		// Stop events from propagating out of the component. This makes the editor
+		// behave like a textarea, e.g. pressing CMD+UP moves the cursor to the top of
+		// the editor, rather than to a different element.
+		event.stopImmediatePropagation();
+	}
+
 	render() {
 		return <textarea ref={ ref => this.textarea = ref } value={ this.props.value } />;
 	}

From a2cfe2e173cd995c5c81c4b3ba628c89b4eca1d7 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 8 Jan 2018 17:23:22 +1100
Subject: [PATCH 03/12] Allow CodeEditor to be focused via the `focus` prop

---
 blocks/library/html/index.js     |  6 +++++-
 components/code-editor/README.md |  7 +++++++
 components/code-editor/index.js  | 21 ++++++++++++++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/blocks/library/html/index.js b/blocks/library/html/index.js
index a9fa2a171f7037..51ff621c22a33d 100644
--- a/blocks/library/html/index.js
+++ b/blocks/library/html/index.js
@@ -71,7 +71,11 @@ export const settings = {
 			{ preview ? (
 				<SandBox html={ attributes.content } />
 			) : (
-				<CodeEditor value={ attributes.content } onChange={ content => setAttributes( { content } ) } />
+				<CodeEditor
+					value={ attributes.content }
+					focus={ !! focus }
+					onChange={ content => setAttributes( { content } ) }
+				/>
 			) }
 		</div>
 	) ),
diff --git a/components/code-editor/README.md b/components/code-editor/README.md
index 92f56cab8448f4..40aa774ae5dac5 100644
--- a/components/code-editor/README.md
+++ b/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
diff --git a/components/code-editor/index.js b/components/code-editor/index.js
index 032fdac179eb6e..4d08ae7a314456 100644
--- a/components/code-editor/index.js
+++ b/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 } />;
 	}

From f28b685b95d49b01c2b54db18ea350792fa178b5 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 9 Jan 2018 12:54:26 +1100
Subject: [PATCH 04/12] Improve HTML block styling

Make the CodeEditor in the HTML block look vaguely like what Joen mocked
up in #1386.
---
 blocks/library/html/editor.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/blocks/library/html/editor.scss b/blocks/library/html/editor.scss
index 89110a94cdcb10..9df6feb06a733b 100644
--- a/blocks/library/html/editor.scss
+++ b/blocks/library/html/editor.scss
@@ -4,6 +4,15 @@
 	}
 
 	.CodeMirror {
-		margin: -$block-padding;
+		border-radius: 4px;
+		border: 1px solid $light-gray-500;
+		font-family: $editor-html-font;
+		font-size: $text-editor-font-size;
+		height: auto;
+	}
+
+	.CodeMirror-gutters {
+		background: $white;
+		border-right: none;
 	}
 }

From d7305dc1f564f9cb9ab74dcf60a3222c0934ff19 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 9 Jan 2018 13:04:11 +1100
Subject: [PATCH 05/12] Allow HTML block to be selected when it's in preview
 mode

Prevent the iframe from capturing pointer events and preventing the user
from being able to select the block.
---
 blocks/library/html/editor.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/blocks/library/html/editor.scss b/blocks/library/html/editor.scss
index 9df6feb06a733b..440683f6d238ca 100644
--- a/blocks/library/html/editor.scss
+++ b/blocks/library/html/editor.scss
@@ -1,6 +1,9 @@
 .gutenberg .wp-block-html {
 	iframe {
 		display: block;
+
+		// Disable pointer events so that we can click on the block to select it
+		pointer-events: none;
 	}
 
 	.CodeMirror {

From 40d12e477a10280bbd21b4162efc382331ba5f53 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 9 Jan 2018 17:24:40 +1100
Subject: [PATCH 06/12] Always focus the editor after React has finished
 painting

`componentDidUpdate` and `componentDidMount` fire after DOM
reconcilation but before the frame is painted. CodeMirror's `focus()`
method seems to only work *after* paint. Scheduling `focus()` to happen
after the next frame is painted seems to be the best that we can do.
---
 components/code-editor/index.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/code-editor/index.js b/components/code-editor/index.js
index 4d08ae7a314456..d9170469446df5 100644
--- a/components/code-editor/index.js
+++ b/components/code-editor/index.js
@@ -18,10 +18,7 @@ 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();
-		} );
+		this.updateFocus();
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -57,7 +54,10 @@ class CodeEditor extends Component {
 
 	updateFocus() {
 		if ( this.props.focus && ! this.editor.hasFocus() ) {
-			this.editor.focus();
+			// Need to wait for the next frame to be painted before we can focus the editor
+			window.requestAnimationFrame( () => {
+				this.editor.focus();
+			} );
 		}
 	}
 

From 6206f134987ab7f709d7717414af5812257a3a68 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 10 Jan 2018 12:32:53 +1100
Subject: [PATCH 07/12] Change CodeEditor test to use a snapshot test

We only care that the component renders without an error and doesn't
change unintentionally, which makes this a perfect use case for snapshot
testing.
---
 components/code-editor/test/__snapshots__/index.js.snap | 7 +++++++
 components/code-editor/test/index.js                    | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 components/code-editor/test/__snapshots__/index.js.snap

diff --git a/components/code-editor/test/__snapshots__/index.js.snap b/components/code-editor/test/__snapshots__/index.js.snap
new file mode 100644
index 00000000000000..145b69b94d7d07
--- /dev/null
+++ b/components/code-editor/test/__snapshots__/index.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeEditor should render without an error 1`] = `
+<textarea
+  value="<b>wowee</b>"
+/>
+`;
diff --git a/components/code-editor/test/index.js b/components/code-editor/test/index.js
index b1be6fa9ddeb0e..ce29b4c331cecb 100644
--- a/components/code-editor/test/index.js
+++ b/components/code-editor/test/index.js
@@ -18,6 +18,6 @@ describe( 'CodeEditor', () => {
 		} ) );
 
 		const wrapper = shallow( <CodeEditor value={ '<b>wowee</b>' } /> );
-		expect( wrapper.find( 'textarea' ) ).toHaveLength( 1 );
+		expect( wrapper ).toMatchSnapshot();
 	} );
 } );

From 67cbf3d2b44faf3edc49b9380b25cd48672b05db Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 18 Jan 2018 11:36:31 +1100
Subject: [PATCH 08/12] Increase code editor padding in HTML block

---
 blocks/library/html/editor.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/blocks/library/html/editor.scss b/blocks/library/html/editor.scss
index 440683f6d238ca..6a76fd7d376570 100644
--- a/blocks/library/html/editor.scss
+++ b/blocks/library/html/editor.scss
@@ -18,4 +18,8 @@
 		background: $white;
 		border-right: none;
 	}
+
+	.CodeMirror-lines {
+		padding: 8px 8px 8px 0;
+	}
 }

From bc4f0479d5ca982065c5389f09c1b3bb1df6ff1b Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 18 Jan 2018 11:38:08 +1100
Subject: [PATCH 09/12] Increase z-index of block toolbar elements

Bumps up the z-index of every element that is at the same depth as the
block toolbar. By making these indicies greater than 4, we ensure our
contextual elements appear over the CodeMirror editor. This stops the
CodeMirror gutter from appearing over the block toolbar.
---
 edit-post/assets/stylesheets/_z-index.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss
index 6b152bb03983e3..55caded5d19810 100644
--- a/edit-post/assets/stylesheets/_z-index.scss
+++ b/edit-post/assets/stylesheets/_z-index.scss
@@ -16,12 +16,12 @@ $z-layers: (
 	'.editor-inserter__tab.is-active': 1,
 	'.components-panel__header': 1,
 	'.edit-post-meta-boxes-area.is-loading:before': 1,
-	'.edit-post-meta-boxes-area .spinner': 2,
+	'.edit-post-meta-boxes-area .spinner': 5,
 	'.editor-block-contextual-toolbar': 21,
-	'.editor-block-switcher__menu': 2,
-	'.components-popover__close': 2,
-	'.editor-block-list__insertion-point': 2,
-	'.blocks-format-toolbar__link-modal': 3,
+	'.editor-block-switcher__menu': 5,
+	'.components-popover__close': 5,
+	'.editor-block-list__insertion-point': 5,
+	'.blocks-format-toolbar__link-modal': 6,
 	'.editor-block-mover': 1,
 	'.blocks-gallery-item__inline-menu': 20,
 	'.editor-block-settings-menu__popover': 20, // Below the header

From 28c925a947c299449936f16274d2cebac69d0e50 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Thu, 18 Jan 2018 14:51:43 +1100
Subject: [PATCH 10/12] Improve HTML block cursor behaviour

- Permit pressing ESCAPE to unfocus the currently selected block.
- Allow pressing UP/DOWN to move focus to the previous/next block when
  the cursor is at the start/end of the editor.
---
 blocks/library/html/index.js         |  5 +--
 components/code-editor/README.md     |  7 +++++
 components/code-editor/index.js      | 46 +++++++++++++++++++++++++---
 components/code-editor/test/index.js |  1 +
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/blocks/library/html/index.js b/blocks/library/html/index.js
index 51ff621c22a33d..8ed57744305e32 100644
--- a/blocks/library/html/index.js
+++ b/blocks/library/html/index.js
@@ -48,7 +48,7 @@ export const settings = {
 
 	edit: withState( {
 		preview: false,
-	} )( ( { attributes, setAttributes, setState, isSelected, preview } ) => (
+	} )( ( { attributes, setAttributes, setState, isSelected, toggleSelection, preview } ) => (
 		<div className="wp-block-html">
 			{ isSelected && (
 				<BlockControls>
@@ -73,7 +73,8 @@ export const settings = {
 			) : (
 				<CodeEditor
 					value={ attributes.content }
-					focus={ !! focus }
+					focus={ isSelected }
+					onFocus={ toggleSelection }
 					onChange={ content => setAttributes( { content } ) }
 				/>
 			) }
diff --git a/components/code-editor/README.md b/components/code-editor/README.md
index 40aa774ae5dac5..9edd8c8e5eca44 100644
--- a/components/code-editor/README.md
+++ b/components/code-editor/README.md
@@ -40,6 +40,13 @@ Whether or not the code editor should be focused.
 - Type: `boolean`
 - Required: No
 
+### onFocus
+
+The function called when the editor is focused.
+
+- Type: `Function`
+- Required: No
+
 ### onChange
 
 The function called when the user has modified the source code via the
diff --git a/components/code-editor/index.js b/components/code-editor/index.js
index d9170469446df5..2cfd363f7fe314 100644
--- a/components/code-editor/index.js
+++ b/components/code-editor/index.js
@@ -2,12 +2,20 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+/**
+ * Module constants
+ */
+const { UP, DOWN } = keycodes;
 
 class CodeEditor extends Component {
 	constructor() {
 		super( ...arguments );
 
+		this.onFocus = this.onFocus.bind( this );
 		this.onBlur = this.onBlur.bind( this );
+		this.onCursorActivity = this.onCursorActivity.bind( this );
 		this.onKeyHandled = this.onKeyHandled.bind( this );
 	}
 
@@ -15,7 +23,9 @@ class CodeEditor extends Component {
 		const instance = wp.codeEditor.initialize( this.textarea );
 		this.editor = instance.codemirror;
 
+		this.editor.on( 'focus', this.onFocus );
 		this.editor.on( 'blur', this.onBlur );
+		this.editor.on( 'cursorActivity', this.onCursorActivity );
 		this.editor.on( 'keyHandled', this.onKeyHandled );
 
 		this.updateFocus();
@@ -32,24 +42,46 @@ class CodeEditor extends Component {
 	}
 
 	componentWillUnmount() {
+		this.editor.on( 'focus', this.onFocus );
 		this.editor.off( 'blur', this.onBlur );
+		this.editor.off( 'cursorActivity', this.onCursorActivity );
 		this.editor.off( 'keyHandled', this.onKeyHandled );
 
 		this.editor.toTextArea();
 		this.editor = null;
 	}
 
+	onFocus() {
+		if ( this.props.onFocus ) {
+			this.props.onFocus();
+		}
+	}
+
 	onBlur( editor ) {
 		if ( this.props.onChange ) {
 			this.props.onChange( editor.getValue() );
 		}
 	}
 
+	onCursorActivity( editor ) {
+		this.lastCursor = editor.getCursor();
+	}
+
 	onKeyHandled( editor, name, event ) {
-		// Stop events from propagating out of the component. This makes the editor
-		// behave like a textarea, e.g. pressing CMD+UP moves the cursor to the top of
-		// the editor, rather than to a different element.
-		event.stopImmediatePropagation();
+		/*
+		 * Pressing UP/DOWN should only move focus to another block if the cursor is
+		 * at the start or end of the editor.
+		 * 
+		 * We do this by stopping UP/DOWN from propagating if:
+		 *  - We know what the cursor was before this event; AND
+		 *  - This event caused the cursor to move 
+		 */
+		if ( event.keyCode === UP || event.keyCode === DOWN ) {
+			const areCursorsEqual = ( a, b ) => a.line === b.line && a.ch === b.ch;
+			if ( this.lastCursor && ! areCursorsEqual( editor.getCursor(), this.lastCursor ) ) {
+				event.stopImmediatePropagation();
+			}
+		}
 	}
 
 	updateFocus() {
@@ -59,10 +91,14 @@ class CodeEditor extends Component {
 				this.editor.focus();
 			} );
 		}
+
+		if ( ! this.props.focus && this.editor.hasFocus() ) {
+			document.activeElement.blur();
+		}
 	}
 
 	render() {
-		return <textarea ref={ ref => this.textarea = ref } value={ this.props.value } />;
+		return <textarea ref={ ref => ( this.textarea = ref ) } value={ this.props.value } />;
 	}
 }
 
diff --git a/components/code-editor/test/index.js b/components/code-editor/test/index.js
index ce29b4c331cecb..ea92f02b74fd98 100644
--- a/components/code-editor/test/index.js
+++ b/components/code-editor/test/index.js
@@ -14,6 +14,7 @@ describe( 'CodeEditor', () => {
 		set( global, 'wp.codeEditor.initialize', () => ( {
 			codemirror: {
 				on: noop,
+				hasFocus: () => false,
 			},
 		} ) );
 

From 311967762e344a835b353e23b08e5d1b16e3b023 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Tue, 16 Jan 2018 17:51:53 +1100
Subject: [PATCH 11/12] Lazily load CodeMirror assets

Wraps CodeEditor with a component that lazily loads the scripts and
styles that CodeMirror needs. This lets us avoid using
wp_enqueue_code_editor() which adds considerable bulk (~ 1.9 MB) to the
page load.
---
 .../html/test/__snapshots__/index.js.snap     |  15 +-
 components/code-editor/editor.js              | 105 ++++++++++++++
 components/code-editor/index.js               | 136 ++++++++----------
 .../{index.js.snap => editor.js.snap}         |   0
 .../code-editor/test/{index.js => editor.js}  |   2 +-
 lib/client-assets.php                         |  40 +++++-
 6 files changed, 219 insertions(+), 79 deletions(-)
 create mode 100644 components/code-editor/editor.js
 rename components/code-editor/test/__snapshots__/{index.js.snap => editor.js.snap} (100%)
 rename components/code-editor/test/{index.js => editor.js} (92%)

diff --git a/blocks/library/html/test/__snapshots__/index.js.snap b/blocks/library/html/test/__snapshots__/index.js.snap
index 230e7e9d9b8224..465266d93baeef 100644
--- a/blocks/library/html/test/__snapshots__/index.js.snap
+++ b/blocks/library/html/test/__snapshots__/index.js.snap
@@ -4,6 +4,19 @@ exports[`core/html block edit matches snapshot 1`] = `
 <div
   class="wp-block-html"
 >
-  <textarea />
+  <div
+    class="components-placeholder"
+  >
+    <div
+      class="components-placeholder__label"
+    />
+    <div
+      class="components-placeholder__fieldset"
+    >
+      <span
+        class="spinner is-active"
+      />
+    </div>
+  </div>
 </div>
 `;
diff --git a/components/code-editor/editor.js b/components/code-editor/editor.js
new file mode 100644
index 00000000000000..23ebe66a4aba86
--- /dev/null
+++ b/components/code-editor/editor.js
@@ -0,0 +1,105 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+/**
+ * Module constants
+ */
+const { UP, DOWN } = keycodes;
+
+class CodeEditor extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.onFocus = this.onFocus.bind( this );
+		this.onBlur = this.onBlur.bind( this );
+		this.onCursorActivity = this.onCursorActivity.bind( this );
+		this.onKeyHandled = this.onKeyHandled.bind( this );
+	}
+
+	componentDidMount() {
+		const instance = wp.codeEditor.initialize( this.textarea, window._wpGutenbergCodeEditorSettings );
+		this.editor = instance.codemirror;
+
+		this.editor.on( 'focus', this.onFocus );
+		this.editor.on( 'blur', this.onBlur );
+		this.editor.on( 'cursorActivity', this.onCursorActivity );
+		this.editor.on( 'keyHandled', this.onKeyHandled );
+
+		this.updateFocus();
+	}
+
+	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();
+		}
+	}
+
+	componentWillUnmount() {
+		this.editor.on( 'focus', this.onFocus );
+		this.editor.off( 'blur', this.onBlur );
+		this.editor.off( 'cursorActivity', this.onCursorActivity );
+		this.editor.off( 'keyHandled', this.onKeyHandled );
+
+		this.editor.toTextArea();
+		this.editor = null;
+	}
+
+	onFocus() {
+		if ( this.props.onFocus ) {
+			this.props.onFocus();
+		}
+	}
+
+	onBlur( editor ) {
+		if ( this.props.onChange ) {
+			this.props.onChange( editor.getValue() );
+		}
+	}
+
+	onCursorActivity( editor ) {
+		this.lastCursor = editor.getCursor();
+	}
+
+	onKeyHandled( editor, name, event ) {
+		/*
+		 * Pressing UP/DOWN should only move focus to another block if the cursor is
+		 * at the start or end of the editor.
+		 *
+		 * We do this by stopping UP/DOWN from propagating if:
+		 *  - We know what the cursor was before this event; AND
+		 *  - This event caused the cursor to move
+		 */
+		if ( event.keyCode === UP || event.keyCode === DOWN ) {
+			const areCursorsEqual = ( a, b ) => a.line === b.line && a.ch === b.ch;
+			if ( this.lastCursor && ! areCursorsEqual( editor.getCursor(), this.lastCursor ) ) {
+				event.stopImmediatePropagation();
+			}
+		}
+	}
+
+	updateFocus() {
+		if ( this.props.focus && ! this.editor.hasFocus() ) {
+			// Need to wait for the next frame to be painted before we can focus the editor
+			window.requestAnimationFrame( () => {
+				this.editor.focus();
+			} );
+		}
+
+		if ( ! this.props.focus && this.editor.hasFocus() ) {
+			document.activeElement.blur();
+		}
+	}
+
+	render() {
+		return <textarea ref={ ref => ( this.textarea = ref ) } value={ this.props.value } />;
+	}
+}
+
+export default CodeEditor;
diff --git a/components/code-editor/index.js b/components/code-editor/index.js
index 2cfd363f7fe314..8e9bebe5f5fac3 100644
--- a/components/code-editor/index.js
+++ b/components/code-editor/index.js
@@ -2,104 +2,94 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { keycodes } from '@wordpress/utils';
+import { __ } from '@wordpress/i18n';
 
 /**
- * Module constants
+ * Internal dependencies
  */
-const { UP, DOWN } = keycodes;
+import CodeEditor from './editor';
+import Placeholder from '../placeholder';
+import Spinner from '../spinner';
 
-class CodeEditor extends Component {
-	constructor() {
-		super( ...arguments );
+function loadScript() {
+	return new Promise( ( resolve, reject ) => {
+		const handles = [ 'wp-codemirror', 'code-editor', 'htmlhint', 'csslint', 'jshint' ];
 
-		this.onFocus = this.onFocus.bind( this );
-		this.onBlur = this.onBlur.bind( this );
-		this.onCursorActivity = this.onCursorActivity.bind( this );
-		this.onKeyHandled = this.onKeyHandled.bind( this );
-	}
+		// Don't load htmlhint-kses unless we need it
+		if ( window._wpGutenbergCodeEditorSettings.htmlhint.kses ) {
+			handles.push( 'htmlhint-kses' );
+		}
 
-	componentDidMount() {
-		const instance = wp.codeEditor.initialize( this.textarea );
-		this.editor = instance.codemirror;
+		const script = document.createElement( 'script' );
+		script.src = `/wp-admin/load-scripts.php?load=${ handles.join( ',' ) }`;
+		script.onload = resolve;
+		script.onerror = reject;
 
-		this.editor.on( 'focus', this.onFocus );
-		this.editor.on( 'blur', this.onBlur );
-		this.editor.on( 'cursorActivity', this.onCursorActivity );
-		this.editor.on( 'keyHandled', this.onKeyHandled );
+		document.head.appendChild( script );
+	} );
+}
 
-		this.updateFocus();
-	}
+function loadStyle() {
+	return new Promise( ( resolve, reject ) => {
+		const handles = [ 'wp-codemirror', 'code-editor' ];
 
-	componentDidUpdate( prevProps ) {
-		if ( this.props.value !== prevProps.value && this.editor.getValue() !== this.props.value ) {
-			this.editor.setValue( this.props.value );
-		}
+		const style = document.createElement( 'link' );
+		style.rel = 'stylesheet';
+		style.href = `/wp-admin/load-styles.php?load=${ handles.join( ',' ) }`;
+		style.onload = resolve;
+		style.onerror = reject;
 
-		if ( this.props.focus !== prevProps.focus ) {
-			this.updateFocus();
-		}
-	}
+		document.head.appendChild( style );
+	} );
+}
 
-	componentWillUnmount() {
-		this.editor.on( 'focus', this.onFocus );
-		this.editor.off( 'blur', this.onBlur );
-		this.editor.off( 'cursorActivity', this.onCursorActivity );
-		this.editor.off( 'keyHandled', this.onKeyHandled );
+let hasAlreadyLoadedAssets = false;
 
-		this.editor.toTextArea();
-		this.editor = null;
+function loadAssets() {
+	if ( hasAlreadyLoadedAssets ) {
+		return Promise.resolve();
 	}
 
-	onFocus() {
-		if ( this.props.onFocus ) {
-			this.props.onFocus();
-		}
-	}
+	return Promise.all( [ loadScript(), loadStyle() ] ).then( () => {
+		hasAlreadyLoadedAssets = true;
+	} );
+}
 
-	onBlur( editor ) {
-		if ( this.props.onChange ) {
-			this.props.onChange( editor.getValue() );
-		}
-	}
+class LazyCodeEditor extends Component {
+	constructor() {
+		super( ...arguments );
 
-	onCursorActivity( editor ) {
-		this.lastCursor = editor.getCursor();
+		this.state = {
+			status: 'pending',
+		};
 	}
 
-	onKeyHandled( editor, name, event ) {
-		/*
-		 * Pressing UP/DOWN should only move focus to another block if the cursor is
-		 * at the start or end of the editor.
-		 * 
-		 * We do this by stopping UP/DOWN from propagating if:
-		 *  - We know what the cursor was before this event; AND
-		 *  - This event caused the cursor to move 
-		 */
-		if ( event.keyCode === UP || event.keyCode === DOWN ) {
-			const areCursorsEqual = ( a, b ) => a.line === b.line && a.ch === b.ch;
-			if ( this.lastCursor && ! areCursorsEqual( editor.getCursor(), this.lastCursor ) ) {
-				event.stopImmediatePropagation();
+	componentDidMount() {
+		loadAssets().then(
+			() => {
+				this.setState( { status: 'success' } );
+			},
+			() => {
+				this.setState( { status: 'error' } );
 			}
-		}
+		);
 	}
 
-	updateFocus() {
-		if ( this.props.focus && ! this.editor.hasFocus() ) {
-			// Need to wait for the next frame to be painted before we can focus the editor
-			window.requestAnimationFrame( () => {
-				this.editor.focus();
-			} );
+	render() {
+		if ( this.state.status === 'pending' ) {
+			return (
+				<Placeholder>
+					<Spinner />
+				</Placeholder>
+			);
 		}
 
-		if ( ! this.props.focus && this.editor.hasFocus() ) {
-			document.activeElement.blur();
+		if ( this.state.status === 'error' ) {
+			return <Placeholder>{ __( 'An unknown error occurred.' ) }</Placeholder>;
 		}
-	}
 
-	render() {
-		return <textarea ref={ ref => ( this.textarea = ref ) } value={ this.props.value } />;
+		return <CodeEditor { ...this.props } />;
 	}
 }
 
-export default CodeEditor;
+export default LazyCodeEditor;
diff --git a/components/code-editor/test/__snapshots__/index.js.snap b/components/code-editor/test/__snapshots__/editor.js.snap
similarity index 100%
rename from components/code-editor/test/__snapshots__/index.js.snap
rename to components/code-editor/test/__snapshots__/editor.js.snap
diff --git a/components/code-editor/test/index.js b/components/code-editor/test/editor.js
similarity index 92%
rename from components/code-editor/test/index.js
rename to components/code-editor/test/editor.js
index ea92f02b74fd98..8579eb42b2f4fd 100644
--- a/components/code-editor/test/index.js
+++ b/components/code-editor/test/editor.js
@@ -7,7 +7,7 @@ import { set, noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import CodeEditor from '../';
+import CodeEditor from '../editor';
 
 describe( 'CodeEditor', () => {
 	it( 'should render without an error', () => {
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 4d3e620e6036c4..31d83b1b2bbe8d 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -739,6 +739,32 @@ function gutenberg_enqueue_registered_block_scripts_and_styles() {
 add_action( 'enqueue_block_assets', 'gutenberg_enqueue_registered_block_scripts_and_styles' );
 add_action( 'enqueue_block_editor_assets', 'gutenberg_enqueue_registered_block_scripts_and_styles' );
 
+/**
+ * The code editor settings that were last captured by
+ * gutenberg_capture_code_editor_settings().
+ *
+ * @var array|false
+ */
+$gutenberg_captured_code_editor_settings = false;
+
+/**
+ * When passed to the wp_code_editor_settings filter, this function captures
+ * the code editor settings given to it and then prevents
+ * wp_enqueue_code_editor() from enqueuing any assets.
+ *
+ * This is a workaround until e.g. code_editor_settings() is added to Core.
+ *
+ * @since 2.1.0
+ *
+ * @param array $settings Code editor settings.
+ * @return false
+ */
+function gutenberg_capture_code_editor_settings( $settings ) {
+	global $gutenberg_captured_code_editor_settings;
+	$gutenberg_captured_code_editor_settings = $settings;
+	return false;
+}
+
 /**
  * Scripts & Styles.
  *
@@ -835,6 +861,16 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	), $meta_box_url );
 	wp_localize_script( 'wp-editor', '_wpMetaBoxUrl', $meta_box_url );
 
+	// Populate default code editor settings by short-circuiting wp_enqueue_code_editor.
+	global $gutenberg_captured_code_editor_settings;
+	add_filter( 'wp_code_editor_settings', 'gutenberg_capture_code_editor_settings' );
+	wp_enqueue_code_editor( array( 'type' => 'text/html' ) );
+	remove_filter( 'wp_code_editor_settings', 'gutenberg_capture_code_editor_settings' );
+	wp_add_inline_script( 'wp-editor', sprintf(
+		'window._wpGutenbergCodeEditorSettings = %s;',
+		wp_json_encode( $gutenberg_captured_code_editor_settings )
+	) );
+
 	// Initialize the editor.
 	$gutenberg_theme_support = get_theme_support( 'gutenberg' );
 	$align_wide              = get_theme_support( 'align-wide' );
@@ -899,14 +935,10 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'post' => $post_to_edit['id'],
 	) );
 	wp_enqueue_editor();
-	wp_enqueue_code_editor( array(
-		'type' => 'text/html',
-	) );
 
 	/**
 	 * Styles
 	 */
-
 	wp_enqueue_style( 'wp-edit-post' );
 
 	/**

From 30ade66e3c3fbec3e5f0d2125cc059f6cce023dd Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 26 Feb 2018 14:16:22 +1100
Subject: [PATCH 12/12] Fix typos in CodeEditor README

---
 components/code-editor/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/code-editor/README.md b/components/code-editor/README.md
index 9edd8c8e5eca44..c750c6474b6cd8 100644
--- a/components/code-editor/README.md
+++ b/components/code-editor/README.md
@@ -2,7 +2,7 @@ CodeEditor
 =======
 
 CodeEditor is a React component that provides the user with a code editor
-that has syntax highliting and linting.
+that has syntax highlighting and linting.
 
 The components acts as a drop-in replacement for a <textarea>, and uses the
 CodeMirror library that is provided as part of WordPress Core.
@@ -16,7 +16,7 @@ function editCode() {
 	return (
 		<CodeEditor
 			value={ '<p>This is some <b>HTML</b> code that will have syntax highlighting!</p>' }
-		    onChange={ value => console.log( value ) }
+			onChange={ value => console.log( value ) }
 		/>
 	);
 }