input text in div contentEditable, the cursor automatically jumps to the beginning

Question

Requirement: #Topic Functionality

Expectation:

1. When I type # followed by text, it should be highlighted.

2. Copying and pasting text should maintain the previous state. For example, if I copy #Text#Text1, after pasting, it should be #Text#Text1.

Current Issues: When I input text, the cursor automatically jumps to the beginning. This is likely due to the use of innerHTML, causing the cursor to move to the front by default. What I want is for the cursor to follow the text, similar to a textarea.

Here is sandbox link code