UI Components

Overview

Wedissimo API includes reusable Blade components that integrate with Livewire and Alpine.js for interactive user interfaces.

Trix Rich Text Editor

Description

A rich text editor component powered by Trix with full Livewire integration and dark mode support.

Components:

• <x-trix-editor> - Editable rich text editor with Livewire binding
• <x-trix-content> - Read-only styled display of Trix HTML content

Features

• Full WYSIWYG editing (bold, italic, links, headings, lists, quotes, code blocks)
• Dark mode support with automatic icon color adjustment
• Two-way data binding with Livewire via @entangle
• Prevents content clearing during typing
• Reactive updates from external Livewire property changes
• File upload disabled by default (alerts user)

Basic Usage

<x-trix-editor
    wire-model="description"
    placeholder="Enter description..."
/>

Props

Prop	Type	Default	Description
id	string	trix-{uniqid()}	Unique identifier for the editor instance
name	string	content	Form input name attribute
value	string	''	Initial value (use when not using wire-model)
wireModel or wire-model	string	null	Livewire property to bind to
placeholder	string	Enter text...	Placeholder text shown when empty
disabled	boolean	false	Disable editing

Complete Example

{{-- In your Livewire component view --}}
<flux:field>
    <flux:label>Product Description</flux:label>
    <x-trix-editor
        wire-model="product.description"
        placeholder="Enter a detailed product description..."
    />
    <flux:error name="product.description" />
</flux:field>

Livewire Component

<?php

namespace App\Livewire;

use Livewire\Component;

class ProductEdit extends Component
{
    public $description = '';

    public function mount($product)
    {
        $this->description = $product->description;
    }

    public function save()
    {
        $this->validate([
            'description' => 'required|string|min:10',
        ]);

        // Save product...
    }

    public function render()
    {
        return view('livewire.product-edit');
    }
}

Styling

The Trix editor automatically inherits your application's dark mode settings. Custom styles are defined in resources/css/app.css:

• Toolbar: Gray background with dark mode support
• Editor: White/dark background with proper text contrast
• Icons: Automatically inverted in dark mode using CSS filters
• Content: Styled headings, links, blockquotes, code blocks, and lists

Advanced Usage

Custom Styling

Add custom classes to the wrapper div:

<x-trix-editor
    wire-model="content"
    class="my-4 custom-wrapper"
/>

In Modals

Works seamlessly in Flux modals (the component uses wire:ignore internally):

<flux:modal x-model="showEditModal" variant="flyout">
    <flux:heading>Edit Content</flux:heading>

    <x-trix-editor
        wire-model="content"
        placeholder="Edit your content..."
    />
</flux:modal>

Multiple Editors

Use multiple editors on the same page - each has a unique ID:

<x-trix-editor wire-model="shortDescription" placeholder="Short description..." />
<x-trix-editor wire-model="longDescription" placeholder="Full description..." />
<x-trix-editor wire-model="notes" placeholder="Internal notes..." />

Technical Details

How It Works

1. Alpine.js Integration: Uses @entangle for reactive two-way binding with Livewire
2. Focus Detection: Checks if editor is focused before external updates to prevent clearing content during typing
3. DOM Isolation: Uses wire:ignore on parent div to prevent Livewire from interfering with Trix's toolbar DOM
4. Event Handling: Listens to trix-change events to sync content back to Livewire immediately

Component Location

resources/views/components/trix-editor.blade.php

JavaScript Configuration

Global Trix configuration in resources/js/app.js:

• Heading 1 renders as <h2> tags
• File attachments disabled with user alert
• Terminal and break-on-return configured for headings

Troubleshooting

Content Disappears When Typing

Cause: Missing wire:ignore or incorrect placement.

Solution: The component already includes wire:ignore on the parent div. Ensure you're not wrapping it in another Livewire-managed element without proper isolation.

Dark Mode Icons Not Visible

Cause: CSS not built or cached.

Solution:

npm run build
# Clear browser cache

Value Not Syncing to Livewire

Cause: Incorrect wire-model property name.

Solution: Ensure the property exists in your Livewire component and is public:

public $description = ''; // Must be public

Best Practices

1. Always use wire-model for Livewire integration (not value)
2. Include validation in your Livewire component for the bound property
3. Use flux:error to display validation errors below the editor
4. Set meaningful placeholders to guide users
5. Test with long content to ensure performance
6. Consider field labels using Flux's flux:label component

Limitations

• File/image uploads are disabled by default and show an alert
• Maximum content length should be validated in your Livewire component
• Not suitable for extremely large documents (> 50,000 characters)

Future Enhancements

Potential improvements for future versions:

• File upload support with S3 integration
• Configurable toolbar buttons
• Custom formatting options
• Character/word count display
• Auto-save functionality

---

Trix Content Display (Read-Only)

Description

A read-only component for displaying Trix HTML content with proper styling and dark mode support.

Basic Usage

<x-trix-content :content="$vendor->description" />

Props

Prop	Type	Default	Description
content	string	''	The HTML content to display

Complete Example

{{-- In your Livewire component view --}}
<div class="space-y-4">
    <flux:heading>{{ $vendor->name }}</flux:heading>

    @if($vendor->description)
        <x-trix-content :content="$vendor->description" />
    @else
        <p class="text-gray-500 dark:text-gray-400">No description available.</p>
    @endif
</div>

Real-World Usage

From modules/Vendor/Resources/views/livewire/vendor-view.blade.php:

@if($vendor->description)
    <x-trix-content :content="$vendor->description" class="mb-4" />
@endif

Styling

The component automatically applies:

• Tailwind's prose classes for beautiful typography
• Dark mode support via prose-invert
• Trix-specific styling matching the editor appearance
• Proper spacing, colors, and formatting for all Trix elements

Features

• ✅ Renders HTML safely with {!! !!}
• ✅ Styled headings, links, blockquotes, code blocks
• ✅ Proper list formatting (bullet and numbered)
• ✅ Dark mode support
• ✅ Customizable via additional classes
• ✅ Responsive and mobile-friendly

Custom Styling

Add additional classes:

<x-trix-content
    :content="$content"
    class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg"
/>

In Lists or Tables

For truncated previews in lists, use strip_tags():

{{-- Show excerpt in search results --}}
<div class="text-sm text-gray-500 dark:text-gray-400">
    {{ Str::limit(strip_tags($item->description), 100) }}
</div>

{{-- Show full content in detail view --}}
<x-trix-content :content="$item->description" />

Component Location

resources/views/components/trix-content.blade.php

CSS Styling

Styles defined in resources/css/app.css (lines 233-292):

• All Trix elements (h1, h2, a, blockquote, code, pre, ul, ol, etc.)
• Dark mode variants
• Proper spacing and typography

Best Practices

1. Always check for content before rendering:

   @if($model->description)
       <x-trix-content :content="$model->description" />
   @endif

2. Use strip_tags() for previews - Don't render full HTML in tables or cards

3. Pass via prop binding - Use :content="$variable" not content=""

4. Add custom classes for layout needs, not typography (prose handles that)

5. Test in dark mode to ensure readability