fix #6 and fix #7, update to monaco 0.17.1

blutorange · Jun 25, 2019 · 0a64e8f · 0a64e8f
1 parent b2a65b7
commit 0a64e8f
Show file tree

Hide file tree

Showing 16 changed files with 720 additions and 266 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 See also [the changelog of monaco-editor](https://github.com/Microsoft/monaco-editor/blob/master/CHANGELOG.md).
 
+# 0.17.1
+
+- update to monaco editor 0.17.1
+- add transparent `getValue` / `setValue` to the widget API
+- The widget is now a `PrimeFaces.widget.DeferredWidget` so that it works better with 
+  tabs etc.
+
 # 0.17.0
 
 - update to PrimeFaces 7.0 (no guarantees it will work with PrimeFaces 6)

diff --git a/README.md b/README.md
@@ -231,7 +231,8 @@ repository. Now just specify the `extender` option on the editor component:
 # Javascript API
 
 See the [official API docs for the Monaco Editor](https://microsoft.github.io/monaco-editor/api/index.html).
-You can access the editor instance via the widget method `PrimeFaces.widget.ExtMonacoEditor.prototype.getMonaco`.
+
+You can access the monaco editor instance via the widget method `PrimeFaces.widget.ExtMonacoEditor.prototype.getMonaco`.
 This method returns an instance of [IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html). 
 
 For example, when the widget variable `editor`:
@@ -248,6 +249,9 @@ standaloneCodeEditor.getModel().setValue("console.log('foobar');");
 standaloneCodeEditor.focus();
 ```
 
+There are a few more widget methods available, see the [JSDocs on the type definitions 
+for further details](https://github.com/blutorange/primefaces-monaco/blob/master/src/npm/primefaces-monaco.d.ts#L225).
+
 # Events
 
 Most events are forwarded from the Monaco Editor Javascript API so that they are available to JSF.
@@ -398,7 +402,11 @@ is for this project.
 
 # Demo
 
-There's a demo project with the editor under `/demo`. To run it, first build the editor via `mvn clean install`,  then
+There's a demo project with the editor under `/demo`. It contains several linked pages that
+demonstrate one editor feature each. They also include a short description of what 
+is supposed to happen and thus can be used for integration testing as well.
+
+To run it, first build the editor via `mvn clean install`,  then
 
 ```bash
 cd demo

diff --git a/demo/pom.xml b/demo/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>monacotest</groupId>
     <artifactId>monacotest</artifactId>
-    <version>0.17.0</version>
+    <version>0.17.1</version>
     <packaging>war</packaging>
 
     <repositories>

diff --git a/demo/src/main/java/TestBean.java b/demo/src/main/java/TestBean.java
@@ -17,6 +17,7 @@ public class TestBean implements Serializable {
 
     private String code;
     private String uiLanguage;
+    private boolean rendered;
     private TheEnum theEnum;
     private EditorOptions editorOptions;
 
@@ -80,4 +81,16 @@ public EditorOptions getEditorOptions() {
     public void setEditorOptions(EditorOptions editorOptions) {
         this.editorOptions = editorOptions;
     }
+
+    public void setRendered(boolean rendered) {
+      this.rendered = rendered;
+    }
+
+    public boolean getRendered() {
+      return rendered;
+    }
+
+    public void toggleRendered() {
+      rendered = !rendered;
+    }
 }
diff --git a/demo/src/main/webapp/template.xhtml b/demo/src/main/webapp/template.xhtml
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+	xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
+        http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
+	xmlns:p="http://primefaces.org/ui"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/jsf/core">
+
+<h:head>
+	<title>My First JSF Application</title>
+	<ui:insert name="headLast" />
+</h:head>
+<h:outputStylesheet>
+    .ui-layout-center {
+        overflow: hidden !important;
+    }
+    #log pre {
+      margin: 0.5em 0;
+      white-space: normal;
+    }
+    #log {
+    	counter-reset: line 0;
+    }
+    .line {
+    	counter-increment: line;
+   	    display: flex;
+	    flex-direction: row;
+    }
+    .line::before {
+      content: counter(line) ">";
+      margin-right: 0.5em;
+      font-weight: bold;
+    }
+    #tests {
+	    display: flex;
+	    flex-direction: row;
+	    flex-wrap: wrap;
+        list-style-type: none;
+    }
+    h1 {
+    	margin: 0;
+    }
+    #tests li {
+ 	   margin: 0 0.25em;
+	}
+</h:outputStylesheet>
+<h:body>
+	<pe:layout fullPage="true" style="overflow:hidden;">
+		<pe:layoutPane position="center" style="overflow:hidden;">
+			<h:form id="form"
+				style="display:flex;flex-direction: column;height:100%">
+				<div>
+					<p:commandButton value="Update" update="@form"
+						process="@this,@form" partialSubmit="false" />
+					<p:selectOneMenu value="#{testBean.uiLanguage}">
+						<f:selectItems var="item" value="#{testBean.availableLanguages}" />
+					</p:selectOneMenu>
+					<p:inputText value="#{testBean.codeLanguage}"></p:inputText>
+				</div>
+				<ui:insert name="monaco" />
+			</h:form>
+		</pe:layoutPane>
+		<pe:layoutPane position="north" initClosed="false" size="200">
+			<ui:include src="./tests.xhtml" />
+		</pe:layoutPane>
+		<pe:layoutPane position="east" initClosed="false" size="33%">
+			<h1>Log</h1>
+			<div id="log"></div>
+		</pe:layoutPane>
+	</pe:layout>
+	<script>
+		function log() {
+			var div = document.getElementById("log")
+			var message = Array.prototype.join.call(arguments, "  ");
+			var pre = document.createElement("pre");
+			pre.setAttribute("class", "line");
+			pre.textContent = message;
+			div.appendChild(pre);
+		}
+		window.addEventListener("error", function(event) {
+			log("An unhandled error occurred");
+			log(event.message);
+		});
+		$(function() {
+			if (typeof window.testCase === "function") {
+				try {
+					window.testCase();
+				} catch (e) {
+					log("Failure while running test case");
+					log(e.message);
+					console.error(e);
+				}
+			} else {
+				log("No test description found");
+			}
+		});
+	</script>
+	<ui:insert name="script" />
+</h:body>
+</html>
diff --git a/demo/src/main/webapp/test.xhtml b/demo/src/main/webapp/test.xhtml
@@ -1,55 +1,38 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml"
-      xmlns:p="http://primefaces.org/ui"
-      xmlns:pe="http://primefaces.org/ui/extensions"
-      xmlns:blut="http://github.com/blutorange"
-      xmlns:h="http://java.sun.com/jsf/html" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-      xmlns:f="http://java.sun.com/jsf/core"
-      xsi:schemaLocation="http://java.sun.com/jsf/core
-http://java.sun.com/jsf/core
-http://primefaces.org/ui/extensions ">
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/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://java.sun.com/jsp/jstl/core"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	template="./template.xhtml">
 
