Quill: [Parchment] Unable to create mention blot

Created on 9 May 2019 · 2Comments · Source: quilljs/quill

Steps for Reproduction
I use VueJS and Quill in my project. Also I want to use quill-mention. Everythings is Okay but when I select any option of mention, show me error:
Image of mention error

I use this module like this:

<script>
    import 'quill/dist/quill.snow.css';
    import 'quill-mention/dist/quill.mention.min.css';

    import {quillEditor} from 'vue-quill-editor';

    import mention from 'quill-mention';
    Quill.register({
        'modules/mention': mention
    });

    export default {
        components: {
            quillEditor
        },

        props: {
            toolbar: { default: false },
            name:{default: ''},
            id: { default: '' },
            value: { default: '' },
            placeholder: { default: ''}
        },

        data() {
            return {
                editorOption: {
                    modules: {
                        toolbar: [
                            [{'font': []}],
                            [{'header': [1, 2, 3, 4, 5, 6, false]}],
                            [{'align': []}, {'color': []}, {'background': []}],
                            ['blockquote', {'direction': 'rtl'}],
                            ['bold', 'italic'],
                            ['underline', 'strike'],
                            [{'indent': '-1'}, {'indent': '+1'}],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            ['link', 'image']
                        ],
                        mention: {
                            allowedChars: /^[A-Za-z\s]*$/,
                            mentionDenotationChars: ["@"],
                            offsetLeft : ($('body').hasClass('rtl') ? -250 : 0 ) ,
                            renderItem :function(item){
                                return item.display
                            },
                            source: function (searchTerm, renderList, mentionChar) {
                                var values = [
                                    { display: 'John', value: 'Fredrik Sundqvist' },
                                    { display: 'Sara', value: 'Patrik Sjölin' }
                                ];

                                if (searchTerm.length === 0) {
                                    renderList(values, searchTerm);
                                } else {
                                    const matches = [];
                                    for (var i = 0; i < values.length; i++)
                                        if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) matches.push(values[i]);
                                    renderList(matches, searchTerm);
                                }
                            }
                        }
                    },
                    placeholder: 'aaaaaaaaaaaaaaaaa',
                    theme: 'snow'  // or 'bubble'
                },
                content: ''
            }
        },

        created() {
            .....
        },

        computed: {
           .......
        }
    };
</script>

What's problem? What should I do?

Platforms:
Chrome Last version

Version:
1.3.6

Source