diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js index cfd7b04471e00d..1cf8d7d0fc3ea6 100644 --- a/blocks/components/editable/index.js +++ b/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
; + return ; } } diff --git a/element/index.js b/element/index.js index c6734e11eb2f19..e302593d909b7c 100644 --- a/element/index.js +++ b/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,9 +15,7 @@ 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. @@ -25,11 +23,9 @@ export function createElement( type, props, ...children ) { * @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 }; diff --git a/index.php b/index.php index e8565ee2050df6..160ed621276587 100644 --- a/index.php +++ b/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' ) ); }