update for monaco editor 0.17

CHANGELOG.md

@@ -1,21 +1,22 @@
 See also [the changelog of monaco-editor](https://github.com/Microsoft/monaco-editor/blob/master/CHANGELOG.md).
 
-# 0.17.0 (work in progress)
+# 0.17.0
 
-- update to PrimeFaces 7.0
-- update to monaco editor 0.16.2
+- update to PrimeFaces 7.0 (no guarantees it will work with PrimeFaces 6)
+- update to monaco editor 0.17.0
 - no more uses of `eval`.
 - due to the above: the property `extender` of the `monacoEditor` component, if given,
   must now be a valid JavaScript expression evaluating to an extender object. Loading the extender
   from an URL is not supported anymore. The recommended way is to define a factory function in
   an external file and call that.
 - client-side script `widget.js` now gets minified
+- add method `whenReady` to client-side widget
+- update npm and maven dependencies
 
 # 0.16.2
 
 - reuse model (`ITextModel`) if it exists already
 
-
 # 0.16.1
 
 - update to monaco editor 0.16.1 (solves an issue with IE)

README.md

@@ -41,7 +41,7 @@ Make sure you're running at least PrimeFaces 7.0. Include this as a dependency:
         <dependency>
             <groupId>com.github.blutorange</groupId>
             <artifactId>primefaces.monaco</artifactId>
-            <version>0.16.2</version>
+            <version>0.17.0</version>
         </dependency>
     </dependencies>
 
@@ -385,8 +385,8 @@ is for this project.
 # Release
 
 * `mvn versions:display-dependency-updates`
-* Check for `TODO`s. (currently: `widget.js`)
-* Check `src/npm/descriptor/create.js` whether it reflects the current Monaco Editor API correctly.
+* Check for `TODO`s.
+* Check `src/npm/descriptor/create.js` whether it reflects the current Monaco Editor API.
 * Update version in `README.md` (installing)
 * Update version in `src/main/java/com/github/blutorange/primefaces/util/Constants.java`
 * Update version in `pom.xml`

demo/src/main/java/TestBean.java

@@ -7,6 +7,9 @@
 import java.io.Serializable;
 import java.util.Arrays;
 import java.util.Collection;
+import java.util.Map;
+import java.util.HashMap;
+import java.util.stream.Collectors;
 
 @ManagedBean(name="testBean")
 @ViewScoped
@@ -21,12 +24,16 @@ public class TestBean implements Serializable {
     private void init() {
         uiLanguage = "en";
         theEnum = TheEnum.Foo;
-        code = "/**\n" + " * @param {number} x The first number.\n" + " * @param {number} y The second number.\n" + " * @return {number} The sum of the numbers\n" + " */\n" + "function testbar(x, y) {\n" + "\treturn x + y;\n" + "}\n" + "const z1 = testbar(5, 3);\n" + "const z2 = testbar(5, 3);\n" + "const z3 = testbar(5, 3);";
+        code = "/**\n" + " * @param {number} x The first number.\n" + " * @param {number} y The second number.\n" + " * @return {number} The sum of the numbers\n" + " */\n" + "function testbar(x, y) {\n" + "\treturn x + y;\n" + "}\n" + "const z1 = testbar(5, 3);\n" + "const z2 = testbar(5, 3);\n" + "const z3 = testbar(5, 3);\n\n$(\".acc\").accordion(\"refresh\");";
         editorOptions = new EditorOptions()
                 .setLanguage(ELanguage.JAVASCRIPT)
                 .setTheme(ETheme.VS)
+                .setSuggest(new EditorSuggestOptions()
+                    .addFilteredType("keyword", false)
+                )
                 .setLineNumbers(ELineNumbers.ON)
                 .setWordWrap(EWordWrap.ON)
+                .addRuler(60, 100)
                 .setFontSize(20);
     }
 

demo/src/main/webapp/test.xhtml

@@ -44,5 +44,12 @@ http://primefaces.org/ui/extensions ">
             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>

docs/vdldoc/primefaces-blutorange/monacoEditor.html

@@ -323,15 +323,9 @@ <h2 class="title">
                 <p>An extender object to further customize the monaco editor via JavaScript. This can be either:</p>
                 <ul>
                   <li>unset, in which case no further customization is performed</li>
-                  <li>a JavaScript expression that evaluates to an extender object</li>
-                  <li>a resource whose content evaluates to an extender object. The resource name is prefixed with
-                  the appropriate base URL (eg. <code>http://.../java.faces.resources/</code>). You need to append
-                  the <code>.xhtml</code> suffix yourself. If the resource is inside a resource library, specify the
-                  URL parameter <code>ln</code>, eg. <code>myextender.js.xhtml?ln=mylib</code>.</li>
+                  <li>or a JavaScript expression that evaluates to an extender object</li>
                 </ul>
-                <p>The given extender string is first evaluated as a JavaScript expression; and if that fails, interpreted
-                as a resource file.</p>
-                The extender object may one or more several properties:
+                The extender object may have one or more several properties:
                 <ul>
                 <li>beforeCreate(editorWidget, options). Called before the monaco editor is created. It is passed
                 the current options object that would be used to initialize the monaco editor. If this callback

pom.xml

@@ -21,7 +21,7 @@
         <maven.clean.plugin.version>3.1.0</maven.clean.plugin.version>
         <maven.gpg.plugin.version>1.6</maven.gpg.plugin.version>
         <vdldoc.maven.plugin.version>1.0</vdldoc.maven.plugin.version>
-        <frontend-maven-plugin-version>1.7.5</frontend-maven-plugin-version>
+        <frontend-maven-plugin-version>1.7.6</frontend-maven-plugin-version>
         <closure.compiler.maven.plugin.version>2.3.0</closure.compiler.maven.plugin.version>
         <primefaces.version>7.0</primefaces.version>
         <nexus.staging.version>1.6.8</nexus.staging.version>

src/main/js/widget.js

@@ -273,6 +273,10 @@ class ExtMonacoEditor extends PrimeFaces.widget.BaseWidget {
         // Set defaults.
         this.options = jQuery.extend({}, EditorDefaults, this.cfg);
 
+        /** @type {{resolve: (widget: ExtMonacoEditor) => void, reject: (reason: any) => void}[]} */
+        this._onDone = [];
+        this.jq.data("initialized", false);
+
         // Get elements
         this._input = this.jq.find(".ui-helper-hidden-accessible textarea");
         this._editorContainer = this.jq.children(".ui-monaco-editor-ed");
@@ -299,9 +303,17 @@ class ExtMonacoEditor extends PrimeFaces.widget.BaseWidget {
         // Begin loading the editor
         this._setup().then(() => {
             this._fireEvent("initialized");
-            this.jq.data("initialized", true);    
+            this.jq.data("initialized", true);
+            for (const {resolve} of this._onDone) {
+                resolve(this);
+            }
+            this._onDone = [];
         }).catch(error => {
             console.error("Failed to initialize monaco editor", error);
+            for (const {reject} of this._onDone) {
+                reject(error);
+            }
+            this._onDone = [];
         });
     }
 
@@ -343,6 +355,18 @@ class ExtMonacoEditor extends PrimeFaces.widget.BaseWidget {
         return this._editorContainer;
     }
 
+    /**
+     * @return {Promise<ExtMonacoEditor>} A promise that is resolved once the editor has finished loading.
+     */
+    whenReady() {
+        if (this.jq.data("initialized")) {
+            return Promise.resolve(this);
+        }
+        return new Promise((resolve, reject) => {
+            this._onDone.push({resolve, reject});
+        });
+    }
+
     async _setup() {
         const extender = loadExtender(this.options);
         this._extenderInstance = extender;

src/npm/descriptor/create.js

@@ -51,6 +51,11 @@ clean(err => {
 
     const EditorSuggestOptions = Class("EditorSuggestOptions", {
         filterGraceful: Boolean(),
+        filteredTypes: Map(String(), Boolean()),
+        localityBonus: Boolean(),
+        maxVisibleSuggestions: Boolean(),
+        shareSuggestSelections: Boolean(),
+        showIcons: Boolean(),
         snippetsPreventQuickSuggestions: Boolean(),
     });
 
@@ -114,7 +119,6 @@ clean(err => {
         glyphMargin: Boolean(),
         hideCursorInOverviewRuler: Boolean(),
         highlightActiveIndentGuide: Boolean(),
-        iconsInSuggestions: Boolean(),
         links: Boolean(),
         matchBrackets: Boolean(),
         mouseWheelZoom: Boolean(),

src/npm/descriptor/util.js

@@ -67,28 +67,28 @@ function createSimpleGetter(asField, name, type) {
         const lines = [];
         lines.push(`    private ${type.value} ${name};`);
         lines.push("");
-        lines.push(`    public ${type.value} ${type.value.toLowerCase() === "boolean" ? "is" : "get"}${capitalize(name)}() {
+        lines.push(`    public ${type.value} ${getterName(name, type)}() {
         return ${name};
     }`);
         return lines.join("\n");
     }
     else {
-        return `    public ${type.value} ${type.value.toLowerCase() === "boolean" ? "is" : "get"}${capitalize(name)}() {
-        return (${type.value}) obj.get("${name}");
+        return `    public ${type.value} ${getterName(name, type)}() {
+        return (${type.value}) (has("${name}") ? get("${name}") : null);
     }`;
     }
 }
 
 function createSimpleSetter(asField, clazz, name, type, converter) {
     if (asField) {
-        return `    public ${clazz} set${capitalize(name)}(final ${type.value} ${name}) {
+        return `    public ${clazz} ${setterName(name)}(final ${type.value} ${name}) {
         this.${name} = ${converter ? converter(name) : name};
         return this;
     }`;    
     }
     else {
-        return `    public ${clazz} set${capitalize(name)}(final ${type.value} ${name}) {
-        obj.put("${name}", ${converter ? converter(name) : name});
+        return `    public ${clazz} ${setterName(name)}(final ${type.value} ${name}) {
+        put("${name}", ${converter ? converter(name) : name});
         return this;
     }`;
     }
@@ -107,27 +107,24 @@ function createEnumSetter(asField, clazz, name, type) {
 }
 
 function createHead(clazz) {
-    return `package com.github.blutorange.primefaces.config.monacoeditor;
-
-import org.primefaces.json.JSONObject;
-import java.io.Serializable;
-
-@SuppressWarnings("serial")
-public class ${clazz} implements Serializable {
-    private JSONObject obj = new JSONObject();`;
+    return [
+        `package com.github.blutorange.primefaces.config.monacoeditor;`,
+        ``,
+        `import org.primefaces.json.*;`,
+        `import java.io.Serializable;`,
+        ``,
+        `@SuppressWarnings("serial")`,
+        `public class ${clazz} extends JSONObject implements Serializable {`,
+    ].join("\n");
 }
 
 function createFooter() {
-    return `
-    JSONObject getJSONObject() {
-        return obj;
-    }
-    
-    @Override
-    public String toString() {
-        return getJSONObject().toString();
-    }
-}`;
+    return [
+        `    JSONObject getJSONObject() {`,
+        `        return this;`,
+        `    }`,
+        `}`,
+    ].join("\n");
 }
 
 function createClass(clazz, fields) {
@@ -139,7 +136,14 @@ function createClass(clazz, fields) {
         lines.push(type.getter(name, type));
         lines.push("");
         lines.push(type.setter(clazz, name, type));
+        if (type.methods) {
+            for (const [_, method] of Object.entries(type.methods)) {
+                lines.push("");
+                lines.push(method(clazz, name, type));
+            }
+        }
     }
+    lines.push("");
     lines.push(createFooter());
     return lines.join("\n");
 }
@@ -165,30 +169,75 @@ ${constants.map(constant => `    ${enumCase(constant)}("${constant}")`).join(",\
 `.trim();
 }
 
-function Array(type, asField = false) {
-    return {
-        type: "array",
-        value: `java.util.List<${type.value}>`,
-        getter: createSimpleGetter.bind(null, asField),
-        setter: createSimpleSetter.bind(null, asField),
-    };
+function getterName(name, type) {
+    return `${type.value.toLowerCase() === "boolean" ? "is" : "get"}${capitalize(name)}`;
 }
 
-function Map(keyType, valueType, asField = false) {
+function setterName(name) {
+    return `set${capitalize(name)}`;
+}
+
+function stripPlural(name) {
+    if (name.endsWith("s")) return name.substring(0, name.length - 1);
+    return name;
+}
+
+function Array(itemType, asField = false) {
     return {
-        type: "map",
-        value: `java.util.Map<${keyType.value},${valueType.value}>`,
+        type: "JSONArray",
+        value: `java.util.List<${itemType.value}>`,
+        value: `JSONArray`,
         getter: createSimpleGetter.bind(null, asField),
         setter: createSimpleSetter.bind(null, asField),
+        generics: [itemType],
+        methods: {
+            add(clazz, name, type) {
+                return [
+                    `    public ${clazz} add${stripPlural(capitalize(name))}(final ${type.generics[0].value} ...items) {`,
+                    `        ${type.value} x = ${getterName(name, type)}();`,
+                    `        if (x == null) ${setterName(name)}(x = new JSONArray());`,
+                    `        for (${type.generics[0].value} item : items) x.put(item);`,
+                    `        return this;`,
+                    `    }`,
+                ].join("\n");
+            },
+            set(clazz, name, type) {
+                return [
+                    `    public ${clazz} set${capitalize(name)}(java.util.List<${type.generics[0].value}> ${name}) {`,
+                    `        return set${capitalize(name)}(new JSONArray(${name}));`,
+                    `    }`,
+                ].join("\n");
+            },
+        },
     };
 }
 
-function Set(type, asField = false) {
+function Map(keyType, valueType, asField = false) {
     return {
-        type: "set",
-        value: `java.util.Set<${type.value}>`,
+        type: "JSONObject",
+        value: `JSONObject`,
         getter: createSimpleGetter.bind(null, asField),
         setter: createSimpleSetter.bind(null, asField),
+        generics: [keyType, valueType],
+        methods: {
+            add(clazz, name, type) {
+                return [
+                    `    public ${clazz} add${stripPlural(capitalize(name))}(final ${type.generics[0].value} key, final ${type.generics[1].value} value) {`,
+                    `        ${type.value} x = ${getterName(name, type)}();`,
+                    `        if (x == null) ${setterName(name)}(x = new JSONObject());`,
+                    `        x.put(key, value);`,
+                    `        return this;`,
+                    `    }`,
+                ].join("\n");
+            },
+            set(clazz, name, type) {
+                return [
+                    `    public ${clazz} set${capitalize(name)}(java.util.Map<${type.generics[0].value},${type.generics[1].value}> ${name}) {`,
+                    `        return set${capitalize(name)}(new JSONObject(${name}));`,
+                    `    }`,
+                ].join("\n");
+            }
+        },
     };
 }