Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Parchment] Unable to create mention blot

See original GitHub issue

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