Our amazing features...
', 'image' => null, ], ], ], [ 'type' => 'masonBrick', 'attrs' => [ 'id' => 'call-to-action', 'config' => [ 'heading' => 'Ready to start?', 'button_text' => 'Sign Up Now', 'button_url' => '/register', ], ], ], ]; // Database migration for content column Schema::create('pages', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('slug')->unique(); $table->longText('content')->nullable(); // Use longText for large content $table->timestamps(); }); ``` -------------------------------- ### Mason 0.x Database Schema Source: https://github.com/awcodes/mason/blob/3.x/UPGRADE.md Example of the JSON structure for storing Mason bricks in the database in version 0.x. ```json { "type":"masonBrick", "attrs":{ "identifier": "newsletter_signup", "path": "mason.newsletter-signup", "values": { "background_color":"primary", "heading":"Want product news and updates? Sign up for our newsletter." } } } ``` -------------------------------- ### MasonEntry Preview Layout Blade Template Source: https://github.com/awcodes/mason/blob/3.x/README.md Example Blade template for a `MasonEntry` component's preview layout. It includes necessary assets and includes the MasonEntry content rendering partial. ```bladeJust some random text for a paragraph
', 'image' => null, ] ) ->brick( id: 'section', config: [ 'background_color' => 'primary', 'text' => 'Just some random text for a paragraph
', 'image' => null, ] ) ->asJson(), ``` -------------------------------- ### Create a New Brick Source: https://github.com/awcodes/mason/blob/3.x/README.md Use the `make:mason-brick` Artisan command to generate a new brick class and its associated Blade templates. This command sets up the basic structure in the configured paths. ```bash php artisan make:mason-brick Section ``` -------------------------------- ### Define Custom Brick Collections in PHP Source: https://github.com/awcodes/mason/blob/3.x/README.md Create a static method to return an array of brick classes for reuse. This helps in organizing and assigning bricks to both the editor and entry fields. ```php class BrickCollection { public static function make(): array { return [ NewsletterSignup::class, Section::class, Cards::class, SupportCenter::class, ]; } } Mason::make('content') ->bricks(BrickCollection::make()) MasonEntry::make('content') ->bricks(BrickCollection::make()) ``` -------------------------------- ### Run Rector Refactoring Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Apply automated refactoring using Rector. ```bash composer refactor ``` -------------------------------- ### Generate New Brick Class Source: https://context7.com/awcodes/mason/llms.txt Use the Artisan command to scaffold a new brick class and its associated Blade view. You can specify a nested namespace and force overwrite existing files. ```bash php artisan make:mason-brick HeroBanner ``` ```bash php artisan make:mason-brick Marketing/CallToAction ``` ```bash php artisan make:mason-brick HeroBanner --force ``` -------------------------------- ### Create Static Bricks without Data or Forms in PHP Source: https://github.com/awcodes/mason/blob/3.x/README.md Implement static bricks by returning a view directly in `toHtml` and hiding the modal configuration using `modalHidden` in `configureBrickAction`. This adds the brick without user input. ```php public static function toHtml(array $config, ?array $data = null): ?string { return view('mason.static-brick'); } public static function configureBrickAction(Action $action): Action { return $action->modalHidden(); } ``` -------------------------------- ### Render Mason Content with Full API Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Utilize the full MasonRenderer API to convert stored JSON content to HTML. ```php // Full renderer API MasonRenderer::make($content)->bricks($bricks)->toHtml() ``` -------------------------------- ### Generate Test Content with Faker Source: https://context7.com/awcodes/mason/llms.txt Use the Faker class to programmatically build Mason brick structures for testing. Output the generated content as a JSON array, HTML, or plain text. ```php brick( id: 'hero-banner', config: [ 'title' => 'Welcome to Our Site', 'subtitle' => 'Discover amazing features', 'image' => 'heroes/test-image.jpg', 'cta_text' => 'Get Started', 'cta_url' => '/signup', 'theme' => 'dark', 'overlay' => true, ] ) ->brick( id: 'section', config: [ 'background_color' => 'white', 'text' => 'Lorem ipsum dolor sit amet.
', 'image' => null, ] ) ->brick( id: 'section', config: [ 'background_color' => 'primary', 'text' => 'Get in touch with our team.
', 'image' => 'sections/contact.jpg', ] ) ->asJson(); // Returns array structure for database // In a factory class PageFactory extends Factory { public function definition(): array { return [ 'title' => fake()->sentence(), 'slug' => fake()->slug(), 'content' => Faker::make() ->brick('hero-banner', [ 'title' => fake()->sentence(), 'subtitle' => fake()->paragraph(), 'theme' => fake()->randomElement(['light', 'dark']), ]) ->brick('section', [ 'background_color' => 'white', 'text' => fake()->paragraphs(3, true), ]) ->asJson(), ]; } } // Get as HTML for assertions $html = Faker::make() ->brick('section', ['text' => 'Test content
']) ->asHtml(); // Get as plain text $text = Faker::make() ->brick('section', ['text' => 'Test content
']) ->asText(); ``` -------------------------------- ### Mason 1.x Brick Class Structure Source: https://github.com/awcodes/mason/blob/3.x/UPGRADE.md Demonstrates the new class-based structure for custom Bricks in Mason 1.x, extending the `Awcodes\Mason\Brick` class. ```php use Awcodes\Mason\Brick; use Filament\Actions\Action; class Section extends Brick { public static function getId(): string { return 'section'; } public static function toHtml(array $config, array $data): ?string { return view('mason::bricks.section.index', $config)->render(); } public static function configureBrickAction(Action $action): Action { return $action ->slideOver() ->schema([ // ... ]); } } ``` -------------------------------- ### Mason Content Renderer Source: https://github.com/awcodes/mason/blob/3.x/README.md Utilize the `MasonRenderer` class for more granular control over content rendering. You can convert the content to HTML, unsafe HTML, an array, or plain text. ```php use Awcodes\Mason\Support\MasonRenderer; $renderer = MasonRenderer::make($content)->bricks(\App\Mason\BrickCollection::make()); $renderer->toHtml() $renderer->toUnsafeHtml(); $renderer->toArray(); $renderer->toText(); ``` -------------------------------- ### Run Single Test File Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Execute tests within a specific file. ```bash ./vendor/bin/pest tests/src/FieldTest.php ``` -------------------------------- ### Render Mason Content to HTML Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Use the helper function to render stored Mason JSON content to HTML. ```php // Helper function mason($content, $bricks)->toHtml() ``` -------------------------------- ### Enable Color Mode Toggle and Set Default in Mason Editor (PHP) Source: https://github.com/awcodes/mason/blob/3.x/README.md Add a color mode toggle button to the editor sidebar and set the initial default mode using `colorModeToggle` and `defaultColorMode` methods. The `defaultColorMode` sets the initial state, but user preferences are saved in local storage. ```php Mason::make('content') ->colorModeToggle() ->defaultColorMode('dark') ->bricks([...]) ``` -------------------------------- ### Define Reusable Brick Collections Source: https://context7.com/awcodes/mason/llms.txt Create static methods within a class to define reusable collections of bricks for different contexts like forms, entries, or frontend rendering. This ensures consistency and prevents repetition. ```php $config['title'] ?? '', 'subtitle' => $config['subtitle'] ?? '', 'image' => $config['image'] ?? null, 'cta_text' => $config['cta_text'] ?? null, 'cta_url' => $config['cta_url'] ?? null, 'theme' => $config['theme'] ?? 'light', 'overlay' => $config['overlay'] ?? false, ])->render(); } // Configure the edit form for this brick public static function configureBrickAction(Action $action): Action { return $action ->slideOver() // Open form in slide-over panel ->schema([ TextInput::make('title') ->required() ->maxLength(100), TextInput::make('subtitle') ->maxLength(200), FileUpload::make('image') ->image() ->directory('heroes'), Grid::make(2)->schema([ TextInput::make('cta_text') ->label('Button Text'), TextInput::make('cta_url') ->label('Button URL') ->url(), ]), Select::make('theme') ->options([ 'light' => 'Light', 'dark' => 'Dark', 'primary' => 'Primary', ]) ->default('light'), Toggle::make('overlay') ->label('Show dark overlay on image'), ]); } } ``` -------------------------------- ### Set Mason Field Preview Layout Source: https://github.com/awcodes/mason/blob/3.x/README.md Configure the preview layout for a Mason field to ensure consistent styling between the editor and the front end. This is useful when different fields require distinct layouts. ```php Mason::make('content') ->previewLayout('layouts.mason-preview') // your app's layout ->bricks([...]) ``` -------------------------------- ### Run Unit Tests Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Execute only unit tests with parallel execution enabled. ```bash composer test:unit ``` -------------------------------- ### Add Mason CSS to Theme Source: https://github.com/awcodes/mason/blob/3.x/README.md Import the plugin's CSS and Blade views into your custom Filament theme or app's CSS file. ```css @import '../../../../vendor/awcodes/mason/resources/css/plugin.css'; @source '../../../../vendor/awcodes/mason/resources/**/*.blade.php'; ``` -------------------------------- ### Add Mason CSS to Filament Theme Source: https://context7.com/awcodes/mason/llms.txt Import Mason's plugin CSS and Blade views into your Filament admin theme's CSS file. ```css @import '../../../../vendor/awcodes/mason/resources/css/plugin.css'; @source '../../../../vendor/awcodes/mason/resources/**/*.blade.php'; ``` -------------------------------- ### Check Code Style Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Check code style without applying automatic fixes. ```bash composer test:lint ``` -------------------------------- ### Mason Form Field Configuration Source: https://context7.com/awcodes/mason/llms.txt Configure the Mason form field in a Filament resource, defining available bricks, custom preview layouts, sidebar position, display options, sorting, editing behavior, color mode, and height. ```php schema([ Mason::make('content') ->bricks([ Section::class, HeroBrick::class, CardsBrick::class, TestimonialBrick::class, ]) // Custom preview layout with your app's styles ->previewLayout('layouts.mason-preview') // Position sidebar on left instead of right ->sidebarPosition(SidebarPosition::Start) // Display brick actions as grid instead of list ->displayActionsAsGrid() // Sort bricks alphabetically by label ->sortBricks('asc') // Enable double-click to edit bricks ->doubleClickToEdit() // Enable light/dark mode toggle ->colorModeToggle() ->defaultColorMode('light') // Custom height for the editor ->extraInputAttributes(['style' => 'min-height: 40rem;']) ->columnSpanFull(), ]); } } ``` -------------------------------- ### Brick Class Definition Source: https://github.com/awcodes/mason/blob/3.x/README.md Defines a custom brick class extending `Awcodes Mason Brick`. It includes methods for setting the ID, label, icon, rendering HTML content, and configuring the brick's schema for the editor. ```php use Awcodes\Mason\Brick; use Filament\Actions\Action; use Filament\Forms\Components\FileUpload; use Filament\Forms\Components\Radio; use Filament\Forms\Components\RichEditor; use Filament\Forms\Components\ToggleButtons; use Filament\Schemas\Components\Grid; use Filament\Schemas\Components\Section as FilamentSection; use Filament\Support\Icons\Heroicon; use Illuminate\Contracts\Support\Htmlable; use Illuminate\Support\HtmlString; use Throwable; class Section extends Brick { public static function getId(): string { return 'section'; } public static function getLabel(): string { return parent::getLabel(); } public static function getIcon(): string | Heroicon | Htmlable | null { return new HtmlString(''); } /** * @throws Throwable */ public static function toHtml(array $config, ?array $data = null): ?string { return view('mason::bricks.section.index', [ 'background_color' => $config['background_color'] ?? 'white', 'image' => $config['image'] ?? null, 'text' => $config['text'] ?? null, ])->render(); } public static function configureBrickAction(Action $action): Action { return $action ->slideOver() ->schema([ Radio::make('background_color'), FileUpload::make('image'), RichEditor::make('text'), ]); } } ``` -------------------------------- ### Run Specific Test Source: https://github.com/awcodes/mason/blob/3.x/CLAUDE.md Execute a test identified by its name filter. ```bash ./vendor/bin/pest --filter "test name" ``` -------------------------------- ### Mason Preview Layout Blade View Source: https://context7.com/awcodes/mason/llms.txt Use this Blade layout for the editor preview. It includes Mason's required styles and allows for custom CSS overrides. ```blade {{-- resources/views/layouts/mason-preview.blade.php --}}