Orphaned span tags when adding/removing custom class

[shustudios]

Hi, I'm brand new to this editor, but I've managed to stitch together some functionality to dynamically add/remove custom classes or IDs to a selection. The issue I am running into is that when I remove the custom class, the html remains broken up into spans, ie: <span>beginning of text</span> this text had the custom class <span>end of text</span>

I would like the text to revert back to a single block if possible. Is this problem a limitation of the editor, or am I doing something wrong? Please see my code below - The interesting thing is that this problem does not happen for inserting/removing links.

class CustomStyle extends Mark {
  get name() {
    return "customstyle";
  }

  get schema() {
    return {
      attrs: {
        style: { default: '' },
        method: { default: '' },
      },
      inclusive: false,
      parseDOM: [
        {
          tag: 'span',
          getAttrs(dom) {
            return { style: dom.classList[1] }
          }
        }
      ],
      toDOM: node => {
        let output

        if (node.attrs.style.indexOf('#') === 0) {
          output = { id: node.attrs.style.substring(1) }
        } else {
          if (node.attrs.style.indexOf('.') === 0) {
            output = { class: node.attrs.style.substring(1) }
          } else {
            output = { class: node.attrs.style }
          }
        }

        return ['span', output, 0];
      }
    }
  }

  commands({ type }) {
    return attrs => {
      if (attrs.style) {
        return updateMark(type, attrs)
      }

      return removeMark(type)
    }
  }
}