Unable to register 'quill-mention' on QuillEditor

[neo-teo]

Version
@vueup/vue-quill version 1.2.0

Describe the bug
Can't register the quill-mention module on QuillEditor. It may have to do with how I am attempting to register the MentionBlot.

To Reproduce
I am trying to register quill-mention on my vue-quill QuillEditor.

By following the quill-mention and Modules docs, I attempt to register quill-mention like this:

1. Define my modules as:

import { Mention, MentionBlot } from 'quill-mention';

const modules = [
    {
      name: 'blots/mention',
      module: MentionBlot,
    },
    {
      name: 'modules/mention',
      module: Mention,
    },
  ];

2. Pass it in to my QuillEditor as:

<QuillEditor
    :modules="modules"
    ref="quillEditor"
    @ready="onEditorReady"
    :content="props.value"
    @update:content="(event) => emits('update:value', event)"
    class="focus-visible:ring-0 rounded-b-md"
    contentType="html"
    toolbar="#editor-toolbar"
  />

When I try to render it I get the following console error:

chunk-ETOPIOZA.js?v=2ee24d31:11864 Uncaught (in promise) TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
at Function.from ()
at new Embed (chunk-ETOPIOZA.js?v=2ee24d31:11864:11)
at new _MentionBlot (chunk-ETOPIOZA.js?v=2ee24d31:16885:5)
at SnowTheme2.addModule (chunk-QOOGXFKK.js?v=2ee24d31:6244:40)
at SnowTheme2.addModule (chunk-QOOGXFKK.js?v=2ee24d31:6962:136)
at chunk-QOOGXFKK.js?v=2ee24d31:6236:29
at Array.forEach ()
at SnowTheme2.init (chunk-QOOGXFKK.js?v=2ee24d31:6234:53)
at new Quill2 (chunk-QOOGXFKK.js?v=2ee24d31:1139:28)
at initialize (@vueup_vue-quill.js?v=2ee24d31:1295:15)

Expected behavior
I would expect that by following the two steps above, the 'mention' module would now be registered on my QuillEditor.getQuill() instance. (I should be able to access it via quillEditor.value.getModule('modules/mention')

Browser (please complete the following information):

• Browser: Chrome
• Version: 124.0.6367.156 (Official Build) (arm64)

Additional context
Let me know if I can provide any other info to help.

I also tried to access my editor via ref and then call editor.getQuill().register(...) but I noticed that register is not surfaced on the object returned by getQuill()

[Leo450]

Up, exact same issue here.

[BayBreezy]

Hey, If you need a live reproduction: https://ui-thing.behonbaker.com/goodies/quill#module
It works fine in development. As for the issue of the register function not being available, I think you should change the editor value in the component from being a ref to a shallowRef

[cibilex]

This issue is the same with #573

[maneaionut0]

Same here

[khtodod]

Try quill mention version 4.1.0

<script setup>
import "@/node_modules/quill-mention/dist/quill.mention.css";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import Mention from "quill-mention";

const modelValue = ref('')
const modules = {
      name: "mention",
      module: Mention,
      positioningStrategy: "fixed",
      options: {
        allowedChars: /^[A-Za-zÄÜÖäüö_-]*$/,
        mentionDenotationChars: ["@"],
        minChars: 1,
        maxChars: 50,
        source: function (searchTerm, renderList, mentionChar) {
          let values;

          const atValues = [
            { id: 1, value: "Data" },
            { id: 2, value: "Name" },
          ];

          if (mentionChar === "@") {
            values = atValues;
          }

          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);
          }
        },
      },
    }
</script>


<template>
<QuillEditor :content="modelValue" :modules="modules" theme="snow" contentType="html" toolbar="full" />
</template>