X-Editable - How to trigger save event after adding new editable type to achieve multiple fields functionality

Question

I need to give color picker option along with text area in x-editable. For this I have added a custom editable Type 'textareaWithColor'.

Things are working fine except one thing i.e. when I only change color picker value it doesn't trigger value2html event. if I change text area value it works just fine.

I've tried googling answer but no luck mostly because of very little experience with js

Edit

JSFiddle added. https://jsfiddle.net/1cLqb36z/4/

Thanks for the help!

html

<tr class="editable-row">
<td class='editable' style="width:14.3%; word-break:break-word;" name="{{field.html_name}}" id="{{field.id_for_label}}" data-type="textareaWithColor">{{field.value | safe}}</td>
</tr>

JS

addEditFunc('.editable-row', 'td.editable', 'down',false)
function addEditFunc(parentSelector, childSelector, placement = 'left', wysihtml5CustomToolbar = false, tpl = null) {
    console.log('here', placement, parentSelector, childSelector)

    let config = {
        container: 'body',
        mode: 'inline',
        selector: childSelector,
        url: "",
        title: 'Name',
        dataType: 'json',
        escape: false,
        emptytext: '',
        validate: function(value) {
            if ($.trim(value) == '') return 'field required';
        }

    }
    if (placement) config['placement'] = placement;
    if (tpl) {
        console.log(tpl)
        config['tpl'] = tpl;
    }


    $(parentSelector).editable(config);



    $(childSelector).hover(
        function() {
            $(this).css('cursor', 'alias');
        },
        function() {
            $(this).css('cursor', 'alias');

        }

    )


}

textareaWithColor.js

/**
Textarea input
@class address
@extends abstractinput
@final
@example
<a href="#" id="comments" data-type="textarea" data-pk="1">awesome comment!</a>
<script>
$(function(){
    $('#comments').editable({
        url: '/post',
        title: 'Enter comments',
        rows: 10
    });
});
</script>
**/
(function ($) {
    "use strict";
    
    var Textarea = function (options) {
        console.log(options, Textarea.defaults)
        this.init('textareaWithColor', options, Textarea.defaults);
    };
   

    $.fn.editableutils.inherit(Textarea, $.fn.editabletypes.abstractinput);

    $.extend(Textarea.prototype, {
        render: function () {
            this.setClass();
            this.setAttr('placeholder');
            this.setAttr('rows');                        
            
            //ctrl + enter
            this.$input.keydown(function (e) {
                if (e.ctrlKey && e.which === 13) {
                    $(this).closest('form').submit();
                }
            });
        },
        
       //using `white-space: pre-wrap` solves \n  <--> BR conversion very elegant!
       
       value2html: function(value, element) {
            console.log(value,element)
            console.log($('#colorpicker').val())

           // changing background color of cell in table
            $(element.parent).background($('#colorpicker').val())

            // var html = '', lines;
            // if(value) {
            //     lines = value.split("\n");
            //     for (var i = 0; i < lines.length; i++) {
            //         lines[i] = $('<div>').text(lines[i]).html();
            //     }
            //     html = lines.join('<br>');
            // }
            $(element).html(value);
        },
       
        // html2value: function(html) {
        //     console.log(html)
        //     if(!html) {
        //         return '';
        //     }
        //     var regex = new RegExp(String.fromCharCode(10), 'g');
        //     var lines = html.split(/<br\s*\/?>/i);
        //     for (var i = 0; i < lines.length; i++) {
        //         var text = $('<div>').html(lines[i]).text();
        //         // Remove newline characters (\n) to avoid them being converted by value2html() method
        //         // thus adding extra <br> tags
        //         text = text.replace(regex, '');
        //         lines[i] = text;
        //     }
        //     return lines.join("\n");
        // },
         
        activate: function() {
            $.fn.editabletypes.text.prototype.activate.call(this);
        }
    });

    Textarea.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
        /**
        @property tpl
        @default <textarea></textarea>
        **/
        tpl:'<textarea class="form-control form-control-sm"></textarea> <input type="color" id="colorpicker" name="colorpicker" value="#f6b73c">',
        /**
        @property inputclass
        @default input-large
        **/
        inputclass: 'input-large',
        /**
        Placeholder attribute of input. Shown when input is empty.
        @property placeholder
        @type string
        @default null
        **/
        placeholder: null,
        /**
        Number of rows in textarea
        @property rows
        @type integer
        @default 7
        **/        
        rows: 7        
    });

    $.fn.editabletypes.textareaWithColor = Textarea;

}(window.jQuery));