Quilljs + Tributejs - Pressing enter key doesn't select

[ericbae]

How can we reproduce this bug?

I have created a JSFiddle for this issue here. https://jsfiddle.net/chphr0ab/3/

The issue is when you press "enter", it actually goes to the new line in the editor. Instead of creating a newline, it should actually select an item from the tribute.

You can still select the item using "tab" or a "mouse". It's just the "enter" key which doesn't work.

[mrsweaters]

Maybe Quilljs is capturing the enter event? I'll play around with it and let you know what I find.

[go2sujeet]

@mrsweaters can you please look into this, we are waiting on the implementation with this combination.

Thanks in advance :D

[mrsweaters]

@sujeetbuddiga The selection offset is being miscalculated in the context of the Quill editor. https://github.com/zurb/tribute/blob/quilljs/src/TributeRange.js#L232

If we can figure out why this is incorrect, we can fix the problem.

[oliveratgithub]

So regarding the 2nd issue with Quill+Tribute - the Tab-key - there's a way to disable it in Quill. But then again, it also stops working for Tribute as well...

var quill = new Quill('#quilleditor', {
    modules: {
        toolbar: {
            container:
            [
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
              [{ 'size': ['small', false, 'large', 'huge'] }],
              ['bold', 'italic', 'underline', 'strike',],
              [{ list: 'ordered' }, { list: 'bullet' }],
              ['link', 'image', 'blockquote', 'code-block']
            ],
            handlers: {
            }
        },
        keyboard: {
            bindings: { tab: false }
        }
    },
    theme: 'snow',
});

However, Quill's keyboard module might be a starting point to get them to play along nicely? Probably trigger a Tribute function with a specific binding in Quill on Enter & Tab key? http://quilljs.com/docs/modules/keyboard/

[mrsweaters]

@oliveratgithub They must stop event bubbling on Tab when it is disabled. I think your right about using the keyboard module. Let me know if I need to expose some tribute-specific methods for Enter and Tab.

[evansims]

Here's a JSFiddle demoing how you might use Quill's keyboard module to override the default enter key behavior when Tribute is active.

The relevant code in the Quill initializer:

modules: {
  keyboard: {
    bindings: {
      tributeSelectOnEnter: {
        key: 13,
        shortKey: false,
        handler: (event) => {
          if (tribute.isActive) {
            tribute.selectItemAtIndex(tribute.menuSelected, event);
            tribute.hideMenu();
            return false;
          }

          return true;
        }
      },
    }
  }
}

[ericbae]

@evansims Thank you for your solution. Works very well for me.

[allaud]

@evansims this does not seem to be working anymore, can you please take a look?

[filipjuza]

@allaud seems like hideMenu() and selectItemAtIndex() are not available anymore, at least from what I can tell based on the type declaration file https://github.com/zurb/tribute/blob/master/tributejs.d.ts.

I was able to get it working like this:

keyboard: {
    bindings: {
        tributeSelectOnEnter: {
            key: 13,
            shortKey: false,
            handler: () => {
                if (tribute.isActive) {
                    return false;
                }

                return true;
            }
        }
    }
}

When tribute is active, pressing enter inserts the selected item and closes the menu automatically. Otherwise you get the default Quill behaviour (newline is inserted).

[allaud]

Whoever gets into this issue I found it easier to use https://github.com/afconsult/quill-mention instead in this particular case