Adding Quill Editor to Laravel Livewire Forms kdion package

#laravel #quilleditor #forms #livewire

In my last project i need and wysiwyg editor and a fast development environment. I want try kdion form package but there is not and implementation for this kind of fields.

I've made a simple class to extend the functionality of the package and other stuffs that i will describe:
First the class, I called AcheFormComponent.

<?php

namespace App\Http\Livewire;

// use Kdion4891\LaravelLivewireForms\FormComponent;
use Kdion4891\LaravelLivewireForms\Field;
use Kdion4891\LaravelLivewireForms\FormComponent;


class AcheFormComponent extends FormComponent {
    protected $listeners = [
        'fileUpdate', 
        'save' => 'hsubmitform'];

    public function hsubmitform()
    {
        $this->submit();
        $this->saveAndGoBackResponse();
    }
    public function render()
    {
        // my custom code

        return $this->formView();
    }
}

With this we can intercept the submit method (using $emit)

We also change the form template in resources/views/vendor/laravel-livewire-forms/form.blade.php (note that i'm using Sweet Alert2 form confirmation and alerts)

<div>
    <div class="card">
        <div class="card-body">
            @foreach($fields as $field)
            @if($field->view)
            @include($field->view)
            @else
            @include('laravel-livewire-forms::fields.' . $field->type)
            @endif
            @endforeach

            <div class="row">
                <div class="col-md offset-md-2">
                    <button class="btn btn-primary" id="bsave" onclick="asave()">{{ __('Save') }} </button>
                    {{-- <button class="btn btn-primary" wire:click="saveAndGoBack">{{ __('Save & Go Back') }}</button> --}}
                    <a href="{{ url()->previous() }}" class="btn btn-primary">Cancelar</a>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Code is inspired by Pastor Ryan Hayden
        // https://github.com/livewire/livewire/issues/106
        // Thank you, sir!
        function asave(){
            var x = document.getElementsByClassName('quillh') ; 
            // take all quill editor in page and put the data in hidden fields.
            var canti = 0; 
            if (x.length>0){

                for(i=0;i<x.length ; i++) { 

                    var xid =   x[i].id.replace('quillh','quill'); 
                   window[xid].blur()
                   canti++ ; 
                }
            }
            Swal.fire({
  title: 'Save the form  ?',
  text: "We will save form data.",
  showCancelButton: true,
  focusConfirm:true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Save!'
}).then((result) => {
  if (result.value) {

      window.livewire.emit('save'); // emit the save value to fire the hsubmitform event
  }
})

        }
        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('input[type="file"]').forEach(file => {
                file.addEventListener('input', event => {
                    let form_data = new FormData();
                    form_data.append('component', @json(get_class($this)));
                    form_data.append('field_name', file.id);

                    for (let i = 0; i < event.target.files.length; i++) {
                        form_data.append('files[]', event.target.files[i]);
                    }

                    axios.post('{{ route('laravel-livewire-forms.file-upload') }}', form_data, {
                        headers: {'Content-Type': 'multipart/form-data'}
                    }).then(response => {
                        window.livewire.emit('fileUpdate', response.data.field_name, response.data.uploaded_files);
                    });
                })
            });
        });
</script>

@endpush

Finally we must place the textareaeditor component in resources/views/fields/textareaeditor.blade.php

<div class="form-group row">
  <label for="{{ $field->name }}" class="col-md-2 col-form-label text-md-right">
      {{ $field->label }}
  </label>

  <div class="col-md">
<input
            id="{{ $field->name }}"
            type="HIDDEN"
            class="form-control @error($field->key) is-invalid @enderror"
            autocomplete="{{ $field->autocomplete }}"
            placeholder="{{ $field->placeholder }}"
            wire:model.lazy="{{ $field->key }}"/>

<div class="mt-2 bg-white quillh" id="quillh{{$field->name}}" wire:ignore>
  <div  
    x-data     
x-ref="quillEditor{{$field->name}}"
       x-init="
         quill{{$field->name}} = new Quill($refs.quillEditor{{$field->name}}, {theme: 'snow' });
         quill{{$field->name}}.root.innerHTML = @this.get('form_data').{{$field->name}}

         quill{{$field->name}}.on('selection-change', function(range, oldRange, source) {
          //console.log(range  ) 
          //console.log( oldRange)
          if (( range === null && oldRange !== null) || (range === null && oldRange == undefined  )) {
            console.log('tocado' + quill{{$field->name}}.root.innerHTML); 
           $dispatch('input',quill{{$field->name}}.root.innerHTML);
            @this.set('form_data.{{$field->name}}', quill{{$field->name}}.root.innerHTML)  ;

          }
        });


       "

  >
    Loading ... 
  </div>
</div>
@include('laravel-livewire-forms::fields.error-help')
</div>
</div>
@pushonce('styles')
    <link href="{{asset('/js/quill/quill.snow.css') }}" rel="stylesheet">
@endpushonce

@pushonce('scripts')
    <script src="{{asset('/js/quill/quill.js')}}"></script>
@endpushonce

You must to put quill css and js in /public/js .

After all the class and blade things we can call the new textareaeditor input type

...
 Field::make('Large Html TEXT', 'texthtml')->view('fields.textareaeditor')->help('use the quill editor'),
...

You can even use multiple editor on the same form.

The kdion package is a great tool for make lavarel/livewire forms. But the development is stopped and there are several issues without resolution. I hope this will work for some developers who are using the package.
I'm developping a kdion table package fork too. If you are insterested let me know.