Medium-editor: Place caret at exact index or offset

Created on 4 May 2018  Â·  4Comments  Â·  Source: yabwe/medium-editor

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.

Most helpful comment

For anyone following this issue still,

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

```.hbs
// template.hbs






```.js
// 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

All 4 comments

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

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

Hmmm… Bummer. Thanks for the reply man.

For anyone following this issue still,

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

```.hbs
// template.hbs






```.js
// 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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alvarotrigo picture alvarotrigo  Â·  4Comments

tauseefk picture tauseefk  Â·  5Comments

vominhtam picture vominhtam  Â·  6Comments

ankur0890 picture ankur0890  Â·  4Comments

taiji202 picture taiji202  Â·  6Comments