Caret resets to the initial point of div when using google transliteration.

[amanangira]

So here's a function that i call when i detect a space in the input of div which is created on hiding the original input

$.ajax({
        url: 'https://www.google.com/inputtools/request',
        dataType: 'jsonp',
        jsonp: 'cb',
        data:data, 
        success: function(data) {
            var currentString = $("#" + c).val();
            var lastIndex = currentString.lastIndexOf(w);
            currentString = currentString.substring(0, lastIndex);
            if(typeof data[1][0][1][0] != "undefined") {
                currentString += data[1][0][1][0] + " ";
                //In case of emojiarea div i have added the data-id as id of the element in jquery.emojiarea.js
                var divId = "#" + $("#" + c).attr('data-id') ;
                $(divId).text(currentString);

            }
        }
    });

The result of above code is translated language but the caret moves at the starting of the div.

[amanangira]

I experimented with above code and came to a conclusion that the caret resets to the starting of an editable div when the value is changed using jQuery text() method. To fix this I changed the div tag to input tag in jquery.emojiarea.js I will try to make these changes in a separate branch.