zurb / tribute Goto Github PK

Would be cool to have a web component published at http://webcomponents.org/ to use this component.

first of all mey english isnot very good sorry for this. Iwant to use values form json but
I try a lot of way but i couldnt do it. itry dataType json. jsonp not working list is empty. when i try html i can see values pattern on console just like yours. But icant get it. Console error arr.reduce is not a function

....
return arr.reduce(function (prev, element, idx, arr) {
....

please help me my code is

$.ajax({
type: 'GET',
url: 'bla bla bla',
dataType: 'html',
success: function (data) {
console.log(data)

    var tribute = new Tribute({
        values: JSON.stringify(data),

        selectTemplate: function (item) {
            if (this.range.isContentEditable(this.current.element)) {
                return '<span contenteditable="false" class="mentionsPerson"><a href="http://ismailhakkieren.com" target="_blank" title="' + item.KEY + '" class="mentionsPerson">@' + item.KEY + '</a></span>';
            }
            return '@' + item.KEY;
        }
    });

    tribute.attach($('#mainEditor'));
    tribute.attach($('#inputExperience'));


}

});

Hello friends,

Is there a way to trigger suggestions popup programmatically?

I've tried

tribute.showMenuFor($('.editor').get(0), true);

but it doesn't work.

Currently I'm trying to show menu with dispatching keydown + keyup events, not sure if this will work.

I'm having trouble appending/replacing the items. Here's a little JSFiddle https://jsfiddle.net/jrpar74q/

Am I missing something obvious? I tried passing true as a second arg to replace the items, and that didn't work either.

I know Tribute doesn't require jquery, but it seems like it should play nicely with it. If I call attach with a jquery object I get the following error:

tribute.js?body=1:135 Uncaught TypeError: el.hasAttribute is not a function
_attach @ tribute.js?body=1:135
attach @ tribute.js?body=1:129

I think the reason is Tribute is explicitly checking for NodeList instead of just accepting any array-like set of elements

When opening the mentions menu in the bottom of the page, the menu goes out of the view and a scroll is added to the page.

I believe that the wanted behavior in case the menu is too long (when the "top" coordinates + the menu height is bigger than the page height), is that it should be opened upwards.

I think I've missed the docs on how to do this and I've trawled these issues but I still can't work out how to trigger an AJAX load.

I understand the expected format and how to append correctly, but I can't find how to hook Tribute to my AJAX load.

Great component! Any pointers much appreciated.

The menu is created with this call:

this.tribute = new Tribute({
            values: [],
            menuContainer: document.body,
            selectTemplate: (item) => {
                return '@' + item.original.value.username;
            },
            menuItemTemplate: (item) => {
                return 'someBoringHTML'
            },
            lookup: (original) => {
                return original.value.username + original.value.displayName;
            }
        });

We use this lib to display a user menu if somebody writes '@' in the message create input. As you can see from this screenshot (the menu to the very right bottom corner):

The tribute menu gets loaded nearly off screen. In this screenshot:

It is even completely off screen. I think there should be an implementation, where the menu can never go outside the viewport. I can't think of an use case (not even iFrame?) where the menu should be outside the viewport...

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.

How can we reproduce this bug?
Using latest master version 2.3.6

1. Step one
   Create a contentedible element:
   <div id="mention" contenteditable="true" placeholder="type here"></div>
2. Step two
   attach a tributejs with basic defaults (issue remains with custom selectTemplate):

let tribute = new Tribute({
        collection: [ {
          trigger: '@',
          allowSpaces: false,
          values: [{key: 'Phil Heartman', value: 'pheartman'}, {key: 'Gordon Ramsey', value: 'gramsey'}]
        }]
      });
tribute.attach(document.getElementById('mention'));

3. Step three
   Start typing @ for the mention list to appear, select any, press enter (keyboard not click), and press space, or continue writing. Then press enter again.

What did you expect to happen?
Default action: in this case line change

What happened instead?
No default action, all text reverted to just mention. This also happened some time with text before the mention, and this text also disappeared (cannot reproduce though atm)

Link (jsfiddle/plunkr) or Screenshot:
https://jsfiddle.net/kj2tzbe4/3/

I would consider this more an enhancement than a bug, but it would be nice to allow users to type spaces when mentioning someone, especially if we use first names and last names for mentioning.

For example, in the Katniss example, you can't type out @peeta m and still be able to mention him.

I think keeping this functionality is important, so maybe a new option allowSpaces: true can be used to signify this?

To use tribute withing Typescript - it is required to have a Declaration File. (tributejs.d.ts)

Can you please provide one?

Hey there!

First of all, thank you so much for creating this plugin. I love it!

I was wondering if you'd consider an enhancement that allows me to completely remove an attached Tribute instance (so that I can then create a new instance with new data).

In my use case, I have 2 Tribute instances attached to 2 textareas on a page (so one instance per textarea). When the user makes a selection above the first textarea, I want to replace the collection for the associated Tribute instance with completely new data without interfering with the other Tribute instance attached to the second textarea.

Perhaps there could be "remove" method -- i.e., tribute.remove(...) to remove a Tribute instance from an element. That way, I could re-initialize & re-attach a new Tribute instance with new data to the target element.

What do you think?

Thank you for your time!

Jen

When typing something that doesn't exist on the values list and clicking on the 'No Match' in the list, an error appears in the console saying: 'Cannot read property 'original' of undefined'.

Does it should be clickable at all? there is no reason that someone could click the 'No Match' label that is shown when the typing did not match anything.

Also, the 'No Match' disappears after some chars where typed, and so the error is shown also when there isn't a 'No Match' label but the enter button is clicked.

Hi @mrsweaters, thanks to accept my pull-request!

But, there is anything wrong and URGENT to fix with the dist directory, I don't know if the problem was happened because i included the dist directory to .gitignore.

I went update my TributeJS to new version on my project by npm and the dist directory disappeared.

There's a critical bug occurring within a textarea upon deleting a mention and then hitting enter. You can reproduce this behaviour in the Tribute Demo:

1. Enter a mention followed by text followed by another mention:

to @Jordan Humphreys 
lorem ipsum
from @Sir Walter Riley 

1. Remove second mention using backspace key

to @Jordan Humphreys 
lorem ipsum

1. Hit enter: complete lorem ipsum text after first mention gets removed

to @Jordan Humphreys 

How can we reproduce this bug?

1. On the demo page https://zurb.github.io/tribute/example/ with IE11
2. Type into the contenteditable mentions box some random text
3. Type @ and click an option in the dropdown

What did you expect to happen?

Mention should be added

What happened instead?

Mention is not added

It would be cool if one could define a string to the location to the HTML templates like selectTemplate.

That way the template would be more maintainable.

when using ajax request callback to populate values, The AJAX request is sent by adding a new character even after no match. There's no reason to send another request when the previous request with less characters itself returns nothing.

Also I would like to use the previously populated values instead of making new request again on pressing backspace.

Hi, i am using tribute and it is all perfect! But now there is too much data and it is hard to start tribute after @/#.. Therefore i need to trigger mention or hashtag not just after @or #, but after an additional letter typing like @A or #b?
Another issue is i want to use a dynamic mention list?
How can i do that?

This is more of a feature suggestion, if that's OK: it would be great if you could pass an option to have the suggestions menu render below the field instead of at the trigger character location (and have the width of the list automatically set to match the field above, etc). I could see folks wanting the option depending on their app's style.

When triggering the @mention dropdown, highlight is working as expected but the switching to and from mouse/trackpad navigation vs. arrow/keydown navigation the highlighted item doesn't switch properly.

1. Trigger dropdown
2. Arrow/keydown through the list
3. Scroll list with mouse/trackpad

We expect mouse navigation to behave the same as key navigation via arrows - the item hovered should clear the previously-highlighted item from being in it's highlighted state.

Instead 2 items can seemingly be highlighted at once and also when using the mouse/trackpad, again, as already mentioned, highlighted state will not clear. Hover is fine.

How can we reproduce this bug?

1. npm i --save tributejs
2. require('tributejs')

What did you expect to happen?

Would import tributejs

What happened instead?

dist/tribute.js is requiring ./utils on the 10th line, and that is not in the dist folder.

Link (jsfiddle/plunkr) or Screenshot:

I see that I can access the 'tribute-replaced' event to get to the HTML inside event.detail, but what I really need access to are the original key/value pairs in my values collection.

For example, if I have:

values: [
     { name: "The Empire Strikes Back", id: "the-empire-strikes-back", entity: "movie" },
],

when my text is replaced, I need access to those original variables: name, id, and entity after my text has been replaced, because I'm going to need to store those variables in my object along with the replaced text.

(This allows me to display the "replaced" text when it's pulled from the database later and displayed in my app.)

So really, I just would like to see lines 101-103 in TributeRange.js:

        let replaceEvent = new CustomEvent('tribute-replaced', {
            detail: text
        })

changed to something along these lines:

        let replaceEvent = new CustomEvent('tribute-replaced', {
            detail: {
                 "text": text,
                 "name": name,
                 "id": id,
                 "entity": entity
            }
        })

The challenge is, I don't seem to have access to the item object at that point, and the code at that point would have no idea what the key/value pair names are, so you'd have to just iterate over them and deliver them directly - given that each item value could have any number of individual key/value pairs.

If you have a thought of how to accomplish this easily that I'm unaware of, let me know.

In version 3.1.0 there's a change regarding positioning. In my case, this broke the positioning of the mentions window. I have a comment box on the right of the screen (I'm just using Bootstrap columns, nothing special) and the mentions box now appears on the left side of the screen. The tribute-container div is a child of the <body> and it has the style top: 413px; left: 449px; position: absolute; display: block; which wouldn't even be the correct positioning if it was relative to the comment box. The vertical position does seem to be correct though, it's only the horizontal positioning that is broken.

If you need more info, I'll be glad to help.

When i add mention i add input value item.original.key but when i remove mention i want to remove this parametre how ican do it please help me

i need just like this...
document.getElementById('mainEditor').addEventListener('tribute-removed', function (e) {
console.log('Text replaced by Tribute!');
});

This is more of an enhancement, but we bundle and minify/compress this code, and it would be great if the 'use strict'; line was contained so that we didn't have to worry about it affecting our other code that's out of scope.

For now, we've had luck wrapping the whole tribute.js library in an IIFE, but there might be a better solution that we haven't thought of.

The lookup config should accept a function that allows you to construct a lookup value by concatenating attributes on the item as well as the the current approach, a string representing the attribute to query against.

ex.

{
  lookup: function(person) {
    return person.name + person.email;
  }
}

or

{
  // this will query against person.name
  lookup: 'name'
}

Default will still lookup against a key attribute.

How can we reproduce this bug?

1. Go to the example https://zurb.github.io/tribute/example/
2. In the contenteditable input, enter lots of new lines and scroll the page down so that the top of the contenteditable is scrolled out of view
3. Start typing a mention

What did you expect to happen?

The page does not jump.

What happened instead?

The page jumps up so that the top of the contenteditable is scrolled back into view

This is caused by the following line https://github.com/zurb/tribute/blob/master/src/TributeRange.js#L43
Commenting out that line seems to fix the issue, but that may have unintended consequences in other situations.

How can we reproduce this bug?

1. Create a simple application with <div class="mentionable">Some text.</div>

2. Initialize Tribute as new Tribute({ values: [ {key: 'Phil Heartman', value: 'pheartman'}, {key: 'Gordon Ramsey', value: 'gramsey'} ]
   and attach to the contentEditable tribute.attach(document.querySelectorAll('.mentionable'));

3. Type @ to see the possible options to mention
   
   and select any
   

4. Continue typing on the same line
   
   then press 'Enter' key
   

What did you expect to happen?
Cursor moves to the next line.

What happened instead?
Cursor moves back to the place after mention and some part of a mention appears after it.
Trying to press 'Enter' again together with printing some text continue to insert some part of mentioning and moving cursor.

Link (jsfiddle/plunkr) or Screenshot:

It would be great if an event was fired when a user tried to search something and there were no matches in the collection. When trying to be judicious about sending large collections to the client, having this event could let us update the list on the fly with another large page of data without loading it all up front.

As you will be able to see from the last image, i'm using div with contenteditable="true".

First you need to setup selectTemplate to look something like this:

{
   selectTemplate: function (item) {
      return '<span class="handle">' + item.original.username + '</span>';
   },

   values: [
      { name: 'Allen Iverson', username: 'alleniverson' },
      { name: 'Basketball HOF', username: 'Hoophall' }
   ]
}

.editor { color: #000; } 
.handle { color: #1b95e0; }

How can we reproduce this bug?

1. Start mentioning "Basketball HOF"
2. Mention someone
3. "Backspace" delete handle to look like this: @hooph
4. You see autocomplete list again, hit enter to mention @Hoophall again
5. Continue typing

What did you expect to happen?
I expected to have text with black colour again. (see image)

What happened instead?
I got all text blue. (see result image and markup)

When the window is scrolled it's correctly taken into account by getTextAreaOrInputUnderlinePosition. However its contenteditable sibling getContentEditableCaretPosition does not consider window scroll

A quick fix I used was to add this block of at the bottom of getContentEditableCaretPosition

var doc = document.documentElement
var windowLeft = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
var windowTop = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)

coordinates.top += windowTop
coordinates.left += windowLeft

A better fix would take into account the scroll of every parent having a scroll, not only the window. (For instance if there is an overflow: auto on an ancestor element)

Is it possible to attach Tribute to the Simple Markdown Editor "SimpleMDE"?
https://github.com/NextStepWebs/simplemde-markdown-editor

First of all I must say that I really like this project!

I have an issue with the leading space option.
The issue is that when requireLeadingSpace is set to true and a user types @bob@mail the values function is no longer being called after typing @ (assuming that the trigger key is @).
i.e it will be called for b, bo, bob, but will not be called for bob@, bob@m, etc.

How can we reproduce this bug?

1. configure tribute as follows:

var tribute = new Tribute({
      requireLeadingSpace: true,
      values: function(prefix, cb) {
          console.log(prefix);
          cb([]);
      }
});
tribute.attach(document.getElementById('test'));

2. enter @bob@mail in the 'test' element

What did you expect to happen?
console output: bob@mail

What happened instead?
console output:

How can we reproduce this bug?

1. Create textarea input
2. Set CKEditor in textarea -> its create a iframe with a body tag(contenteditable true)
3. try to attach: tribute.attach(document.getElementById('bodyid')

What did you expect to happen?
Attach tribute in body.

What happened instead?
Nothing

Link (jsfiddle/plunkr) or Screenshot:

    `<script>
    CKEDITOR.replace( 'editor1' );
    //Criacao do Tribute AutoComplete
    var tribute = new Tribute({
        collection: [
            {
                // The function that gets call on select that retuns the content to insert
                selectTemplate: function (item) {
                    return '@[' + item.original.value + ']';
                },
                // template for displaying item in menu
                menuItemTemplate: function (item) {
                    return '<img style="max-width: 20px;" src="'+ item.original.url + '">' + '&nbsp;&nbsp;&nbsp;&nbsp;' + item.original.value;
                },
                
                // the array of objects
                values: users,
                
                // specify whether a space is allowed in the middle of mentions
                allowSpaces: false
            },
            {
                // The symbol that starts the lookup
                trigger: '#',
                
                // The function that gets call on select that retuns the content to insert
                selectTemplate: function (item) {
                    return '#' + item.original.value;
                },
                
                // template for displaying item in menu
                menuItemTemplate: function (item) {
                    return item.original.value;
                },
                
                // the array of objects
                values: hashtags
            }
        ]
    })
    
    tribute.attach(document.querySelectorAll('.cke_editable'));
    //tribute.attach(document.getElementById('testarea'));
    //tribute.attach(document.querySelectorAll('#autocompletetext'));
    //tribute.attach(document.getElementsByTagName("p"));
    //
    
    //tribute.attach(document.getElementById("autocompletetext"));
    //tribute.attach(document.getElementsByTagName("body"));
    </script>`

Has anyone conquered getting Tribute working as a custom control in an appendGrid row?

In appendGrid you define a customBuilder: function that creates the dynamic control in a very jQuery stylee. The problem is, with Tribute, you need an existing text input that's hooked via

triLocation.attach(document.getElementById('txtFoo'));

or am I missing something? Can you dynamically create individual Tributes?

How can we reproduce this bug?

1. Editor must be empty
2. Start mention with @
3. Hit enter to select first item or navigate using up/down keys and then hit enter

What did you expect to happen?
Autocomplete window closed

What happened instead?
Autocomplete window opened

Link (jsfiddle/plunkr) or Screenshot:
https://plnkr.co/edit/AV1ru1uYDbttp5mx62SF?p=preview

When I navigate in list of suggestions by keybord arrow selection stops at first and last item. But I want it loop so the selection never stops at any point of the list.

How can we reproduce this bug?

1. Step one
   Create a simple <div class="mentionable">Some text.</div>
   and initialize a tribute var tribute = new Tribute({ values: [ {key: 'Phil Heartman', value: 'pheartman'}, {key: 'Gordon Ramsey', value: 'gramsey'} ]});
   Apply tribute to the element tribute.attach(document.querySelectorAll('.mentionable'));

2. Step two
   Start typing @P - 'Phil Heartman' option is shown
   
   Type anything (not to match the option) @Py - no option is shown
   

3. Step three
   Press Backspace - @P text is left

What did you expect to happen?
'Phil Heartman' option is shown

What happened instead?
No option is shown. Need to type something again for search to be called.

Link (jsfiddle/plunkr) or Screenshot:

Hi. I ran into this error when I tried to use 2.0.1 with brunch 2.8.2.

error: Resolving deps of node_modules/tributejs/dist/tribute.js failed. Could not load module './TributeEvents' from './node_modules/tributejs/dist'. Make sure the file actually exists.

Is this a brunch issue?

I'm having issues triggering @mentions with an app using Rails 5, Ruby 2.3.1 inside a Backbone model in a Marionette view.

In my view, I have a form in a modal with a textarea: <textarea name="message" rows="3" placeholder="Write your comment..." class="form-input"></textarea>.

On keyup with '@' in console I am getting the above error: "Tribute was already bound to TEXTAREA".

The code in my Marionette view is pretty simple, the following is my function (in CoffeeScript):

mentionedUsers: ->
      allBrandUsers = (app.BrandChannel.request 'current:brand:users')
      tribute = new Tribute(values: allBrandUsers.models)
      tribute.attach(@ui.message)

...where @ui.message is the name of the <textarea>

I'm attaching the function with an event (last line below):

events:
      'submit @ui.form': 'onBeforeSubmit'
      'keypress @ui.message': 'onMessageKeypress'
      'keyup @ui.message': 'mentionedUsers'

With debugger stepping through, allBrandUsers evaluates properly:
UsersCollection {length: 2, models: Array[2], _byId: Object, parent: BrandModel}

also tribute evaluates properly:
Tribute {menuSelected: 0, current: Object, inputEvent: false, isActive: false, menuContainer: null…}

attaching seems to evaluate properly (although I am curious about the array here):
[<textarea name="message" rows="3" placeholder="Write your comment..." class="form-input" data-tribute="true"></textarea>]

I do not get the dropdown to trigger at all, and additionally, there's the error in console I mentioned already.

We have more li elements in our list than will fit in the viewport of the fixed-height tribute-container. Scrolling with a mouse or trackpad works as expected, but arrow up/down does not move the list in the container.

1. Create a list of users larger than will fit in fixed height tribute-container
2. Trigger dropdown and arrow down to the bottom of the list (the list will not move with the arrow down behavior)
3. Try again with mouse or trackpad scroll and the list scrolls

We expected arrow up/down to move the list visually through viewport of the fixed height div.

We could hack this with javascript/jQuery but had expected arrow up/down to scroll out of the box.

How can we reproduce this bug?

When enter event (to select item from dropdown) is fired, the events of element, which tribute is attached to, are still triggered.

What did you expect to happen?
Is it possible to have an option to stop propagation (event bubbling) of enter event?

What happened instead?
These is no way currently to get enter event, subscribe to it. The only emitted is custom 'tribute-replaced' event, which unfortunately know nothing about its parent event.
As possible solution 'tribute-replaced' can provide its parent event, so we can call stopPropagation manually.

The call this.getDocument().activeElement in for example

That is why all this.getDocument().activeElement should get replaced with this.tribute.current.element

@mrsweaters you know the architecture way better than me. Could you shortly explain why this.getDocument().activeElement was introduced instead of this.tribute.current.element and what implications it would had to replace it?

We're using knockout, and It would be great to have a callback after text is replaced. This isn't playing nicely with the textInput binding in knockoutjs, and it would help to be able to track the changes applied by tributejs.

In the bind function of TributeMenuEvents there's a call to document.addEventListener('click' and window.addEventListener('resize' . These event listeners are never cleaned up (that I can see), even if the underlying text element is removed.

Hello

Just want to say love the package. I want to help out getting this working CKEditor. Currently getting this error when I try to attach it to the CK editor ID on my text area

Error: [Tribute] Must pass in a DOM node or NodeList.

Just wondering if we could start the discussion on getting this integrated. If you can point me in the right direction, I can dive into the code and help out.

Let me know.

i wrote special ediitor and i use your library for mentions.
my div id is mainEditor.

tribute.attach($('#mainEditor'));

it works perfect but i have a special situation. this div (mainEditor) has a h3 (h3 id is hContent )and i dont want to mentions only this element. Please help me.

How can we reproduce this bug?

I have reproduced a very simple example in here

https://jsfiddle.net/03m5kyL7/

What did you expect to happen?

Mouse cursor should remain after "@" sign.

What happened instead?

Mouse cursor should moves to the front of "@" sign

Link (jsfiddle/plunkr/codepen) or Screenshot:

https://jsfiddle.net/03m5kyL7/