Fix Editable tagName changes after #635

WordPress · May 4, 2017 · b8e2ce4 · b8e2ce4
1 parent fea2a89
commit b8e2ce4
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/blocks/components/editable/index.js b/blocks/components/editable/index.js
@@ -266,10 +266,6 @@ export default class Editable extends wp.element.Component {
 	}
 
 	componentDidUpdate( prevProps ) {
-		if ( this.props.tagName !== prevProps.tagName ) {
-			this.initialize();
-		}
-
 		if ( !! this.props.focus && ! prevProps.focus ) {
 			this.focus();
 		}

diff --git a/blocks/components/editable/tinymce.js b/blocks/components/editable/tinymce.js
@@ -1,5 +1,5 @@
 export default class TinyMCE extends wp.element.Component {
-	componentDidMount() {
+	initialize() {
 		tinymce.init( {
 			target: this.editorNode,
 			theme: false,
@@ -19,12 +19,22 @@ export default class TinyMCE extends wp.element.Component {
 		}
 	}
 
-	shouldComponentUpdate() {
+	componentDidMount() {
+		this.initialize();
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.tagName !== prevProps.tagName ) {
+			this.initialize();
+		}
+	}
+
+	shouldComponentUpdate( nextProps ) {
 		// We must prevent rerenders because TinyMCE will modify the DOM, thus
 		// breaking React's ability to reconcile changes.
 		//
 		// See: https://github.com/facebook/react/issues/6802
-		return false;
+		return nextProps.tagName !== this.props.tagName;
 	}
 
 	render() {