Space after insertion of mention?

[deronsizemore]

I noticed today that after I type my @mention, it inserts a space after but I don't seem to notice this same behavior on the included example. This seems to be causing an issue in some browsers as it doesn't seem to register that space and I'm left with text butting up right next to the @mention.

I did alter line 498 a bit to suit my own needs:

return "<a href=\"" + "/" + mention.value + "\">" + "@" + mention.value + "</a>";

Doesn't appear that the change makes a difference though as even with the default code that ships with jquery-mentions, I'm still getting the space after. I'd love to just duplicate the demo functionality where the blinking cursor is places right at the end of the at mention and a manual space is needed to start the next word

The result I'm seeing in some browsers for "@mention this is some text" becomes:

"@mentionthis is some text"

Hope that makes sense.

Thanks

[ivirabyan]

You seem to be getting the same error as here: https://github.com/brandonhall/jquery-mentions/commit/5a800fb4fec8f811c52817d6190567797fb1122b#diff-59079a7560ad66518040a556751fb86fL176

But for some reason I can't reproduce it. Can you paste a code here to reproduce the error?

[deronsizemore]

Thanks for the quick reply. The only code I could give is the above in my first post as that's all I've altered from the default code (which I downloaded yesterday to get the latest fixes).

I've done a lot of testing last night with your demo so I could eliminate any outside variables that my site could be causing and I think I've found the problem.

On the demo, if I change the font-family inside the contenteditable div to any Sans Serif font, i.e., Helvetica, Sans-Serif, etc., then I get the weird phantom space issue. If I leave it with no font-family, or set to a Serif font, then it seems to mimic your default demo functionality.

I personally would love it if it would add a space to the end (instead of what your demo has) but I could live with the default functionality as long as it's not adding this phantom space to the end of the mention when a sans serif font is used.

Try that and see if you see the same results.

Thanks

[deronsizemore]

It also seems to only happen in Chrome (haven't tested Firefox or other similar browsers). I don't get this phantom space in the results when I'm using IE

[deronsizemore]

Ok, another update.

Verdana and Gill Sans both seem to function correctly in the demo. Not sure why Helvetica and Open Sans (google font) don't seem to work. I've also test other google fonts and the only one thus far that seems to function correctly is Source Sans Pro.

[ivirabyan]

Ok, I found the root of the problem. What we see as a space in Helvetica (and others you mentioned) is actually a "zero-width non-breaking space" character. It is used internally to keep track of the mentions inside the textarea. By definition this character has no width, so must be invisible to user. For some reason those fonts don't follow the definition and shows this character as an ordinary space.
Somewhat similar problem I found on stackoverlow:
http://stackoverflow.com/questions/2903780/custom-fonts-ellipsis-on-multiline-textviews-glyphs-and-glitches

We use Roboto (which is a sans serif) in our project, and didn't run into this. Facebook also uses this character in their mentions implementation.

For that moment, I don't know what we can do about it.

[deronsizemore]

So you're using the Roboto google font on a project and you don't notice this behavior?

Here's your example file using Roboto and I still see the spacing issue here: http://www.deronsizemore.com/mentions/

[ivirabyan]

I just found out that "zero-width space" character is displayed correctly in both Helvetica and Sans Serif, and probably in other fonts. So it can fix the problem. But since this character breaks on a new line, you might encounter problems in some rare cases (which might even not occur in real life at all). If you're interested I can tell you more about this.
If you want to try it yourself, replace string "FEFF" with "200B" in the source code.

[deronsizemore]

Ok, let me give that a try.

[deronsizemore]

I apologize, I should have specified I was using a contenteditable area.

That said, replacing the string FEFF with 200B seems to have done the trick. I'm using the Open Sans google font on this site and it now functions correctly (like your example does) and does not add the extra space. It appears that after I insert the mention and then hit space bar that it's inserting an nbsp; but that's okay. the result on the front end that the user sees it fine and at this point is all I'm worried about so I can get this site launched! lol

But since this character breaks on a new line, you might encounter problems in some rare cases (which might even not occur in real life at all). If you're interested I can tell you more about this.

I'd love to hear more just for my own curiosity sake. I don't want to take too much of your time though but would be nice to know if something ever breaks so that I know what's going on.

Thanks again for all of your help!

[ivirabyan]

I was wrong when I said that we use Roboto, that's why I didn't notice it. So, this turns out to be a really big problem. I'm going to search for a good solution (without any drawbacks) next week.

[ivirabyan]

Here is a problem with the current solution. Let us insert a mention, and then type a text after it (not inserting whitespace between them). For example, the result text is birdmilk, where bird is a mention. Now if this "big word" appears in long text, which has to be wrapped on multiple lines, and if this word appears at the edge, it can be wraped, where "bird" stays on one line, and milk would be on the next line. Which of course is not what you would expect, because from the user point, it's a single word, while really these are two words separated by invisible space. Also, such wrapping leads to problems with highlighter div, which would not wrap the word, because within the highlighter such character is not used. However this issue can be easily fixed by adding this invisible space to highlighter too.
Anyway, as I said earlier, I'll try to find a better solution first, and if that doesn't work, I'll resort to this one.

[deronsizemore]

Thanks for the explanation. That makes sense and could see where it might be an issue even though I doubt I would ever experience it and if I did, it most likely is a spam comment anyway which I'd just delete.

I had a thought on this which I meant to bring up and was just curious as the possibility. If one was to simply remove the zero-width-space from the equation and the return simply looked like this:

return mention.value

and everything was controlled in the json, would that work? In other words, if I simply returned:

value: "<a href=''>@mention</a>" + " "

via Python json response, wouldn't that fix the issue that's happening? I'm concatenating the anchor @mention with a space at the end of it.

That may not work but seem to make sense in my head. At any rate, I appreciate your help on all of this and at least there's a workable solution for now.

[ivirabyan]

I have to notice that the problem described above is only visible to the user who writes the message. It would display well after posting to the server anyway.

[ivirabyan]

I'll think about idea you proposed after the weekend, but as far as I remember using control character there was caused by some issues, which I don't remember now. I have to investigate a little

[deronsizemore]

Thanks. Yeah I'm not sure if my idea is viable or not. You'd know way more about it than do; looking at your code makes my brain sore! :)

