on new line(enter key) mention list is not getting display for ContentEditable

[lakhanOpen]

Hello,

We have seen your demo and it works fine but the only problem we faced was when we type any word (without space) and press ENTER KEY then after that we try to get user mention list but it not display, so instead we type word and give space and then press ENTER KEY then it will work fine.

So the conclusion is we require space to get mention, but it should get user mention list after ENTER

Can you please help me out in this issue.

Thanks

[ichord]

It's difficult to know whether it's a newline in contentEditable.
I have had a try but can't fix it yet. It will take more times.

[lakhanOpen]

Thanks for your reply.
Let us know when you get any solution for this..waiting eagerly for your next update.

[ajb]

Has anyone had any luck with this? Wanted to check before I dive into the source.

[emanuele45]

I tried to investigate the matter again, but it appear to be even more messy than what I thought at first.

I'm more interested in iframes than contenteditable, so contenteditable may be more or less messy, no idea.

The common problem is that the text() function "just" strips the HTML altogether, but the browsers use different tags (usually p and div) to mimic new lines.
In theory it should be possible to use innerText or textContent, but while the first works fine, the second doesn't return new-lines as well.

Searching the web (since I'm rather bad at javascript), I found:
http://stackoverflow.com/questions/3455931/extracting-text-from-a-contenteditable-div
and then this:
http://stackoverflow.com/questions/13762863/contenteditable-field-to-maintain-newlines-upon-database-entry

Following the second suggestion, I modified the code like that:

diff --git a/jquery.atwho.js b/jquery.atwho.js
index 3bcb5b2..67606da 100644
--- a/jquery.atwho.js
+++ b/jquery.atwho.js
@@ -267,7 +275,11 @@ Controller = (function() {
     if (this.$inputor.is('textarea, input')) {
       return this.$inputor.val();
     } else {
-      return this.$inputor.text();
+      return this.$inputor.html().trim()
+        .replace(/<br(\s*)\/*><\/p>/ig, "") // Firefox adds a <br></p> at the end of the last line
+        .replace(/<br(\s*)\/*>/ig, "\n") // replace single line-breaks
+        .replace(/<(p|div)(\s|>)/ig, "\n") // add a line break before all div and p tags
+        .replace(/(<([^>]+)>)/ig, "");   // remove any remaining tags;
     }
   };

@@ -275,6 +287,9 @@ Controller = (function() {
     var caret_pos, content, end, query, start, subtext;
     content = this.content();
     caret_pos = this.$inputor.caret('pos');
+    if (!this.$inputor.is('textarea, input')) {
+      caret_pos += (content.match(/\n/g) || []).length;
+    }
     subtext = content.slice(0, caret_pos);
     query = this.callbacks("matcher").call(this, this.at, subtext, this.get_opt('start_with_space'));
     if (typeof query === "string" && query.length <= this.get_opt('max_len', 20)) {

and after a quick test is seems to work (tested only with chrome and firefox on linux).

The problems with that change are:

1. it's likely to be very browser-specific (both in relation to the tags and to the behaviour of each browser, see the note about firefox),
2. it requires the adjustments of the caret position.

P.S.
The diff is based on an old version of At.js (April 2014).

[ichord]

@emanuele45 You are awesome.

[emanuele45]

Do you think it is an acceptable solution? Glad! 😃

[aghassipour]

Would love a fix for this. At.js is awesome, but not being able to trigger autocomplete right after a newline breaks it.

[ajb]

I just discovered the start_with_space: false option. Does that not solve
this?

On Fri, Dec 5, 2014 at 2:45 PM, Alexander Aghassipour <
notifications@github.com> wrote:

Would love a fix for this. At.js is awesome, but not being able to trigger
autocomplete right after a newline breaks it.

—
Reply to this email directly or view it on GitHub
#209 (comment).

Adam Becker
510.928.9111
@AdamJacobBecker

[aghassipour]

Thanks @ajb . That introduces the nuisance of having the autosuggest pop up when entering e.g. an email address. But probably the lesser of two evils.

[ajb]

Got it, you're welcome. We use "{{" to trigger the dropdown :)

On Fri, Dec 5, 2014 at 2:59 PM, Alexander Aghassipour <
notifications@github.com> wrote:

Thanks @ajb https://github.com/ajb . That introduces the nuisance of
having the autosuggest pop up when entering e.g. an email address. Bit
probably the lesser of two evils.

—
Reply to this email directly or view it on GitHub
#209 (comment).

Adam Becker
510.928.9111
@AdamJacobBecker

[ichord]

Not be tested in IE. Anyone could do me a favour!?
@emanuele45 I have just found a better way to solve this and it seems work, check it out.

[ajb]

Awesome, thank you!

It works in IE9:

And IE10: