Trix

There are two versions of the Trix field, with and without attachments.

Trix without file uploads

Requirements

Requires you to have @stack('styles') in head, and @stack('scripts') after Livewire and Alpine script tags

Extends BaseField

Additional methods

->includeExternalScripts()

• Push external (cdn-links) for required scripts and styles to the layout
• Omit, if you import the scripts manually
• Only pushed once, even if you add multiple Trix fields to the same form.

->default($value)

Use this method to set the initial trix input value. Use $this->model to access existing model values.

Example without file uploads

Trix::make('Trix')
    ->default('The initial value of the trix input') // Example: $this->model->foo
    ->includeExternalScripts() //will only be included once if multiple Trix fields.
    ->rules('nullable|string')

Tip

Add the custom() option if you need to format the trix-input (html) before saving to database. Read more about custom data ->

---

Trix with file upload - sponsors only

Please sponsor this package in order to get access to this field.

IMPORTANT Requirements

• same as for simple Trix field, above
• add a uniquely named component property for each trix field in the form, where you accept attachments.
• add the deleteTrixUpload() function to your form component (see below)
• Remove 'onKeyDownEnter' property in the mount() method, otherwise the user can't create new lines in the Trix input
• read the Livewire documentation about how to store file uploads

Extends BaseField

Additional methods

• Same as simple Trix input.

->allowAttachments(string $componentPropertyName)

• $componentPropertyName = Form component property name, required by Livewire file uploads
• You must add a uniquely named component property for each trix field in the form, where you accept attachments.

->maxKB(int $kiloBytes)

• Max allowed file size in KB.
• You still have to validate in backend, this is just a simple frontend validation
• If the js is tampered in frontend, the sizeLimitAlert() message is alerted but, the file will STILL BE VISIBLE as a PREVIEW in the trix input BUT NOT SAVED in the final trix html
• Combine with sizeLimitAlert()

->sizeLimitAlert(string $message)

• This message will be displayed in a simple JS alert, if the uploaded file is larger than maxKB().
• Combine with maxKb()

Example with file upload

1. add the property

public $trixUpload; //unique key for each trix field in the form that accepts attachements

2. Add to fields()

public function fields()
{
    return [
        $this->trix(),
    ];
}

3. Field declaration

    public function trix()
    {
        // Remove keyDown enter in mount() otherwise you cannot create new lines in the Trix field
        return Trix::make('Trix')
            ->allowAttachments('trixUpload') //unique key for each trix field in the form
            ->maxKB(1024)
            ->default('The initial value of the trix input') // $this->model->foo
            ->includeExternalScripts() //will only be included once if multiple Trix fields.
            ->rules('nullable|string');
    }

2. Handle the file upload

• Important: name the updatedFoo() method based on the field key, see Event Hooks wiki
• Important !!!!! suffix the dispatched browser event name with a slug cased version of the field name, in the blade view AlpineJS listens to an event named: attachment-saved-{{ Str::slug($field->name, '-') }}

public function updatedTrixUpload($file)
{
    // If the js is tampered in frontend, the validation error is alerted but,
    // the file will STILL BE VISIBLE as a PREVIEW in the trix input but NOT SAVED in the final trix html
    $this->validate([
        'trixUpload' => 'image|max:1024', // Example 1MB
    ]);

    $path = filled($file) ? $this->trixUpload->store('photos') : null; //'photos' = the storage path

    //Suffix the dispatched browser event, name, with the slug-cased-version-of-the-field-name. In this example the field is named "trix", Trix:make('Trix')
    if(filled($path)) $this->dispatchBrowserEvent("attachment-saved-trix", ['path' => asset($path)]);

    //now the user can upload another file
    //don't forget to schedule temp dir cleanup, see Livewire docs
}

3. Handle attachment deletion

• Add deleteTrixUpload() to your form component
• You must add this function to your form component, if you add a Trix field that allows attachments.
• This method is called, when the user deletes an attachment in the trix field
• You will receive two variables, a full url (including filename) and the filename.

    public function deleteTrixUpload($url, $filename)
    {
        //dd($url, $filename);
        //delete the file
    }

---

Blade component

Both versions of the Trix fields shares the same markup

<x-tall-trix
    :field="$field"
    :temp-key="$temp_key"
    :value="data_get($this, $temp_key)"
/>

Styling

Both versions of the Trix fields shares the same Blade component class, extend it, or override in config file.

Tanthammar\TallForms\Components\Trix::class