Issue Summary

The cursor/caret doesn't position at the end of the line in Chrome browser. On the nested <li> tags we could see the position of the cursor is sometimes at the beginning of the line.

This is reproducible on Data Center: yes

Steps to Reproduce

1. Create a page and publish
2. Open the page in Edit mode and paste the below storage format

   <h2><strong>Local development</strong></h2>
   <ul>
   <li>First of all, test<em style="text-align: left;">'</em></li>
   <li>Clone&nbsp;
   <ul>
   <li>test1</li>
   <li>test3
   <ul>
   <li>test3</li></ul></li></ul></li>
   <li>Install packages
   <ul>
   <li><strong><code>npm </code></strong><strong><code>install</code></strong>
   <ul>
   <li>Do&nbsp; repos</li>
   <li><em>yar yarn</em>
   <ul>
   <li><em>If using&nbsp;</em></li></ul></li></ul></li></ul></li></ul>
   

3. Publish the page
4. Edit the page in Chrome browser and for each line try to click at the end of the line.

Expected Results

Irrespective of usage of any number of nested tags the cursor should point to the end of the line

Actual Results

The cursor/caret points to the beginning of the line for nested <li> tags. Attaching screen recorder for reference. Checkout the placement of the cursor when we click at the end of the line.

Recording #3.mp4

Workaround

Currently there is no known workaround for this behavior.

Note : The above issue is not reproducible in Mozilla Firefox Browser.