Filament Code Editor

Introduction

The Filament Code Editor package enhances Filament with a specialized field type, allowing seamless code editing powered by the CodeMirror JavaScript library within Filament components. This integration provides users with a dedicated environment for editing various code languages such as CSS, HTML, JavaScript, JSON, and PHP directly within Filament forms.

• Key Features:
  • Integration of the CodeMirror JavaScript library into Filament components.
  • Support for multiple code languages including CSS, HTML, JavaScript, JSON, and PHP.
  • Effortless editing of code within the familiar Filament interface.

Installation

To integrate the Filament Code Editor package into your project, use Composer:

composer require dotswan/filament-code-editor

Basic Usage

To implement the code editor field within Filament forms, use the CodeEditor field type:

use Dotswan\FilamentCodeEditor\Fields\CodeEditor;

CodeEditor::make('codes')
    // Additional configuration goes here, if needed
    ->id('unique_field_id')
    ->minHeight(768)
    ->isReadOnly(true)
    ->showCopyButton(true)
    ->darkModeTheme('gruvbox-dark')
    ->lightModeTheme('basic-light')
    ->columnSpanFull(),

Theme values:

• basic-light
• basic-dark
• solarized-dark
• solarized-light
• material-dark
• nord
• gruvbox-light
• gruvbox-dark

Supported Languages

The Filament Code Editor supports the following languages:

• CSS
• HTML
• JavaScript
• JSON
• PHP

Customize and manage code for these languages effortlessly within your Filament forms.

License

This package is distributed under the MIT License.

Security

Security is a priority for us. If you encounter any security-related issues or vulnerabilities, please report them via our GitHub issue tracker. For direct communication, reach out to [email protected].

Contribution

Contributions are welcome and valued. Enhancements, suggestions, and bug reports help improve this package for everyone. Here's how you can contribute:

1. Fork the Project
2. Create a Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Thank you for considering contributing to the Filament Code Editor!