Lazily load CodeMirror assets

blocks/library/html/editor.scss

@@ -1,12 +1,25 @@
-.gutenberg textarea.wp-block-html {
-	box-shadow: none;
-	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
-	color: $dark-gray-800;
-	border: 1px solid $light-gray-500;
-	border-radius: 4px;
-	padding: .8em 1.6em;
-	margin: 0;
-	overflow-x: auto;
-	width: 100%;
+.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 {
+		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;
+	}
+
+	.CodeMirror-lines {
+		padding: 8px 8px 8px 0;
+	}
 }

blocks/library/html/index.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import TextareaAutosize from 'react-autosize-textarea';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withState } from '@wordpress/components';
+import { withState, SandBox, CodeEditor } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -42,35 +37,38 @@ registerBlockType( 'core/html', {
 
 	edit: withState( {
 		preview: false,
-	} )( ( { attributes, setAttributes, setState, focus, preview } ) => [
-		focus && (
-			<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 } } /> :
-			<TextareaAutosize
-				className="wp-block-html"
-				key="editor"
-				value={ attributes.content }
-				onChange={ ( event ) => setAttributes( { content: event.target.value } ) }
-				aria-label={ __( 'HTML' ) }
-			/>,
-	] ),
+	} )( ( { attributes, setAttributes, setState, focus, setFocus, preview } ) => (
+		<div className="wp-block-html">
+			{ focus && (
+				<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 }
+					focus={ !! focus }
+					onFocus={ setFocus }
+					onChange={ content => setAttributes( { content } ) }
+				/>
+			) }
+		</div>
+	) ),
 
 	save( { attributes } ) {
 		return attributes.content;

blocks/library/html/test/__snapshots__/index.js.snap

@@ -1,9 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`core/html block edit matches snapshot 1`] = `
-<textarea
-  aria-label="HTML"
+<div
   class="wp-block-html"
-  rows="1"
-/>
+>
+  <div
+    class="components-placeholder"
+  >
+    <div
+      class="components-placeholder__label"
+    />
+    <div
+      class="components-placeholder__fieldset"
+    >
+      <span
+        class="spinner is-active"
+      />
+    </div>
+  </div>
+</div>
 `;

components/code-editor/README.md

@@ -0,0 +1,56 @@
+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
+
+### focus
+
+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
+editor. It is passed the new value as an argument.
+
+- Type: `Function`
+- Required: No

components/code-editor/index.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { keycodes } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import withLazyDependencies from '../higher-order/with-lazy-dependencies';
+
+/**
+ * Module constants
+ */
+const { UP, DOWN } = keycodes;
+
+export 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 withLazyDependencies( {
+	scripts() {
+		const scripts = [
+			'wp-codemirror',
+			'code-editor',
+			'htmlhint',
+			'csslint',
+			'jshint',
+		];
+
+		// Don't load htmlhint-kses unless we need it
+		if ( window._wpGutenbergCodeEditorSettings.htmlhint.kses ) {
+			scripts.push( 'htmlhint-kses' );
+		}
+
+		return scripts;
+	},
+
+	styles: [ 'wp-codemirror', 'code-editor' ],
+} )( CodeEditor );

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>"
+/>
+`;

components/code-editor/test/index.js

@@ -0,0 +1,24 @@
+/**
+ * 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,
+				hasFocus: () => false,
+			},
+		} ) );
+
+		const wrapper = shallow( <CodeEditor value={ '<b>wowee</b>' } /> );
+		expect( wrapper ).toMatchSnapshot();
+	} );
+} );