A Monaco Editor form field.

This package provides a Monaco editor field for FilamentPHP.

Demo

Installation

You can install the package via composer:

composer require abdelhamiderrahmouni/filament-monaco-editor

You can publish the config file with:

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

Optionally, you can publish the views using

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

This is the contents of the published config file:

return [
"general" => [
        "enable-preview" => true,
        "show-full-screen-toggle" => true,
        "show-placeholder" => true,
        "placeholder-text" => "Your code here...",
        "show-loader" => true,
        "font-size" => "15px",
        "line-numbers-min-chars" => true,
        "automatic-layout" => true,
        "default-theme" => "blackboard"
    ],
    "themes" => [
        "blackboard" => [
            "base" => "vs-dark",
            "inherit" => true,
            "rules" => [
                # long list of rules ... 
            ],
            "colors" => [
                "editor.foreground" => "#F8F8F8",
                "editor.background" => "#0C1021",
                "editor.selectionBackground" => "#253B76",
                "editor.lineHighlightBackground" => "#FFFFFF0F",
                "editorCursor.foreground" => "#FFFFFFA6",
                "editorWhitespace.foreground" => "#FFFFFF40"
            ]
        ]
    ],
];

Usage

You can use this field with minimal configuration like this:

MonacoEditor::make('content')
            ->language('php'),

You can change the theme of the editor by using the theme method:

->theme('blackboard') # themes should be defined in the config file in the themes array

Add Scripts and Styles to preview's head element

->previewHeadEndContent("<script src='https://cdn.tailwindcss.com'></script><script defer src='https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js'></script>"),

Add attributes to the preview's body element

->previewBodyAttributes([
    'class' => 'bg-red-500',
    'id' => 'preview-body'
]),

Add content to the start of the preview's body element

->previewBodyStartContent("<div class='bg-red-500'>"),

Add content to the end of the preview's body element

->previewBodyEndContent("</div>"),

You can Disable preview code functionality by method or in the config

->enablePreview(false)
# or
->disablePreview()

You can show/hide the full screen button by method or in the config

->showFullScreenButton(false)
# or
->hideFullScreenButton()

Show/Hide The loader

->showLoader(false)
# or
->hideLoader()

Show/Hide the placeholder

->showPlaceholder(false)
# or
->hidePlaceholder()

Customize placeholder's text

->placeholderText('Your placeholder text')

change the font-size of the editor

->fontSize('14px')

Customization

You can use your own theme by customizing the themes array in filament-monaco-editor.php config file:

"themes" => [
    "themeName" => [
        "base" => "vs-dark|vs-light",
        "inherit" => true|false,
        "rules" => [
           //... your rules
        ],
        "colors" => [
            // your colors, the following are an example...
            "editor.foreground" => "#F8F8F8",
            "editor.background" => "#0C1021",
            "editor.selectionBackground" => "#253B76",
            "editor.lineHighlightBackground" => "#FFFFFF0F",
            "editorCursor.foreground" => "#FFFFFFA6",
            "editorWhitespace.foreground" => "#FFFFFF40"
        ]
    ]
],

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

Thanks to PinesUI for the Monaco editor component and the DevDojo team for their dedication and contribution to open source projects.

License

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

abdelhamiderrahmouni / filament-monaco-editor

readme