Добавление на панель текстового редактора Quill кнопок, позволяющих вставить в текст Material Icons

В админке одного сайта используется в качестве текстового редактора QUILL Rich Text Editor. Я хочу дать пользователю возможность добавлять в текст небольшой набор предопределенных иконок (Material Icons, потому что они вписываются в стиль сайта). В коде html это выглядит как <i class="material-icons">[name of icon]</i> Как я вижу это.

• 1 шаг - добавить в место, где сейчас установлен курсор, текст с названием иконки [name of icon]
• 2 шаг - установить выделение на только что набранный текст
• 3 шаг - обернуть его в тэг <i class="material-icons"></i>
• 4 шаг - снять выделение, пользователь продолжает писать текст.

Что я сделала (на примере иконки с названием grade):

let Inline = Quill.import('blots/inline');

class gradeBlock extends Inline{    
    static create(value){
        let node = super.create();
        node.setAttribute('class','material-icons');
        return node;    
    }    
}

gradeBlock.blotName = 'gradeblock';
gradeBlock.tagName = 'i';
Quill.register(gradeBlock);

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block', 'gradeblock']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

var customButton = document.querySelector('.ql-gradeblock');
    customButton.addEventListener('click', function() {
    console.log('Clicked!');
        let mergeFieldText = "grade";
        var selection = quill.getSelection(true);  //find position of cursor
        quill.clipboard.dangerouslyPasteHTML(selection.index, mergeFieldText); //paste "grade" into the ql-editor content
        quill.setSelection(selection.index,5); //set selection on text "grade"
        var range = quill.getSelection();  
        quill.formatText(range,'gradeblock'); //add tags <i class="material-icons"></i> around the selected text 
        quill.setSelection(null); //reset the selection
}); 

Но это не работает так, как мне нужно. После первого нажатия на мою кнопку добавляется чистый текст "grade". После повторного нажатия - после (!) текста "grade" появляется нужная мне иконка Material Icons, но при этом если начать набирать дальше текст, то физически он остается внутри тега <i></i>.

Пожалуйста, помогите найти ошибку. Я не понимаю, что делаю не так. Почему не срабатывает первое нажатие? Как мне сделать так, чтобы дальнейший текст оставался внутри текущего <p></p>, но снаружи от <i></i> Может быть, есть какой-то совсем другой легкий способ решить мою задачу?

Попробовать мой или свой код можно тут: https://quilljs.com/playground/#quill-playground