Add ability to filter unwanted HTML tags in RichText component

[mirka]

Is your feature request related to a problem? Please describe.

We don't have much control over what a user pastes into a RichText. The clipboard might contain HTML tags that are inappropriate for the intended use.

For example, I would want to prevent users from pasting a link (e.g. <a href="#">foo</a>) into a RichText intended to be a button.

Describe the solution you'd like

Some possibilities:

• Allow onPaste handlers on RichText: Then the consumer could strip out unwanted clipboard content onPaste, or even use the plaintext version (event.clipboardData.getData( 'text/plain' )).
• Add an allowedTags property on RichText: The consumer could pass it an array of acceptable HTML tagNames, and then RichText would handle the onPaste filtering for us.

Describe alternatives you've considered

• Use onPaste on a wrapper div: While onCopy can be handled this way, it looks like onPaste must be set on the RichText component itself.

• Try doing it onChange: This poses another set of problems, where any kind of string manipulation in an onChange–setState in React breaks CJK IME input, unless we add a workaround with composition event detection. (Related)

  For example, doing something like this would make CJK input unusable:

  <RichText
    tagName="div"
    value={ this.state.text }
    onChange={ ( value ) => this.setState( { text: value[0].replace( 'foo', 'bar' ) } ) }
  />
  

[rmorse]

Hey @mirka, I've been digging around a lot of this stuff recently and thought, it might be possible to do what you want already.

Would having access to the TinyMCE editor within RichText help you do the filtering? (I'm thinking it would be possible if you did, I think you can access the paste handlers from the TinyMCE editor)

If so, I can explain further, otherwise I may have jumped the gun ;)

[paaljoachim]

What actionable items can be done here?
Should it be closed?

[paaljoachim]

@tellthemachines I am wondering if you might have something to add to this issue?