RichText: warn when using inline container

WordPress · Feb 18, 2019 · a5d3151 · a5d3151
1 parent 5dc9ac4
commit a5d3151
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -67,7 +67,7 @@ import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
  * Browser dependencies
  */
 
-const { getSelection } = window;
+const { getSelection, getComputedStyle } = window;
 
 export class RichText extends Component {
 	constructor( { value, onReplace, multiline } ) {
@@ -136,7 +136,17 @@ export class RichText extends Component {
 	}
 
 	setRef( node ) {
-		this.editableRef = node;
+		if ( node ) {
+			const computedStyle = getComputedStyle( node );
+
+			if ( computedStyle.display === 'inline' ) {
+				window.console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' );
+			}
+
+			this.editableRef = node;
+		} else {
+			delete this.editableRef;
+		}
 	}
 
 	setFocusedElement() {