creagia/filament-code-field

A Filamentphp input field to edit or view code data.

3.0.2 2024-10-31 09:32 UTC

Requires

• php: ^8.2
• filament/filament: ^3.2
• illuminate/contracts: ^9.0||^10.0||^11.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• larastan/larastan: ^2.0.1
• laravel/pint: ^1.0
• nunomaduro/collision: ^6.0||^7.0
• orchestra/testbench: ^7.0||^8.0
• pestphp/pest: ^2.34.4
• pestphp/pest-plugin-laravel: ^2.3.0
• pestphp/pest-plugin-livewire: ^2.1.0
• phpstan/extension-installer: ^1.1
• phpstan/phpstan-deprecation-rules: ^1.0
• phpstan/phpstan-phpunit: ^1.0
• phpunit/phpunit: ^9.5||^10.0||^11.0
• spatie/laravel-ray: ^1.26

MIT

• Creagia

• laravel
• code editor
• filament
• creagia
• filament-code-field
• filament field

README

A CodeMirror powered code field for the Filamentphp admin panel and form builder.

With code autocompletion, light/dark modes, multiple languages, read-only mode and more.

Check screenshots and read more about the package in our blog post.

Installation

Latest version of the package requires Filament 3 and Laravel 11.

You can install the package via composer:

composer require creagia/filament-code-field

⚠️ Use version 2.x.x for Filament 3 and Laravel 10 support ⚠️

composer require "creagia/filament-code-field:^2.0.0"

⚠️ Use version 1.x.x for Filament 2 support ⚠️

composer require "creagia/filament-code-field:^1.0.0"

Usage

Creating a code field is straightforward, just instantiate the CodeField class for the desired property.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('my_json'),
        // other fields
    ]);

Choosing another language

By default, a JSON field will be created.

If you want to create a field for another supported language, you can do so with the setLanguage() and helper methods.

Supported languages: JSON, PHP, HTML, XML and JavaScript (JS).

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('js_code')
            ->setLanguage(CodeField::JS),
            // or
            ->jsField()
    ]);

Disabling code completion

By default, the field comes with code completion/suggestions enabled.

For disabling this feature, use the disableAutocompletion().

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('js_code')
            ->htmlField()
            ->disableAutocompletion(),
    ]);

Line numbers

Line numbers can be enabled using the withLineNumbers() method.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->withLineNumbers(),
    ]);

Read-only mode

Adding the Filamentphp disabled() method will make the code field read-only.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->disabled(),
    ]);

Filamentphp methods

Of course, the code field extends the Filamentphp field class, and you can use all the usual methods such as label().

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->label('Your JSON data')
            ->hint('Top right corner info')
            ->helper('More info after the text field')
            // more methods
            ,
    ]);