import { isEmpty } from 'underscore';

const Backbone = require('backbone');

module.exports = Backbone.Collection.extend({
  initialize(models, opt) {
    this.on('add', this.onAdd);

    this.config = opt && opt.config ? opt.config : null;

    // Inject editor
    if (opt && (opt.sm || opt.em)) this.editor = opt.sm || opt.em;

    this.model = (attrs, options) => {
      var model;

      if (!options.sm && opt && opt.sm) options.sm = opt.sm;

      if (!options.em && opt && opt.em) options.em = opt.em;

      if (opt && opt.config) options.config = opt.config;

      if (opt && opt.componentTypes)
        options.componentTypes = opt.componentTypes;

      var df = opt.componentTypes;

      for (var it = 0; it < df.length; it++) {
        var dfId = df[it].id;
        if (dfId == attrs.type) {
          model = df[it].model;
          break;
        }
      }

      if (!model) {
        // get the last one
        model = df[df.length - 1].model;
      }

      return new model(attrs, options);
    };
  },

  add(models, opt = {}) {
    if (typeof models === 'string') {
      var parsed = this.editor.get('Parser').parseHtml(models);
      models = parsed.html;

      var cssc = this.editor.get('CssComposer');

      if (parsed.css && cssc) {
        var { avoidUpdateStyle } = opt;
        var added = cssc.addCollection(parsed.css, {
          extend: 1,
          avoidUpdateStyle
        });
      }
    }

    return Backbone.Collection.prototype.add.apply(this, [models, opt]);
  },

  onAdd(model, c, opts) {
    const em = this.editor;
    const style = model.get('style');
    const avoidInline = em && em.getConfig('avoidInlineStyle');

    if (
      !isEmpty(style) &&
      !avoidInline &&
      em &&
      em.get &&
      em.get('Config').forceClass
    ) {
      var cssC = this.editor.get('CssComposer');
      var newClass = this.editor.get('SelectorManager').add(model.cid);
      model.set({ style: {} });
      model.get('classes').add(newClass);
      var rule = cssC.add(newClass);
      rule.set('style', style);
    }
  }
});

@@ -1589,24 +1589,22 @@
 odel.get
-('s
+S
 tyle
-'
+(
 );%0A    c
@@ -1763,19 +1763,16 @@
 .get
-('
 Config
+(
 '
-).
 forc
@@ -1777,16 +1777,18 @@
 rceClass
+')
 %0A    ) %7B
@@ -1798,120 +1798,97 @@
     
-var cssC = this.editor.get('CssComposer');%0A      var newClass = this.editor.get('SelectorManager').add(model.cid
+const name = model.cid;%0A      const rule = em.get('CssComposer').setClassRule(name, style
 );%0A 
@@ -1905,21 +1905,15 @@
 .set
-(%7B style: %7B%7D 
+Style(%7B
 %7D);%0A
@@ -1928,103 +1928,20 @@
 del.
-get('classes').add(newClass);%0A      var rule = cssC.add(newClass);%0A      rule.set('style', styl
+addClass(nam
 e);%0A

Update `onAdd` in Components