Dynamically add text inside rich text editor

I’m trying to build on top of WW’s rich text editor.

I’ve added a “+” button in the editor’s toolbar. When clicked, I want to trigger some javascript that would insert a given string inside the editor.

document.getElementById('editor').querySelector('div[contenteditable="true"]').appendChild('hello world');

The problem with the code above is that I can’t get the cursor (caret) position within the “contenteditable” div—the text gets added at the end of the element tree.

How do I get the cursor position in my script?

Great question!
Let me check with the team and see how we can assist you. I will get back to you as soon as possible.

1 Like

Hi @Doc were you able to check with the team yet? :slight_smile:

Hi @Doc, just wanted to check if you have any news on this?

Hello @unlustucru, I think you should manipulate the Rich Text’s value to achieve this. Let’s say that you want to append a “hello world”, you’d go and do the following:

Edit: I see now, you also want to insert it at the cursor’s position. That’s kind of tough. You could get the position via JS like this javascript - Get cursor position (in characters) within a text Input field - Stack Overflow

But for some reason I’m not able to find the input element of this component. It seems like WeWeb uses a library for this, called TipTap, I’m afraid that it won’t be that simple to do.

@Broberto The input is a contenteditable div (classes .tiptap and.ProseMirror). I’ve tried with JS but unsucessfully so far. The first problem was to preserve the text caret position when the button was clicked. I managed that, but the string doesnt get added at the right spot for some reason; my JS skills are limited.

That’s why I posted on here, because since other functions of the text editor can obviously successfully detect the caret position, i thought Weweb could help.

I think I got it thanks to this. I’ll get back to you in a few.

You can get the position of the cursor like this:

const doc = wwLib.getFrontDocument();
console.log(doc.getSelection()) // This gets you the selection
console.log(doc.getSelection().anchorOffset) // This gets you the position of the cursor within the <p> tag

The only issue is that this renders HTML, so the other tags make it hard to insert a string at a certain index, because the tags actually increase the length of the string.

If you then save it as a variable, you can use it further.