I’ve been trying to solve this issue for a few days now but I don’t have any idea how I can fix it. I hope you can help me or give me some tips which lead me to the point to fix the issues.

I’m developing a feature in my app where it is possible to execute specific function on each sentence. Each sentence is assigned to a span element.

The browser’s default functionality destroys the entire functionality of the feature so I’m trying to add a custom functionality what happens if the user presses enter at the end of a sentence. My goal is to add a new line break with a new span each time when the cursor is at the end of the sentence and the user presses enter. The cursor should follow automatically the line breaks (go into the next row) and should focus the created span element that the input is assigned to the span.

I’ve tried to do it with the Selection-API and some things are working but not everything.

The things that aren’t working are:

• move the cursor automatically into the next line
• to focus the created span that the input is assigned to it and not inserted between the span elements (such as on the picture)

• to add the line break and span at the end of a sentence outside the focused span (it doesn’t work, because I append the newly created spans as a child to the contentediable container.

In the contenteditable container should only be span elements on 1 layer without any deeper structure/layers.

How can I solve these isses?