fix #14

demo/src/main/webapp/template.xhtml

@@ -146,6 +146,7 @@
 	<ui:insert name="headLast" />
 </h:head>
 <h:body>
+	<ui:insert name="bodyFirst" />
 	<pe:layout fullPage="true" style="overflow:hidden;">
 		<pe:layoutPane position="center" style="overflow:hidden;">
 			<h:form id="form"

demo/src/main/webapp/test9.xhtml

@@ -0,0 +1,69 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
+	xmlns:h="http://xmlns.jcp.org/jsf/html"
+	xmlns:f="http://xmlns.jcp.org/jsf/core"
+	xmlns:blut="http://github.com/blutorange"
+	xmlns:xi="http://www.xima.de/taglib/xfc"
+	xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui"
+	xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	template="./template.xhtml">
+
+	<f:metadata>
+		<f:viewAction actionListener="#{testBean.setCodeLanguage('scss')}"/>
+		<f:viewAction actionListener="#{testBean.setCode('body { color: red; }')}"/>
+	</f:metadata>
+
+	<ui:define name="headLast">
+		<h:outputScript name="extender.js" />
+	</ui:define>
+
+	<ui:define name="bodyFirst">
+		<h:form>
+			<p:dialog id="monacoDialog" widgetVar="monacoDialog" dynamic="true" modal="true"
+					width="800" header="Monaco Dialog">
+				<blut:monacoEditor widgetVar="monacoDialog" id="monaco"
+					value="#{testBean.code}" width="100%" autoResize="true"
+					editorOptions="#{testBean.editorOptions}"
+					style="flex-grow: 1;flex-basis: 0" height="600px"
+					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()">
+				</blut:monacoEditor>		
+			</p:dialog>
+		</h:form>
+	</ui:define>
+
+	<ui:define name="monaco">
+		<p:tabView id="monacoTabs">
+			<p:tab id="tabSimple" title="Tab one without monaco">
+				Monaco editor is in the second tab. But you can
+				<p:commandButton value="open monaco in a dialog" onclick="PF('monacoDialog').show();return false;"/>
+			</p:tab>
+			<p:tab id="tabMonaco" title="Tab with monaco" dynamic="true">
+				<blut:monacoEditor widgetVar="monaco" id="monaco"
+					value="#{testBean.code}" width="100%" autoResize="true"
+					editorOptions="#{testBean.editorOptions}"
+					style="flex-grow: 1;flex-basis: 0" height="600px"
+					uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()">
+				</blut:monacoEditor>
+			</p:tab>
+		</p:tabView>
+	</ui:define>
+
+	<ui:define name="script">
+		<script>
+		window.testCase = function() {
+        	log("No monaco editor should be visible initially on page load");
+        	log("Click on 'open monaco in a dialog'");
+			log("A modal dialog should open, a monaco editor with some code should be clearly visible in the dialog");
+			log("======");
+			log("Reload the page");
+			log("======");
+			log("Click on 'tab with monaco'");
+			log("A monaco editor should be clear visible inside the second tab");
+			log("Click on 'tab one without monaco'");
+        	log("Click on 'open monaco in a dialog'");
+			log("A modal dialog should open, a monaco editor with some code should be clearly visible in the dialog");
+        };
+	    </script>
+	</ui:define>
+</ui:composition>

demo/src/main/webapp/tests.xhtml

@@ -14,8 +14,9 @@
 		<li><p:link value="deferred" outcome="test4"></p:link></li>
 		<li><p:link value="update(scroll)" outcome="test5"></p:link></li>
 		<li><p:link value="scss" outcome="test6"></p:link></li>
-		<li><p:link value="EditorOverrideServices" outcome="test7"></p:link></li>
-		<li><p:link value="MultipleEditors" outcome="test8"></p:link></li>
+		<li><p:link value="editorOverrideServices" outcome="test7"></p:link></li>
+		<li><p:link value="multipleEditors" outcome="test8"></p:link></li>
+		<li><p:link value="editorInsideDialog" outcome="test9"></p:link></li>
 	</ul>
 
 </ui:composition>

src/main/js/widget.js

@@ -436,15 +436,18 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
         this.addDestroyListener(() => this.onDestroy());
 
         // Begin loading the editor, but only load one editor at a time
-        GenericPromiseQueue.add(() => this._setup()).then(() => {
+        GenericPromiseQueue.add(() => this._setup())
+        .then(args => this._renderDeferredAsync(args))
+        .then(() => {
             this._fireEvent("initialized");
             this.jq.data("initialized", true);
             this.setValue(this._editorValue);
             for (const {resolve} of this._onDone) {
                 resolve(this);
             }
             this._onDone = [];
-        }).catch(error => {
+        })
+        .catch(error => {
             console.error("Failed to initialize monaco editor", error);
             for (const {reject} of this._onDone) {
                 reject(error);
@@ -544,7 +547,7 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
     }
 
     /**
-     * @return {Promise<monaco.editor.IStandaloneCodeEditor>}
+     * @return {Promise<{extender: any, options: Promise<monaco.editor.IEditorConstructionOptions>, wasLibLoaded: boolean}>}
      */
     async _setup() {
         const extender = loadExtender(this.options);
@@ -554,8 +557,7 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget {
         const wasLibLoaded = await loadEditorLib(this.options, forceLibReload);
         this.getEditorContainer().empty();
         const options = await createEditorConstructionOptions(this, extender, wasLibLoaded);
-        const editor = await this._renderDeferredAsync({extender, options, wasLibLoaded});
-        return editor;
+        return {extender, options, wasLibLoaded};
     }
 
     /**