Editable: implement TinyMCE on the core Editable component

.eslintrc.json

@@ -18,7 +18,8 @@
 		}
 	},
 	"globals": {
-		"wp": true
+		"wp": true,
+		"tinymce": true
 	},
 	"plugins": [
 		"react",

blocks/components/editable/index.js

@@ -1,3 +1,91 @@
-export default function Editable( { value } ) {
-	return <p>{ value }</p>;
+export default class Editable extends wp.element.Component {
+	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.bindNode = this.bindNode.bind( this );
+	}
+
+	componentDidMount() {
+		this.initialize();
+	}
+
+	initialize() {
+		const config = {
+			target: this.node,
+			theme: false,
+			inline: true,
+			toolbar: false,
+			entity_encoding: 'raw',
+			setup: this.onSetup,
+			formats: {
+				strikethrough: { inline: 'del' }
+			}
+		};
+
+		tinymce.init( config );
+	}
+
+	onSetup( editor ) {
+		this.editor = editor;
+		editor.on( 'init', this.onInit );
+		editor.on( 'focusIn', this.onFocusIn );
+		editor.on( 'focusout', this.onFocusOut );
+	}
+
+	onInit() {
+		this.editor.setContent( this.props.value );
+	}
+
+	onChange() {
+		if ( ! this.editor.isDirty() ) {
+			return;
+		}
+		const value = this.editor.getContent();
+		this.editor.save();
+		this.props.onChange( value );
+	}
+
+	onFocusIn() {
+		this.isFocused = true;
+	}
+
+	onFocusOut() {
+		this.isFocused = false;
+		this.onChange();
+	}
+
+	bindNode( ref ) {
+		this.node = ref;
+	}
+
+	updateContent() {
+		let bookmark;
+		if ( this.isFocused ) {
+			bookmark = this.editor.selection.getBookmark( 2, true );
+		}
+		this.editor.setContent( this.props.value );
+		if ( this.isFocused ) {
+			this.editor.selection.moveToBookmark( bookmark );
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this.editor ) {
+			this.editor.destroy();
+		}
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.value !== prevProps.value ) {
+			this.updateContent();
+		}
+	}
+
+	render() {
+		return <div ref={ this.bindNode } />;
+	}
 }

bootstrap-test.js

@@ -13,3 +13,8 @@ global.document = require( 'jsdom' ).jsdom( '', {
 } );
 global.window = document.defaultView;
 global.navigator = window.navigator;
+global.wp = {
+	element: {
+		Component: function() {}
+	}
+};

editor/blocks/text-block/index.js

@@ -1,12 +1,12 @@
-const { query, html } = wp.blocks.query;
+const { html } = wp.blocks.query;
 const Editable = wp.blocks.Editable;
 
 wp.blocks.registerBlock( 'core/text', {
 	title: 'Text',
 	icon: 'text',
 
 	attributes: {
-		value: query( 'p', html() )
+		value: html()
 	},
 
 	edit( attributes, onChange ) {

element/index.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { createElement as reactCreateElement } 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,16 +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 { Component };

index.php

@@ -40,8 +40,9 @@ 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', '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' ) );
+	wp_register_script( 'wp-blocks', plugins_url( 'blocks/build/index.js', __FILE__ ), array( 'wp-element', 'tinymce_js' ) );
 }
 add_action( 'init', 'gutenberg_register_scripts' );