diff --git a/CHANGELOG.md b/CHANGELOG.md index 974f19a..ab244fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,10 +2,11 @@ See also [the changelog of monaco-editor](https://github.com/Microsoft/monaco-ed # 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. +- Update to monaco editor 0.17.1 +- Add transparent `getValue` / `setValue` methods to the widget API, see #7 +- Keep scrolling position during AJAX update, see #8 +- The widget is now a `PrimeFaces.widget.DeferredWidget`, so that it works better with + `p:tabs` etc, see #6 # 0.17.0 diff --git a/README.md b/README.md index 6069500..b7204e8 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ Make sure you're running at least PrimeFaces 7.0. Include this as a dependency: com.github.blutorange primefaces.monaco - 0.17.0 + 0.17.1 diff --git a/demo/src/main/java/TestBean.java b/demo/src/main/java/TestBean.java index 683e985..1cbd7a6 100644 --- a/demo/src/main/java/TestBean.java +++ b/demo/src/main/java/TestBean.java @@ -1,6 +1,8 @@ import com.github.blutorange.primefaces.config.monacoeditor.*; +import org.apache.commons.lang3.StringUtils; + import javax.annotation.PostConstruct; import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; @@ -16,6 +18,7 @@ public class TestBean implements Serializable { private String code; + private String longCode; private String uiLanguage; private boolean rendered; private TheEnum theEnum; @@ -26,6 +29,7 @@ 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);\n\n$(\".acc\").accordion(\"refresh\");"; + longCode = StringUtils.repeat(code, 20); editorOptions = new EditorOptions() .setLanguage(ELanguage.JAVASCRIPT) .setTheme(ETheme.VS) @@ -66,6 +70,14 @@ public void setCode(final String code) { this.code = code; } + public String getLongCode() { + return longCode; + } + + public void setLongCode(final String longCode) { + this.longCode = longCode; + } + public TheEnum getTheEnum() { return theEnum; } diff --git a/demo/src/main/webapp/test5.xhtml b/demo/src/main/webapp/test5.xhtml new file mode 100644 index 0000000..53be635 --- /dev/null +++ b/demo/src/main/webapp/test5.xhtml @@ -0,0 +1,31 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/demo/src/main/webapp/tests.xhtml b/demo/src/main/webapp/tests.xhtml index 1dc92ae..f8e9182 100644 --- a/demo/src/main/webapp/tests.xhtml +++ b/demo/src/main/webapp/tests.xhtml @@ -12,6 +12,7 @@
  • +
  • \ No newline at end of file diff --git a/src/main/java/com/github/blutorange/primefaces/util/Constants.java b/src/main/java/com/github/blutorange/primefaces/util/Constants.java index 6c195f4..a3f1931 100644 --- a/src/main/java/com/github/blutorange/primefaces/util/Constants.java +++ b/src/main/java/com/github/blutorange/primefaces/util/Constants.java @@ -4,5 +4,5 @@ public final class Constants { private Constants() {} public final static String LIBRARY = "primefaces-blutorange"; - public final static String VERSION = "0.17.0"; + public final static String VERSION = "0.17.1"; } diff --git a/src/main/js/widget.js b/src/main/js/widget.js index d606948..fd42f88 100644 --- a/src/main/js/widget.js +++ b/src/main/js/widget.js @@ -240,13 +240,11 @@ const EditorDefaults = { editorOptions: {}, extender: "", extension: "", - height: "", language: "plaintext", readonly: false, uiLanguage: "", uiLanguageUri: "", version: "1.0", - width: "", }; // Make sure the monaco environment is set. @@ -258,34 +256,28 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget { */ constructor(...args) { super(...args); - /* super calls #init - this._editor = undefined; - this._editorContainer = $(); - this._extenderInstance = undefined; - this._input = jQuery(); - this._resizeObserver = undefined; - this._resolvedUiLanguageUri = ""; - this.options = jQuery.extend({}, EditorDefaults); - */ } + /** + * + * @param {Partial} cfg + */ init(cfg) { super.init(cfg); // Set defaults. + /** @type {typeof EditorDefaults} */ this.options = jQuery.extend({}, EditorDefaults, this.cfg); /** @type {{resolve: (widget: ExtMonacoEditor) => void, reject: (reason: any) => void}[]} */ this._onDone = []; this.jq.data("initialized", false); + this.scrollTop = this.scrollTop || 0; // Get elements this._input = this.jq.find(".ui-helper-hidden-accessible textarea"); this._editorContainer = this.jq.children(".ui-monaco-editor-ed"); - // Remove any existing editor. - this.destroy(); - // Default to the given value this._editorValue = this.getInput().val(); @@ -305,6 +297,9 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget { }; } + this.addRefreshListener(() => this.onRefresh()); + this.addDestroyListener(() => this.onDestroy()); + // Begin loading the editor this._setup().then(() => { this._fireEvent("initialized"); @@ -384,7 +379,12 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget { } } - destroy() { + onRefresh() { + this.scrollTop = this.getMonaco().getScrollTop(); + this.onDestroy(); + } + + onDestroy() { const extender = this._extenderInstance; const monaco = this.getMonaco(); if (extender && typeof extender.beforeDestroy === "function") { @@ -455,36 +455,23 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget { // Create a new editor instance. this._editor = monaco.editor.create(this.getEditorContainer().get(0), options); - // Evaluate the `afterCreate` callback of the extender. - if (typeof extender.afterCreate === "function") { - extender.afterCreate(this, wasLibLoaded); + // Restore scroll position (when ajax updating the editor) + if (typeof this.scrollTop === "number" && this.scrollTop > 0) { + this.getMonaco().setScrollTop(this.scrollTop); } - // Resize + // Auto resize if (this.options.autoResize) { if (typeof ResizeObserver === "function") { this._resizeObserver = new ResizeObserver(this._onResize.bind(this)); this._resizeObserver.observe(this.jq.get(0)); } else { - console.warn("Browser environment does not support autoresize. window.ResizeObserver is not defined."); + console.warn("Browser environment does not support autoresize: window.ResizeObserver is not available."); } } - if (typeof extender.afterCreate === "function") { - extender.afterCreate(this, wasLibLoaded); - } - - // Resize - if (this.options.autoResize) { - if (typeof ResizeObserver === "function") { - this._resizeObserver = new ResizeObserver(this._onResize.bind(this)); - this._resizeObserver.observe(this.jq.get(0)); - } - else { - console.warn("Browser environment does not support autoresize. window.ResizeObserver is not defined."); - } - } + // Event handling // Change event. // Set the value of the editor on the hidden textarea. @@ -507,6 +494,11 @@ class ExtMonacoEditor extends PrimeFaces.widget.DeferredWidget { this._editor.onKeyDown(keyboardEvent => this._fireEvent('keydown', keyboardEvent)); this._editor.onKeyUp(keyboardEvent => this._fireEvent('keyup', keyboardEvent)); this._editor.onDidType(key => this._fireEvent('keypress', key)); + + // After create callback + if (typeof extender.afterCreate === "function") { + extender.afterCreate(this, wasLibLoaded); + } } _onResize() { diff --git a/src/npm/package-lock.json b/src/npm/package-lock.json index d0c0341..e5d4121 100644 --- a/src/npm/package-lock.json +++ b/src/npm/package-lock.json @@ -1656,11 +1656,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1677,7 +1679,8 @@ }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -1806,6 +1809,7 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" }