How to prevent tinymce from continuing previous span when editing?

I've added an autocompleter to tinyMCE that creates a span with specific classes and attributs. We use that to create link to other elements in our tool. Those are not "a" tag since it is not a direct url, it is handled internaly. This works fine. The only issue I have is when we edit those value and the span is the last entry in the editor, when user starts to type in, the text continues in that same span instead of starting a new one.

How can I prevent that? I tried to add a space at the end when setting content but it had no effect (the space seems to be removed). This little trick does work when I insert the span though to help user writing in "normal" format.

So for example the content of tinyMCE would be set to something like that "I'm afraid of <span class='animal' data-animalId='animal2'>crocodile</span>"

When adding text, the span 'animal' gets the content. I'd prefer it to be outside of that (but still on the same line)

I'd be happy if the span is never append to also.

You can view a working example on this CodePen https://codepen.io/MissChocoe/pen/OJbaWXd

Here's the full JS code:

var autoCompletionValues = [
  {id: "animal1", name: "alligator"},
  {id: "animal2", name: "crocodile"},
  {id: "animal3", name: "cat"},
  {id: "animal4", name: "dog"},
  {id: "animal5", name: "horse"},
  {id: "animal6", name: "cow"}
];

var initialValue = "I'm afraid of <span class='animal' data-animalId='animal2'>crocodile</span>";

tinymce.init({
  selector: "#myTinyMCE",
  forced_root_block: false,
  content_style: ".animal { color: blue; text-decoration: underline}",
  setup: function (editor) {
    editor.ui.registry.addAutocompleter('myAutoComplete', {
      ch: "_",
      minChars: 1,
      onAction: function (autocompleteApi, rng, value, meta) {
        editor.selection.setRng(rng);
        editor.insertContent('<span class="animal" data-animalId="' + meta.id + '">' + value + '</span>' + " ");
        autocompleteApi.hide();
      },
      fetch: function (pattern) {
        return new tinymce.util.Promise(function (resolve) {
           var results = autoCompletionValues.filter(function(c) {
             return c.name.indexOf(pattern.toLowerCase()) === 0;
           }).map(function(c) {
              return { 
                type: 'autocompleteitem',
                value: c.name,
                text: c.name,
                meta: c
              };
            });
            resolve(results);
        });
      }
    });
    
    editor.on('init', function(ev) {
      editor.setContent(initialValue);
    });
  },
});

from How to prevent tinymce from continuing previous span when editing?