diff --git a/packages/editor/src/components/rich-text/README.md b/packages/editor/src/components/rich-text/README.md index 6774ca3879f49c..b3565b729cca3a 100644 --- 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 index 30cc785d634482..d086cf24795fb4 100644 --- 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() {