i have a button outside ckeditor, when clicked i want to insert a span element at caret position, this is what i have so far:

var el = document.querySelector('#editor');

ClassicEditor.create(el, {
    licenseKey: ''
}).then( editor => {
    appConfigs.editor = editor; //storing the editor for later usage
}).catch( error => {
    //...
});

when the button is clicked i do:

function clickHandler(){
    var editor = appConfigs.editor;

    editor.model.change( writer => {
        var html = '<span class="special-class-name" data-name="something">special word or button</span>';
        var viewFragment = editor.data.processor.toView(html);
        var modelFragment = editor.data.toModel(viewFragment);

        var insertPosition = editor.model.document.selection.getFirstPosition();

        editor.model.insertContent(modelFragment, insertPosition);
    });
}

the code have the following issues:

1)the inserted span get stripped off all its attributes(class, data-name) which i want to preserve.

2)the editing caret doesn't go back automatically to the editor when the button clicked.

3)when i click the editor to restore caret and start typing, i noticed it edits the text inside inserted span, i want inserted span to be untouched and any further typing goes after it.

i will be so grateful if anyone could help me with those issues.