Triple click selection issue

[progzy]

Bug

When triple clicking on a paragraph then applying a style or format then the format is applied to the next paragraph as well.

Detailed reproduction steps:

1. Let's consider this:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

2. Then selecting the second paragraph with a triple click and applying the "Heading 1" format (instead of "normal") gives the following :

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h1>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h1>

<h1>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>

Expected result

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h1>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h1>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Actual result

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<h1>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h1>

<h1>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>

Other details

Issue is similar to the one described here in the gif on the first comment: https://github.com/ckeditor/ckeditor5-heading/issues/9 but different version.

• Browser: Google Chrome ( > 50 ) / Chromium (58) / Probably webkit based. Ok on Firefox.
• OS: windows / linux
• CKEditor 4.6.2 (Drupal 8)

[wimleers]

Also reported on Drupal.org: https://www.drupal.org/node/2884371.

[cstork]

I could reproduce this behavior on Safari 11.0 but not on Firefox 57.0b9.

[engineering-this]

Hi.

It looks like this is upstream issue. I found other people are reporting this:

https://bugs.chromium.org/p/chromium/issues/detail?id=511962
https://bugs.chromium.org/p/chromium/issues/detail?id=575136

Which leads to discussions about standards:

w3c/selection-api#70

You can reproduce this problem without the CKEditor. Create simple page with following html content:

<div contenteditable="true">
  <p>Test paragraph</p>
  <p>Second paragraph</p>
</div>

Triple click on first paragraph, then open console and paste: window.getSelection().getRangeAt(0).endContainer
End container is pointing at second paragraph while it should be first one.

[f1ames]

Can be also reproduced here https://codepen.io/f1ames/pen/RmqvMX?editors=1010