Move cursor to certain position

Arnold

Hey, guys! I'm making my very first extension, It's quite simple, it adds "spoiler" button to composer. The button inserts [details] bbcode like this

app.composer.editor.insertAtCursor('[details][/details]');

After that I need to move cursor between the open and close tags so a user will be able to print right away without need to move cursor manually. But I can't figure out how to move the cursor there since I don't know exact position and length of the text before or after the bbcode (the user can add it not only to the end of the text, but to any place).

I will be grateful for any advice 🙂

datitisev

Arnold This will definitely be easier once we move the MarkdownToolbar from flarum/markdown to core (flarum/core1872). Until then, you'll definitely need a more complicated solution - which I cannot think of right now, I'm not very good with the composer editor.

Arnold

datitisev thanks! Yep, it will be great. I have added the button to the toolbar quite easily though, and now I just need to figure out how to get the text length from the start to the current cursor position. I hope someone will give me a hint 🙂

PascalBoschma

Arnold Did you try something like e.target.selectionStart? This will give you the current position of the cursor (after) and is compatible with all major browsers.

Edit: here is a very basic and very quickly built example!

Arnold

PascalBoschma thanks a lot for the hint! I did it like this

//When nothing is selected getSelectionRange() returns current cursor position as start and end of the selection
x = app.composer.editor.getSelectionRange();
//Move cursor to -10 points from current position. 10 point is the length of the '[/details]' string
app.composer.editor.moveCursorTo(x[0] - 10);

Maybe it will help someone who solves a similar problem.