Filament Ace Editor

Ace Editor implementation for Filament Form.

Requirements

• PHP 8.2+
• Laravel 11.28+

Version Compatibility

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.

Installation

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.

Usage

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

Available methods

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.

Publishing

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"

Configuration

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',
    ],

    ...
];

Supported Features

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.

Credits

• Rio Dewanto P
• All Contributors

License

The MIT License (MIT). Please see License File for more information.