riodwanto/filament-ace-editor

An ACE editor field for Filament forms with syntax highlighting, themes, and autocompletion.

Installs: 56 793

Dependents: 6

Suggesters: 0

Security: 0

Stars: 21

Watchers: 1

Forks: 13

Open Issues: 4

Language:JavaScript

Type:filament-plugin

pkg:composer/riodwanto/filament-ace-editor

4.1.0 2025-11-27 01:15 UTC

This package is auto-updated.

Last update: 2025-12-01 06:29:37 UTC


README

Latest Version on Packagist Total Downloads

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.

Buy Me A Coffee

Credits

License

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