Proposed changes to message preview script

message-preview.js

import debounce from 'debounce'

export default class MessagePreview {
  constructor(el) {
    this.el = el
    this.setVariables()
    this.setUpListeners()
    this.updatePreview()
  }

  setVariables() {
    this.textarea = this.el.querySelector('textarea')
    this.text = this.el.querySelector('[data-message-preview="custom-text"]')
    this.buttons = document.querySelectorAll('[data-message-preview="continue"]')
    this.buttonsList = Array.from(this.buttons)
  }

  setUpListeners() {
    this.textarea.addEventListener('keyup', this.updatePreview.bind(this))

    this.buttonsList.forEach((button) => {
      button.addEventListener('click', this.continueForm.bind(this))
    })
  }

  updatePreview() {
    this.text.innerHTML = this.textarea.value.replace(/\n/g, '<br />')
    
    if (this.textarea.value.length) {
      this.buttonsList.forEach((button) => {
        button.classList.remove('-inactive')
        button.classList.add('-primary')
        button.removeAttribute('aria-hidden')
      })
    } else {
      this.buttonsList.forEach((button) => {
        button.classList.add('-inactive')
        button.classList.remove('-primary')
        button.setAttribute('aria-hidden', 'true')
      })
      this.text.innerHTML = ''
    }
  }

  continueForm(e) {
    if (!this.textarea.value.length) {
      e.preventDefault()
    }
  }
}