TinyMCE: V1 of the Editable Component initializing TinyMCE

.eslintrc.json

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

blocks/components/editable/index.js

@@ -1,3 +1,94 @@
-export default function Editable( { value } ) {
-	return <p>{ value }</p>;
+let editorInstance = 1;
+
+export default class Editable extends wp.element.Component {
+	constructor( ...args ) {
+		super( ...args );
+		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++;
+	}
+
+	componentDidMount() {
+		this.initialize();
+		if ( this.props.focusConfig ) {
+			this.focus();
+		}
+	}
+
+	initialize() {
+		const config = {
+			mode: 'exact',
+			elements: this.id,
+			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() {
+		const value = this.editor.getContent();
+		if ( value === this.props.value ) {
+			return;
+		}
+
+		this.props.onChange( value );
+	}
+
+	onFocusIn() {
+		this.isFocused = true;
+	}
+
+	onFocusOut() {
+		this.isFocused = false;
+		this.onChange();
+	}
+
+	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( !! prevProps.focusConfig );
+		}
+	}
+
+	render() {
+		return <div id={ this.id } contentEditable />;
+	}
 }

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,7 +1,7 @@
 /**
  * External dependencies
  */
-import { createElement as reactCreateElement } from 'react';
+import { createElement as reactCreateElement, Component as ReactComponent } from 'react';
 import { render as reactRender } from 'react-dom';
 
 /**
@@ -28,3 +28,8 @@ export function createElement( type, props, ...children ) {
 export function render( element, target ) {
 	reactRender( element, target );
 }
+
+/**
+ * A base class to create WordPress Components (Refs, state and lifecycle hooks)
+ */
+export const Component = ReactComponent;

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', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ) );
 	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' );