Summernote add text from dropdown at the end

Question

I have a custom button in summernote that has a dropdown of items "one", "two", "three" when I click on for example the text "one" the text is added at the start which is fine. But then when I click on "two" afterwards the text is also added at the start which produces this result.

twoone

I would like to have the following result

one
two

Update when I use this line

context.invoke("editor.pasteHTML", context.modules.editor.$editable[0].innerText ? "<br>" + $(this).html() : $(this).html() );

instead of

context.invoke('editor.insertText', $(this).html());

I get the following result wihch is better but the order is still incorrect

two
one

Here you can fiddle with my code

https://stackblitz.com/edit/angular-summernote-demo-n7xn2n?file=src%2Fapp%2Fapp.component.ts

Otherwise here is my code for the button that inserts the text

function customButtonGenerator(lstQuoteComments, title) {
  return function (context) {
    const ui = ($ as any).summernote.ui;

    var i;
    var listHtml = '';
    for (i = 0; i < lstQuoteComments.length; i++) {
      listHtml += '<li>' + lstQuoteComments[i] + '</li>';
    }

    const button = ui.buttonGroup([
      ui.button({
        className: 'dropdown-toggle',
        contents:
          '<i class="fa fa-comments text-primary"/><span id="summernot-caret" class="caret text-primary"></span>',
        //tooltip: 'Comments', //Not working when howver over it top is not defined
        data: {
          toggle: 'dropdown',
        },
      }),
      ui.dropdown({
        className: 'drop-default summernote-list',
        contents:
          '<div id="container-comentario"><div id="dialog" title="' +
          title +
          '" ><h1 class="header-comentario">' +
          title +
          '</h1><ul id="summernote-list"><ul>' +
          listHtml +
          '</ul></div></div>',
        callback: function ($dropdown) {
          $dropdown.find('li').each(function () {
            $(this).click(function () {
              context.invoke('editor.insertText', $(this).html());
            });
          });
        },
      }),
    ]);
    return button.render();
  };
}

Thank you for your help.

Answer 1

As far as I can see, these answer don't quite get the question right.

You should append the button content to the existing content like this:

Example blitz - https://stackblitz.com/edit/angular-summernote-demo-ycvten?file=src%2Fapp%2Fapp.component.ts

Main code snippet:

...
callback: function ($dropdown) {
  $dropdown.find('li').each(function () {
    $(this).click(function () {
      let newHtml = context.modules.editor.$editable[0].innerHTML
      if (newHtml !== '') {
        newHtml += '<br>'
      }
      newHtml += $(this).html()
      context.invoke('code', newHtml)
    })
  })
}
...

I'll have a look if there is a way to keep track of the current cursor position, I think there must be. I'l update if that's possible, rather than just adding to the end.