ReactQuill example (for reference, so I don't forget)

index.js

// https://github.com/afry/quill-mention
// https://github.com/zenoamaro/react-quill
// <link rel="stylesheet" href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css">
// .ql-mention-list-container{width:270px;border:1px solid #f0f0f0;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(30,30,30,.08);z-index:9001;overflow:auto}.ql-mention-loading{line-height:44px;padding:0 20px;vertical-align:middle;font-size:16px}.ql-mention-list{list-style:none;margin:0;padding:0;overflow:hidden}.ql-mention-list-item{cursor:pointer;line-height:44px;font-size:16px;padding:0 20px;vertical-align:middle}.ql-mention-list-item.disabled{cursor:auto}.ql-mention-list-item.selected{background-color:#d3e1eb;text-decoration:none}.mention{height:24px;width:65px;border-radius:6px;background-color:#d3e1eb;padding:3px 0;margin-right:2px;user-select:all}.mention>span{margin:0 3px}

import React, { useEffect, useState, Component } from 'react'
import './accounts.page.css'
import ReactQuill from 'react-quill'
import QuillMention from 'quill-mention'

const atValues = [
	{ id: 1, value: 'Fredrik Sundqvist' },
	{ id: 2, value: 'Patrik Sjölin' }
]

const hashValues = [
	{ id: 3, value: 'Fredrik Sundqvist 2' },
	{ id: 4, value: 'Patrik Sjölin 2' }
]

class Editor extends Component {
    state = {
        text: '<p>nice one</p>',
    }

    modules = {
        toolbar: [
          [{ 'header': [1, 2, false] }],
          ['bold', 'italic', 'underline','strike', 'blockquote'],
          [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
          ['link', 'image'],
          ['clean']
        ],
      }
    
      formats = [
        'header',
        'bold', 'italic', 'underline', 'strike', 'blockquote','list', 'bullet', 'indent',
        'link', 'image','code-block'
      ]

    handleChange = (value) => {
        this.setState({ text: value })
    }

    mentionModule = {
        allowedChars: /^[A-Za-z\s]*$/,
        mentionDenotationChars: ['@', '#'],
        source: function (searchTerm, renderList, mentionChar) {
            let values

            if (mentionChar === '@') {
                values = atValues
            } else {
                values = hashValues
            }

            if (searchTerm.length === 0) {
                renderList(values, searchTerm)
            } else {
                const matches = []
                for (i = 0; i < values.length; i++)
                    if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i])
                renderList(matches, searchTerm)
            }
        },
    }

    render() {
        return (
            <div style={{ background: 'white' }}>
                <ReactQuill
                    theme="snow"
                    value={this.state.text}
                    onChange={this.handleChange}
                    modules={{ 
                        mention: this.mentionModule,
                        toolbar: [
                            //[{ header: [1, 2, false] }],
                            [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}],
                            ['bold', 'italic', 'underline','image', 'code-block', 'blockquote']
                        ]
                    }}
                />
            </div>
        )
    }
}