Skip to content

Supercharge Filament with CodeMirror! Effortlessly edit CSS, HTML, JS, JSON, PHP in Filament forms.

License

Notifications You must be signed in to change notification settings

dotswan/filament-code-editor

Repository files navigation

Filament Code Editor

Latest Version on Packagist Total Downloads Software License

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!

About

Supercharge Filament with CodeMirror! Effortlessly edit CSS, HTML, JS, JSON, PHP in Filament forms.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •