Filament•12mo ago

Option to set MarkdownEditor background color

Hi! We are using a MarkdownEditor() component to preview and edit a .svg string. This works great, except for white images. As the background color is also white the .svg cannot be seen. Is there a way to alter the background-color of the MarkdownEditor? I already tried something like this:

           MarkdownEditor::make('logo_white')
->extraAttributes(['style' => 'background-color: red'])
->toolbarButtons(['edit', 'preview']),

           MarkdownEditor::make('logo_white')
->extraAttributes(['style' => 'background-color: red'])
->toolbarButtons(['edit', 'preview']),

But that did not have the expected result...

Solution:

Found a solution by overwriting the styling in filament.css: ``` .logo-markdown [x-html='preview'] { background-color: red !important;...

Jump to solution

2 Replies

TiBiBa•12mo ago

Update: The following seems to work on a TextInput but still not on a MarkdownEditor:

->extraAlpineAttributes(['style' => 'background-color: red'])

->extraAlpineAttributes(['style' => 'background-color: red'])

Solution

TiBiBa•12mo ago

Found a solution by overwriting the styling in filament.css:

.logo-markdown [x-html='preview'] {
    background-color: red !important;
}

.logo-markdown [x-html='preview'] {
    background-color: red !important;
}

And then adding the class as an extra attribute to the editor like this:

extraAttributes(['class' => 'logo-markdown'])

extraAttributes(['class' => 'logo-markdown'])

Gaming

Programming

Option to set MarkdownEditor background color