Text editor content in blade is not showing created line breaks nor Text header sizes

[papirri]

Flux version

v2

Livewire version

4

Tailwind version

4

Browser and Operating System

chrome on macos

What is the problem?

Everything is shown great in the flux editor , but when I want to display the content ((!! $content !!}} or {!! $content !!}, The html content does not shows Text Heading nor line breaks applied in the flux editor:

Code snippets to replicate the problem

<flux:editor
wire:model="description"
label="Description"
description="Add more details about this task with rich formatting"
/> that´s the form field and this is the blade code that should display the description content in the proper way:
@php
$content = $todo->description;
if (strip_tags($content) !== $content) {
$content = preg_replace('/

\s*</p>/i', '
', $content);
$output = $content;
} else {
$output = nl2br($content);
}
@endphp

{!! $output !!}

Screenshots/ screen recordings of the problem

How do you expect it to work?

I want to show the text heading size and line breaks as it was saved in the flux editor

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]

@papirri thanks for reporting! Please provide screenshots or a screen capture of the issue. Can you also add code blocks around your code, so it's readable. Thanks!

When you paste code into github, you need to surround it in triple back ticks and then specify the file type like php or blade.

For example
```php
\ PHP code here
```

```blade
\ HTML and blade code here
```

[ganyicz]

Hi @papirri

I've tested this and the editor stores HTML correctly.

It sounds like you're not applying any styles to the rendered HTML.

To do this, you can use Tailwind's typography plugin (https://github.com/tailwindlabs/tailwindcss-typography):

Then render the stored content like this:

<div class="prose dark:prose-invert">
    {!! $todo->description !!}
</div>

The prose class will style headings, paragraphs, lists, blockquotes, etc. automatically.