From b7c0829af926ce44ed7baa09cf761dacdddc5d0d Mon Sep 17 00:00:00 2001
From: notCharles <charles@pelican.dev>
Date: Mon, 15 Apr 2024 19:00:49 -0400
Subject: [PATCH] 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?
---
 app/Filament/Resources/EggResource.php        |  10 +-
 composer.json                                 |   1 +
 composer.lock                                 |  88 +++++-
 config/filament-monaco-editor.php             | 270 ++++++++++++++++++
 .../filament/plugins/monaco-editor.blade.php  | 114 ++++++++
 5 files changed, 479 insertions(+), 4 deletions(-)
 create mode 100644 config/filament-monaco-editor.php
 create mode 100644 resources/views/filament/plugins/monaco-editor.blade.php

diff --git a/app/Filament/Resources/EggResource.php b/app/Filament/Resources/EggResource.php
index ceea46121..41d7d242b 100644
--- a/app/Filament/Resources/EggResource.php
+++ b/app/Filament/Resources/EggResource.php
@@ -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'),
diff --git a/composer.json b/composer.json
index e5cf3f9e0..e26afd6c8 100644
--- a/composer.json
+++ b/composer.json
@@ -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",
diff --git a/composer.lock b/composer.lock
index eb3d9fa05..d19dc7e2c 100644
--- a/composer.lock
+++ b/composer.lock
@@ -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"
 }
diff --git a/config/filament-monaco-editor.php b/config/filament-monaco-editor.php
new file mode 100644
index 000000000..50dab0268
--- /dev/null
+++ b/config/filament-monaco-editor.php
@@ -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',
+            ],
+        ],
+    ],
+];
diff --git a/resources/views/filament/plugins/monaco-editor.blade.php b/resources/views/filament/plugins/monaco-editor.blade.php
new file mode 100644
index 000000000..4a8355059
--- /dev/null
+++ b/resources/views/filament/plugins/monaco-editor.blade.php
@@ -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>