fix(ui): monaco editor placeholder alignment (#11514)

resources/views/components/forms/monaco-editor.blade.php

@@ -3,8 +3,6 @@
         monacoVersion: '0.52.2',
         monacoContent: @entangle($id),
         monacoLanguage: '',
-        monacoPlaceholder: true,
-        monacoPlaceholderText: 'Start typing here',
         monacoLoader: true,
         monacoFontSize: '15px',
         monacoId: $id('monaco-editor'),
@@ -14,20 +12,7 @@
         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(value) {
-            this.monacoPlaceholder = value === '';
-        },
-        monacoEditorFocus() {
-            document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
         },
         monacoEditorAddLoaderScriptToHead() {
             // Use a global flag to prevent duplicate script loading
@@ -111,6 +96,7 @@
                         lineNumbersMinChars: 3,
                         automaticLayout: true,
                         language: '{{ $language }}',
+                        placeholder: 'Start typing here',
                         domReadOnly: '{{ $readonly ?? false }}',
                         contextmenu: '!{{ $readonly ?? false }}',
                         renderLineHighlight: 'none',
@@ -143,13 +129,8 @@
                     });
         
                     monacoEditor(editor);
-        
-                    document.getElementById(monacoId).editor = editor;
-                    document.getElementById(monacoId).addEventListener('monaco-editor-focused', (event) => {
-                        editor.focus();
-                    });
 
-                    updatePlaceholder(editor.getValue());
+                    document.getElementById(monacoId).editor = editor;
 
                     @if ($autofocus)
                     // Auto-focus the editor
@@ -172,10 +153,6 @@
         </div>
         <div class="relative z-10 w-full h-full">
             <div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 150px;"></div>
-            <div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
-                :style="'font-size: ' + monacoFontSize"
-                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"
-                x-text="monacoPlaceholderText"></div>
         </div>
     </div>
 </div>