@amacierzynski/twx-monaco-editor

ThingWorx Monaco Code Editor

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.

Installation

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.

1. 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.

2. 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.
3. 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.
• If you want to also use the MonacoEditor widget, to display code during mashup runtime, you will need to import the ThingWorx extension listed under Releases. It should be the one named MonacoScriptEditor-VERSION.zip.

Removing

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.

Upgrading

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.

Features

Basic code editor features

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:

Multiple selections (multi-cursor)

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.

Column (box) selection

Hold Shift and Alt while dragging to do column selection:

Folding

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.

Code intelligence

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).

Thingworx Completions

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.

Keyboard Shortcuts

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.

  

Typescript support

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.

Other Features

• Thingworx snippets (iterate infotable, create infotable, iterate infotable fields)
• In the new composer, the expression editor is also replaced with a proper editor

Alternative installation options

Local installation

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.

0. Import the ThingWorx extension listed under Releases. It should be the one named MonacoScriptEditor-VERSION.zip.
1. On the server hosting Thingworx, navigate to the tomcat folder, then to apache-tomcat/webapps/Thingworx/Composer.
2. Edit the file index.html.
3. 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>

Reporting issues

Issues and suggestions can be reported at Issues. They will be resolved if there is time available.

Disclaimer

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.