Insert emoji at caret location

[muskangupta3]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Explanation

• What is the expected behavior? I should be able to insert my emoji at the provided location

• What is happening instead? I have a custom emoji picker in my code , which inserts the emoji at the cursor position . So when tagify is initialized , the emojis are not inserted on the correct position even after selecting a specific position for insertion . It is mostly inserted after whatever text i have written and if there is no text it starts inserting it inside the first tag value . This is happening in chrome , whereas in safari , there is already cursor issue after adding tag as mentioned in this issue(Mix Mode - Safari caret position after new tag #328 ) , but i am able to insert my emoji at the correct position .

  I am using an array of emoji objects like these where i pick the emoji to insert into my input

       {
        "emoji": "😀"
        , "description": "grinning face"
        , "category": "Smileys & Emotion"
        , "aliases": [
            "grinning"
        ]
        , "tags": [
            "smile"
            , "happy"
        ]
        , "unicode_version": "6.1"
        , "ios_version": "6.0"
    }
  

  This is the code i am using to insert emoji at a particular location in contenteditable elements.

        var sel,range;
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
                 range = sel.getRangeAt(0);
                  range.deleteContents();
                  // Range.createContextualFragment() would be useful here but is
                  // only relatively recently standardized and is not supported in
                  // some browsers (IE9, for one)
                  var el = document.createElement("div");
                  el.innerHTML = value.emoji;
                  var frag = document.createDocumentFragment(), node, lastNode;
                   while ((node = el.firstChild)) {
                       lastNode = frag.appendChild(node);
                   }
                  range.insertNode(frag);
  
                  // Preserve the selection
                  if (lastNode) {
                      range = range.cloneRange();
                      range.setStartAfter(lastNode);
                      range.collapse(true);
                      sel.removeAllRanges();
                      sel.addRange(range);
                   }
               }
  

I have attached the screenshot of the emoji being inserted inside the tag:

[yairEO]

You first initialize Tagify and then write a tag and only then, somehow, select an Emoji to be inside this tag, while still editing it?

I don't understand the steps.

At which step do you put an emoji, and how does it work exactly in terms of UI? what does the user do?

[muskangupta3]

It’s like Facebook a user can add anything . I was trying to add emoji after adding a tag . And no editing of tags was done here .
You could initialise tagify and tag someone and then add emojis to test it

[yairEO]

Here i'm typing some tags and them pasting an emoji (with ctrl+v)

[muskangupta3]

The issue i am mentioning here was not there in the last version(2.31.3) and i am trying to get the current caret position using the function mentioned above and the value isn't right , so the emoji isn't inserting on the right position.
And copying any emoji from the emoji picker is not possible in my case

[yairEO]

I really don't understand what you are doing, if you could give me a link or make a simple demo page it would help.

Also, you can switch to the old version for now, which you said works for you

[muskangupta3]

I really don't understand what you are doing, if you could give me a link or make a simple demo page it would help.

Also, you can switch to the old version for now, which you said works for you

Its like after you have tagged someone and then you open an emoji picker and select an emoji to be inserted at the caret location (which is done through the function mentioned above) , so at this point the emoji isnt inserted at the right location.

Tried creating a sample for you to check https://jsbin.com/tohenabelo/edit?html,js,output . Here click on the click button to see the value being inserted in the first tagged value.

[yairEO]

The moment you click on a button you loose focus to the input which means there is no caret anymore

[muskangupta3]

The moment you click on a button you loose focus to the input which means there is no caret anymore

Yes , but the emoji should be inserted on the last caret position like in the previous version

[yairEO]

Is this what You want?

Demo: https://jsbin.com/degobup/13/edit?html,js,output

[muskangupta3]

Is this what You want?

Demo: https://jsbin.com/degobup/13/edit?html,js,output

The emoji isnt inserted while editing a tag, I am not editing the tags .
And could you please edit this demo : https://jsbin.com/hugageheve/edit?html,js,output ,which has a button click and then the emoji is inserted ,because i am unable to see any changes in the one attached by you

[yairEO]

I have a custom emoji picker in my code , which inserts the emoji at the cursor position . So when tagify is initialized , the emojis are not inserted on the correct position even after selecting a specific position for insertion . It is mostly inserted after whatever text i have written and if there is no text it starts inserting it inside the first tag value . This is happening in chrome , whereas in safari , there is already cursor issue after adding tag as mentioned in this issue(#328 ) , but i am able to insert my emoji at the correct position .

I don't understand what you are trying to do, sorry..

can you describe the steps, in great details, that you want to happen?

What does this mean:

the emojis are not inserted on the correct position even after selecting a specific position for insertion

what position? how to you define the position and where..

[muskangupta3]

I really don't understand what you are doing, if you could give me a link or make a simple demo page it would help.
Also, you can switch to the old version for now, which you said works for you

Its like after you have tagged someone and then you open an emoji picker and select an emoji to be inserted at the caret location (which is done through the function mentioned above) , so at this point the emoji isnt inserted at the right location.

Tried creating a sample for you to check https://jsbin.com/tohenabelo/edit?html,js,output . Here click on the click button to see the value being inserted in the first tagged value.

This demo shows what i am trying to do . After you click a button and insert emoji , the emoji inserted is not on the correct position .

[muskangupta3]

@yairEO What is the update on this ? this issue is yet not resolved for me .

[yairEO]

I will see again tomorrow. I am currently working on fixing urgent bugs which were quite nasty

[blamarque]

@muskangupta3 - not sure that it is exactly what you need, but I achieved something similar by directly modifying the current DOM

DOM.input.innerHTML = DOM.input.innerHTML + ':EMOJI:'

Then putting the focus back straight away :
DOM.input.focus();