Component theming

​
- How to override templates:

The way how templates are rendered in this module is through includes for every kind of component so to override them it's necessary to copy the template json-widget-component.html.twig and place it on your active theme. Clearing  the cache after of course.

We suggest declaring an array named `components` at the beginning of the template and every item that you set inside it will be the component which you want to override. 
Something like this:

       {%
          set components = [
            'quote',
            'name_component',
            'name_component2',
          ]
        %}

After that we need to add a conditional to change the place where the template will be, in the following example you can see the conditional which evaluates either our components are inside the array "components", to the other cases the templates continue calling from the module.

        {% if json_array.type %}
          {% if json_array.type in components %}
            {% include '@THEMENAME/jfu/' ~ json_array.type ~ '.html.twig' with { 'json_array': 
             json_array } %}
          {% else %}
            {% include '@jfu/components/' ~ json_array.type ~ '.html.twig' with { 'json_array': 
             json_array } %}
          {% endif %}
        {% endif %}

Finally, to get the functionality. According to our example the template should be in the structure defined `"THEMENAME/templates/jfu/"`, you can copy from the module `jfu/templates/components/nameofcomponent.html.twig` and place on your active theme and modify whatever you want.

- CKEDITOR IN JSON FIELD UTILS

This module uses the CKEDITOR in some textarea fields, the way we added it is a little bit different. We added the configuration by PHP and send values to the VUEJS code, in that file we call the CKEDITOR instance and execute the .replace() method for the respective field.