mirror of
https://github.com/pelican-dev/panel.git
synced 2025-05-20 11:04:45 +02:00
Add Monaco
Known issues... Changing themes does not reload editor, F5 required. Editing a variable/docker images clears code box render, not sure how to fix this? reload on view?
This commit is contained in:
notCharles
parent
b70ab0e6cc
commit
b7c0829af9
@ -3,6 +3,7 @@
|
||||
namespace App\Filament\Resources;
|
||||
|
||||
use App\Filament\Resources\EggResource\Pages;
|
||||
use AbdelhamidErrahmouni\FilamentMonacoEditor\MonacoEditor;
|
||||
use App\Models\Egg;
|
||||
use Filament\Forms;
|
||||
use Filament\Forms\Form;
|
||||
@ -98,7 +99,6 @@ class EggResource extends Resource
|
||||
Forms\Components\Tabs\Tab::make('Install Script')
|
||||
->columns(3)
|
||||
->schema([
|
||||
Forms\Components\Textarea::make('script_install')->rows(20)->columnSpanFull(),
|
||||
|
||||
Forms\Components\Select::make('copy_script_from')
|
||||
->placeholder('None')
|
||||
@ -113,9 +113,15 @@ class EggResource extends Resource
|
||||
->required()
|
||||
->maxLength(191)
|
||||
->default('ash'),
|
||||
|
||||
MonacoEditor::make('script_install')
|
||||
->columnSpanFull()
|
||||
->fontSize('16px')
|
||||
->language('shell')
|
||||
->view('filament.plugins.monaco-editor'),
|
||||
]),
|
||||
|
||||
])->columnSpanFull(),
|
||||
])->columnSpanFull()->persistTabInQueryString(),
|
||||
|
||||
// Forms\Components\TagsInput::make('features'),
|
||||
// Forms\Components\TagsInput::make('file_denylist')->placeholder('new-file.txt'),
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"ext-pdo_mysql": "*",
|
||||
"ext-posix": "*",
|
||||
"ext-zip": "*",
|
||||
"abdelhamiderrahmouni/filament-monaco-editor": "^0.2.0",
|
||||
"aws/aws-sdk-php": "~3.288.1",
|
||||
"doctrine/dbal": "~3.6.0",
|
||||
"filament/filament": "^3.2",
|
||||
|
||||
88
composer.lock
generated
88
composer.lock
generated
@ -4,8 +4,92 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "bf147fbbb2f57777d6c6b137bc61bcda",
|
||||
"content-hash": "456a20415d738b53ce5f39676f71cd51",
|
||||
"packages": [
|
||||
{
|
||||
"name": "abdelhamiderrahmouni/filament-monaco-editor",
|
||||
"version": "v0.2.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/abdelhamiderrahmouni/filament-monaco-editor.git",
|
||||
"reference": "30ff5be60a8a4a3302a2d1dceb373e07f06f4e47"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/abdelhamiderrahmouni/filament-monaco-editor/zipball/30ff5be60a8a4a3302a2d1dceb373e07f06f4e47",
|
||||
"reference": "30ff5be60a8a4a3302a2d1dceb373e07f06f4e47",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"filament/forms": "^3.0",
|
||||
"php": "^8.1",
|
||||
"spatie/laravel-package-tools": "^1.15.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"laravel/pint": "^1.0",
|
||||
"nunomaduro/collision": "^7.9",
|
||||
"nunomaduro/larastan": "^2.0.1",
|
||||
"orchestra/testbench": "^8.0",
|
||||
"pestphp/pest": "^2.1",
|
||||
"pestphp/pest-plugin-arch": "^2.0",
|
||||
"pestphp/pest-plugin-laravel": "^2.0",
|
||||
"phpstan/extension-installer": "^1.1",
|
||||
"phpstan/phpstan-deprecation-rules": "^1.0",
|
||||
"phpstan/phpstan-phpunit": "^1.0",
|
||||
"spatie/laravel-ray": "^1.26"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"AbdelhamidErrahmouni\\FilamentMonacoEditor\\MonacoEditorServiceProvider"
|
||||
],
|
||||
"aliases": {
|
||||
"MonacoEditor": "AbdelhamidErrahmouni\\FilamentMonacoEditor\\Facades\\MonacoEditor"
|
||||
}
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"AbdelhamidErrahmouni\\FilamentMonacoEditor\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Abdelhamid Errahmouni",
|
||||
"email": "abdelhamid.errahmouni@gmail.com",
|
||||
"role": "Developer"
|
||||
}
|
||||
],
|
||||
"description": "A monaco editor form field for filamentphp.",
|
||||
"homepage": "https://github.com/abdelhamiderrahmouni/filament-monaco-editor",
|
||||
"keywords": [
|
||||
"Abdelhamid Errahmouni",
|
||||
"Monaco",
|
||||
"code editor",
|
||||
"filament monaco code editor",
|
||||
"filament monaco editor",
|
||||
"filamentphp",
|
||||
"laravel",
|
||||
"monaco editor",
|
||||
"php"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/abdelhamiderrahmouni/filament-monaco-editor/issues",
|
||||
"source": "https://github.com/abdelhamiderrahmouni/filament-monaco-editor"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://github.com/AbdelhamidErrahmouni",
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2024-04-12T17:46:17+00:00"
|
||||
},
|
||||
{
|
||||
"name": "anourvalar/eloquent-serialize",
|
||||
"version": "1.2.22",
|
||||
@ -12734,5 +12818,5 @@
|
||||
"ext-zip": "*"
|
||||
},
|
||||
"platform-dev": [],
|
||||
"plugin-api-version": "2.6.0"
|
||||
"plugin-api-version": "2.3.0"
|
||||
}
|
||||
|
||||
270
config/filament-monaco-editor.php
Normal file
270
config/filament-monaco-editor.php
Normal file
@ -0,0 +1,270 @@
|
||||
<?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' => 'iPlastic',
|
||||
],
|
||||
'themes' => [
|
||||
'blackboard' => [
|
||||
'base' => 'vs-dark',
|
||||
'inherit' => true,
|
||||
'rules' => [
|
||||
[
|
||||
'background' => '0C1021',
|
||||
'token' => '',
|
||||
],
|
||||
[
|
||||
'foreground' => 'aeaeae',
|
||||
'token' => 'comment',
|
||||
],
|
||||
[
|
||||
'foreground' => 'd8fa3c',
|
||||
'token' => 'constant',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff6400',
|
||||
'token' => 'entity',
|
||||
],
|
||||
[
|
||||
'foreground' => 'fbde2d',
|
||||
'token' => 'keyword',
|
||||
],
|
||||
[
|
||||
'foreground' => 'fbde2d',
|
||||
'token' => 'storage',
|
||||
],
|
||||
[
|
||||
'foreground' => '61ce3c',
|
||||
'token' => 'string',
|
||||
],
|
||||
[
|
||||
'foreground' => '61ce3c',
|
||||
'token' => 'meta.verbatim',
|
||||
],
|
||||
[
|
||||
'foreground' => '8da6ce',
|
||||
'token' => 'support',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ab2a1d',
|
||||
'fontStyle' => 'italic',
|
||||
'token' => 'invalid.deprecated',
|
||||
],
|
||||
[
|
||||
'foreground' => 'f8f8f8',
|
||||
'background' => '9d1e15',
|
||||
'token' => 'invalid.illegal',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff6400',
|
||||
'fontStyle' => 'italic',
|
||||
'token' => 'entity.other.inherited-class',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff6400',
|
||||
'token' => 'string constant.other.placeholder',
|
||||
],
|
||||
[
|
||||
'foreground' => 'becde6',
|
||||
'token' => 'meta.function-call.py',
|
||||
],
|
||||
[
|
||||
'foreground' => '7f90aa',
|
||||
'token' => 'meta.tag',
|
||||
],
|
||||
[
|
||||
'foreground' => '7f90aa',
|
||||
'token' => 'meta.tag entity',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ffffff',
|
||||
'token' => 'entity.name.section',
|
||||
],
|
||||
[
|
||||
'foreground' => 'd5e0f3',
|
||||
'token' => 'keyword.type.variant',
|
||||
],
|
||||
[
|
||||
'foreground' => 'f8f8f8',
|
||||
'token' => 'source.ocaml keyword.operator.symbol',
|
||||
],
|
||||
[
|
||||
'foreground' => '8da6ce',
|
||||
'token' => 'source.ocaml keyword.operator.symbol.infix',
|
||||
],
|
||||
[
|
||||
'foreground' => '8da6ce',
|
||||
'token' => 'source.ocaml keyword.operator.symbol.prefix',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'underline',
|
||||
'token' => 'source.ocaml keyword.operator.symbol.infix.floating-point',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'underline',
|
||||
'token' => 'source.ocaml keyword.operator.symbol.prefix.floating-point',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'underline',
|
||||
'token' => 'source.ocaml constant.numeric.floating-point',
|
||||
],
|
||||
[
|
||||
'background' => 'ffffff08',
|
||||
'token' => 'text.tex.latex meta.function.environment',
|
||||
],
|
||||
[
|
||||
'background' => '7a96fa08',
|
||||
'token' => 'text.tex.latex meta.function.environment meta.function.environment',
|
||||
],
|
||||
[
|
||||
'foreground' => 'fbde2d',
|
||||
'token' => 'text.tex.latex support.function',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ffffff',
|
||||
'token' => 'source.plist string.unquoted',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ffffff',
|
||||
'token' => 'source.plist keyword.operator',
|
||||
],
|
||||
],
|
||||
'colors' => [
|
||||
'editor.foreground' => '#F8F8F8',
|
||||
'editor.background' => '#0C1021',
|
||||
'editor.selectionBackground' => '#253B76',
|
||||
'editor.lineHighlightBackground' => '#FFFFFF0F',
|
||||
'editorCursor.foreground' => '#FFFFFFA6',
|
||||
'editorWhitespace.foreground' => '#FFFFFF40',
|
||||
],
|
||||
],
|
||||
'iPlastic' => [
|
||||
'base' => 'vs',
|
||||
'inherit' => true,
|
||||
'rules' => [
|
||||
[
|
||||
'background' => 'EEEEEEEB',
|
||||
'token' => '',
|
||||
],
|
||||
[
|
||||
'foreground' => '009933',
|
||||
'token' => 'string',
|
||||
],
|
||||
[
|
||||
'foreground' => '0066ff',
|
||||
'token' => 'constant.numeric',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff0080',
|
||||
'token' => 'string.regexp',
|
||||
],
|
||||
[
|
||||
'foreground' => '0000ff',
|
||||
'token' => 'keyword',
|
||||
],
|
||||
[
|
||||
'foreground' => '9700cc',
|
||||
'token' => 'constant.language',
|
||||
],
|
||||
[
|
||||
'foreground' => '990000',
|
||||
'token' => 'support.class.exception',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff8000',
|
||||
'token' => 'entity.name.function',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'bold underline',
|
||||
'token' => 'entity.name.type',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'italic',
|
||||
'token' => 'variable.parameter',
|
||||
],
|
||||
[
|
||||
'foreground' => '0066ff',
|
||||
'fontStyle' => 'italic',
|
||||
'token' => 'comment',
|
||||
],
|
||||
[
|
||||
'foreground' => 'ff0000',
|
||||
'background' => 'e71a114d',
|
||||
'token' => 'invalid',
|
||||
],
|
||||
[
|
||||
'background' => 'e71a1100',
|
||||
'token' => 'invalid.deprecated.trailing-whitespace',
|
||||
],
|
||||
[
|
||||
'foreground' => '000000',
|
||||
'background' => 'fafafafc',
|
||||
'token' => 'text source',
|
||||
],
|
||||
[
|
||||
'foreground' => '0033cc',
|
||||
'token' => 'meta.tag',
|
||||
],
|
||||
[
|
||||
'foreground' => '0033cc',
|
||||
'token' => 'declaration.tag',
|
||||
],
|
||||
[
|
||||
'foreground' => '6782d3',
|
||||
'token' => 'constant',
|
||||
],
|
||||
[
|
||||
'foreground' => '6782d3',
|
||||
'token' => 'support.constant',
|
||||
],
|
||||
[
|
||||
'foreground' => '3333ff',
|
||||
'fontStyle' => 'bold',
|
||||
'token' => 'support',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'bold',
|
||||
'token' => 'storage',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'bold underline',
|
||||
'token' => 'entity.name.section',
|
||||
],
|
||||
[
|
||||
'foreground' => '000000',
|
||||
'fontStyle' => 'bold',
|
||||
'token' => 'entity.name.function.frame',
|
||||
],
|
||||
[
|
||||
'foreground' => '333333',
|
||||
'token' => 'meta.tag.preprocessor.xml',
|
||||
],
|
||||
[
|
||||
'foreground' => '3366cc',
|
||||
'fontStyle' => 'italic',
|
||||
'token' => 'entity.other.attribute-name',
|
||||
],
|
||||
[
|
||||
'fontStyle' => 'bold',
|
||||
'token' => 'entity.name.tag',
|
||||
],
|
||||
],
|
||||
'colors' => [
|
||||
'editor.foreground' => '#000000',
|
||||
'editor.background' => '#EEEEEEEB',
|
||||
'editor.selectionBackground' => '#BAD6FD',
|
||||
'editor.lineHighlightBackground' => '#0000001A',
|
||||
'editorCursor.foreground' => '#000000',
|
||||
'editorWhitespace.foreground' => '#B3B3B3F4',
|
||||
],
|
||||
],
|
||||
],
|
||||
];
|
||||
114
resources/views/filament/plugins/monaco-editor.blade.php
Normal file
114
resources/views/filament/plugins/monaco-editor.blade.php
Normal file
@ -0,0 +1,114 @@
|
||||
<x-dynamic-component :component="$getFieldWrapperView()" :field="$field" class="overflow-hidden">
|
||||
|
||||
<div x-data="{
|
||||
monacoContent: $wire.$entangle('{{ $getStatePath() }}'),
|
||||
previewContent: '',
|
||||
fullScreenModeEnabled: false,
|
||||
showPreview: false,
|
||||
monacoLanguage: '{{ $getLanguage() }}',
|
||||
monacoPlaceholder: {{ (int) $getShowPlaceholder() }},
|
||||
monacoPlaceholderText: '{{ $getPlaceholderText() }}',
|
||||
monacoLoader: {{ (int) $getShowLoader() }},
|
||||
monacoFontSize: '{{ $getFontSize() }}',
|
||||
lineNumbersMinChars: {{ $getLineNumbersMinChars() }},
|
||||
automaticLayout: {{ (int) $getAutomaticLayout() }},
|
||||
monacoId: $id('monaco-editor'),
|
||||
|
||||
monacoEditor(editor){
|
||||
editor.onDidChangeModelContent((e) => {
|
||||
this.monacoContent = editor.getValue();
|
||||
this.updatePlaceholder(editor.getValue());
|
||||
});
|
||||
|
||||
editor.onDidBlurEditorWidget(() => {
|
||||
this.updatePlaceholder(editor.getValue());
|
||||
});
|
||||
|
||||
editor.onDidFocusEditorWidget(() => {
|
||||
this.updatePlaceholder(editor.getValue());
|
||||
});
|
||||
},
|
||||
|
||||
updatePlaceholder: function(value) {
|
||||
if (value == '') {
|
||||
this.monacoPlaceholder = true;
|
||||
return;
|
||||
}
|
||||
this.monacoPlaceholder = false;
|
||||
},
|
||||
|
||||
monacoEditorFocus(){
|
||||
document.getElementById(this.monacoId).dispatchEvent(
|
||||
new CustomEvent('monaco-editor-focused', { monacoId: this.monacoId })
|
||||
);
|
||||
},
|
||||
|
||||
monacoEditorAddLoaderScriptToHead() {
|
||||
script = document.createElement('script');
|
||||
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/loader.min.js';
|
||||
document.head.appendChild(script);
|
||||
},
|
||||
|
||||
}" x-init="
|
||||
$el.style.height = '500px';
|
||||
$watch('fullScreenModeEnabled', value => {
|
||||
if (value) {
|
||||
$el.style.height = '100vh';
|
||||
} else {
|
||||
$el.style.height = '500px';
|
||||
}
|
||||
});
|
||||
|
||||
if(typeof _amdLoaderGlobal == 'undefined'){
|
||||
monacoEditorAddLoaderScriptToHead();
|
||||
}
|
||||
|
||||
monacoLoaderInterval = setInterval(() => {
|
||||
if(typeof _amdLoaderGlobal !== 'undefined'){
|
||||
|
||||
// Based on https://jsfiddle.net/developit/bwgkr6uq/ which works without needing service worker. Provided by loader.min.js.
|
||||
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs' }});
|
||||
let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.39.0/min/vs/base/worker/workerMain.min.js');`], { type: 'text/javascript' }));
|
||||
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
|
||||
|
||||
require(['vs/editor/editor.main'], () => {
|
||||
|
||||
monaco.editor.defineTheme('custom', {{ $editorTheme() }});
|
||||
document.getElementById(monacoId).editor = monaco.editor.create($refs.monacoEditorElement, {
|
||||
value: monacoContent,
|
||||
theme: localStorage.getItem('theme') === 'light' ? 'iPlastic' : 'custom',
|
||||
fontSize: monacoFontSize,
|
||||
lineNumbersMinChars: lineNumbersMinChars,
|
||||
automaticLayout: automaticLayout,
|
||||
language: monacoLanguage,
|
||||
scrollbar: {
|
||||
horizontal: 'auto',
|
||||
horizontalScrollbarSize: 15
|
||||
},
|
||||
|
||||
});
|
||||
monacoEditor(document.getElementById(monacoId).editor);
|
||||
document.getElementById(monacoId).addEventListener('monaco-editor-focused', (event) => {
|
||||
document.getElementById(monacoId).editor.focus();
|
||||
});
|
||||
updatePlaceholder(document.getElementById(monacoId).editor.getValue());
|
||||
});
|
||||
|
||||
clearInterval(monacoLoaderInterval);
|
||||
monacoLoader = false;
|
||||
}
|
||||
}, 5); " :id="monacoId"
|
||||
class="fme-wrapper"
|
||||
:class="{ 'fme-full-screen': fullScreenModeEnabled }" x-cloak>
|
||||
<div class="h-full w-full">
|
||||
<div class="fme-container" style="padding-top: 0">
|
||||
<!-- Editor -->
|
||||
<div x-show="!monacoLoader" class="fme-element-wrapper">
|
||||
<div x-ref="monacoEditorElement" class="fme-element"></div>
|
||||
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()" :style="'font-size: ' + monacoFontSize" class="fme-placeholder" x-text="monacoPlaceholderText"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</x-dynamic-component>
|
||||
Loading…
x
Reference in New Issue
Block a user