Livewire: Editor content does not load on mount

[zircuitz]

Flux version

v2.1.6

Livewire version

v3.6.2

Tailwind version

v4.0.7

Browser and Operating System

Brave on Windows 11 LTSC Enterprise

What is the problem?

When I attempt to use a Flux UI Rich Text Editor

The editor initializes successfully, but the text field is empty. I can confirm that the database field has content within it. I can type in the field and hit save, and it will save as expected. However: Reloading the page will present me with a blank editor despite the column still containing the last data I saved.

I have tried other browsers with the same result. I've tried Brave with all addons disabled, and shields completely off. The JavaScript console returns no errors (or outputs for that matter).

One thing to note: I am using a custom Livewire initialize to load the sort AlpineJS plugin. Code provided in code snippets below.

Code snippets

app/Livewire/Admin/Pages/Editor.php

<?php

namespace App\Livewire\Admin\Pages;

use App\Models\Page;
use Illuminate\Contracts\View\View;
use Livewire\Component;

class Editor extends Component
{
    public Page $page;
    public ?string $content;

    public function mount(string $id): void
    {
        $this->page = Page::findOrFail($id);
        $this->content = $this->page->content;
    }

    public function save(): void
    {
        $this->page->content = $this->content;
        $this->page->save();
    }

    public function render(): View
    {
        return view('livewire.admin.pages.editor');
    }
}

resources/views/livewire/admin/pages/editor.blade.php

<div>
    <div class="flex justify-between items-center mb-6">
        <div class="flex flex-col">
            <flux:heading size="xl">Edit Page</flux:heading>
            <flux:subheading class="font-semibold">{{ $page->title }}</flux:subheading>
        </div>

        <flux:button wire:click="save">Save</flux:button>
    </div>

    <div>
        <flux:editor wire:model="content" label="Page contents" />
    </div>
</div>

resources/js/app.js

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import sort from '@alpinejs/sort';

Alpine.plugin(sort);

Livewire.start();

How do you expect it to work?

I'd expect the editor to have the content as modeled through Livewire when the page loads.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@zircuitz thanks for reporting! I've just tested this and everything is working as expected for me, see below screenshot and Volt component I used for testing. I'm going to close this as I don't believe it's an issue with Flux.

Can you test out the below component and see if it works for you (you can split it into a standard Livewire component if you prefer, it should still work the same)?

If it doesn't work then that suggests there is an issue with your setup, but if it does work then it's likely to do with how you're loading content from the database.

Feel free to comment back here with your findings and if it turns out there is an issue with Flux, we can reopen it. Otherwise we will see if we can help you get it going.

<?php

use Livewire\Component;

new class extends Component {
    public ?string $content;

    public function mount(): void
    {
        $this->content = '<p>Hello World!</p>';
    }
} ?>

<div>
    <flux:editor wire:model="content" label="Page contents" />
</div>

[zircuitz]

I tested again with a fresh project. This works.

However: When I manually load Livewire to use the AlpineJS sort plugin: The field doesn't work. This despite using the documented method to manually load Livewire as stated in the docs here. It only seems to affect this FluxUI component specifically, while the rest of them work normally.

Functionality is broken here despite using the documented official solutions. Not sure if this a bug report that belongs in Livewire, AlpineJS or FluxUI. Since it seems to affect a single FluxUI component: I figured this was the best place to report it.

[joshhanley]

@zircuitz ah sorry, I missed that part. Yeah I can confirm that it's not working when manually loading Livewire through app.js. Will reopen it.

[joshhanley]

I've submitted a PR with a fix.