vueup / vue-quill

Rich Text Editor Component for Vue 3.
https://vueup.github.io/vue-quill/
MIT License
1.08k stars 261 forks source link

Unable to register 'quill-mention' on QuillEditor #553

Open teo-clone opened 2 months ago

teo-clone commented 2 months ago

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 commented 2 months ago

Up, exact same issue here.

BayBreezy commented 2 months ago

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 commented 1 week ago

This issue is the same with #573

maneaionut0 commented 2 days ago

up, i have the same issue