Removing whitespace in <flux:text> component

[seabasss]

It seems that flux:text is undocumented, but would you consider removing the whitespace around the slot to improve formatting control? Currently, applying <flux:text class="whitespace-pre-line"> results in extra top margin due to whitespace within the component. Would you be open to changing...

This:

<div {{ $attributes->class($classes) }} data-flux-text>
    {{ $slot }}
</div>

Into this:

<div {{ $attributes->class($classes) }} data-flux-text>{{ $slot }}</div>

Thanks!

[ju5t]

I'm not sure if using <flux:text> is the best approach here. Is there any reason you want to use this instead of a code block for example? As semantically that makes more sense.

[seabasss]

It's not a code block, it's regular text with linebreaks that should be rendered as linebreaks. Could use nl2br, but then you also need htmlspecialchars and {!! !!} right, which is messier than just {{ $text }} and call it a day.

The issue is that the indented whitespace is rendered as a linebreak, but keeping it flush within the tags would prevent it.

Not a big deal, but also a small change :)

[ju5t]

Ah, didn't think of that 🤦

I'd open this as an issue instead. white-space: pre-line; is a better approach as nl2br isn't safe.

[oMikeo]

In absence of documentation, we've been treating<flux:text> as a wrapper placing tags inside to descend in the styles and sizes. Ensures whatever the text is has some proper structure. Text floating around in divs is a bit 👎

e.g.

<flux:text size="sm" class="space-y-1.5">
    <p>...
    <ul>...
    <p>...
</flux:text>

So you could just do...

<flux:text>
    <p>...<br>...<br>...</p>
</flux:text>

[seabasss]

I found it useful for text straight from the database. Just want one single whitespace-pre-line on it and not other html junk like br in there.

Maybe this is the more semantic way to do it anyway, since flux:text is a div...

<flux:text>
    <p class="whitespace-pre-line">{{ $text }}</p>
</flux:text>