vuejs editor

Editor.vue

<script>
    //https://pineco.de/wrapping-quill-editor-in-a-vue-component/
    import Quill from 'quill';
    import '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' }
    ];

    export default {
        props: {
            value: {
                type: String,
                default: ''
            }
        },

        data() {
            return {
                editor: null
            };
        },

        mounted() {
            this.editor = new Quill(this.$refs.editor, {
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, 4, false] }],
                        ['bold', 'italic', 'underline']
                    ],
                    mention: {
                        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);
                            }
                        },
                    },
                },
                theme: 'snow',
                formats: ['bold', 'underline', 'header', 'italic']
            });

            this.editor.root.innerHTML = this.value;

            this.editor.on('text-change', () => this.update());
        },

        methods: {
            update() {
                this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
            }
        }
    }
</script>

<template>
    <div ref="editor"></div>
</template>

<style module>
    @import '~quill/dist/quill.core.css';
    @import '~quill/dist/quill.snow.css';
</style>