How to add and use quill mention modules

[essivision]

I used to vue 2.5.* and wanna to use quill-mention.

By your document I write this code to use mention module:

<script>

  // you can also register quill modules in the component
  import Quill from 'quill'
  import mention from 'quill-mention'
  Quill.register('modules/mention ', mention )


export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
             ....

               modules: {
                    mention: {
                        allowedChars: /^[a-zA-Z0-9_]*$/,
                        mentionDenotationChars: ["@"],
                        offsetLeft: ($('body').hasClass('rtl') ? -250 : 0),
                        renderItem: (item)=> {
                            return item.display
                        },
                        source: (searchTerm, renderList, mentionChar)=> {
                            let values = [{id:1,value:"admin",display:"admin "},{id:2,value:"john",display:"john"}];

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

but when I type @ mention popover doesn't display. What should I do?

[lucasvllima]

you have add .css file from quill-mention?

[essivision]

I added css to page manually:

<link rel="stylesheet"  href="{{url('vendors/quill-mention/css/quill.mention.min.css')}}>

but it's not work

[lucasvllima]

maybe has something missing in "source:" i am use in my project and work's fine, look for inspect dev html if you see any div added

[essivision]

can you copy your component code in this place

[lucasvllima]

import {Mention} from './plugins/mention'
Quill.register('modules/mention', Mention);


editorOptions: {
                    modules: {
                        mention: {
                            allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
                            mentionDenotationChars: ['@', '#', '!'],
                            dataAttributes: ['path', 'label'],
                            source: this.getMention
                        }

getMention(searchTerm, renderList, mentionChar) {

                if (mentionChar == "@") {
                  
                    if (!searchTerm) {
                
                        this.popoverBlockTreeMetion = true
                    }else ....

                }
´´´

i had import module to my project and change him to show another popover custom , my component is very long to copy&paste all

[essivision]

I try your code but already get error:

Uncaught TypeError: Cannot read property 'register' of undefined

[lucasvllima]

You can paste your component code here? Look if u have a import from quill after mention import

[essivision]

<template>
    <div>
        <textarea
                  :value="cleanContent"
                  :name="name"
                  :id="id">
        </textarea>
        <quill-editor v-model="content"
                      ref="myQuillEditor"
                      :options="editorOption"
                      style="height: 130px"
                      class="number">
        </quill-editor>
    </div>
</template>
<script>
    import 'quill/dist/quill.snow.css';
    import 'quill-mention/dist/quill.mention.min.css';

    import { quillEditor } from 'vue-quill-editor'
    import Quill from 'quill';
    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 {
                mentionList: [{id:1,value:"admin",display:"admin "},{id:2,value:"jafarimo",display:"john hagsgh"}],
                editorOption: {
                    modules: {
                        toolbar: false,
                    },
                    mention: {
                        allowedChars: /^[a-zA-Z0-9_]*$/,
                        mentionDenotationChars: ["@"],
                        offsetLeft: ($('body').hasClass('rtl') ? -250 : 0),
                        renderItem: (item)=> {
                            return item.display
                        },
                        source: (searchTerm, renderList, mentionChar)=> {
                            let values = [{id:1,value:"admin",display:"admin "},{id:2,value:"jafarimo",display:"john ahsgdg"}];

                            if (searchTerm.length === 0) {
                                renderList(values, searchTerm);
                            } else {
                                const matches = [];
                                for (let 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() {
            if (this.toolbar === 'false')
                this.editorOption.modules.toolbar = false;

            this.content = this.value;
            console.log(this.mentionList);
        },

        computed: {
            cleanContent(){
                let regex = /(<([^>]+)>)/ig;
                return this.content.replace(regex, "");
            }
        }
    };
</script>

[lucasvllima]

put mention objects inside modules object, i guess this import already register the module so comment register and put object mention inside of module: {
}

[essivision]

Thanks but when select any option error me:

[lucasvllima]

maybe the mention blot has not registered, i don't know how fix this, in my project i dont use this popup

[essivision]

I solved problem with add Quill as global variable in app.js:

import Quill from 'quill';
window.Quill = Quill 

also in Laravel Mix we used autoload instead of above solution like this:

mix.autoload({
    jquery: ['$', 'window.jQuery','window.$'],
    quill: ['window.Quill','Quill']
});