Plugins
Ace Editor
An ACE editor field for Filament forms with syntax highlighting, themes, autocompletion and many more.
Kit
Developer Tool
Form Editor Field
Form Field
Dark theme support
Yes
Multi language support
Yes
Compatible with the latest version
Supported versions: 3.x - 4.x
Documentation
Version:

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.

Rio Dewanto P

Rio, an Indonesian freelance full-stack developer. Currently enjoying building and creating solutions with the Filament framework, and is eager to contribute to the community through the development of practical, helpful plugins.

2
Plugins
416
Stars
More from this author
Featured Plugins