RichText: warn when using inline tagName

[p2er]

Describe the bug
Create a RichText node in edit function. Fill with text content. Remove text with backspace key (selecting the text and deleting it all together does not cause this issue).

To Reproduce
Steps to reproduce the behavior:
0. Create Richtext, e.g.

<RichText
	tagName={ 'span' }
	value={ citation }
	placeholder={ __( 'Write citation…' ) }
	onChange={
		( nextCitation ) => setAttributes( {
			citation: nextCitation,
		} )
	}
/>

1. Enter content into rich text field
2. Safe Document
3. Reload
4. Click into text
5. Delete text by hitting backspace multiple times
6. Last digit can not be removed

Error occurs:
index.js?ver=1542114671:1 The given range isn't in document.

Expected behavior
Text should be cleared if user tries to delete content letter by letter with backspace.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS 10.14.1
• Browser: all

Additional context

• Gutenberg Version 4.3.0
• Wordpress Version 4.9.8

[p2er]

I was able to narrow down the problem. In the current quote/pullquote implementation the richtext is only rendered if isSelected is true or richtext is not empty { ( ! RichText.isEmpty( citation ) || isSelected ) && (...) }
The problem occurs If this code is removed and the tagName Attribute is present on the richtext.

[ktmn]

<RichText
	tagName={ 'span' }

Does it also happen with div? Inline elements and richtext/tinymce don't work well together.

[ellatrix]

Sounds like we'll have to start warning on the use of RichText with inline elements.

[vicolaspetru]

So, is there a way to fix this bug? I have the same problem when delete text by hitting backspace multiple times. :(

[ellatrix]

@vicolaspetru you shouldn't use RichText with tagName=span.