The purpose of this project is to globally replace the script editor in ThingWorx Composer with a better one, offering a similar editing experience to Visual Studio Code offering modern developer friendly tools like multiple cursors, autocompletion for ThingWorx entities, as well as the possibility to write ThingWorx services in TypeScript.
This project offers compatibility with both the Old Composer and the New Composer (starting with 8.4). Please refer to the installation guide for more information. A mashup builder widget is also available to display code in a mashup runtime.
Setting up Monaco Editor for ThingWorx requires creating a browser user script that will "inject" the editor into all ThingWorx Composer environments. This installation option requires no extension import into the ThingWorx server, and will always use the latest version of the editor.
- Install a browser addon for creating userscripts. Depending on your browser of choice, you can use:
- For Chrome/Edge or other Chromium based browsers: TamperMonkey
- For Firefox: TamperMonkey
- For Safari: Userscripts
If your company policy disallows the use of browser extensions, please the refer to the Alternative installation options.
- Install the user script: navigate to https://greasyfork.org/en/scripts/389994-thingworx-load-monaco-editor and click the Install button. Then confirm the installation.
- Monaco editor is now enabled for ALL ThingWorx environments you navigate to. To disable it, just disable the userscript from the addon dashboard.
Notes:
- The userscript above will always reference the latest released version of Monaco Editor.
- In the New Composer (Thingworx 8.4 and later), all editors will be replaced with the Monaco editor, including the script editor, subscription editor, CSS editor, expression editor and other JSON/XML editors.
- The last Monaco Editor extension that is compatible with the Old Composer (8.3 or earlier) is version v1.16.1. Import of the zip package is needed for this version.
- The extension listed under Releases should only be installed if you want to use the Monaco Editor as a ThingWorx mashup widget, to display code in a mashup. It should be the one named MonacoScriptEditor-VERSION.zip.
To disable the editor, just disable the user script in the addon settings. To remove the extension, just delete it using the Extension Management in Thingworx.
The user script linked above will automatically attept to use the latest released version. This means that you don't have to do anything to update. However, you can edit the user script to force a particular version.
After installing a new version of the widget, make sure you clear the browser cache. Here is an example of how to do that.
As it's based on the Visual Studio Code, most basic code editor features are inherited from there. See the official page for a list of keyboard shortcuts, as well as detailed explanations of other features like:
The editor supports multiple cursors for fast simultaneous edits. You can add secondary cursors (rendered thinner) with Alt+Click. Each cursor operates independently based on the context it sits in. A common way to add more cursors is with Ctrl+Alt+Down/⌥⌘↓ or Ctrl+Alt+Up/⌥⌘↑ that insert cursors below or above.
Ctrl+D selects the word at the cursor, or the next occurrence of the current selection.
Tip: You can also add more cursors with
⇧⌘L, which will add a selection at each occurrence of the current selected text.
Hold Shift and Alt while dragging to do column selection:
You can fold regions of source code using the folding icons on the gutter between line numbers and line start. Move the mouse over the gutter to fold and unfold regions. The folding regions are evaluated based on the indentation of lines. A folding region starts when a line has a smaller indent than one or more following lines, and ends when there is a line with the same or smaller indent.
The code editor offers a lot of features related to code intelligence: code completion, parameter info, quick info, and member lists.
You can trigger completions in any editor by typing ctrl + space or by typing a trigger character (such as the dot character (.) in JavaScript).
The editor offers optimized completions for all of the JavaScript functions, as well as the ThingWorx specific ones:
The script editor is fully aware of the context and all of the entities in the platform, allowing search and on demand generation of completions based on what the user has written.
In the case of services that return infotables, or infotable properties with known datashapes, it offers advanced completion for the datashape fields, including completion of methods on the value collection, as well as snippets to ease the work.
The following document showcases just some of keyboard shortcuts. Many more shortcuts exist, and can be viewed and accessed by pressing F1 to view the Command Pallette. You can also view the alternative shortcuts to use for MacOS or Linux.
-
Quick actions: Save ( ctrl + S), Cancel ( ctrl + Q), Test ( ctrl + Y), Save and Close ( ctrl + enter).
-
Diff editor: view changes since you started editing ( ctrl + K)
-
Config editor: Configure themes and all aspects of the editor, and viewing the changes in realtime ( ctrl + \). Changes are then saved in the user profile.
The developer can also write ThingWorx services using typescript, a typed superset of JavaScript that compiles to plain JavaScript. Whether you want to use all the features of typescript, or just the latest ECMAScript features, this allows you to write more concise and better code that is automatically transpiled to JavaScript. This feature does not rely on any serverside component. The editor automatically converts your code into JavaScript and that is what is being executed.
In the old composer, you can trigger this change similarly to how you would switch from JavaScript to SQL.
In the new composer, press F1, select Switch to Typescript. The reverse action is also available.
⚠️ When opening a service written in Typescript in a ThingWorx composer where the MonacoEditor extension is not installed, the developer will see the transpiled JavaScript code. If changes are done to this code, the Typescript code is NOT updated.
- Thingworx snippets (iterate infotable, create infotable, iterate infotable fields)
- In the new composer, the expression editor is also replaced with a proper editor
This option requires access to the install of ThingWorx, and will enable MonacoEditor for all developers using a thingworx environment. However, when updating ThingWorx this change needs to be reapplied.
- Import the ThingWorx extension listed under Releases. It should be the one named MonacoScriptEditor-VERSION.zip.
- On the server hosting Thingworx, navigate to the tomcat folder, then to
apache-tomcat/webapps/Thingworx/Composer. - Edit the file
index.html. - After line 9, after the existing
<script>tag, add the following:
<script type="text/javascript" src="../Common/extensions/MonacoScriptEditor/ui/MonacoScriptEditor/newComposer.bundle.js" charset="UTF-8"></script>Issues and suggestions can be reported at Issues. They will be resolved if there is time available.
The Monaco Editor for Thingworx is not official Thingworx product. It is something developed to improve the life of a Thingworx developer and he needs to understand that it is not supported and any issues encountered are his own responsability.