CodeMirror Editor
Supercharge Filament with CodeMirror! Effortlessly edit CSS, HTML, JS, JSON, PHP in Filament forms.
Author:
DotSwan
Documentation
#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:
- Fork the Project
- Create a Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Thank you for considering contributing to the Filament Code Editor!
The author
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.
From the same author
Map Picker
A field designed to simplify the process of choosing a location on a map and obtaining its geo-coordinates.
Author:
DotSwan
Grapes JS
Grapesjs field type for visual HTML editing. Drag-and-drop functionality to seamlessly design.
Author:
DotSwan
Laravel Pulse
Enhance your Filament dashboard with comprehensive monitoring widgets.
Author:
DotSwan
Featured Plugins
A selection of plugins curated by the Filament team
Custom Dashboards
Let your users build and share their own dashboards with a drag-and-drop interface. Define your data sources in PHP and let them do the rest.
Filament
Data Lens
Advanced Data Visualization for Laravel Filament - a premium reporting solution enabling custom column creation, sophisticated filtering, and enterprise-grade data insights within admin panels.
Padmission
Custom Fields
Eliminate custom field migrations forever. Let your users create and manage form fields directly in Filament admin panels with 20+ built-in field types, validation, and zero database changes.
Relaticle