Rich text editor is empty when page refreshed

[lloydowen]

When using a element like this:

<flux:editor wire:model="content" label="Content" description="Contract in Markdown "/>

However, if i refresh the page, or navigate via a traditional link the editor is initialised with no content.

When I navigate to a page with an editor using wire:navigate, the content displays as expected.

I am filling the page on the mount method i.e.:

  public function mount()
  {
      $this->fill($this->template->toArray());
  }

At this point, $content is filled with valid HTML (previously saved with the editor).

Which is filling the $content property on the livewire component:

    #[Validate('required')]
    public ?string $content = '';

There are no errors in the console to report.

[jeffchown]

@lloydowen Can you provide full code that can be copy/pasted to reproduce the issue? Volt components are great, when possible.

[lloydowen]

sure,

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $content = '<h1>Hello World</h1>';
}; ?>

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

results in:

but adding wire:model.live for example:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public $content = '<h1>Hello World</h1>';
}; ?>

<div>
    <flux:editor wire:model.live="content" />
</div>

results in it working as expected:

[jeffchown]

@lloydowen I tried your first example, and can't recreate the issue.
With just wire:model="content", it works for me:

Have you run npm run build and php artisan view:clear to be sure all is compiled and refreshed?

[lloydowen]

Yes, i've tried that.

Even if i output the content it's definitely there:

<?php

use Livewire\Volt\Component;

new class extends Component {
    public string $content = '<h1>Hello World</h1>';
}; ?>

<div>
    <flux:editor wire:model="content"/>
    <div class="prose dark:prose-invert">
        {!! $content !!}
    </div>
</div>

It only works with .live which i'll use for now. Sorry i don't have anymore logs to share. If i get some extra downtime i'll dive deeper into it, sharing in case it was a wider issue.

[jeffchown]

@lloydowen Very strange. Have you inspected the flux:editor using devtools to see if the content is maybe there but styled in a way that makes it invisible?

Good luck with the deeper dive. I'm curious to hear what might be causing it.

[jeffchown]

@lloydowen PS Plus make sure you are using Flux v1.0.27 as v1.0.26 had a dependency error.

[sewid]

Same problem here - in combination with a Livewire Form. When I browse to the edit form using wire:navigate, the editor shows the desired content. If I refresh the page or browse to the page without wire:navigate, the editor is empty.

There is no error in the dev console and there is no content in the editor (checked using dev console).

As an addition, the editor is within a form tag. And the submit button is not working, is on the page. If I swap the editor to a textarea, everything works fine.

[lloydowen]

This seems to be fixed since v1.0.28

Ignore that, confirmed still an issue in v1.0.28