Develop Reference

How can I check if contenteditable caret is inside { }

Okay so i'm currently attempting to make a text editor for css, basically I need to add a tab automatically on new line if the caret is inside { }.
I have tried a few ways to go about this and have removed it all as nothing seemed to work, any and all help is appreciated.

Use the Selection API. It has everything you need. Including detecting where the cursor is, determining the surrounding HTML elements and characters, etc.
It is meant to help with identifying selected text but is very robust.
https://developer.mozilla.org/en-US/docs/Web/API/Selection

Detect line breaks in textarea using javascript

Anyone knows a technique or method to find the position of the natural text line breaks in a textarea using javascript? It's not about finding \n or <br/>'s.

It is not possible to do this directly, but the answer to this question uses a trick to find them where it adds characters one by one and checks for scrolling:
finding "line-breaks" in textarea that is word-wrapping ARABIC text

Can I get the 'line breaks' in a contenteditable div-tag that's word-wrapping?

I'm using nicedit, which uses a contenteditable DIV-tag as input field, on a page where a user can enter and format some text, which then is submitted to a php-script which converts this formatted text into an image.
The text in this contenteditable div is getting word-wrapped with no line-break characters where it is wrapped.
Is there any way to find out where this wrapping occurred, or insert line-breaks when occurrs, so that I can access the text as separate lines?

You'll have to calculate the pixel co-ordinates of each word, which is possible but non-trivial to achieve cross-browser. One way would be to insert a zero-width dummy element before each word and use its position. Recent WebKit and Firefox browsers give you a getClientRects() method of DOM Range objects, which is preferable as it is less invasive and likely performs better. IE's proprietary TextRange objects have methods to move between words and properties boundingLeft and boundingTop that will give you the bounding box of the TextRange.

Try a different approach, change the way you're rendering that image. Perhaps you can find a graphics library that handles word wrapping automatically, or replicate the HTML on the page and take a snapshot using PhantomJS or similar.

autocomplete middle of a textarea selector javascript jquery

I have seen how to have multiple autocompletes in a single textarea, but what I want to due is have something that can select a term in the middle of the textarea, or more precisely wherever the cursor is/was in the textarea. Most solutions I have seen only work if the user is working on the end of the input string. I would like to have something along the lines of being able to start with the string:
"#George stepped on #foot."
then go back to the middle of the string and start typing to change it to this:
"#George stepped on #Fredrick's #foot. according to #Mary"
and have #Fredrick and #Mary each separately show up as an autocomplete option.
for the specific use I want this functionality for, the autocomplete will happen on character strings that start with either a "#" or a "#" symbol, but they will not necessarily be the first or last of the given symbol.
I am using javascript and jquery-ui for this task. this is for use on mobile devices so the position of the autocomplete will always just be at the bottom of the text area.

I'm actually implementing something very similar. I've looked at Google+ and they're using contenteditable for Chrome and some iframe hybrid for Firefox.
I've had moderate success with rangy for getting the current selection.
Things I haven't solved yet:
Properly detecting when the users starts typing # or #, this is harder than it seems, especially if you're injecting HTML in the input area.
Getting the x,y position of the current selection so you can position the auto-complete suggestions. Supposedly rangy can do it already but it's not in the official release yet (there is a working demo though).

I found out that I can do pretty much every thing I wanted by using the textarea.selectionStart value, and then cycling back from that index to the start of the tag, and then using selectionStart again to find the end of the tag. the conditions for when to stop increasing/decreasing the indices for the start and end of the tag can be a little complex, for mine it checks that it does not go beyond the start/end of the textarea text, or for the start of a tag with "#", "#" or a space. to replace the text when you have made your selection uses pretty much the same process to find the text, and then replaces the text with the selected tag. and sets the cursor after replacing the text, by setting the cursor to the start position of the tag offset by the length of the selected tag.

Google Instant text field

You know how when you start typing in Instant, the suggestions for words you want start to come up, and the #1 suggestion is some grey text beside the word? That is what I am interested in trying to mimic (in javascript, prefer), but for text fields and text areas.
I thought about getting the x and y coordinates of the current caret position, and placing the grey text there. However, I'm not sure if this is the best option, because if I want to place that grey text in the middle of a sentence, or what have you, then the rest of the text would have to be shifted over to make room. Not to mention the fact that I haven't yet found a good way to even get the x and y coordinates of the caret in a textfield or textarea. For these reasons, this option just seems inefficient.
Also, the code can not be the same or near the same as what Google has. One additional feature I want is having the grey text appear in the middle of sentences, which Google's code doesn't support. So, that would need to be included in the solution.
Does anyone have an idea (or some code) of how to achieve this? I have been pondering this for a while and haven't really gotten anywhere.
Thanks!

JQuery has a wonderful autocomplete plugin.