When I try to integrate with quill-mention. It shows TypeError: Cannot read properties of undefined (reading 'unshift')

[dhanalam]

Plugin docs: https://github.com/quill-mention/quill-mention

Here is the code I used to integrate

``import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {Mention} from "quill-mention";
Quill.register({ "modules/mention": 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" }
];

const modules = {
name: 'modules/mention',
module: Mention,
options: {
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 (let i = 0; i < values.length; i++)
                if (
                    ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
                )
                    matches.push(values[i]);
            renderList(matches, searchTerm);
        }
    }
}

}``

TypeError: Cannot read properties of undefined (reading 'unshift')
at new _Mention (chunk-UGV3LHLP.js?v=7a037e72:8985:39)

[gsname111]

Hi, I'm experiencing the same problem, may I ask how you ended up solving the whole issue!

[dhanalam]

I used tiptap/extension-mention plugin tiptap editor to solve it. I did not get any answers from vue-quill

[gsname111]

OK, thank you for your reply
I finally gave up on vue-quill and used quill.js and quill-mention

[Cypher1983]

Was this ever addressed or a solution found?

[dhanalam]

Please read the above comments

[Cypher1983]

For those interested.... I got the mentions working. Below is my component and a snippet from package.json.

`

<script>
import {defineComponent} from 'vue';
import Quill from "quill";
import {Mention, MentionBlot} from "quill-mention";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import { quillToolbarOptions } from "@/utils/quill";

Quill.register({ "blots/mention": MentionBlot, "modules/mention": Mention });


export default defineComponent({
      name: "CreateTemplate",
      mounted() {
        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" }
        ];
        const quill = new Quill(this.$refs.editor, {
          theme: 'snow',
          modules: {
            toolbar: quillToolbarOptions(),
            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 (let i = 0; i < values.length; i++)
                    if (
                        ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
                    )
                      matches.push(values[i]);
                  renderList(matches, searchTerm);
                }
              }
            }
          }
        });
      },
      data(){
        return {
          mentions:[
                { id: 3, value: "Fredrik Sundqvist 2" },
                { id: 4, value: "Patrik Sjölin 2" }
              ],
          quill:null
        }
      },
      methods:{
        initQuill: function (){
          const atValues = this.mentions;
          const hashValues = [

          ];

          let editor = this.$refs.editor;

          const quill = new Quill(editor, {
            theme: 'snow',
            modules: {
              toolbar: [
                ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                ['blockquote', 'code-block'],
                ['link', 'image', 'formula'],

                [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
                [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
                [{ 'direction': 'rtl' }],                         // text direction

                [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

                ['clean']                                         // remove formatting button
              ],
              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 (let i = 0; i < values.length; i++)
                      if (
                          ~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())
                      )
                        matches.push(values[i]);
                    renderList(matches, searchTerm);
                  }
                }
              }
            }
          });

          // quill.root.onblur = () => this.form.template_body = quill.root.innerHTML;

          // this.quill = quill;
        }
      }
})
</script>

`

"dependencies": { "@vue/compat": "^3.1.0", "@vueform/multiselect": "^2.6.6", "@vuepic/vue-datepicker": "^5.0.1", "@vueup/vue-quill": "^1.2.0", "alpinejs": "^3.12.1", "bootstrap": "^4.5.2", "choices.js": "^10.2.0", "font-awesome": "^4.7.0", "jquery": "^3.5.1", "jquery-ui": "^1.12.1", "laravel-echo": "^1.5.4", "moment": "^2.30.1", "popper.js": "^1.12.9", "puppeteer": "^17.1.3", "pusher-js": "^4.4.0", "quill": "^2.0.2", "quill-mention": "^6.0.0", "rollup-plugin-vue": "^6.0.0", "vee-validate": "^4.9.6", "vue": "^3.1.0", "vue-fullscreen": "^3.1.1", "vue-loader": "^16.0.0-rc.1", "vue-search-select": "^3.1.0", "vue3-simple-alert-next": "^1.0.2", "vuedraggable": "^4.1.0", "vuex": "^4.0.2" }

I added "quill": "^2.0.2" and ran npm run build