← Back to Plugins
  • Code Field

Code Field

Plugin information

by Creagia • 10 stars

Field Form builder Editor

A CodeMirror powered code field with code autocompletion, light/dark modes, multiple languages, read-only mode and more.

Support

#code-field on Discord

Views

868

License

MIT

Documentation

Installation

You can install the package via composer:

composer require creagia/filament-code-field

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
,
]);