Registering plugins

[benswinburne]

How might I go about registering plugins using Quill.register() for example?

I'm looking at adding https://github.com/contentco/quill-emoji/ but registering the toolbars and modules happens before I can get the quill object and register additional plugins/formats etc.

[gtgalone]

@benswinburne Thank you for using.

In your case, You have to use custom options.

According to https://github.com/contentco/quill-emoji/#usage

import 'quill-emoji'; // Important import emoji plugin

const toolbarOptions = {
  container: [
    ['bold', 'italic', 'underline', 'strike'],
    ['emoji'],   
  ],
  handlers: {'emoji': function() {}}
}
const formats = ['bold', 'italic', 'underline', 'strike', 'emoji']; // Important Sync with container array above.
const modules = {
  // ...
  toolbar: toolbarOptions,
  "emoji-toolbar": true,
  "emoji-textarea": true,
  "emoji-shortname": true,
}

const { quill, quillRef } = useQuill({ modules, formats });

React.useEffect(() => {
  // Just example for you. You don't have to add this line below. (optional)
  if (quill) { quill.register({ 'formats/emoji': EmojiBlot }, true); } 
}, [quill])

I just have finished with emoji screenshot below.

Figure out about css style emoji popover :)

[benswinburne]

Hi @gtgalone thanks for getting back so quickly. Whilst the example above worked I'm not sure how to apply that information to other plugins. For example, most plugins suggest calling register before instantiating Quill with options.

Without doing that and using an effect to register using the returned Quill I always seem to get errors about unregistered plugins (because i'm instantiating the plugins before registering i guess).

For example, combining your reply above with an additional plugin (magic url)

import { useQuill } from 'react-quilljs';
import 'quill-emoji';
import MagicUrl from 'quill-magic-url';
import 'quill/dist/quill.snow.css';
import 'quill-emoji/dist/quill-emoji.css';

  const toolbarOptions = {
    container: [['bold', 'italic', 'strike'], ['emoji']],
  };

  // Important Sync with container array above.
  const formats = ['bold', 'italic', 'strike', 'emoji'];
  const modules = {
    'emoji-toolbar': true,
    'emoji-textarea': false,
    'emoji-shortname': true,
    toolbar: toolbarOptions,
    magicUrl: true,
  };

  const { quill, quillRef } = useQuill({ formats, modules });

  useEffect(() => {
    quill && quill.register('modules/magicUrl', MagicUrl);
  }, [quill]);

quill Cannot import modules/magicUrl. Are you sure it was registered? quill Cannot load magicUrl module. Are you sure you registered it?

Does it make sense that i should be able to pass in a register object/array to useQuill so i can register modules/formats etc before passing in the configurations for them with modules, formats etc or am I missing the point?

Thanks again for your help.

[gtgalone]

@benswinburne

Huge Thank you for this.

I just add Quill class in return values.

Please update react-quilljs version to 1.2.6

I just have released new package version with Example code.

Example code https://github.com/gtgalone/react-quilljs#with-adding-plugins

[benswinburne]

Perfect, that'll work fine! Thanks!