CodeMirror Editor plugin screenshot
Dark mode ready
No multilingual support
No v5.x support

CodeMirror Editor by DotSwan

Community

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

Tags: Forms Form Field
Supported versions:
3.x
DotSwan avatar Author: DotSwan

Package health

Automated checks of this plugin's Composer package

70 / 100
Security 68
Maintenance 57
Ecosystem 100
15 checks
Third-party plugin. This is built by the community, not the Filament team. Filament does not review, endorse, or vet the security of plugins outside the filament/ namespace. Review the source and install at your own risk. Found malware or an unresolved security issue the author won't address? Report it .
Powered by Plumb Last scanned 1 month ago

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

For Filament v3:

composer require dotswan/filament-code-editor:"^1.1.4"

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