How to register Quill module for react-quill?

[junoriosity]

ReactQuill version

• [ ] master
• [x] 2.0.0
• [ ] v2.0.0-beta.2
• [ ] v2.0.0-beta.1
• [ ] 1.3.5
• [ ] 1.3.4 or older
• [ ] Other (fork)

Issue

I am currently working with the react-quill module and it works very nicely. My App.js looks like

import { useState } from  "react";
import  ReactQuill  from  "react-quill";
import  "react-quill/dist/quill.snow.css";

const  modules  = {
    toolbar: [
        [{ font: [] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        ["bold", "italic", "underline", "strike"],
        [{ color: [] }, { background: [] }],
        [{ script:  "sub" }, { script:  "super" }],
        ["blockquote", "code-block"],
        [{ list:  "ordered" }, { list:  "bullet" }],
        [{ indent:  "-1" }, { indent:  "+1" }, { align: [] }],
        ["link", "image", "video"],
        ["clean"],
    ]
};

const  App  = () => {
    const [value, setValue] =  useState("");
    console.log(value);

    return  <ReactQuill  modules={modules} theme="snow" onChange={setValue} placeholder="Content goes here..." />;
};

export  default  App;

and my index.js looks like

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

However, I would like to embed this module for autocompletion.

They say, that one would have to embed it as follows:

import getPlaceholderModule from 'quill-placeholder-module';
import getAutocompleteModule from 'quill-placeholder-autocomplete-module';

Quill.register('modules/placeholder', getPlaceholderModule(Quill,  {
  className: 'ql-placeholder-content',        // default
}));
Quill.register('modules/autocomplete', getAutocompleteModule(Quill));

const placeholders = [
  {id: 'foo', label: 'Foo'},
  {id: 'required', label: 'Required', required: true}
]

var quill = new Quill('#editor', {
  modules: {
    toolbar: {container: `#toolbar`},
    placeholder: {
      delimiters: ['{', '}'],                   // default
      placeholders
    },
    autocomplete: {
      getPlaceholders: () => placeholders       // factory
      container: '#completions',                // can also be return of `document.querySelector` or kept `undefined`
      triggerKey: '#',                          // default
      endKey: '#',                              // optional
      debounceTime: 0,                          // 0: disabled (default)
      onOpen: () => console.log('opened'),                                      // optional
      onClose: (placeholder) => console.log('user choosed:', placeholder),      // optional
      fetchPlaceholders: (query) => fetch(...).then(...)                        // optional
      onFetchStarted: (query) => console.log('user searching for:', query),     // optional
      onFetchFinished: (results) => console.log('possible results:', results),  // optional
    }
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'
});

However, I do not know how to do it with react-quill. It would be great if you could help me here.

[mambans]

I think you can just do as the ` import Quill from "quill";

Quill.register('modules/autocomplete', getAutocompleteModule(Quill)); `.