banquise/pelican-panel-mirror
8
0
Fork 1
mirror of https://github.com/pelican-dev/panel.git synced 2025-09-08 11:28:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace Monaco with Built-in code editor

Browse Source
This commit is contained in:
Charles 2025-05-08 09:03:21 -04:00
parent e2bed84464
commit 8d433c4a11
8 changed files with 67 additions and 523 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/Filament/Admin/Resources/EggResource/Pages/CreateEgg.php
View File

@ -6,6 +6,7 @@ use App\Filament\Admin\Resources\EggResource;
use App\Filament\Components\Forms\Fields\CopyFrom;
use App\Models\EggVariable;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\KeyValue;
use Filament\Forms\Components\Repeater;
@ -16,7 +17,6 @@ use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Resources\Pages\CreateRecord;
use Filament\Schemas\Components\Fieldset;
use Filament\Schemas\Components\Form;
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Schemas\Components\Utilities\Get;
@ -44,6 +44,9 @@ class CreateEgg extends CreateRecord
return [];
}
/**
* @throws \Exception
*/
public function form(Schema $schema): Schema
{
return $schema
@ -248,13 +251,10 @@ class CreateEgg extends CreateRecord
->default('bash')
->options(['bash', 'ash', '/bin/bash'])
->required(),
// MonacoEditor::make('script_install')
// ->label(trans('admin/egg.script_install'))
// ->columnSpanFull()
// ->fontSize('16px')
// ->language('shell')
// ->lazy()
// ->view('filament.plugins.monaco-editor'),
CodeEditor::make('script_install')
->label(trans('admin/egg.script_install'))
->columnSpanFull()
->lazy(),
]),
])->columnSpanFull()->persistTabInQueryString(),

15
app/Filament/Admin/Resources/EggResource/Pages/EditEgg.php
View File

@ -11,6 +11,7 @@ use App\Models\Egg;
use App\Models\EggVariable;
use Filament\Actions\DeleteAction;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\CodeEditor;
use Filament\Schemas\Components\Fieldset;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\KeyValue;
@ -20,7 +21,6 @@ use Filament\Forms\Components\TagsInput;
use Filament\Forms\Components\Textarea;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Toggle;
use Filament\Schemas\Components\Form;
use Filament\Schemas\Components\Tabs;
use Filament\Schemas\Components\Tabs\Tab;
use Filament\Schemas\Components\Utilities\Get;
@ -33,6 +33,9 @@ class EditEgg extends EditRecord
{
protected static string $resource = EggResource::class;
/**
* @throws \Exception
*/
public function form(Schema $schema): Schema
{
return $schema
@ -239,13 +242,9 @@ class EditEgg extends EditRecord
->selectablePlaceholder(false)
->options(['bash', 'ash', '/bin/bash'])
->required(),
// TODO MonacoEditor::make('script_install')
// ->label(trans('admin/egg.script_install'))
// ->placeholderText('')
// ->columnSpanFull()
// ->fontSize('16px')
// ->language('shell')
// ->view('filament.plugins.monaco-editor'),
CodeEditor::make('script_install')
->hiddenLabel()
->columnSpanFull(),
]),
])->columnSpanFull()->persistTabInQueryString(),
]);

84
app/Filament/Server/Resources/FileResource/Pages/EditFiles.php
View File

