Ace Editor implementation for Filament Form.
| Package Version | Filament Version | Status |
|---|---|---|
| 4.1.0 | 4.x | Latest ✨ |
| 1.x | 3.x | Stable ✅ |
Choose the package version that matches your Filament installation. We recommend using the latest compatible version for the best features and security updates.
You can install the package via composer:
composer require riodwanto/filament-ace-editor
The package will automatically detect your Filament version and install the compatible release.
use Riodwanto\FilamentAceEditor\AceEditor; public function form(Form $form): Form{ return $form ->schema([ ... AceEditor::make('code_editor') ->label('Code Editor') ->mode('php') ->theme('github') ->darkTheme('dracula') ->fontSize('14px') ->cursorStyle('smooth') ->softWrap('free') ->tabSize(4) ->useSoftTabs(true) ->addExtensions(['language_tools', 'beautify']) ->customCompletions([ 'php' => [ ['caption' => 'dd()', 'value' => 'dd(${1:variable});', 'meta' => 'Laravel debug helper'], ['caption' => 'collect()', 'value' => 'collect(${1:array});', 'meta' => 'Laravel collection'], ] ]), ]);}
| Method | Info |
|---|---|
| mode | change editor programming language |
| theme | default theme in light mode |
| darkTheme | default theme in dark mode |
| height | set editor height |
| disableDarkTheme | disable darkTheme, theme will be used as default |
| editorConfig | editor config will be initialize after ace loaded. (it is config that used in ace.config) |
| editorOptions | editor options used in ace.editor.options, you can set additional ace option here. |
| addExtensions | by default, not all options available in editorOptions. you must enable extension first with this method. |
| headerTitle | Editor tittle |
| fontSize | Set font size using string (px, rem, em) or integer |
| cursorStyle | Set cursor style: ace, slim, smooth, wide, smooth-slim |
| softWrap | Control text wrapping behavior: off, free, printMargin, textWidth |
| showGutter | Show/hide line numbers and breakpoints |
| showPrintMargin | Show/hide vertical print margin line |
| foldStyle | Set code folding style: manual, markbegin, markbeginend |
| tabSize | Set tab size for indentation |
| useSoftTabs | Use spaces instead of tabs for indentation |
All default values can be found in the Configuration section below.
You can publish the views using:
php artisan vendor:publish --tag="filament-ace-editor-views"
You can publish the config file with:
php artisan vendor:publish --tag="filament-ace-editor-config"
This is the contents of the published config file:
return [ ... 'base_url' => 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.3', 'file' => 'ace.js', 'editor_config' => [ 'useWorker' => false ], 'editor_options' => [ 'mode' => 'ace/mode/php', 'theme' => 'ace/theme/eclipse', 'enableBasicAutocompletion' => true, 'enableLiveAutocompletion' => true, 'liveAutocompletionDelay' => 0, 'liveAutocompletionThreshold' => 0, 'enableSnippets' => true, 'enableInlineAutocompletion' => true, 'showPrintMargin' => true, 'wrap' => 'off', 'animatedScroll' => false, 'fadeFoldWidgets' => false, 'displayIndentGuides' => false, 'highlightGutterLine' => false, 'showInvisibles' => false, ], 'dark_mode' => [ 'enable' => true, 'theme' => 'ace/theme/dracula', ], 'enabled_extensions' => [ 'beautify', 'language_tools', 'inline_autocomplete', 'rtl', 'statusbar', 'whitespace', 'searchbox', ], ...];
This package supports most of the powerful features from Ace Editor:
| Feature | Support |
|---|---|
| Syntax highlighting themes | ✅ Full |
| Automatic indent/outdent | ✅ Full |
| Huge document handling | ✅ Full |
| Search and replace | ✅ Full |
| Line wrapping | ✅ Full |
| Multiple cursors and selections | ✅ Full |
| Autocompletion | ✅ Full |
| Snippets | ✅ Full |
| Custom key bindings | ⚠️ Limited |
| Command line interface | ❌ Not supported |
Limited: Custom key bindings require additional configuration.
The MIT License (MIT). Please see License File for more information.