RichText: warn when using inline container (#13921)

* RichText: warn when using inline container * Add env check * Update documentation
WordPress · Mar 6, 2019 · b53c1c6 · b53c1c6
1 parent 035244e
commit b53c1c6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/editor/src/components/rich-text/README.md b/packages/editor/src/components/rich-text/README.md
@@ -14,7 +14,7 @@ Render a rich [`contenteditable` input](https://developer.mozilla.org/en-US/docs
 
 ### `tagName: String`
 
-*Default: `div`.* The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element.
+*Default: `div`.* The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-name) of the editable element. Elements that display inline are not supported.
 
 ### `placeholder: String`
 

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;
 
 /**
  * All inserting input types that would insert HTML into the DOM.
@@ -151,7 +151,20 @@ export class RichText extends Component {
 	}
 
 	setRef( node ) {
-		this.editableRef = node;
+		if ( node ) {
+			if ( process.env.NODE_ENV === 'development' ) {
+				const computedStyle = getComputedStyle( node );
+
+				if ( computedStyle.display === 'inline' ) {
+					// eslint-disable-next-line no-console
+					console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' );
+				}
+			}
+
+			this.editableRef = node;
+		} else {
+			delete this.editableRef;
+		}
 	}
 
 	setFocusedElement() {