Place caret at exact index or offset

[keligijus]

I need to:

1. Find the exact position of the caret
2. Able to place it at any location

My idea is to use MediumEditor.selection.getCaretOffsets(element, range), then use some way to place the caret back to the location when I need to.

There is MediumEditor.selection.moveCursor(doc, node, offset) but it only places the caret at the start of an element.

---

My use case is inserting an emoji

1. Open emoji picker - save caret position or offset, editor loses focus
2. Select an emoji - insert text at saved caret position, focus on the editor, place the caret at a correct position.

[jordyvandomselaar]

Any news on this? I have a different usecase, but this solution would help me immensely as well.

[keligijus]

I guess you're pretty much on your own 😞 I ended up writing a solution myself.

[jordyvandomselaar]

Hmmm… Bummer. Thanks for the reply man.

[SarathSantoshDamaraju]

For anyone following this issue still,

I had the same requirement, and I implemented this with exportSelection selection API

// template.hbs
<BasicDropdown @onOpen={{action "beforeInitialization"}} as |dd|>
   <dd.Trigger>
      <button >
          <i class="emoji-picker__icon"></i>
      </button>
   </dd.Trigger>
   <dd.Content>
      <YourEmojiPicker inputSelector=".input-area"  onEmojiClicked="updateContent"/>
    </dd.Content>
</BasicDropdown>

// component.js


beforeInitialization() {
     //...
     this.set('selectionRange',mediumEditor.exportSelection()); // returns {start: *, end: *}
}

updateContent(data) {
    // Get the editor content and handle inserting emoji at the cursor position here
    // and set the content of medium editor with setContent
    // ... 
    mediumEditor.setContent(data);
}

After returning data from your emoji picker, use the positions from selectionRange to replace the content with emoji data.

Hope this helps 🙌 cc: @keligijus @jordyvandomselaar