How can I add events to my inline toolbar on fill blocks

[aomini]

Question

I have created an custom inline toolbar which wraps up text inside an input. In order to get input value later, I have attached an event which adds the current value of that input into value attribute.

Context

Every things works fine until I fill the blocks with previous data containing the inline input. The problem that I have now is my event on the inliine toolbar which is responsible to set the value attribute whenever the input changes doesn't triggers. How can I attach the same event when I fill the editor with previous blocks.

** My inline toobar**

class SimpleInput {
  static get isInline() {
    return true;
  }

  static get sanitize() {
    return {
      input: {
        class: 'form-control',
        value: true,
        style: true,
      },
    };
  }

  constructor({ api }) {
    this.api = api;
    this.button = null;
    this.state = false;
  }

  render() {
    this.button = document.createElement('button');
    this.button.type = 'button';
    this.button.innerHTML = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke="#707684" width="16" height="16" viewBox="0 0 16 16">
        <path fill="#444444" d="M16 5c0-0.6-0.4-1-1-1h-14c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1 1h14c0.6 0 1-0.4 1-1v-6zM15 11h-14v-6h14v6z"></path>
        <path fill="#444444" d="M2 6h1v4h-1v-4z"></path>
        </svg>`;
    this.button.classList.add(this.api.styles.inlineToolButton);
    return this.button;
  }

  surround(range) {
    if (this.state) {
      return;
    }

    const selectedText = range.extractContents().textContent;
    const input = document.createElement('input');

    input.value = selectedText;
    input.classList.add('form-control');
    input.setAttribute(
      'style',
      `    
      display: inline;
      width: fit-content;
      margin-left: 5px;
      margin-right: 5px;`.replace(/\s/g, '')
    );
    input.setAttribute('value', selectedText);
    input.addEventListener('keypress', function (e) {
      this.setAttribute('value', e.target.value);
    });
    range.insertNode(input);
    input.insertAdjacentHTML('afterend', '&nbsp;');
    this.api.selection.expandToTag(input);
  }

  checkState(selection) {
    const text = selection.anchorNode;

    if (!text) {
      return;
    }

    const anchorElement = text instanceof Element ? text : text.parentElement;
    this.state = !!anchorElement.closest('input');
  }
}
export default SimpleInput;