Can't make work ':' emoji-shortname on react js

[castroCrea]

As I say in the title i can not make work the shortname autocompletion code on typing ":"

This is my code:

import React, { useCallback, useState, useEffect, useRef, useMemo } from "react";
import ReactQuill, { Quill }  from 'react-quill'; // ES6 
import _ from 'lodash';
import 'react-quill/dist/quill.snow.css'; // ES6
import 'react-quill/dist/quill.bubble.css'; // ES6
import 'quill-emoji/dist/quill-emoji.css'; // ES6
import MarkdownShortcuts from 'quill-markdown-shortcuts';
import quillEmoji from 'quill-emoji';
import MagicUrl from 'quill-magic-url';
import ImageCompress from 'quill-image-compress';
import { ImageDrop } from 'quill-image-drop-module';

Quill.register('modules/markdownShortcuts', MarkdownShortcuts);
Quill.register('modules/magicUrl', MagicUrl);
Quill.register('modules/imageCompress', ImageCompress);
Quill.register('modules/imageDrop', ImageDrop);

const { EmojiBlot, ShortNameEmoji, ToolbarEmoji } = quillEmoji;

Quill.register({
  'formats/emoji': EmojiBlot,
  'modules/emoji-shortname': ShortNameEmoji,
  'modules/emoji-toolbar': ToolbarEmoji,
}, true);

function insertStar () {
  const cursorPosition = this.quill.getSelection().index
  this.quill.insertText(cursorPosition, "★")
  this.quill.setSelection(cursorPosition + 1)
}

const formats = [
  'header', 'font', 'size',
  'bold', 'italic', 'underline', 'strike', 'blockquote',
  'list', 'bullet', 'indent',
  'link', 'image', 'color', 'video',
  'align',
  'emoji',
]

const modules = {
  markdownShortcuts: {},
  toolbar: {
    container: "#toolbar-editor-quill",
    handlers: {
      "insertStar": insertStar,
    },
  },
  magicUrl: true,
  'emoji-toolbar': true,
  "emoji-shortname": true,
  imageDrop: true,
  imageCompress: {
    quality: 0.7, // default
    maxWidth: 1000, // default
    imageType: 'image/jpeg', // default
    debug: true, // default
  },
}

const Editor = () => {
  const [value, setValue] = useState('');

  const onChange = useCallback(
    (content) => {
      setValue(content);
    },
    [setValue, updateValue],
  );

  return (
    <div>
      <ReactQuill value={value}
                  onChange={onChange}
                  theme={'snow'}
                  modules={modules}
                  formats={formats}
                  className="scrollY height100"/>
    </div>
  );
};

export default Editor;

Do you have any clue ?

[KiranVH]

Hi, I also have the same problem. Does anyone know how to fix it?

[jacqueslelezard]

Same behavior with Vuejs..

[danvln]

Still an issue for React. Is any mitigation for this issue?

[dunnky]

The issue can be fixed by removing this line.

---

The issue lies in the renderCompletions function, which is only called from the update function.

When the early return was added - update was being called in two places: onAtKey and as the event handler for quills text-change event. I'm guessing the early return was the "fix" for the duplicate call.

However, a refactor removed onAtKey entirely, meaning update/renderCompletions was only being called from the context of a keypress event (e.g. quill's text-change event) - which means that window.event will always exist which also means renderCompletions will never progress beyond the try block that includes the early return.

Quill is no longer maintained and the functionality in this plugin has clearly been broken for over 2 years. I'd highly recommend anyone looking at Quill to find an alternative...there is a reason the original maintainers jumped ship.