F
Filament•2mo ago
gx

Control <p> wrapper element in RichEditor

What i'm trying to do have rich text content with bold and italic inside a heading What I'm doing I'm adding a RichEditor and selecting the desired options (bold, italic) in the toolbar. What I would expect An option to set the desired html wrapper element if something different then <p> is needed. Is there a way to achieve this easily? Thank you for your help.
9 Replies
Adam Holmes
Adam Holmes•2mo ago
Following. The sheer amount of <p> tags that get added to my content (which I'm then using to send emails) means that my spacing is alllll over the place
Dennis Koch
Dennis Koch•2mo ago
I think that needs quite some overwriting in TipTap What ouput are you guys getting?
Adam Holmes
Adam Holmes•2mo ago
I don't want to hijack OP's thread - but in my case, every line is a <p></p> and then every empty line is too. I'd rather just have <br>'s. Mostly because the editor has styles on the p tags, then when I display them on the screen there is different styles. And then when it finally goes via email, then the clients just do whatever they want I'm not sure if OP wants to change p to br or be able to add extra classes etc to the existing p tags
Dennis Koch
Dennis Koch•2mo ago
That's pretty much expected. You can use Shift + Enter for <br>. I think that pattern is quite common. Maybe add a hint for users.
frame
frame•2mo ago
And make sure the same styling is used in both places for wysiwyg (I'm guessing tailwind's prose)
Adam Holmes
Adam Holmes•2mo ago
The users would only ever want to use Shift + Enter and so it ideally would be a default. This is the tricky bit for me, as sending an email you're at the mercy of whatever client receives it
Dennis Koch
Dennis Koch•2mo ago
I think your usecase is a bit special and you should do some postprocessing.
gx
gxOP•2mo ago
to follow up on this, I used dehydrateStateUsing to remove the wrapping <p> tag before saving in the database. 
public static function getSchema(): array
    {
        return [
            RichEditor::make('title')
            ->dehydrateStateUsing(function ($state) {
                return preg_replace('/<\\/?p>/', '', $state);
            })
            ->toolbarButtons([
                'bold',
                'italic'
            ])
            ....
public static function getSchema(): array
    {
        return [
            RichEditor::make('title')
            ->dehydrateStateUsing(function ($state) {
                return preg_replace('/<\\/?p>/', '', $state);
            })
            ->toolbarButtons([
                'bold',
                'italic'
            ])
            ....
gx
gxOP•2mo ago

Did you find this page helpful?