@ -3,6 +3,8 @@
namespace App\Filament\Server\Resources\FileResource\Pages;
use App\Enums\EditorLanguages;
use App\Exceptions\Http\Server\FileSizeTooLargeException;
use App\Exceptions\Repository\FileNotEditableException;
use App\Facades\Activity;
use App\Filament\Server\Resources\FileResource;
use App\Livewire\AlertBanner;
@ -11,18 +13,20 @@ use App\Models\Server;
use App\Repositories\Daemon\DaemonFileRepository;
use Filament\Facades\Filament;
use Filament\Actions\Action;
use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\Select;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Schemas\Components\Form;
use Filament\Schemas\Components\Section;
use Filament\Notifications\Notification;
use Filament\Pages\Concerns\InteractsWithFormActions;
use Filament\Panel;
use Filament\Resources\Pages\Page;
use Filament\Resources\Pages\PageRegistration;
use Filament\Schemas\Components\Form;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Schema;
use Filament\Support\Enums\Alignment;
use Illuminate\Contracts\Filesystem\FileNotFoundException;
use Illuminate\Http\Client\ConnectionException;
use Illuminate\Routing\Route;
use Illuminate\Support\Facades\Route as RouteFacade;
use Livewire\Attributes\Locked;
@ -48,6 +52,9 @@ class EditFiles extends Page
public ?array $data = [];
/**
* @throws \Throwable
*/
public function form(Schema $schema): Schema
{
/** @var Server $server */
@ -116,43 +123,42 @@ class EditFiles extends Page
->selectablePlaceholder(false)
->afterStateUpdated(fn ($state) => $this->dispatch('setLanguage', lang: $state))
->default(fn () => EditorLanguages::fromWithAlias(pathinfo($this->path, PATHINFO_EXTENSION))),
// TODO MonacoEditor::make('editor')
// ->hiddenLabel()
// ->showPlaceholder(false)
// ->danger()
// ->body('<code>' . $this->path . '</code> Max is ' . convert_bytes_to_readable(config('panel.files.max_edit_size')))
// ->title('File too large!')
// AlertBanner::make()
// } catch (FileSizeTooLargeException) {
// try {
// ->default(function () {
// return $this->getDaemonFileRepository()->getContent($this->path, config('panel.files.max_edit_size'));
// ->closable()
// ->send();
//
// } catch (FileNotFoundException) {
// AlertBanner::make()
// $this->redirect(ListFiles::getUrl());
// ->title('File Not found!')
// ->danger()
// ->body('<code>' . $this->path . '</code>')
// ->send();
// ->closable()
//
// $this->redirect(ListFiles::getUrl());
// } catch (FileNotEditableException) {
// ->title('Could not edit directory!')
// AlertBanner::make()
// ->body('<code>' . $this->path . '</code>')
// ->closable()
// ->send();
// ->danger()
//
// }
// $this->redirect(ListFiles::getUrl());
// })
// ->language(fn (Get $get) => $get('lang'))
// ->view('filament.plugins.monaco-editor'),
CodeEditor::make('editor')
->hiddenLabel()
->default(function () {
try {
return $this->getDaemonFileRepository()->getContent($this->path, config('panel.files.max_edit_size'));
} catch (FileSizeTooLargeException) {
AlertBanner::make()
->title('<code>' . basename($this->path) . '</code> is too large!')
->body('Max is ' . convert_bytes_to_readable(config('panel.files.max_edit_size')))
->danger()
->closable()
->send();
$this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
} catch (FileNotFoundException) {
AlertBanner::make()
->title('<code>' . basename($this->path) . '</code> not found!')
->danger()
->closable()
->send();
$this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
} catch (FileNotEditableException) {
AlertBanner::make()
->title('<code>' . basename($this->path) . '</code> is a directory')
->danger()
->closable()
->send();
$this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
} catch (ConnectionException) {
// Alert banner for this one will be handled by ListFiles
$this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
}
}),
]),
]);
}

24
app/Filament/Server/Resources/FileResource/Pages/ListFiles.php
View File

@ -2,8 +2,6 @@
namespace App\Filament\Server\Resources\FileResource\Pages;
//use AbdelhamidErrahmouni\FilamentMonacoEditor\MonacoEditor;
use App\Enums\EditorLanguages;
use App\Facades\Activity;
use App\Filament\Server\Resources\FileResource;
use App\Models\File;
@ -20,8 +18,8 @@ use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Facades\Filament;
use Filament\Forms\Components\CheckboxList;
use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\FileUpload;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Infolists\Components\TextEntry;
use Filament\Notifications\Notification;
@ -408,6 +406,9 @@ class ListFiles extends ListRecords
]);
}
/**
* @throws \Exception
*/
protected function getHeaderActions(): array
{
/** @var Server $server */
@ -429,21 +430,10 @@ class ListFiles extends ListRecords
})
->schema([
TextInput::make('name')
->label('File Name')
->label('Name')
->required(),
Select::make('lang')
->label('Syntax Highlighting')
->searchable()
->native(false)
->live()
->options(EditorLanguages::class)
->selectablePlaceholder(false)
->afterStateUpdated(fn ($state) => $this->dispatch('setLanguage', lang: $state))
->default(EditorLanguages::plaintext->value),
// MonacoEditor::make('editor')
// ->label('')
// ->view('filament.plugins.monaco-editor')
// ->language(fn (Get $get) => $get('lang') ?? 'plaintext'),
CodeEditor::make('editor')
->hiddenLabel(),
]),
Action::make('new_folder')
->authorize(fn () => auth()->user()->can(Permission::ACTION_FILE_CREATE, $server))

