Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abdelhamiderrahmouni/filament-monaco-editor
A Monaco Editor form field for FilamentPHP.
https://github.com/abdelhamiderrahmouni/filament-monaco-editor
filament-plugin filamentphp laravel
Last synced: 6 days ago
JSON representation
A Monaco Editor form field for FilamentPHP.
- Host: GitHub
- URL: https://github.com/abdelhamiderrahmouni/filament-monaco-editor
- Owner: abdelhamiderrahmouni
- License: mit
- Created: 2024-04-12T14:05:45.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T13:49:21.000Z (2 months ago)
- Last Synced: 2024-12-24T19:19:14.228Z (14 days ago)
- Topics: filament-plugin, filamentphp, laravel
- Language: PHP
- Homepage: https://filamentphp.com/plugins/abdelhamid-errahmouni-monaco-editor
- Size: 229 KB
- Stars: 11
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# A Monaco Editor form field.
[](https://packagist.org/packages/abdelhamiderrahmouni/filament-monaco-editor)
[](https://github.com/abdelhamiderrahmouni/filament-monaco-editor/actions?query=workflow%3Arun-tests+branch%3Amain)
[](https://github.com/abdelhamiderrahmouni/filament-monaco-editor/actions?query=workflow%3A"Fix+PHP+code+styling"+branch%3Amain)
[](https://packagist.org/packages/abdelhamiderrahmouni/filament-monaco-editor)
This package provides a Monaco editor field for [FilamentPHP](https://filamentphp.com/).
## Demo
## Installation
You can install the package via composer:
```bash
composer require abdelhamiderrahmouni/filament-monaco-editor
```
You can publish the config file with:
```bash
php artisan vendor:publish --tag="filament-monaco-editor-config"
```
Optionally, you can publish the views using
```bash
php artisan vendor:publish --tag="filament-monaco-editor-views"
```
This is the contents of the published config file:
```php
return [
"general" => [
"enable-preview" => true,
"show-full-screen-toggle" => true,
"show-placeholder" => true,
"placeholder-text" => "Your code here...",
"show-loader" => true,
"font-size" => "15px",
"line-numbers-min-chars" => true,
"automatic-layout" => true,
"default-theme" => "blackboard"
],
"themes" => [
"blackboard" => [
"base" => "vs-dark",
"inherit" => true,
"rules" => [
# long list of rules ...
],
"colors" => [
"editor.foreground" => "#F8F8F8",
"editor.background" => "#0C1021",
"editor.selectionBackground" => "#253B76",
"editor.lineHighlightBackground" => "#FFFFFF0F",
"editorCursor.foreground" => "#FFFFFFA6",
"editorWhitespace.foreground" => "#FFFFFF40"
]
]
],
];
```
## Usage
You can use this field with minimal configuration like this:
```php
MonacoEditor::make('content')
->language('php'),
```
You can change the theme of the editor by using the `theme` method:
```php
->theme('blackboard') # themes should be defined in the config file in the themes array
```
Add Scripts and Styles to preview's head element
```php
->previewHeadEndContent(""),
```
Add attributes to the preview's body element
```php
->previewBodyAttributes([
'class' => 'bg-red-500',
'id' => 'preview-body'
]),
```
Add content to the start of the preview's body element
```php
->previewBodyStartContent("
"),
```
Add content to the end of the preview's body element
```php
->previewBodyEndContent("
"),
```
You can Disable preview code functionality by method or in the config
```php
->enablePreview(false)
# or
->disablePreview()
```
You can show/hide the full screen button by method or in the config
```php
->showFullScreenButton(false)
# or
->hideFullScreenButton()
```
Show/Hide The loader
```php
->showLoader(false)
# or
->hideLoader()
```
Show/Hide the placeholder
```php
->showPlaceholder(false)
# or
->hidePlaceholder()
```
Customize placeholder's text
```php
->placeholderText('Your placeholder text')
```
change the font-size of the editor
```php
->fontSize('14px')
```
## Customization
You can use your own theme by customizing the themes array in `filament-monaco-editor.php` config file:
```php
"themes" => [
"themeName" => [
"base" => "vs-dark|vs-light",
"inherit" => true|false,
"rules" => [
//... your rules
],
"colors" => [
// your colors, the following are an example...
"editor.foreground" => "#F8F8F8",
"editor.background" => "#0C1021",
"editor.selectionBackground" => "#253B76",
"editor.lineHighlightBackground" => "#FFFFFF0F",
"editorCursor.foreground" => "#FFFFFFA6",
"editorWhitespace.foreground" => "#FFFFFF40"
]
]
],
```
## Testing
```bash
composer test
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
Thanks to [PinesUI](https://devdojo.com/pines/docs/monaco-editor) for the Monaco editor component
and the [DevDojo](https://devdojo.com/) team for their dedication and contribution to open source projects.
- [Abdelhamid Errahmouni](https://github.com/abdelhamiderrahmouni)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.