Filament Ace Editor

Ace Editor implementation for Filament Form.

Installation

You can install the package via composer:

composer require riodwanto/filament-ace-editor

Usage

use Riodwanto\FilamentAceEditor\AceEditor;

public function form(Form $form): Form
{
    return $form
        ->schema([
            ...
            AceEditor::make('code-editor')
                ->mode('php')
                ->theme('github')
                ->darkTheme('dracula'),
        ])

}

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.

All default value can be see here

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"

config

This is the contents of the published config file:

return [
    ...

    // Initilization ace config
    'editor_config' => [
        'useWorker' => false
    ],

    // Editor options
    'editor_options' => [
        'mode' => 'ace/mode/php',
        'theme' => 'ace/theme/eclipse',
        'enableBasicAutocompletion' => true,
        'enableLiveAutocompletion' => true,
        'liveAutocompletionDelay' => 0,
        'liveAutocompletionThreshold' => 0,
        'enableSnippets' => true,
        'enableInlineAutocompletion' => true,
        'showPrintMargin' => false,
        'wrap' => 'free'
    ],

    'dark_mode' => [
        'enable' => true,
        'theme' => 'ace/theme/dracula',
    ],

    'enabled_extensions' => [
        'beautify',
        'language_tools',
        'inline_autocomplete',
    ],
    
    ...
];

Supported Ace Features

Feature
Themes	✅
Automatic indent and outdent	✅
Handles huge documents	✅
Search and replace	✅
Line wrapping	✅
An optional command line	❌
Multiple cursors and selections	✅
Key bindings	❌

Credits

• Rio Dewanto P
• All Contributors

License

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