Двойной щелчок в компонентах виджета CKEditor

Question

Из учебника по CKEditor simplebox Я получил виджет, который мне нужен для моего проекта, с тремя spans внутри div.Это мое plugin.js:

CKEDITOR.plugins.add( 'mybox', {
    requires: 'widget',
    icons: 'mybox',
    init: function(editor) {
        if ( editor.addContentsCss ) {
            editor.addContentsCss( this.path + 'styles/mybox.css' );
        }
        editor.widgets.add( 'mybox', {
            button: 'Add custom box',
            template: `<div class='mybox-container'>
    <span class='mybox-authors'>Name Surname, Name2 Surname2, Name3 Surname3</span>
    &ndash;
    <span class='mybox-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
    <span class='mybox-number'>this is the number of the document</span>
</div>`,
            upcast: function(element) {
                return element.name == 'div' && element.hasClass('mybox-container') ;
            },
            editables: {
                authors: {
                    selector: '.mybox-authors',
                    allowedContent: 'br strong em'
                },
                text: {
                    selector: '.mybox-text',
                    allowedContent: 'br strong em'
                },
                number: {
                    selector: '.mybox-number',
                    allowedContent: '*'
                }
            },
            allowedContent: 'div(!mybox-container); span(!mybox-authors); span(!mybox-text); span(!mybox-number)',
            requiredContent: 'div(mybox-container)'
        }) ;

    }
}) ;

Ради полноты я также показываю мои styles/mybox.css:

.mybox-container {
    border: 1px solid gainsboro ;
}


.mybox-authors {
    text-transform: uppercase ;
}

.mybox-text {
}

.mybox-number {
    font-weight: bold ;
    float: right ;
}

Результат следующий:

Выбор с перемещением mousedown работает как ожидалось: он даже не может пересекать границы каждого промежутка, что я и ожидал.Двойной щелчок, с другой стороны, имеет несколько причуд:

• В первом и втором отрезке, если я дважды щелкаю и перемещаюсь по одному из центральных слов текста, выделение получает расширенное словопо слову, но останавливается перед включением первого или последнего слова;
• Если я щелкаю по последнему слову первого интервала, выбор не производится, и курсор перемещается в начало слова;
• Если я щелкну первое слово второго интервала, оно будет выделено вместе с последним словом первого интервала;
• Если я щелкну где-нибудь три раза, будет выделен текст из всех интервалов (нормально, может быть, это нормально, но я бы предпочел, чтобы был выбран только текст одного диапазона).

Я также отметил, что я могу регулярно писать внутри диапазона, но если я вставлю некоторый текст, этовставлен в содержащий div, а span разделен на две части.

Я разрабатывал с CKEditor в течение нескольких часов в последние несколько дней, и я был в восторге от потенциала;но я знаю, что я новичок, и мне, вероятно, не хватает чего-то тривиального ... какие-либо предложения?