Tag Classes with Vue2

[nzmattman]

Description

OS: macOS Bit Sur (11.4) Browser: Chrome 91.0.4472.114 Trumbowyg: 2.24.0 Vue: 2.6.14

I have this weird issue when using Trumbowyg and Vue2.

I have ported the vue-trumbowyg package (basically copied the component setup to my own component).

All is working well and my updates / plugins are working a treat. The issue I am having is with the tag classes. I have set a tag class to add a class of heading to the h1 tag. The class only seems to be actually added to the element when toggling any block level element.

My vue component's mount method

// Return early if instance is already loaded
if (this.editor.el) return;

// Store DOM
this.editor.el = jQuery(this.$refs.editor);

// Init editor with config
this.editor.el.trumbowyg(this.editor.config);
// Set initial value
this.editor.el.trumbowyg('html', this.data);

// Watch for further changes
this.editor.el.on(`${this.editor.eventPrefix}change`, this.onChange);

// Blur event for validation libraries
this.editor.el.on(`${this.editor.eventPrefix}blur`, this.onBlur);

the on change method

onChange(event) {
  this.data = event.target.value;
  this.$emit('input', event.target.value);
},

How to reproduce?

Here is a jsfiddle to replicate the issue (a super trimmed down version of my code) https://jsfiddle.net/o6v4pudw/10/

[Alex-D]

Not related to Vue, it is an issue in Trumbowyg with the tagClasses that are not always applied.