I was messing around with this this morning and now that I understand a little more about what's happing when you @mention someone, I replaced "200B" with "00A0" which according to what I found is just a
"no-break space."

Doing that, it appears (at least on the front end for what the user sees) to give me the results I desire with none of the issues I experienced initially. If I type @mention and hit "Enter" it inserts the mention with a space after the mention so the user doesn't have to manually hit spacebar after.

Do you see any downsides to using "00A0?" I just don't want to do something that your code my not agree with and have unknown adverse affects later down the road.

Thanks.

[ivirabyan]

The disadvantage here is that it will be non breakable (in the textarea), while user would expect it to be. So the next word after mention will be wrapped only together with mention. Nothing serious here, as this is happening only in textarea. Basically this solution is the same as with zero-width space, just with the opposite side effects

[deronsizemore]

Ok, thanks. I think that makes sense. I'm going to go ahead and roll with it like this and launch my site and see how it goes.

I really appreciate all of your help on this and other issues I've had.

[brandonhall]

I'm getting back to this in our project and was happy to see you guys worked through this. Just wanted to say thanks :)

[deronsizemore]

Thanks be to @ivirabyan!
I'm usually good for finding bugs... not so much for fixing them. ;)

[brandonhall]

Here's another version that includes the \U200b fix as well as automatically adding a colon after the first mention and a space after other mentions. Since I'm not submitting a pull request, I only added it to the textarea but wanted to share a solution with you guys @deronsizemore @ivirabyan

Here's the pertinent line: https://github.com/brandonhall/jquery-mentions/commit/5f3876668decc22fa9e8a08452cb82b9e17aa3c3

[deronsizemore]

Thanks @brandonhall. Can you tell me what you're referring to with auto adding a colon after first mention and a space after others? I'm not following.

[brandonhall]

@deronsizemore yes, here is how are some example:

[MENTION]: message about anything cc [MENTION]
message about anything [MENTION] [MENTION]
[MENTION]: direct message to someone

It's basically formatting for a direct message style. If the first character you type in the mentionsInput is an @ character then a colon as well as a space will be appended to this mention.

Any future mentions in the same message will only get a space after insertion of the mention. I hope that's clear.

[deronsizemore]

Ok. So the colon is not serving any real purpose except for formatting the message? So you might end up with something like this:

@brandonhall: hey how's it going? @github is awesome.

[brandonhall]

Exactly, it's not part of the mention and only added the textarea.

[deronsizemore]

Gotcha. I'm on the same page with you now. Just wanted to make sure I didn't miss something through this whole discussion where I should be putting a colon in there on the first mention. ;)

[ivirabyan]

Finally, I found a solution which doesn't require any special characters in text. It's based on diff algorithm. Need some time to implement it.

[deronsizemore]

Ok, great! Thanks for continuing to search for a solution.

[ivirabyan]

I fixed this issue for textarea case, contenteditable still having problems.

[deronsizemore]

Awesome! Thanks for continuing to work on it!

One thing I recently noticed and maybe this has always been the functionality and I'm just imagining things but if I start typing a name and then down-arrow to the name I want and hit tab, it doesn't insert the mention into a contenteditable area. Has tab ever worked for that purpose? I thought it used to?

[deronsizemore]

Just following up on this thread. Just noticed that I'm getting different results in Chrome on Windows 7 vs Chrome on Mac. On Mac, I get a space after the mention like you'd expect. On Windows, I don't get any space. Interestingly enough though, on Windows since there's no space added at the end of the mention, when adding a period to the end, it functions correctly (reference: #37)

Thanks

[dioscodes]

Hi... I am new to development and I want store the uid values but dont know how to get them in php. I want to also display the @ivirabyan but dont know how to do that as well. I am practically lost

[ivirabyan]

@chizom Can you ask a more specific question? Otherwise I'm afraid I can't help you. You may need to read a book on php first, try to implement basic html form with server-side processing or something, and if you're having problems with that, you can ask for help on http://stackoverflow.com

[ivirabyan]

So, after some research, I've come up with a solution. Actually, it is the one I proposed earlier: changing \uFEFF to \u200B. But now, it has no potential problems , as it is used only inside of contenteditable (this is completely safe, my worries were about textarea). Textarea don't use any special characters anymore.

[deronsizemore]

Sorry to bring this back to light yet again. I just gave the newest release a try and had a question. When I insert the mention now, there's no space entered after the mention and I have to manually click the spacebar to add the space which then if I view source, I see this in the HTML:

<a href="/deronsizemore">@deronsizemore</a>&nbsp;testing

I was just curious if this is in fact the desired behavior? I know we've discussed multiple things on this topic and I thought the desired result was to have an auto generated space after inserting the mention?

[ivirabyan]

The desired behavior is to not insert space after mention. I think space insertion may be added as an option, if you think it can useful.