Can't invoke editor.insertText when codeview is enabled

Question

I have codeview enabled in my summernote toolbar.

As well as code for custom menu (for inserting custom parameters to an editor):

let event = ui.buttonGroup([
    ui.button({
        contents: '<span>Custom parameters</span> <span class="note-icon-caret"></span>',
        tooltip: 'Custom parameters',
        className: 'btn-codeview', // <== this is just to not disable the menu when codeview is enabled
        data: {
            toggle: 'dropdown'
        }
    }),
    ui.dropdown({
        items: ['one', 'two'],
        callback: (items) => {
            $(items).find('li a').on('click', (e) => {
                context.invoke('editor.insertText', ` ${e.target.innerText} `);
                e.preventDefault();
            })
        }
    })
]);

It works fine when codeview is disabled (pasting my custom one and two params in the editor), but when I enable codeview and click my menu item, it doesn't insert anything.

The following snippet is called, but nothing happens:

context.invoke('editor.insertText', ` ${e.target.innerText} `); 

How can I insert my custom params when codeview is enabled?

---

UPD: the idea is to have a button in a toolbar that toggles simple text mode without HTML and have menu available (to insert custom words inside the editor).

Answer 1

There are a couple of workarounds you can do in order to accomplish it, since summernote doesn't provide a default way to "refresh" the final textarea programatically.

1) fastly disabling/enabling codeview

var codeviewOn = false; // global var

$(items).find('li a').on('click', (e) => {
    // Check if the editor for code is activated
    codeviewOn = $('#summernote').summernote('codeview.isActivated');
    // ... deactivate it for awhile
    if (codeviewOn)
      $('#summernote').summernote('codeview.deactivate');

    // insert the text
    context.invoke('editor.insertText', e.target.innerText + " ");

    // ... and activate it again
    if (codeviewOn)
      $('#summernote').summernote('codeview.activate');

    e.preventDefault();
});

2) directly updating the final textarea

$(items).find('li a').on('click', (e) => {
    var codeviewOn = $('#summernote').summernote('codeview.isActivated');

    // always insert the text, so this will update the hidden .note-editable div
    context.invoke('editor.insertText', e.target.innerText + " ");

    // and update the codable textarea value directly with the editable html
    if (codeviewOn)
        $('.note-codable')[0].value = $('.note-editable').html(); // The [0] is getting the first texarea, so be careful if you have more than one.

    e.preventDefault();
})

Check out the JSFiddle of this last option: https://jsfiddle.net/3b93w1L3/