Insert text at cursor in rich text using special character

Ask us anything How do I?
1

I’ve been trying to insert text at the location of the cursor in the rich text editor. I came across this post where @dorilama was able to do it using some ustom code, but did not go into detail about how he acheived this. I followed the general guide he posted about “pars[ing] the elements, calculat[ing] the position, chang[ing] the html of the elements and set[ing] back the caret position.” I was able to get all that functioning on a button click, but would love to do it using mentions like he did in the gif.

I also looked at using a keydown event listener that waits for the @ symbol to be typed, but I don’t want to build a custom component. I also tried an on change event, but the event.value of the rich text returns the entirety of the rich text html, not just the most recent key pressed.

At this point, I just need a solution that allows me to insert custom text into the rich text editor at the location of the cursor, and allows the user to change this text after it is inserted. Any and all suggestions would be greatly appreciated.

2

have you tried the built-in mentions?

3

Yeah. The problem is that once the mention is inserted into the text, I cannot change it (even if I use a custom javascript action to change the contenteditable attr of the span that contains the mention to true). Also, I want to allow the user to select an option from the mention dropdown that is different than what is actually inserted.

For example, the user would type “@”, then select the option that says “@command”, but the text that is actually inserted says “@command{Insert a specific command here}”. Then they can go back and change the text in between the {}.