fix: Monaco editor empty for docker compose applications

This commit fixes two related issues preventing the Monaco editor from displaying Docker Compose file content:

1. Data Sync Issue:
   - After loadComposeFile() fetches the compose content from Git and updates the database model, the Livewire component properties were never synced
   - Monaco editor binds to component properties via wire:model, so it remained empty
   - Fixed by calling syncFromModel() after refresh() in loadComposeFile() method

2. Script Duplication Issue:
   - Multiple Monaco editors on the same page (compose files, dockerfile, labels) caused race condition
   - Each instance tried to inject the Monaco loader script simultaneously
   - Resulted in "SyntaxError: Identifier '_amdLoaderGlobal' has already been declared"
   - Fixed by adding a global flag to prevent duplicate script injection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai
2025-10-27 12:48:20 +01:00
parent 4d8d258b83
commit 261dc39f02
3 changed files with 92 additions and 4 deletions

View File

@@ -30,12 +30,22 @@
document.getElementById(this.monacoId).dispatchEvent(new CustomEvent('monaco-editor-focused', { detail: { monacoId: this.monacoId } }));
},
monacoEditorAddLoaderScriptToHead() {
let script = document.createElement('script');
script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
document.head.appendChild(script);
// Use a global flag to prevent duplicate script loading
if (!window.__coolifyMonacoLoaderAdding && typeof _amdLoaderGlobal === 'undefined') {
window.__coolifyMonacoLoaderAdding = true;
let script = document.createElement('script');
script.src = `/js/monaco-editor-${this.monacoVersion}/min/vs/loader.js`;
script.onload = () => {
window.__coolifyMonacoLoaderAdding = false;
};
script.onerror = () => {
window.__coolifyMonacoLoaderAdding = false;
};
document.head.appendChild(script);
}
}
}" x-modelable="monacoContent">
<div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined') {
<div x-cloak x-init="if (typeof _amdLoaderGlobal == 'undefined' && !window.__coolifyMonacoLoaderAdding) {
monacoEditorAddLoaderScriptToHead();
}
checkTheme();