Filament 3 RichEditor - sticky header

Question

When editing long text in Filament's RichEditor it is extremaly annoying that the toolbar does not follow while I scroll the editor's window. I have to go up to the toolbar every time I want to make something bold or so. If the text is really long is became extremely annoying.

Is there a way to make the toolbar "sticky"?

Answer 1

I've found a fix but its not perfect as when you change to dark theme it doesn't look so good but on white theme looks good:

You go to "yourproject"\vendor\filament\forms\resources\views\component and look for the file rich-editor.blade.php.

In this file you have to make a few modifications so be careful to do exactly as written here: search for "fi-fo-rich-editor", on the parent div add the following code: style="max-height: 80vh;" like this:

<div style="max-height: 80vh;"
            {{
                $attributes
                    ->merge($getExtraAttributes(), escape: false)
                    ->class([
                        'fi-fo-rich-editor max-w-full overflow-x-auto rounded-lg  shadow-sm ring-1 transition duration-75 focus-within:ring-2 dark:bg-white/5',
                        'ring-gray-950/10 focus-within:ring-primary-600 dark:ring-white/20 ' => ! $errors->has($statePath),
                        'ring-danger-600 focus-within:ring-danger-600 dark:ring-danger-500 ' => $errors->has($statePath),
                    ])
            }}
        >

Then you search for: "<trix-toolbar" make sure you include the "<" as well to find the exact one and add this style: style="position:sticky; top:0; z-index:19; background-color:white;" like this:

<trix-toolbar
                    id="trix-toolbar-{{ $id }}" style="position:sticky; top:0; z-index:19; background-color:white;"
                    @class([
                        'relative flex flex-col gap-x-3 border-b border-gray-100 px-2.5 py-2 dark:bg-primary/500 dark:border-white/10',
                        'hidden' => ! count($getToolbarButtons()),
                    ])
                >

And then another improvement you can do to this file is to make the image smaller, when you upload a piture its very big in the Rich Editor: copy this code right at the top in side the brackets:

<style>
        p > figure > a > img {
          max-height: 300px;
          width: auto;
          display: block;
          margin-left: auto;
          margin-right: auto;
        }
      </style>

like this:

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <style>
        p > figure > a > img {
          max-height: 300px;
          width: auto;
          display: block;
          margin-left: auto;
          margin-right: auto;

        }
      </style>
    @php
        $id = $getId();
        $statePath = $getStatePath();
    @endphp