Plugin personalizado con rasgos

'''js grapesjs.plugins.add('social-icons-component', (editor, opts = {}) => {

Sea c = opts;

Sea defaults = { bloques: 'iconos sociales',

Estilo por defecto defaultStyle: cierto,

Hora de inicio por defecto, por ejemplo, '2018-01-25 00:00' Hora de inicio: '',

};

Valores predeterminados de carga para (dejemos nombre en los valores predeterminados) { si (!( nombre en c)) c[name] = defaults[name]; }

// Añadir componentes loadComponents (editor, c);

// Añadir componentes loadBlocks(editor, c);

const domc = editor. DomComponents; const defaultType = domc.getType('default'); const textType = domc.getType('text'); const defaultModel = defaultType.model; const defaultView = defaultType.view; const textModel = textType.model; const textView = textType.view; const pfx = c.countdownClsPfx;

domc.addType('social-icons', {

model: defaultModel.extend({ defaults: Object.assign({}, defaultModel.prototype.defaults, { empieza de: c.inicioTiempo, finTexto: c.finTexto, Droppable: falso, Rasgos: [ Las cadenas se convierten automáticamente en tipos de texto

'nombre', 'marcador de posición', { tipo: 'select', etiqueta: 'Tipo', Nombre: 'Tipo', Opciones: [ {valor: 'Facebook', Nombre: 'Facebook'}, {valor: 'linkedin', nombre: 'Linkedin'}, {valor: 'youtube', nombre: 'Youtube'}, {valor: 'twitter', nombre: 'Twitter'}, ] }, { Tipo: 'entrada', Etiqueta: 'Facebook', Nombre: 'Facebook', },{ Tipo: 'entrada', etiqueta: 'LinkedIn', Nombre: 'LinkedIn', },{ Tipo: 'entrada', Etiqueta: 'YouTube', Nombre: 'YouTube', },{ Tipo: 'entrada', etiqueta: 'twitter', Nombre: 'Twitter', }], script: function() {

} }), }, { isComponent(el) {

if(el.getAttribute && el.getAttribute('data-gjs-type') == 'social-icons') { return { Tipo: 'Iconos sociales' }; } }, }), view: defaultView.extend({ init() {

console.log('en vistaaaa'); this.listenTo(this.model, 'change:type', this.updateScript); const comps = this.model.get('components');

Añade una plantilla básica de cuenta atrás si aún no está inicializada if (!comps.length) { comps.reset(); comps.add(' <span data-js="countdown" class="-cont"> <div class="${pfx}-block"> <div data-js="countdown-day" class="${pfx}-digit"></div> <div class="${pfx}-label">${c.labelDays}</div> </div> <div class="${pfx}-block"> <div data-js="countdown-hour" class="${pfx}-digit"></div> <div class="${pfx}-label">${c.labelHours}</div> </div> <div class="${pfx}-block"> <div data-js="countdown-minute" class="${pfx}-digit"></div> <div class="${pfx}-label">${c.labelMinutes}</div> </div> <div class="${pfx}-block"> <div data-js="countdown-second" class="${pfx}-digit"></div> <div class="${pfx}-label">${c.labelSeconds}</div> </div> </span> <span data-js="countdown-endtext" class="${pfx}-endtext"></span> `); } } }), }); });

He creado un plugin personalizado con trates, pero no funciona
¿Podrías explicarme cómo funcionará? ¿Cuál es el problema de esto?