Replace Monaco with Built-in code editor

app/Filament/Admin/Resources/EggResource/Pages/CreateEgg.php

@@ -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')
+                            CodeEditor::make('script_install')
-                            //                                ->label(trans('admin/egg.script_install'))
+                                ->label(trans('admin/egg.script_install'))
-                            //                                ->columnSpanFull()
+                                ->columnSpanFull()
-                            //                                ->fontSize('16px')
+                                ->lazy(),
-                            //                                ->language('shell')
-                            //                                ->lazy()
-                            //                                ->view('filament.plugins.monaco-editor'),
                         ]),
 
                 ])->columnSpanFull()->persistTabInQueryString(),

app/Filament/Admin/Resources/EggResource/Pages/EditEgg.php

@@ -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')
+                            CodeEditor::make('script_install')
-                            //                                ->label(trans('admin/egg.script_install'))
+                                ->hiddenLabel()
-                            //                                ->placeholderText('')
+                                ->columnSpanFull(),
-                            //                                ->columnSpanFull()
-                            //                                ->fontSize('16px')
-                            //                                ->language('shell')
-                            //                                ->view('filament.plugins.monaco-editor'),
                         ]),
                 ])->columnSpanFull()->persistTabInQueryString(),
             ]);

app/Filament/Server/Resources/FileResource/Pages/EditFiles.php

@@ -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')
+                        CodeEditor::make('editor')
-                        //                            ->hiddenLabel()
+                            ->hiddenLabel()
-                        //                            ->showPlaceholder(false)
+                            ->default(function () {
-                        //                                        ->danger()
+                                try {
-                        //                                        ->body('<code>' . $this->path . '</code> Max is ' . convert_bytes_to_readable(config('panel.files.max_edit_size')))
+                                    return $this->getDaemonFileRepository()->getContent($this->path, config('panel.files.max_edit_size'));
-                        //                                        ->title('File too large!')
+                                } catch (FileSizeTooLargeException) {
-                        //                                    AlertBanner::make()
+                                    AlertBanner::make()
-                        //                                } catch (FileSizeTooLargeException) {
+                                        ->title('<code>' . basename($this->path) . '</code> is too large!')
-                        //                                try {
+                                        ->body('Max is ' . convert_bytes_to_readable(config('panel.files.max_edit_size')))
-                        //                            ->default(function () {
+                                        ->danger()
-                        //                                    return $this->getDaemonFileRepository()->getContent($this->path, config('panel.files.max_edit_size'));
+                                        ->closable()
-                        //                                        ->closable()
+                                        ->send();
-                        //                                        ->send();
+
-                        //
+                                    $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
-                        //                                } catch (FileNotFoundException) {
+                                } catch (FileNotFoundException) {
-                        //                                    AlertBanner::make()
+                                    AlertBanner::make()
-                        //                                    $this->redirect(ListFiles::getUrl());
+                                        ->title('<code>' . basename($this->path) . '</code> not found!')
-                        //                                        ->title('File Not found!')
+                                        ->danger()
-                        //                                        ->danger()
+                                        ->closable()
-                        //                                        ->body('<code>' . $this->path . '</code>')
+                                        ->send();
-                        //                                        ->send();
+
-                        //                                        ->closable()
+                                    $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
-                        //
+                                } catch (FileNotEditableException) {
-                        //                                    $this->redirect(ListFiles::getUrl());
+                                    AlertBanner::make()
-                        //                                } catch (FileNotEditableException) {
+                                        ->title('<code>' . basename($this->path) . '</code> is a directory')
-                        //                                        ->title('Could not edit directory!')
+                                        ->danger()
-                        //                                    AlertBanner::make()
+                                        ->closable()
-                        //                                        ->body('<code>' . $this->path . '</code>')
+                                        ->send();
-                        //                                        ->closable()
+
-                        //                                        ->send();
+                                    $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
-                        //                                        ->danger()
+                                } catch (ConnectionException) {
-                        //
+                                    // Alert banner for this one will be handled by ListFiles
-                        //                                }
+
-                        //                                    $this->redirect(ListFiles::getUrl());
+                                    $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
-                        //                            })
+                                }
-                        //                            ->language(fn (Get $get) => $get('lang'))
+                            }),
-                        //                            ->view('filament.plugins.monaco-editor'),
                     ]),
             ]);
     }

app/Filament/Server/Resources/FileResource/Pages/ListFiles.php

@@ -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')
+                    CodeEditor::make('editor')
-                        ->label('Syntax Highlighting')
+                        ->hiddenLabel(),
-                        ->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'),
                 ]),
             Action::make('new_folder')
                 ->authorize(fn () => auth()->user()->can(Permission::ACTION_FILE_CREATE, $server))

config/filament-monaco-editor.php

@@ -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',
-            ],
-        ],
-    ],
-];

resources/views/filament/plugins/monaco-editor.blade.php

@@ -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>