phplaravellaravel-filamenttiptap

How do I change the size of awcodes TiptapEditor in Laravel Filament?


My problem

I'm looking to expand the field content to be atleast 2 columns wide and 2 columns in height. I'm looking to change the size of the content field in a RelationManager however I attempted the following things in a Resource as well with no result. The code I use for my DataRelationManager.php:

<?php

namespace App\Filament\Resources\OnderwerpResource\RelationManagers;

use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\RelationManagers\RelationManager;
use Filament\Tables;
use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;
use FilamentTiptapEditor\TiptapEditor;
use FilamentTiptapEditor\Enums\TiptapOutput;

class DataRelationManager extends RelationManager
{
    protected static string $relationship = 'Data';

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->label('Title')
                    ->required(),
                Forms\Components\Select::make('language_id')
                    ->label('Language')
                    ->options(
                        \App\Models\Language::pluck('name', 'id')->toArray()
                    )
                    ->required(),
                TiptapEditor::make('content')
                    ->label('Content')
                    ->required(),
            ]);
    }

    public function table(Table $table): Table
    {
        return $table
            ->columns([
                Tables\Columns\TextColumn::make('title')
                    ->searchable()
                    ->sortable(),
                Tables\Columns\TextColumn::make('language.name')
                    ->sortable(),
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }
}

What I've tried

All my attempts on changing the size of the content field have resulted in either errors or the size not changing.

The form with the unchanged size of the content

I tried using ->modalWidth()

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->modalWidth('7xl'),

But that resulted in the following error:

Method FilamentTiptapEditor\TiptapEditor::modalWidth does not exist.

I tried using ->maxContentWidth() Inside of the TiptapEditor using MaxWidth::Full

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->maxContentWidth(MaxWidth::Full),

Resulting in the error:

FilamentTiptapEditor\TiptapEditor::maxContentWidth(): Argument #1 ($width) must be of type Closure|string, Filament\Support\Enums\MaxWidth given, called in C:\Users\user\Documents\home\filament2\app\Filament\Resources\OnderwerpResource\RelationManagers\DataRelationManager.php on line 36

Which prompted me to change it to the string 'Full'

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->maxContentWidth('Full'),

Changing the parameter to a string resolved the error but did not change the size.

Using the ->maxContentWidth() outside of the TiptapEditor and on the $form resulted in an error.

    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\TextInput::make('title')
                    ->label('Title')
                    ->required(),
                Forms\Components\Select::make('language_id')
                    ->label('Language')
                    ->options(
                        \App\Models\Language::pluck('name', 'id')->toArray()
                    )
                    ->required(),
                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
            ])->maxContentWidth(MaxWidth::Full);
    }
Method Filament\Forms\Form::maxContentWidth does not exist.

I tried using ->columns() but that did not change the size either.

                TiptapEditor::make('content')
                    ->label('Content')
                    ->required()
                    ->columns(2),

Solution

  • I figured out how to solve my problem using ->columnSpan() for the width and ->extraInputAttributes() for the height:

                    TiptapEditor::make('content')
                        ->label('Content')
                        ->columnSpan(2)
                        ->extraInputAttributes([
                            'style' => 'height: 500px',
                        ])
                        ->required(),