reactjs - Quill Editor Unable to create mention blot in Vue js

Question

I use VueJS and Quill Editor in my project. Also I want to use quill-mention. Everything is Okay but when I select any option of mention, it shows me this error:

[Parchment] Unable to create mention blot

This is my code, I have done everything fine but cant seem to find the problem, please help.

[ Snapshot of error ][1]

    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-zs]*$/,
                            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>```


  [1]: https://camo.githubusercontent.com/de3fd74f305f8381d58c220d8503efc6f2ccbb2b6f0d74aab89a8e76a4771612/68747470733a2f2f692e696d6775722e636f6d2f61415162536c622e676966

question from:https://stackoverflow.com/questions/65641819/quill-editor-unable-to-create-mention-blot-in-vue-js

Answer 1

Waitting for answers