Changes per review

blocks/components/editable/index.js

@@ -1,28 +1,21 @@
-let editorInstance = 1;
-
 export default class Editable extends wp.element.Component {
-	constructor( ...args ) {
-		super( ...args );
+	constructor() {
+		super( ...arguments );
 		this.onInit = this.onInit.bind( this );
 		this.onSetup = this.onSetup.bind( this );
 		this.onChange = this.onChange.bind( this );
 		this.onFocusIn = this.onFocusIn.bind( this );
 		this.onFocusOut = this.onFocusOut.bind( this );
-		this.id = `tinymce-instance-${ editorInstance }`;
-		editorInstance++;
+		this.bindNode = this.bindNode.bind( this );
 	}
 
 	componentDidMount() {
 		this.initialize();
-		if ( this.props.focusConfig ) {
-			this.focus();
-		}
 	}
 
 	initialize() {
 		const config = {
-			mode: 'exact',
-			elements: this.id,
+			target: this.node,
 			theme: false,
 			inline: true,
 			toolbar: false,
@@ -48,11 +41,11 @@ export default class Editable extends wp.element.Component {
 	}
 
 	onChange() {
-		const value = this.editor.getContent();
-		if ( value === this.props.value ) {
+		if ( ! this.editor.isDirty() ) {
 			return;
 		}
-
+		const value = this.editor.getContent();
+		this.editor.save();
 		this.props.onChange( value );
 	}
 
@@ -65,6 +58,10 @@ export default class Editable extends wp.element.Component {
 		this.onChange();
 	}
 
+	bindNode( ref ) {
+		this.node = ref;
+	}
+
 	updateContent() {
 		let bookmark;
 		if ( this.isFocused ) {
@@ -84,11 +81,11 @@ export default class Editable extends wp.element.Component {
 
 	componentDidUpdate( prevProps ) {
 		if ( this.props.value !== prevProps.value ) {
-			this.updateContent( !! prevProps.focusConfig );
+			this.updateContent();
 		}
 	}
 
 	render() {
-		return <div id={ this.id } contentEditable />;
+		return <div ref={ this.bindNode } />;
 	}
 }

element/index.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { createElement as reactCreateElement, Component as ReactComponent } from 'react';
-import { render as reactRender } from 'react-dom';
+import { createElement, Component } from 'react';
+import { render } from 'react-dom';
 
 /**
  * Returns a new element of given type. Type can be either a string tag name or
@@ -15,21 +15,17 @@ import { render as reactRender } from 'react-dom';
  * @param  {...wp.Element}      children Descendant elements
  * @return {wp.Element}                  Element
  */
-export function createElement( type, props, ...children ) {
-	return reactCreateElement( type, props, ...children );
-}
+export { createElement };
 
 /**
  * Renders a given element into the target DOM node.
  *
  * @param {wp.Element} element Element to render
  * @param {Element}    target  DOM node into which element should be rendered
  */
-export function render( element, target ) {
-	reactRender( element, target );
-}
+export { render };
 
 /**
  * A base class to create WordPress Components (Refs, state and lifecycle hooks)
  */
-export const Component = ReactComponent;
+export { Component };

index.php

@@ -40,7 +40,7 @@ function gutenberg_register_scripts() {
 	wp_register_script( 'react-dom', 'https://unpkg.com/react-dom@15/dist/react-dom' . $suffix . '.js', array( 'react' ) );
 
 	// Editor
-	wp_register_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ) );
+	wp_register_script( 'tinymce_js', 'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce.min.js' );
 	wp_register_script( 'wp-element', plugins_url( 'element/build/index.js', __FILE__ ), array( 'react', 'react-dom' ) );
 	wp_register_script( 'wp-blocks', plugins_url( 'blocks/build/index.js', __FILE__ ), array( 'wp-element', 'tinymce_js' ) );
 }