The Monaco editor widget was built with extensibility in mind. The PrimeFaces widget is a JSF wrapper component that lets you integrate the editor easily in a JSF page and provides several options for the most common features. Sometimes, however, it may become necessary to customize the editor event further. In that case, you can make use of the extensive client-side JavaScript API provided by the Monaco editor.

To do so, specify the extender option on the editor. This lets you set a custom JavaScript object with several callback methods for the lifecycle of the Monaco editor. For example, you can modify the editor options before the editor is created, or add TypeScript declaration files for improved IntelliSense. The example below loads the declaration files for JQuery from the DefinitelyTyped GitHub repo and adds them to the editor. This enables autocomplete and docs for JQuery function.

For the inline widget, you can just specify a JavaScript expression that evaluates to an extender object. For the framed widget, you will need to specify an URL to a JavaScript file that creates the extender and writes it to window.MonacoEnvironment.Extender. See the panel to the right for more info about the extender object. Please note that for the framed widget, the extender is run in the iframe context and will not have access to JQuery nor to PrimeFaces related functions.

The extenders you see in the example below use the fetch API and other modern JavaScript features. If you need to support old browsers, consider using XMLHttpRequest instead of fetch instead.

Finally, you can also check out the Monaco editor playground which contains many more examples of how you can use the client-side API to customize the editor. ${showcase:getFileContent('/sections/monacoEditor/example-extenderDiff.xhtml')} ${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/MonacoEditorController.java')} ${showcase:getFileContent('/resources/js/monacoExtender.js')}