updating latest code editor

thedevdojo · Dec 2, 2024 · bd4b0b5 · bd4b0b5
1 parent fc5dd8a
commit bd4b0b5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/src/resources/views/frames/monaco-editor/index.blade.php b/src/resources/views/frames/monaco-editor/index.blade.php
@@ -25,6 +25,12 @@
             }
         @endif
 
+        #editor {
+            resize: vertical;
+            overflow: auto;
+            height: 100%;
+        }
+
         #content, #editor-placeholder {
             padding-top: {{ Request::get("paddingTop") ?? "12px"; }}
         }
@@ -48,7 +54,7 @@
         </div>
 
         <div id="content" class="relative z-10 w-full h-full">
-            <div id="editor" wire:ignore class="w-full h-full text-lg"></div>
+            <div id="editor" wire:ignore class="w-full h-full overflow-hidden text-lg"></div>
             <div id="editor-placeholder" class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0">Start typing here</div>
         </div>
         @include('frames::monaco-editor.javascript.main')

diff --git a/src/resources/views/frames/monaco-editor/javascript/init.blade.php b/src/resources/views/frames/monaco-editor/javascript/init.blade.php
@@ -1,24 +1,11 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs/loader.min.js"></script>
 <script>
     // Based on https://jsfiddle.net/developit/bwgkr6uq/ which just works but is based on unpkg.com.
     // Provided by loader.min.js.
     require.config({
         paths: {
-            'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs'
+            'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.0/min/vs'
         }
     });
 
-    let proxy = URL.createObjectURL(new Blob([`
-        self.MonacoEnvironment = {
-            baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min'
-        };
-        importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/base/worker/workerMain.min.js');
-    `], {
-        type: 'text/javascript'
-    }));
-
-    window.MonacoEnvironment = {
-        getWorkerUrl: () => proxy
-    };
-
 </script>
diff --git a/src/resources/views/frames/monaco-editor/javascript/main.blade.php b/src/resources/views/frames/monaco-editor/javascript/main.blade.php
@@ -52,6 +52,7 @@
             lineNumbersMinChars: 3,
             automaticLayout: true,
             language: initialLanguage,
+            fixedOverflowWidgets: true,
             minimap: { enabled: false },
         });
 
@@ -80,7 +81,6 @@
         });
 
         ready();
-
     });
     
 
@@ -92,6 +92,16 @@
         editor.getModel().setValue( code );
     }
 
+    window.resizeContainer = function(){
+        editor.layout();
+    }
+
+    window.setDimensionsAndShow = function(width, height){
+        setTimeout(function(){
+            hideLoader();
+        }, 4000);
+    }
+
     window.get = function(){
         return editor.getValue();
     }
@@ -110,14 +120,23 @@
     });
 
     window.ready = function(){
-        LOADER.classList.add('opacity-0');
-        setTimeout(function(){
-            LOADER.remove();
-        }, 1050);
+        hideLoader();
         editor.getModel().setValue( window.initialValue );
         window.dispatchEvent(new CustomEvent('ready'));
     }
 
+    window.showLoader = function(){
+        LOADER.classList.remove('opacity-0');
+        LOADER.classList.remove('invisible');
+        LOADER.classList.remove('pointer-events-none');
+    }
+
+    window.hideLoader = function(){
+        LOADER.classList.add('opacity-0');
+        LOADER.classList.add('invisible');
+        LOADER.classList.add('pointer-events-none');
+    }
+
     window.frameFocused = function(){
         window.dispatchEvent(new CustomEvent('focused'));
     }