The Changelog
What's new around here?
Succinct and informative updates about Flux.
November 24, 2024
Rich text editor
Version ^1.0.27
Welp, we did it. As of today, Flux now ships with a rich text editor 🎉.
Just slap this one-liner anywhere in your app and you're off and editing:
Copy to clipboard
<flux:editor wire:model="content" />We really sweat the details on this one and hope it shows.
Configurable toolbar
Copy to clipboard
<flux:editor toolbar="heading | bold italic strike ~ link" />To configure an editor's toolbar items, you can pass a custom arrangement into the toolbar prop as a string of item names mixed with separators (|) and spacers (~).
Because each of these items is a simple Blade component inside Flux, you can easily create your own Blade components and reference them by name inside the toolbar prop.
Custom toolbar items
If you want complete control over the toolbar, you can compose your own editor by assembling the Blade components yourself.
Here's an example of adding a custom dropdown menu to an editor's toolbar:
Copy to clipboard
<flux:editor> <flux:editor.toolbar> <flux:editor.heading /> <flux:editor.separator /> <flux:editor.bold /> ... <flux:dropdown> <flux:editor.button icon="ellipsis-horizontal" tooltip="More" /> <flux:menu> <flux:menu.item wire:click="..." icon="arrow-top-right-on-square">Preview</flux:menu.item> <flux:menu.item wire:click="..." icon="arrow-down-tray">Export</flux:menu.item> <flux:menu.item wire:click="..." icon="share">Share</flux:menu.item> </flux:menu> </flux:dropdown> </flux:editor.toolbar> <flux:editor.content /></flux:editor>As you can see, this is just Blade/HTML like any other component. You can style and assemble any other Flux components you like into the editor's toolbar.
Mouse optional
The editor's toolbar uses a roving tabindex so that you don't have to tab through every toolbar item as you tab along the page. The toolbar acts as a single tab stop that you can navigate using the arrow keys.
You can navigate sub menus within the toolbar using only your keyboard as well.
In fact, you can operate everything about this editor, easily, without ever touching your mouse.
Markdown syntax
Although this is a rich text editor, it supports Markdown syntax as a convenient way to control styling in your document as you edit.
Shortcuts
All the standard keyboard shortcuts you're familiar with from other editors like Google Docs are available to use as well.
Here are a few examples:
- Cmd+B Bold
- Cmd+I Italic
- Cmd+K Insert link
As a form field
Copy to clipboard
<flux:editor label="Release notes" description="Explain what’s new in this release." />We wanted this component to feel no different than a textarea field when using it inside a form.
This means tackling things like disabled and invalid states at both the field AND fieldset level, associating labels/descriptions with the editor, as well as focusing the editor when the field label is clicked.
Screen readers
As you can see by the figure above, we worked hard to make sure the editor's accessibility tree was as descriptive and functional as possible.
Screen readers can easily discover and use all features inside the editor. This includes the tricky bits like toolbar sub-selects, tooltips, and insert-link popovers.
Dynamic JS bundle
Currently, every bit of Flux's JavaScript is contained inside a 21.5KB file.
Because of the enormity of a rich text editor and its dependancies, this component would add a whopping 85.3KB to the the Flux bundle size.
The problem is that many pages in an app don't use a rich-text editor at all and it doesn't make sense to penalize them with a bigger bundle.
Therefore, we included the editor's JavaScript as a separate bundle that gets loaded in parallel on an as-needed basis. The editor's JS will only be included at the exact moment it's needed to keep everything else in your app feeling light and snappy. This includes edge cases like lazy-loading an editor long after a page has already been loaded.
Localization
All of the english copy used in this component is translatable by copying a predefined set of keys into your lang/?.json files.
Built on Tiptap & ProseMirror
Rather than wrapping a more batteries-included editor like Quill or TinyMCE, we opted to use Tiptap under the hood for the editor's core functionality.
Tiptap is a convenience wrapper around the extremely powerful ProseMirror project.
It's completely headless, meaning we have full control over all of the markup, visuals, and accessibility, without having to be responsible for the input/formatting interactions.
This means we can make the toolbar as customizable as everything else in Flux because we own all the HTML/CSS/JS for it.
Also, to help support and thank the ProseMirror project, we donated $1000 via their GitHub sponsors profile.
The future
For launch our goal was: a rock-solid editor that feels just as good to develop and use as any other component in Flux.
Now that we've accomplished that, we can start adding next-level features like image support and @mentions.
Stay tuned!
November 13, 2024
Multi-selects
Version ^1.0.23
We held off on releasing multi-selects at launch because we felt like there were too many decisions to get right, but here we are. In Flux version 1.0.23 and above, you are now able to pass the multiple prop and turn a single-select into a multi-select:
Copy to clipboard
<flux:select variant="listbox" multiple> <flux:option>Photography</flux:option> ...</flux:select>Of course, data binding works as you'd expect, by passing the name of a Livewire property into wire:model, Livewire will keep the state of that property in sync with your selections:
Copy to clipboard
<flux:select wire:model="selected" variant="listbox" multiple>
Copy to clipboard
<?phpclass extends Livewire\Component{ public $selected = []; ...}We have big plans for the future of multi-select, like adding new variants for selecting pills, tags, avatars, etc., but for now, this is a good start.
Custom selected suffix
After your first selection, Flux shows the number of items selected, followed by the word "selected".
If you want to customize this to make it more contextual, you can do so using the selected-suffix prop:
Copy to clipboard
<flux:select selected-suffix="industries selected" variant="listbox" multiple>Checkbox indicator
The default check mark icon is now configurable for multi-selects. If you want a checkbox visual indicator instead, you can use the new indicator prop:
Copy to clipboard
<flux:select indicator="checkbox" variant="listbox" multiple>- Support for multi-selects
- Dispatch input events when select listbox clearable button is clicked so that wire:model.live picks up the change
November 3, 2024
Custom icon sets, file inputs, click outside modals, & more
Version ^1.0.20
Flux ships with the entire Heroicons icon set by default. As with anything the Tailwind folks do, it's excellent.
However, at ~400 icons, it's more limited than other alternatives.
If there's an icon in your project that you need but isn't available in Heroicons, it's probably available in Lucide.
In version v1.0.20 of Flux, we've shipped a new command to easily import individual Lucide icons into your project:
Copy to clipboard
php artisan flux:iconYou will be prompted to enter the names of any icons you want, and it will import them locally into your project and format them as Blade components ready to use with Flux.
If Lucide doesn't have what you need still, you can just add your icons manually to the following directory in your project:
Copy to clipboard
resources/views/flux/icon/your-custom-icon.blade.phpCustom file input
The browser's default file input element is unstylable and frankly, looks outdated.
We've added our own simple wrapper around the native file input and exposed it through type="file" on the input component:
Copy to clipboard
<flux:input type="file" />Of course, we made sure our wrapper works just as well with both the keyboard, mouse, and screen readers as the native input does.
Closing modals by clicking outside
Flux uses the browser's new(ish) <dialog> element for its modals. There tons of benefits to this, but also a few quirks. One of them being, the <dialog> element doesn't respond to clicking outside to close a modal; only the escape key or a close button.
With a sprinkle of custom JavaScript, it was fairly trivial to implement this behavior in Flux. Now, by default, all <flux:modal> components will close on click outside.
Clearable inputs and selects
Another small improvement we made in this release was making any searchable input in Flux show a clear button when filled.
We've also made this configurable for inputs that don't show one by default:
Copy to clipboard
<flux:input clearable /><flux:select variant="listbox" clearable> ...</flux:select><flux:command> <flux:command.input placeholder="Search..." /> ...</flux:command- Add flux:icon command to import third-party icons from Lucide for icons Heroicons is missing
- Support clearable buttons on listbox, searchable input, and command input
- Swap deprecated 'color-adjust' CSS property for 'print-color-adjust'
- Fix profile name not being truncated in sidebar layout
- Fix wire:model bugs on checkbox, radios, and switches due to errant input/change events being fired
- Fix dynamic-component bug where attributes are double escaped
- Fix checkbox group using an initial value of null
- Preserve selected display event when selected option element is removed
- Support closing modals by clicking outside
- Add custom file input component