Issues MarkdownEditor
When I insert a long text with multiple sections (separated by a new empty line) it seems like it is rendered oin the frontend as a continuing text, e.g. the empty lines between the sections are not shown.
When I'm viewing it in the backend with Filament the new lines do show?
Any idea how this can be fixed?
Solution:Jump to solution
Might not be relavant, but make sure the surrounding div contains the "prose" class?
11 Replies
how are you rendering it on the front end?
Using Laravel Blade. I'm rendering it using <x-markdown> </x-markdown>. When I put text in bold (using MarkdownEditor in Filament), it does render OK on the frontend.
If you inspect the html is it using br or p?
Seems to be using <p></p> for each section
If you’re using tailwind on the front end then you’ll need to style the output. TW removes all browser defaults like spacing between paragraphs.
Solution
Might not be relavant, but make sure the surrounding div contains the "prose" class?
Tailwind's typography classes only kick in inside prose classes.
True. But this assumes that the front end is even using the typography plugin. If it is then yea, just wrap it in a Div with prose.
I just know I had all kinds of weird formatting issues when taking text entered on the backend with any kind of rich text in Filament and rendering it on the front end with {!! $foo !!}, until I added "prose" to the wrapper div.
Definitely. The output styling matters. That’s why the Tiptap editor plugin doesn’t have “frontend” styles and the native editors are no different. It can’t presume to know how the html needs to be displayed on output. And especially in the context of a form field where the styling needs to be different given that in field it has to have styling that needs to support it from an editing pov. When displaying outside the field it needs to have different styles applied, even to the same elements, because it’s no longer in an editing context. But yes, prose works if you are using prose on the non editing output. But prose isn’t a necessity. You just have to have styles applied to it one way or the other.
Many thanks all! <div class="prose"> indeed works perfectly!👍