Quilljs + Tributejs - Pressing enter key doesn't select about tribute HOT 10 OPEN

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;
        }
      },
    }
  }
}

from tribute.

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

from tribute.

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

Thanks in advance :D

from tribute.

@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.

from tribute.

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/

from tribute.

@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.

from tribute.

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

from tribute.

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

from tribute.

@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).

from tribute.

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

from tribute.