Plugins
CodeMirror Editor
Supercharge Filament with CodeMirror! Effortlessly edit CSS, HTML, JS, JSON, PHP in Filament forms.
Form Builder
Form Field
Dark theme support
Yes
Multi language support
No
Compatible with the latest version
Supported versions: 3.x
Documentation

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 tech@dotswan.com.

#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!

DotSwan

At Dotswan, we excel in transforming visionary ideas into reality, offering comprehensive services from IT solutions to DevOps, and specializing in creating highly responsive websites and scalable mobile apps. Our team of experts ensures top-tier user experience, security, and innovative designs.

4
Plugins
173
Stars
More from this author
Featured Plugins