README

Filament v5 form field integration for Monaco Editor, including dedicated Blade syntax highlighting.

Compatibility

PHP ^8.2
Filament 5.x

Installation

composer require chrisreedio/filament-monaco-editor

Run the package build to generate frontend assets:

cd vendor/chrisreedio/filament-monaco-editor
npm install
npm run build

Publish package config and views (optional):

php artisan vendor:publish --tag="filament-monaco-editor-config"
php artisan vendor:publish --tag="filament-monaco-editor-views"
php artisan filament:assets

Usage

Use the field directly in your form schema:

use ChrisReedIO\MonacoEditor\Forms\Components\MonacoCodeEditor;

MonacoCodeEditor::make('template')
    ->language('blade')
    ->theme('vs-dark')
    ->height('24rem')
    ->options([
        'tabSize' => 2,
        'insertSpaces' => true,
    ]);

Blade, PHP, and custom heights:

MonacoCodeEditor::make('blade_view')
    ->language('blade')
    ->theme('vs-dark');

MonacoCodeEditor::make('php_code')
    ->language('php')
    ->theme('vs-light')
    ->minHeight(320)
    ->readonly();

You can also use the package entrypoint facade for concise creation:

use MonacoEditor;

MonacoEditor::blade('blade_view')->height('20rem');
MonacoEditor::php('php_payload')->readonly();

Fluent API

language(string $language)
theme(string $theme)
minHeight(string|int $height) / height(string|int $height)
readonly(bool $condition = true)
options(array $options) (merged into the final Monaco options)
getConfig() / getMonacoConfig() for Alpine payload

Configuration

Publish and customize config/monaco-editor.php:

return [
    'default_language' => 'blade',
    'default_theme' => 'vs-dark',
    'default_min_height' => '16rem',
    'defaults' => [
        'fontSize' => 14,
        'lineNumbers' => 'on',
        'scrollBeyondLastLine' => false,
        'minimap' => ['enabled' => false],
    ],
    'blade' => [
        'keywords' => [
            'if', 'elseif', 'else', 'endif', 'foreach', 'endforeach',
            'for', 'endfor', 'while', 'endwhile', 'php', 'endphp', 'csrf',
            'method', 'can', 'endcan', 'auth', 'guest', 'unless', 'endunless',
        ],
        'directives' => [
            'if',
            'elseif',
            'else',
            'endif',
            'foreach',
            'endforeach',
            'section',
            'endsection',
        ],
        'patterns' => [
            ['/\$[A-Za-z_][A-Za-z0-9_]*/', 'variable'],
        ],
        'delimiters' => [
            'output' => ['{{', '}}'],
            'raw' => ['{!!', '!!}'],
            'comment' => ['{{--', '--}}'],
        ],
    ],
];

Blade highlighting

blade language is registered only when language('blade') is used.
Tokens include output/raw/comment delimiters and directives (@if, @foreach, etc.).
You can add custom syntax patterns via blade.patterns.

Build artifacts consumed by Filament

resources/dist/components/monaco-code-editor.js
resources/dist/monaco-code-editor.css

The package service provider wires these assets through Filament Asset registration and script data.

Development

npm run build
composer test

Credits

Chris Reed
Inspired by the broader Monaco ecosystem

License

This package is released under the MIT license.

chrisreedio / filament-monaco-editor

Maintainers

Package info

Fund package maintenance!

Statistics

Security