Тройной выбор в Chrome приводит к многострочному выделению

Question

Я реализую WYSIWYG поверх CKEditor4 (в основном я просто переписываю панель инструментов).Проблема заключается в том, что перетаскивание мыши для выбора и тройное нажатие на строку, чтобы выделить ее, приводит к появлению различных диапазонов.

С этим html:

<h2>^Leo ac scegliere e iniziare^</h2> <<< Line I want to select
<p>nunc ultrices eros, sed gravida</p>

Это диапазоны, созданные в различных сценариях.:

справа налево и слева направо

startContainer и endContainer совпадают, отражаетреальная ситуация с точки зрения пользователя.

collapsed: false
document:CKEDITOR.dom.document {$: document}
endContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
endOffset: 1 
startContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
startOffset: 0

тройной выбор

startContainer и endContainer не совпадают, это не отражает фактическую ситуацию с точки зрения пользователя.

collapsed: false
document:CKEDITOR.dom.document {$: document}
endContainer: CKEDITOR.dom.element {$: p, getName: ƒ}
endOffset: 0 
startContainer: CKEDITOR.dom.element {$: h2, getName: ƒ}
startOffset: 0

Эта разница вызывает у меня проблемы с применением стиля.Это происходит в Chrome, но не в Firefox.

Есть идеи, почему это происходит?Любое решение?Я думал о решении, которое проверяет endContainer и endOffset, но я боюсь, что такое решение может нарушить диапазон и выбор, обеспечивая неожиданное поведение

Answer 1

В результате mouseup event я придумал это:

fuction handleMouseup(event) {
  if (event.detail === 3) {
    const selection = this.editor.getSelection()
    let range = selection.getRanges()[0]
    let actualStartContainer = range.startContainer

    // Finds the highest parent untill the startContainer
    while (!actualStartContainer.getParent().equals(this.editor.element))
        actualStartContainer = actualStartContainer.getParent()

    // Select the ranges and update the selection with just the startContainer
    range.selectNodeContents(actualStartContainer)
    selection.selectRanges([range])
  }
}