Why is React Quill matchVisuals not working?

I am trying to remove the extra <p><br></p> tags that are present as line breaks while using React Quill. I tried implementing the matchVisual parameter outlined here, but it still seems to be giving me that paragraph and br tags in the output. Here is a code pen showing simple changes to the Quill demo setup, and it still doesn’t work.

I declare the modules for Quill in the constructor like:

 constructor (props) {
    super(props)
    this.state = { editorHtml: '', theme: 'snow' }
    this.handleChange = this.handleChange.bind(this)
    this.modules = {
            toolbar: [
                [{ 'header': '1'}, {'header': '2'}],
                [{size: []}],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{'list': 'ordered'}, {'list': 'bullet'}, 
                {'indent': '-1'}, {'indent': '+1'}],
                [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
                ['link', 'image'],
                ['clean']
            ],
            clipboard: {
              matchVisual: false,
            }
          }
        
    this.formats = [
      'header', 'size',
      'bold', 'italic', 'underline', 'strike', 'blockquote',
      'list', 'bullet', 'indent',
      'link', 'image', 'align'
    ]
  }

I am probably doing something just a tad bit wrong, any ideas?

React-Quill version

• master (^1.3.3)
• 0.4.1
• 1.0.0-beta-1
• 1.0.0-beta-2
• 1.0.0-beta-3
• 1.0.0-beta-4
• 1.0.0-beta-5
• 1.0.0-rc-1
• 1.0.0-rc-2
• 1.0.0-rc-3
• 1.0.0
• 1.1.0
• Other (fork)

[filipgrkinic]

Thanks for sharing! I ended up just doing the following, before storing it in the database. text.replace(/<p><br><\/p>/g, "")

[douglasrcjames]

I like your solution more, I might implement yours in the future haha!