jeff-collins / ment.io Goto Github PK

When clicking on the menu item to select an entry in IE 11, a javascript exception is thrown and no text is replaced.

First up, great component. I think it will be very useful. A couple of things though, which I will log separately.

First up, the matching names are displayed in a popup window. If there are two many names though, the list just grows. It attempts to add a scroolbar to the side of the browser window. In IE11 it appears to overlay the scroll bar for the page and the scrollbar for the matching names in one area which is odd. Chrome puts them side by side but that's a bit ugly as well.

What would be nice is if you could set a max height on the popup window with a scrollbar.

As the user types in more letters, the list does shrink so its more of an initial impression than anything else. Just looks off

Hi

is it possible to make the inserted elements clickable ? Best would be if the cursor becomes a pointer and the click would reaise an event.

Can I do this with ment.io ?

@jeff-collins : Is it possible to extend this awesome library to support different triggers off of different characters? For example, '@' opens up a menu of people, whereas ':' opens a list of smilies. In other words, this feature would need you to support an array of configurations. e.g.

    [
        {
            trigger-char: '@',
            items: people,
            select: function(person) { return person.firstName; }
        },
        {
            trigger-char: ':',
            items: smilies,
            select: function(smiley) { return smiley.unicodeChar; }
        }
    ]

In text area, input @ to bring up mentio-menu. Then backspace to delete @, but mentio-menu doesn't disappear

Hi Jeff,

I'm using autocomplete plugin in my project. We have the browse page in our site, On click of each item, It opens a new dialog (angular-dialog-service plugin) template, Which will load the ment.io INPUT element. It throws the following error when I click on ment.io INPUT element by opening and closing the dialog window more often. I'm not sure, how to fix it. I've pasted the HTML snippet below for your reference,

<input name="elemName"
                      placeholder="Select a friend" mentio
                      ng-model="demo.elemFor"
                      mentio-id="'elemtitle'"
                      type="text"
                      class="form-control"
                      ng-trim="true"
                      ng-change="updateName()"
                      ng-focus="addPrefix()"
                      ng-blur="resetField()"
                      ng-readonly="demo.enableField"
                      required />
          <mentio-menu
                    mentio-for="'elemtitle'"
                    mentio-trigger-char="' '"
                    mentio-items="demo.friends"
                    mentio-template-url="/friends-lists.tpl"
                    mentio-search="searchFriends(term)"
                    mentio-select="getSelectedFriend(item)">

  <script type="text/ng-template" id="/friends-lists.tpl">
    <ul class="list-group user-search">
        <li mentio-menu-item="person" ng-repeat="person in items" class="list-group-item">
          <img ng-src="{{person.profileImg}}" width="50" height="50">
          <span class="text-primary" ng-bind-html="person.userName | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
        </li>
    </ul>
  </script>.
Please help me to fix the error. I'm not sure why the 'nodeName' is null, On load of dialog window, ment.io loads properly but on click on the ment.io INPUT element, It throws the error.

Are there any hooks to provide a function if there is not a match in the list? In my example, a user can type in a hashtag and get a list of common hashtags, however, if they type a new hashtag, I would still like their text to be wrapped up in the anchor tags just like the ones that were in the list if one from the list was selected.

For some reason, the mentioMenu directive is hiding the menu permanently for me after being displayed successfully one time.

Is it a bad idea to copy the contenteditable directive from the example? I expected to be able to mention more than one item in the editable text.

When you have entered the content, if there is no space in the @ or # front, will not appear the drop-down menu .

Uncaught TypeError: Cannot read property 'length' of undefined - on line 607

I'm getting this error when selecting the mentioned people .

console.log(path)

It prints undefined!

Again in mentioning people, when getting the data from remote server, for example if I got 10 people - so when using keyboard arrows to move up/down to select a user, it first select the first people, then the 3rd then the last after that the 4th and so on... different order!

But in the local .json file arrows wok as expected an as in the example.