270
config/filament-monaco-editor.php
View File

@ -1,270 +0,0 @@
<?php
return [
'general' => [
'enable-preview' => false,
'show-full-screen-toggle' => true,
'show-placeholder' => true,
'placeholder-text' => 'Your code here...',
'show-loader' => false,
'font-size' => '16px',
'line-numbers-min-chars' => 3,
'automatic-layout' => true,
'default-theme' => 'blackboard',
],
'themes' => [
'blackboard' => [
'base' => 'vs-dark',
'inherit' => true,
'rules' => [
[
'background' => '161F27',
'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' => '#101519',
'editor.selectionBackground' => '#5a5f63',
'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',
],
],
],
];

1
public/css/filament-monaco-editor/filament-monaco-editor-styles.css
View File

File diff suppressed because one or more lines are too long

0
public/js/filament-monaco-editor/filament-monaco-editor-scripts.js
View File

180
resources/views/filament/plugins/monaco-editor.blade.php
View File

@ -1,180 +0,0 @@
@script
<script>
$wire.on('setContent', ({ content }) => {
document.getElementById('{{ $getId() }}').editor.getModel().setValue(content);
});
$wire.on('setLanguage', ({ lang }) => {
monaco.editor.setModelLanguage(document.getElementById('{{ $getId() }}').editor.getModel(), lang);
});
</script>
@endscript
<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: '{{ $getId() }}',
toggleFullScreenMode() {
this.fullScreenModeEnabled = !this.fullScreenModeEnabled;
this.fullScreenModeEnabled ? document.body.classList.add('overflow-hidden')
: document.body.classList.remove('overflow-hidden');
$el.style.width = this.fullScreenModeEnabled ? '100vw'
: $el.parentElement.clientWidth + 'px';
},
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.49.0/min/vs/loader.min.js';
document.head.appendChild(script);
},
wrapPreview(value){
return `<head>{{ $getPreviewHeadEndContent() }}</head>` +
`&lt;body {{ $getPreviewBodyAttributes() }}&gt;` +
`{{ $getPreviewBodyStartContent() }}` +
`${value}` +
`{{ $getPreviewBodyEndContent() }}` +
`&lt;/body&gt;`;
},
}" x-init="
previewContent = wrapPreview(monacoContent);
$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.49.0/min/vs' }});
let proxy = URL.createObjectURL(new Blob([` self.MonacoEnvironment = { baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.0/min' }; importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.49.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,
vertical: 'auto',
verticalScrollbarSize: 15
},
wordWrap: 'on',
WrappingIndent: 'same',
});
$el.style.zIndex = '1';
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="flex items-center ml-auto">
@if($getShowFullScreenToggle())
<button type="button" aria-label="{{ __("full_screen_btn_label") }}" class="fme-full-screen-btn"
@click="toggleFullScreenMode()">
<svg class="fme-full-screen-btn-icon" x-show="!fullScreenModeEnabled"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M16 4l4 0l0 4" />
<path d="M14 10l6 -6" />
<path d="M8 20l-4 0l0 -4" />
<path d="M4 20l6 -6" />
<path d="M16 20l4 0l0 -4" />
<path d="M14 14l6 6" />
<path d="M8 4l-4 0l0 4" />
<path d="M4 4l6 6" />
</svg>
<svg class="fme-full-screen-btn-icon" x-show="fullScreenModeEnabled"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 9l4 0l0 -4" />
<path d="M3 3l6 6" />
<path d="M5 15l4 0l0 4" />
<path d="M3 21l6 -6" />
<path d="M19 9l-4 0l0 -4" />
<path d="M15 9l6 -6" />
<path d="M19 15l-4 0l0 4" />
<path d="M15 15l6 6" />
</svg>
</button>
@endif
</div>
<div class="fme-container" x-show="!showPreview">
<!-- Editor -->
<div x-show="!monacoLoader" class="fme-element-wrapper">
<div x-ref="monacoEditorElement" class="fme-element" wire:ignore style="height: 100%"></div>
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
:style="'font-size: ' + monacoFontSize" class="fme-placeholder"
x-text="monacoPlaceholderText"></div>
</div>
</div>
</x-dynamic-component>