V0.16.27 - Style/ID disappear when nested span

Version: 0.16.27

Are you able to reproduce the bug from the demo?

[ ] Yes [ ] No [X] Video but no demo

What is the expected behavior?

Add as many nested span elements as necessary and preserve their style/ID.

What is the current behavior?

From two nested span elements, style/ID of parent span elements disappear.

Are you able to attach screenshots, screencasts or a live demo?

[X] Yes (attach) [ ] No

https://user-images.githubusercontent.com/17108974/106736579-e9ee7f80-6615-11eb-9f5e-a3236d026c98.mp4

TextEditor.vue

// ...
methods: {
  onButtonClick (action, value = '') {
    try {
      const selected = this.editor.getSelected()
      const rte = selected.view.activeRte

      let style = `${action}:${value};`

      switch (action) {
        case 'showCustomizationPanel':
          this.customizationPanel = value
          break

        case 'text-align':
          this.mergeComponentStyle(selected, {
            [action]: value
          })
          break

        case 'font-size':
        case 'line-height':
          style += (action === 'font-size') ? 'line-height:100%;' : ''

          rte.insertHTML(
            `<span style="${style}">${rte.selection()}</span>`
          )
          break

        default:
          rte.exec(action, value)
      }
    } catch (error) {
      this.showError(error, 'onButtonClick()')
    }
  },

  /**
   * Defines default style on the added component
   * @see {@link https://grapesjs.com/docs/api/component.html#getstyle|Get style}
   * @param {object} component
   * @returns {void}
   */
  setDefaultStyle (component) {
    const {
      'font-family': fontFamily = '',
      'font-size': fontSize = ''
    } = component.getStyle()

    if (!fontFamily) {
      this.mergeComponentStyle(component, {
        'font-family': this.font.familyPartner[this.partnerId] || this.font.familyDefault
      })
    }

    if (!fontSize) {
      this.mergeComponentStyle(component, {
        'font-size': this.font.sizePartner[this.partnerId] || this.font.sizeDefault,
        'line-height': '100%'
      })
    }
  },

  /**
   * Merges GrapesJS component style
   * @see {@link https://grapesjs.com/docs/api/component.html#getstyle|Get style}
   * @see {@link https://grapesjs.com/docs/api/component.html#setstyle|Set style}
   * @param {object} component
   * @param {object} style
   * @returns {void}
   */
  mergeComponentStyle (component, style) {
    component.setStyle({
      ...component.getStyle(),
      ...style
    })
  }
}
// ...