-<h:head>
-    <title>My First JSF Application</title>
-    <h:outputScript name="extender.js" />
-</h:head>
-<h:outputStylesheet>
-    .ui-layout-center {
-        overflow: hidden !important;
-    }
-</h:outputStylesheet>
-<h:body>
-    <pe:layout fullPage="true" style="overflow:hidden;">
-        <pe:layoutPane position="center" style="overflow:hidden;">
-            <h:form id="form" style="display:flex;flex-direction: column;height:100%">
-                <div>
-                    <p:commandButton value="Update" update="@form" process="@this,@form" partialSubmit="false"/>
-                    <p:selectOneMenu value="#{testBean.uiLanguage}">
-                        <f:selectItems var="item" value="#{testBean.availableLanguages}"/>
-                    </p:selectOneMenu>
-                    <p:inputText value="#{testBean.codeLanguage}"></p:inputText>
-                    <p:message for="@form:monaco" showDetail="true" showSummary="true" />
-                </div>
-                <blut:monacoEditor widgetVar="monaco" id="monaco" value="#{testBean.code}" width="100%" autoResize="true"
-                        basename="simple.js" directory="blutorange/examples" onblur="console.log('attribute onblur')"
-                        editorOptions="#{testBean.editorOptions}" style="flex-grow: 1;flex-basis: 0" height="auto"
-                        uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()">
-                    <p:ajax event="keydown" onstart="console.log('p-keydown', cfg.ext.params);return false"></p:ajax>
-                </blut:monacoEditor>
-            </h:form>
-        </pe:layoutPane>
-        <pe:layoutPane position="east" initClosed="false" minWidth="200">
-            This is the east.
-        </pe:layoutPane>
-    </pe:layout>
-    <script>
-        $(() => {
-            const m = PF("monaco");
-            console.log("editor initialized: ", m.jq.data("initialized"));
-            m.whenReady().then(() => console.log("editor is ready", m.jq.data("initialized")));
-        });
-    </script>
-</h:body>
-</html>
+	<ui:define name="headLast">
+		<h:outputScript name="extender.js" />
+	</ui:define>
+
+	<ui:define name="monaco">
+		<blut:monacoEditor widgetVar="monaco" id="monaco"
+			value="#{testBean.code}" width="100%" autoResize="true"
+			basename="simple.js" directory="blutorange/examples"
+			editorOptions="#{testBean.editorOptions}"
+			style="flex-grow: 1;flex-basis: 0" height="auto"
+			uiLanguage="#{testBean.uiLanguage}" extender="createExtenderBasic()">
+		</blut:monacoEditor>
+	</ui:define>
+
+	<ui:define name="script">
+		<script>
+		window.testCase = function() {
+        	log("Monaco editor should load and be visible");
+        	log("It should have the correct dimensions.");
+        	log("It should be possible to edit the content.")
+        	log("Changing the language and clicking reload should display the UI (context menu etc.) in the chosen language.");
+        	log("Changing the code language and clicking reload should apply the syntax highlighting for the chosen code lanugage.");
+        	log("When choosing 'javascript', autocompletion for the JQuery API should be available.");
+        };
+	    </script>
+	</ui:define>
+</ui:composition>
diff --git a/demo/src/main/webapp/test2.xhtml b/demo/src/main/webapp/test2.xhtml
@@ -0,0 +1,44 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/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://java.sun.com/jsp/jstl/core"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	template="./template.xhtml">
+
+
+	<ui:define name="monaco">
+		<blut:monacoEditor widgetVar="monaco" id="monaco"
+			value="#{testBean.code}" width="100%" autoResize="true"
+			basename="simple.js" directory="blutorange/examples"
+			editorOptions="#{testBean.editorOptions}"
+			style="flex-grow: 1;flex-basis: 0" height="auto"
+			uiLanguage="#{testBean.uiLanguage}">
+		</blut:monacoEditor>
+	</ui:define>
+
+	<ui:define name="script">
+		<script>
+		window.testCase = function() {
+            log("Monaco editor should not be initialized already.");
+            log("The old value from the bean should be logged.");
+            log("The new value that is set should appear inside the monaco editor once it becomes visible.");
+            log("Finally, the message 'Editor is now ready' should be logged.")
+            log("===");
+
+            var m = PF("monaco");
+
+            log("Is editor initialized already: ", m.isReady());
+            log("Current value is ", m.getValue());
+			log("Setting value of editor to: ", "const foobar = 'dynamic';");
+			m.setValue("const foobar = 'dynamic';");
+
+            m.whenReady().then(() => log("Editor is now ready"));
+
+		};
+	    </script>
+	</ui:define>
+</ui:composition>
diff --git a/demo/src/main/webapp/test3.xhtml b/demo/src/main/webapp/test3.xhtml
@@ -0,0 +1,33 @@
+<ui:composition xmlns="http://www.w3.org/1999/xhtml"
+	xmlns:ui="http://java.sun.com/jsf/facelets"
+	xmlns:h="http://java.sun.com/jsf/html"
+	xmlns:f="http://java.sun.com/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://java.sun.com/jsp/jstl/core"
+	xmlns:pe="http://primefaces.org/ui/extensions"
+	template="./template.xhtml">
+
+
+	<ui:define name="monaco">
+		<blut:monacoEditor widgetVar="monaco" id="monaco"
+			value="#{testBean.code}" width="100%" autoResize="true"
+			basename="simple.js" directory="blutorange/examples"
+			editorOptions="#{testBean.editorOptions}"
+			style="flex-grow: 1;flex-basis: 0" height="auto"
+			uiLanguage="#{testBean.uiLanguage}"
+			onblur="log('Blur')">
+			<p:ajax event="keydown" onstart="log('Keydown')" />
+		</blut:monacoEditor>
+	</ui:define>
+
+	<ui:define name="script">
+		<script>
+			window.testCase = function() {
+				log("When you click inside the editor and then outside, the message 'Blur' should be logged.");
+				log("When you click inside the editor and press a key, the message 'Keydown' should be logged.");
+			};
+		</script>
+	</ui:define>
+</ui:composition>