[2.x] Custom JS function dynamic invoke in text component

[kallefrombosnia]

Description

This functionality adds a feature for developers to invoke a custom JS function which will transform the output of the input and insert event info into something new.

Since this made confusion on Discord I will explain by code details.

This PR adds 2 new options for text fields: callback - this prop tells that we use dynamic invoke in the input component (bool) - default false execute - name of the JS function (string) - default ''

@formField('input', [
    'name' => 'description',
    'label' => 'Description',
    'type' => 'text',
    'callback' => true,
    'execute' => 'handleStringChange'
])

After this, we need to define the JS function

@push('extra_js')
  <script>
        function handleStringChange(string){
            return string.split('').join(',');
        }
  </script>
@endpush

Basically, this function will split this string into pieces and glue them by the comma.

Let's test it.

On load:

After making some changes to the existing input:

Notes: I'm aware of the existing onChange prop, but I didn't want to mix content here since onChange is used for static function calls in other parts of the website.

Also if the user doesn't return anything from the custom function, there is a check which if fails returns the original event target value as the output.