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 (<anonymous>)
    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 (<anonymous>)
    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>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.