I'm working to modify ment.io to allow for spaces inside typed term without closing the mentions menu. Seems mentioUtil.getTriggerInfo comes back undefined thus hiding the menu.

Any tips to resolve this while I continue hacking away. :) Thanks1

Hi,

I want to implement user mentions in a textarea (comments).
I have for exapmle this items:

[
    {label: "Oliver Linde", value:"ollilinde"},
    {label: "Max Mustermann", value: "maxmu"}
]

I wan't to search through the items via the item.label key. That's not the problem. The problem is, that I want to replace the text behind the trigger key (@) in the textarea with the text stored in item.value. So the mention in the text is @{item.value} and not @{item.label}.

Is there already a solution for that problem?

Is there any option to trigger the mention menu when specified number of characters is typed after the 'mentio-trigger-char' character, I need to trigger the $http request ONLY when at least two characters typed after the trigger character '@' like: @ab...

Another issue is about optimising the request. I can not find any caching option for the request, if I typed @ab it'll send two requests one for 'a' character, and the second for 'b' character. Now if I typed backspace, it'll send third request for character 'a' again. So the request is not cached.

What about fast typer? Is there any timeout to calculate the speed of typed characters?
For example, I now the first four characters of the mentioned people - let's say he's Saimon - which are 'Simon'. When typing 'Simon' it's sending 4 requests for each characters. In some jQuery plugins there's a clever way to trigger the request ONLY after 400 ms of (delayed typing). In that case if I typed "Simon" in a fast way, it'll trigger only one $http request.

Thank you

I am using ment.io for multiple field in a single page and getting the error as

