From a5d3151068898dd192387064bf3397da42fe2558 Mon Sep 17 00:00:00 2001 From: iseulde Date: Mon, 18 Feb 2019 15:12:11 +0100 Subject: [PATCH 1/3] RichText: warn when using inline container --- packages/editor/src/components/rich-text/index.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index 8029dfa0a640d..113ea4afa034f 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; 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() { From 08119d3fa2521334279c12b83e740c7af5a4d188 Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 20 Feb 2019 13:58:08 +0100 Subject: [PATCH 2/3] Add env check --- packages/editor/src/components/rich-text/index.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js index 113ea4afa034f..c08b701ca4d61 100644 --- a/packages/editor/src/components/rich-text/index.js +++ b/packages/editor/src/components/rich-text/index.js @@ -137,10 +137,13 @@ export class RichText extends Component { setRef( node ) { if ( node ) { - const computedStyle = getComputedStyle( node ); + if ( process.env.NODE_ENV === 'development' ) { + const computedStyle = getComputedStyle( node ); - if ( computedStyle.display === 'inline' ) { - window.console.warn( 'RichText cannot be used with an inline container. Please use a different tagName.' ); + 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; From 98af7978f56ca6088f4a8a80b598c1ee0673608c Mon Sep 17 00:00:00 2001 From: iseulde Date: Wed, 20 Feb 2019 14:03:17 +0100 Subject: [PATCH 3/3] Update documentation --- packages/editor/src/components/rich-text/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/rich-text/README.md b/packages/editor/src/components/rich-text/README.md index 6774ca3879f49..b3565b729cca3 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`