Adding color to textAngular is an easy way to make colorpicker close when clicked in textAngular editor? - SOLVED

Question

A fair number asked about adding a font and background to textAngular. I am pleased with my decision, so I decided to share this. I have a final question: is there an easy way to close the colorpicker when the editor is clicked? without changing the textAngular code that I wanted to avoid?

In this solution, I use angular-bootstrap-colorpicker, so I also added as a dependency to my application: [... 'colorpicker.module', 'textAngular', ...].

Following https://github.com/fraywing/textAngular/wiki/Customising-The-Toolbar I have my application configuration section:

$provide.decorator('taOptions', ['taRegisterTool', '$delegate', function(taRegisterTool, taOptions){ // $delegate is the taOptions we are decorating // register the tool with textAngular taRegisterTool('backgroundColor', { display: "<button colorpicker class='btn btn-default ng-scope' title='Background Color' type='button' colorpicker-close-on-select colorpicker-position='bottom' ng-model='backgroundColor' style='background-color: {{backgroundColor}}'><i class='fa fa-paint-brush'></i></button>", action: function (deferred) { var self = this; this.$editor().wrapSelection('backgroundColor', this.backgroundColor); if (typeof self.listener == 'undefined') { self.listener = self.$watch('backgroundColor', function (newValue) { self.$editor().wrapSelection('backColor', newValue); }); } self.$on('colorpicker-selected', function () { deferred.resolve(); }); self.$on('colorpicker-closed', function () { deferred.resolve(); }); return; } }); taOptions.toolbar[1].unshift('backgroundColor'); taRegisterTool('fontColor', { display: "<button colorpicker type='button' class='btn btn-default ng-scope' title='Font Color' colorpicker-close-on-select colorpicker-position='bottom' ng-model='fontColor' style='color: {{fontColor}}'><i class='fa fa-font '></i></button>", action: function (deferred) { var self = this; if (typeof self.listener == 'undefined') { self.listener = self.$watch('fontColor', function (newValue) { self.$editor().wrapSelection('foreColor', newValue); }); } self.$on('colorpicker-selected', function () { deferred.resolve(); }); self.$on('colorpicker-closed', function () { deferred.resolve(); }); return false; } }); taOptions.toolbar[1].unshift('fontColor'); taOptions.setup.textEditorSetup=function($element) { $element.attr('ui-codemirror', ''); }; return taOptions; }]); }) 

where "ui-codemirror" is not related to adding color to textAngular, only part of my code.

I hope this is useful to others, as I mentioned above, I only want me to be able to get the colorpicker to close when I click on the editor ...

Here is the image of the received addition to the user interface.