summernote custom dropdown

//Append a custom dropdown for summernote
$(document).ready(function() {
	$('.summernote').summernote({
		lang: 'pt-BR',
		height: 200,
		dialogsInBody: true,
		toolbar: [
			
			['font', ['bold', 'italic' , 'underline', 'strikethrough', 'clear']],
			['color', ['color']],
			['para', ['ul', 'ol', 'paragraph', 'height']],
			['table', ['table']],
			['insert', ['hr', 'link', 'picture', 'dicionario']],
		],
		buttons: {
			dicionario: dicionarioData
		}		
	});
});

var dicionarioData = function (context) {
	var ui = $.summernote.ui;
	var event = ui.buttonGroup([
		ui.button({
			className: 'dropdown-toggle',
			contents: 'Dicionario  ',
			tooltip: 'Inserir item',
			data: {
				toggle: 'dropdown'
			},
			click: function() {
				context.invoke('editor.saveRange');
			}
		}),
		ui.dropdown({
			className: 'dropdown-style drop-default',
			contents: ['<h6 class="dropdown-header">Cliente</h6>',
						'<li><a class="dropdown-item" href="#" role="listitem" data-value="{$cliente_nome}">Nome</a></li>', 
						'<li><a class="dropdown-item" href="#" role="listitem" data-value="{$cliente_email}">Email</a></li>', 
						'<li><a class="dropdown-item" href="#" role="listitem" data-value="{$cliente_celular}">Celular</a></li>',
						'<h6 class="dropdown-header">Pedido</h6>',
						'<li><a class="dropdown-item" href="#" role="listitem" data-value="{$pedido_numero}">Numero</a></li>', 
						'<li><a class="dropdown-item" href="#" role="listitem" data-value="{$pedido_subtotal}">Sub-Total</a></li>', 
			],
			callback: function ($dropdown) {
				$dropdown.find('li').each(function () {
				   $(this).click(function (e) {
						var placeholder_text = $(this).find("a").attr("data-value");
						context.invoke('editor.restoreRange');
						context.invoke('editor.focus');
						context.invoke("editor.insertText", placeholder_text);
						e.preventDefault();
					});
				});
			}
		})		
	]);
	return event.render();
}