- What is jeffersongoncalves/filament-ace-editor-field?
- It is a Laravel package that adds an AceEditorInput form component to Filament. It brings the Ace code editor into Filament form schemas with syntax highlighting, configurable modes, themes, height, and placeholder support. The field stores plain text and works with Filament's normal form validation. It is not a full IDE and does not provide linting, IntelliSense, collaboration, or Git integration.
- How do I install filament-ace-editor-field in a Laravel Filament app?
- Install it with Composer using composer require jeffersongoncalves/filament-ace-editor-field:^2.0, then publish the config with php artisan vendor:publish --tag=filament-ace-editor-field-config. The package requires PHP 8.2 or higher. Check that your Filament version satisfies the Composer constraint before installing.
- Which Filament, Laravel, and PHP versions are supported?
- The README lists PHP 8.2 or higher and Filament 5.0, while the 2.1.0 release is described as the Filament v5 line with a tested CI matrix for PHP 8.2, 8.3, and 8.4 plus Laravel 11, 12, and 13. Composer constraints are the source of truth: the 1.x line targets Filament ^4.8 and the 2.x line targets Filament v5. Confirm that your panel satisfies the required Filament constraint, including ^5.3 where applicable, and pin an exact package version.
- How do I use AceEditorInput in a Filament form?
- Import JeffersonGoncalves\Filament\AceEditorField\Forms\Components\AceEditorInput and add it to your form schema. A typical field looks like AceEditorInput::make('description')->mode('html')->theme('monokai')->height('200px')->placeholder('Enter your description here')->required(). You can often replace an existing Textarea with this component while keeping the same field name and validation rules.
- How do I configure the Ace editor mode, theme, height, and placeholder?
- Use the fluent mode method to choose the syntax mode, such as html, php, javascript, json, css, or markdown, and use theme to select a theme such as monokai. Set height with a CSS unit, for example '200px', and use placeholder to show helper text when the field is empty. Project-wide defaults can be set in the published config file.
- How do I publish and configure the filament-ace-editor-field config file?
- Run php artisan vendor:publish --tag=filament-ace-editor-field-config to publish the package config. That file lets you set project-wide defaults for the editor instead of repeating options on every field. In 2.1.0, republish the config to pick up the updated Ace CDN default, and verify your internal asset mirror has the same Ace version before deploying if you self-host assets.
- Does AceEditorInput work with Filament validation and Livewire state?
- Yes. AceEditorInput extends Filament's form Field component, so it participates in Filament's normal Livewire state binding and validation flow. Rules such as required, max length, and custom validation still apply to the underlying text value. Syntax highlighting does not validate or sanitize the content, so add explicit rules for any user-supplied HTML or JavaScript.
- Can I self-host Ace assets for CSP, offline, or air-gapped environments?
- The package loads Ace through a configurable base URL, which defaults to a public CDN in 2.1.0. If your security policy restricts CDNs or you need offline operation, publish the config and point the base URL at a self-hosted Ace build. Check that the required Ace version, including 1.44.0 in 2.1.0, is available in your internal mirror before republishing the config.
- Is it safe to use AceEditorInput with user-supplied HTML or JavaScript?
- Syntax highlighting is not sanitization. Treat any user-supplied HTML, JavaScript, CSS, or PHP as untrusted and apply validation, output escaping, and explicit trust boundaries before rendering or executing it. The editor only provides an editing surface; your application remains responsible for authorization, validation, and safe output.
- How does filament-ace-editor-field compare with CodeMirror or Monaco, and is it well maintained?
- Ace is a good fit when you want a lightweight syntax-highlighted field inside a Filament form. CodeMirror or Monaco may be better if your roadmap requires linting, IntelliSense, collaboration, or deeper IDE features. The package has low adoption and a single maintainer, but 2.1.0 adds a Pest suite, a CI matrix, and Dependabot hygiene; the MIT license still allows vendoring or forking. Pin an exact version and assign someone to monitor Ace, CDN, and Filament compatibility.