Error: Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('submit') does not support selection.
at Error (native)
at getTextPrecedingCurrentSelection (http://localhost:3000/bower_components/ment.io/dist/mentio.js:842:31)
at Object.getTriggerInfo (http://localhost:3000/bower_components/ment.io/dist/mentio.js:800:28)
at Object.fn (http://localhost:3000/bower_components/ment.io/dist/mentio.js:245:42)
at Scope.$digest (http://localhost:3000/bower_components/angular/angular.js:12434:29)
at Scope.$apply (http://localhost:3000/bower_components/angular/angular.js:12699:24)
at HTMLFormElement. (http://localhost:3000/bower_components/angular/angular.js:18941:21)
at HTMLFormElement.m.event.dispatch (http://localhost:3000/bower_components/jquery/dist/jquery.min.js:3:8436)
at HTMLFormElement.r.handle (http://localhost:3000/bower_components/jquery/dist/jquery.min.js:3:5146) angular.js:9959
(anonymous function) angular.js:9959
(anonymous function) angular.js:7298
Scope.$digest angular.js:12453
Scope.$apply angular.js:12699
(anonymous function) angular.js:18941
m.event.dispatch jquery.js:4641
r.handle

though all the function and tagging is working fine but still the console is not clean for me .

so basically I am using google chrome and error trrigers when the form submited which is having textarea with ment.io.

console is showing error on the function

    // Mozilla version
    else if (textComponent.selectionStart !== undefined) {
      var startPos = textComponent.selectionStart;
      text = textComponent.value.substring(0, startPos);
    }

More of a question here (sorry for so many messages recently). Mentio-select calls getPlacesTextRaw() which leverages a factory that returns the response from an async $http.get. I'm struggling to make getPlacesTextRaw function to return the value from my factory. Here's what I'm doing today:

$scope.getPlacesTextRaw = function (selectedPlace) {
        mentionsFactory.getPlaceMetaData(selectedPlace).then(function(jsonTemplate){
            //This finishes after the return below.  How can I return jsonTemplate?
        });
        //Just returns what the user typed in and I want to return jsonTemplate.
        return '<span class="mention-highlighter" contentEditable="false">@'+selectedPlace.description+'</span>';
    };

How can I return my jsonTemplate to mentio-select?

Spinning my wheels on this one. Thanks for wisdom.

Is there a reason why a space is force-appended when the trigger text is replaced?
Seems like, even in the demo, force-append ends up leaving 2 consecutive spaces after the replaced text

When using an ng-repeat, it's typical to name things using the $index value concatenated to a name. The code wasn't allowing the ID field of the mentio directive to be dynamic and was just using it as a literal string. Added new mentio-id attribute which is evaluated so that it can match mentio-for if it contains an expression.

Can we have a default option which can be specified in the controller for mentio-menu? Throughout the whole app, we are going to be using ment.io just to trigger mentions and macros.

If I wanted to use it for something else, I'd rather have the option of overriding it rather than specifying it every time.

Another problem with the mentio-for is that the mentio-for is required. Now imagine having a listing of posts on the homepage, with a reply form attached to it. HTML specification says ID must be document-wide unique, and I'd be violating that just to fit this in easily. Each of the comment box would have a same id, so I could trigger the mentio-for all of them at once.

That's why I like the default option for mentio-menu which could potentially solve some of these problems.

After adding an "@" pressing down to select a person and then enter, the browser window repeatedly crashed. Just fyi.

Google Chrome, Mac OS 10.9.4
Version 39.0.2138.3 dev (64-bit)

Press # in the Text Area on Demo page to trigger mentio, then press arrow key, the scrollbar stays still.

at http://localhost:9000/bower_components/ment.io/dist/mentio.js:36:39
at Object.forEach (http://localhost:9000/bower_components/angular/angular.js:323:20)
at controller.$scope.defaultSearch (http://localhost:9000/bower_components/ment.io/dist/mentio.js:35:29)
at Scope.controller.$scope.bridgeSearch (http://localhost:9000/bower_components/ment.io/dist/mentio.js:45:21)
at $parseFunctionCall (http://localhost:9000/bower_components/angular/angular.js:12336:18)
at Scope.$get.isolateBindingContext.(anonymous function) [as search] (http://localhost:9000/bower_components/angular/angular.js:7689:26)
at Scope.controller.$scope.query (http://localhost:9000/bower_components/ment.io/dist/mentio.js:26:33)
at Object.fn (http://localhost:9000/bower_components/ment.io/dist/mentio.js:411:35)
at Scope.$get.Scope.$digest (http://localhost:9000/bower_components/angular/angular.js:14230:29)
at Scope.$get.Scope.$apply (http://localhost:9000/bower_components/angular/angular.js:14493:24)

$scope.alluser = [{username:'amerr'},{username:'vinay'}];

i dono why it throws this error.

On the demo page, why the variable is empty after mentioning and pressing Enter or Tab?

Would be great if we could generate a json from ment.io using the triggerChar and the typeTerm.

                <div mentio
                       mentio-json
                       ng-model="htmlContent"
                       mentio-id="'socialtags'">
                </div>

                <mentio-menu
                        mentio-for="'socialtags'"
                        mentio-trigger-char=["@","#","$"]
                        mentio-items="results"
                        mentio-template-url="/social-mentions.tpl"
                        mentio-search="ajaxLookup(trigger, term)"
                        mentio-select="select(item)">
                </mentio-menu>

This would bind to:

{
   [
        {"@" : _atTerm},
        {"#" : _hashtagTerm},
        {"$" : _priceTerm}
    ]
}

thanks for building this btw. Great directive to build with.

I have found an issue on our website regarding the mentioMenu directive. It assumes that the element has to be injected on the body, however, this injection provokes a misbehaviour of the mentioMenu with the scrolling of the page, since the scroll event is not focused on the body but in another container.

I have a close PR with a hack solution, but I would like to have a second thought about it. #76

If you have an ng-repeat, and each element inside the ng-repeat has an input which uses mentio (specifically mentio-search). Typing the triggering character causes the search function to run once for every element inside the ng-repeat.

Demo: http://plnkr.co/edit/itqouq6AHYP0dDOBiMgl?p=preview

I'd like to show mentio-items in a dropup menu, which is easy by apply the bootstrap .dropup class to the container element. However, the dropup menu will cover the <input> below, which is not very nice.

Using mention in a textarea in a bootstraps modal, the mention popups forced z-index of 100 makes it show up behind the modal. Furthermore the elements positioning/offsets are off. Unable to solve the issue with css alone.

Hello,
I'd like to thank you for this directive. It's awesome.
However, I think that there is a problem:

If you mention an user at the end of the text, the ngModel won't be updated:

For example, If I have a textarea and I'm writing @j, the menu appears and I select Jeff Collins.
The html of the textarea will be updated to @jeff-collins , however, the ngModel will still be "@j" unless I write something more.

How Can i fix that? Thanks in advance :)

Hey Guys,

I have a textarea section with macros that will display an image tag however I have problems with it rendering. It seems to just escape it, I am using the ngSanitize module for default configurations.

Similarly have a conteneditable which works fine, it uses a directive that calls $render and applies this code:

                elm.html($sanitize(ctrl.$viewValue));

Which works fine.

However my textarea which just references a model in my controller does not quite work, what happens is that it substitutes and escapes the img tag, e.g.:

    $scope.mentioMacros = {
        ':smile:': '<img src="/modules/core/img/emotes/smile.png" height="20" width="20">'
    };

If I type the above macro I get the literal text.

Then when I save and reload, I get the key value ':smile:' as a literal.

Am I missing a step? I want to make it secure as well.

Is there a current way to create hashtags? Most social applications allow users to create hashtags with the same styling as the hashtag itself. Is there a current way to do this or maybe a future request?

demo: http://plnkr.co/edit/2IEkI4UQN6hhzndlFVed?p=preview

When ment.io is wrapped in another directive, this error is printed out. Although the functionality is not affected.

I'm using this demo for a project and I've noticed the bottom where it appears the tags that have been mentioned are supposed to populate is not currently working. Any suggestions?

Also how is populating the search without a trigger character going? Looking forward to this feature!

I would like to select some tags using mentio, then on form submit get an array of the selected tags in the input.

I know I can look in the string value in the input and extract the tags, but wonder if there is a built-in function I missed when looking in the docs and source code?

Angular does not have a good repository for converting emoticons, and this could definitely be integrated into this app.

We attempted angular emoticons (pratik60/angular-emoticons), which would convert the emoticons after posting a message. What it does is searches with regex for the emoticons, adds a css class, which has a background image attached to it. But I like the possibility more with this package.

In the macros, we have converted (smile), by replacing it with an img src. Would you prefer handling it with css-class which has a background-image, or rather directly as images? How do you think we should go about it, and would you like to see this feature in your package?

Is there any library/api we could hook into for emoticons easily or just integrate a css file here? Thoughts....I hope I wasn't all over the place :-)

Is this intentional ?

Seems to be caused by line 835:

Getting this on FF v31, Chrome is ok
triggerCharSet.forEach(function(c) {}

Prolly some way i've configured it
Great library, BTW

Go to ment.io example site on any iOS device.. Type in a mention and notice the cursor jumps to before the # or at @ when typing the second character. :)

Firstly, Lovely plugin btw.

We are facing problems when we are using it with textarea. If you look, at the second example, and you type (smile) for example the entire html appears inside the textarea.

Also, in the case of textarea, if you hit space immediately after any macro it won't change, but rather you have to be patient and wait for it to change. Its different from the first contenteditable one.

This plugin looks really promising though.

Unknown provider: mentioUtilProvider <- mentioUtil

I am using it in integration with mean.io, so I'm not sure if the problem is on this end or incorrect aggregation especially as this doesn't always happen.

Thoughts?

Hi there,

We have a requirement to support IE9 and I'd like to use ment.io for our mentions functionality - but I'm having a couple of issues.

When using the contenteditable version, I get an error Object doesn't support property or method 'selectStartOffset'. I can't find any documentation for selectStartOffset in any browser?

When using the textarea version, typing @ doesn't launch the menu.

The same issues happen on the demo page in IE9. Everything seems to work in Chrome.

Is the plugin expected to work in IE9? If so I'm happy to spend some time debugging this, but I just wanted to make sure before I dig in.

Thanks!

I’m trying to get your directive working with ckEditor and was wondering if you had any tips on how this could be accomplished.

My understanding is that ckEditor uses an iFrame.

Any tips would greatly be appreciated.

The package "npm" has many errors, The idea of ​​using npm, is that modules can be exported. But this does not export anything!

$ node
> require('ment.io')
Error: Cannot find module 'ment.io'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at repl:1:2
    at REPLServer.self.eval (repl.js:110:21)
    at Interface.<anonymous> (repl.js:239:12)
    at Interface.emit (events.js:95:17)
    at Interface._onLine (readline.js:202:10)
    at Interface._line (readline.js:531:8)
> require('angular')
ReferenceError: window is not defined
    at Object.<anonymous> (/home/pl/Work/node_modules/angular/angular.js:25582:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at repl:1:2
    at REPLServer.self.eval (repl.js:110:21)
    at Interface.<anonymous> (repl.js:239:12)

In the first export generates an error of not finding anything, and the second is an error that can not find the window. If one refers to package.json, find this

{
  "name": "ment.io",
  "version": "0.9.15",
  "description": "Mentions for Angular",
  "main": "index.html",

It attempts to bring NodeJS is an HTML!

I get the typeerror for

                scope.parentMentio.$on('$destroy', function () {
                    element.remove();
                });

I have the <mentio-menu inside another directive, I don't know if that has anything to do with it.

If I put it into a small if, it just doesn't execute element.remove(); but everything seems to work

            if(scope.parentMentio) {
                scope.parentMentio.$on('$destroy', function () {
                    element.remove();
                });
            }

Meanwhile, congratulations to the realization of this component.
I'm instantiating the component in a template rendered in a dialog; I noticed something quite serious: by following the chiudura and reopening the dialog the component is correctly reinitialized; in this case every time, sensa no control, is re-done a bind said event 'keydown keypress click paste' on $document object. In this way I find myself having multiple handlers resulting in the malfunction of the component when you try to make your selection.

PS. My tips :

• It would be nice that the events were attached to the element on which the component is instantiated;
• That they also bind a namespace in a way which would not override other events likely already present on the element;
• When the component is hidden was done off of the listeners.

Thanks

This is a complex issue to fix, I suspect. I've got users who want to be able to type an email address and not have the mention list pop open. Is there a way to configure this? Or will it require source changes. Cheers and thanks for an awesome project.

Is one coming down the pipeline? For the people who aren't using angular?

if the mentioMenu directive is a service , will be better.

I want to use this plugin at work but I need a input field without a trigger char. What is the best way to implement this? I am thinking about adding a '@' char to string when someone starts typing. Any other ideas?

So my menu is not appearing and I am not sure why, here is my code. My macros work though, here is my code:

<script type="text/ng-template" id="/mentio-users.tpl">
    <ul class="list-group">
        <li mentio-menu-item="user" ng-repeat="user in items" class="list-group-item">
            <img ng-src="{{user.imageUrl || ''}}" class="img">
            <span class="text-primary" ng-bind-html="user.displayName | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
        </li>
    </ul>
</script>

   <textarea name="addComment" id="addComment" ng-model="addComment" class="form-control" rows="3" mentio mentio-macros="mentioMacro"
                mentio-typed-term="typedTerm" mentio-require-leading-space="true"
                mentio-trigger-char="'@'"
                mentio-items="user"
                mentio-template-url="/mentio-users.tpl"
                mentio-search="searchPeople(term)"
                mentio-select="getPeopleText(item)"
                mentio-id="'theTextArea'"></textarea>
    </div>

... Controller Code:

    $scope.mentioMacro = {
        'brb': 'Be Right Back'
    };
    $scope.user = [{
        displayName: 'bob'
    }];

    $scope.searchPeople = function(term) {
        console.log('called people');
        return $scope.user;
    };

    $scope.getPeopleText = function(item) {
        console.log('called get');
        return item.displayName;
    };

Also do I have to use a 'tpl' file wrapped in a script, can I not use a html file instead directly?.