WidgetNodes keeps first character after applying the rule

[imariuspavel]

I'm using the wysiwyg mode and here I have defined a widget rule to highlight on the UI some text based on regex. Example: user types in: "This is a sample {{text}}" => "This is a sample {{text}}"

The problem is that if I type in the text character by character the output is correct, but when the text is pasted into the editor, first character from the regex patters is maintained and the output is something like this: "This is a sample {{{text}}". Basically in my case the character "{" appears right in front of the widget.

Also there is the same behavior when:

1. type: {{}}
2. then clicks inside the brackets and type some text there =>{{someText}}
3. click outside or space at the end => "{{{someText}}"

The code is bellow:

var widgetRule = new RegExp(/({{[\w.]+}})/);
var templateEditor = new toastui.Editor({
      el: document.querySelector('#richTextEditor'),
      widgetRules: [
          {
              rule: widgetRule,
              toDOM(text) {
                  var span = document.createElement('span');
                  span.innerHTML = text;
                  return span;
              },
          },
      ],
      height: '500px',
      initialEditType: 'wysiwyg',
      hideModeSwitch: true,
      previewStyle: 'vertical',
      plugins: [uml]
 });