Mastering JSON Auto Completion with Monaco Editor

Enhancing JSON Editing Experience with Monaco Editor in Angular

Integrating Monaco Editor into an Angular application opens up a plethora of opportunities for enhancing text editing capabilities, particularly for JSON files. As a developer, I’ve recently embarked on refining the user experience in a project where users need to input JSON data. The requirements were specific: depending on the context of the user’s input, different sets of autocomplete suggestions had to be provided. Here we delve into how to set this up step-by-step, focusing on three lists: targetColumns, targetTables, and sourceColumns, to guide the autocomplete functionality.

Setting Up the Environment

To set the stage, it was crucial first to define the different arrays representing the data for autocomplete. These were tgtCol for target columns and tgtTbl for target tables in my initial configuration. In your setup, you should align these arrays with your source of data.

Configuring Monaco Editor for Autocomplete

Monaco Editor provides powerful APIs to handle various aspects of code editing. For the JSON autocomplete functionality, the registration of a completion item provider is the first step. By using monaco.languages.registerCompletionItemProvider with the ‘json’ parameter, we tell Monaco to activate our custom autocomplete logic whenever the user edits a JSON file.

Determining the Context for Autocomplete

To offer contextual autocomplete suggestions, we analyze the user’s current line and cursor position to decide whether they are typing a key or a value:

1. Completing a Key: This involves checking if the cursor is after an opening curly brace { or a comma ,, signifying the start of a new key. Here, the suggestions from the targetColumns should appear.

1. Completing a Value for “value” Key: When the user types in a value for a “value” key, context-sensitive suggestions from the targetTables list should be provided.

The helper functions isCompletingKey and isCompletingValue make these determinations by analyzing the text before the cursor.

Autocomplete Suggestions Logic

For each context (placing a key or a value), we had to filter and return the appropriate suggestions:

• getSuggestionsForKeys: Filters the keys depending on the user’s current input and returns suggestions that start with this input. This uses filter and map functions on the tgtCol array.

• getSuggestionsForValues: Once a key context (e.g., “value”) has been identified, this function suggests values from tgtTbl, again based on the user’s input.

The actual filtering leverages a helper function getUserInput, which retrieves the last string after a quotation mark " before the cursor. This indicates what the user is currently typing.

Creating an Autocomplete Item

Creating a completion suggestion is straightforward with the createSuggestion function which formats the suggestion with a label and other properties, such as the kind of suggestion, which in JSON usually is monaco.languages.CompletionItemKind.Property.

Final Integration into the Angular Component

With all pieces in place – arrays of data for suggestions and functions to decide and fetch these suggestions – the Monaco Editor instance is initialized within an Angular component. The editor’s configuration includes setting the language to JSON and enabling quick suggestions.

const editor = monaco.editor.create(document.getElementById('container'), {
  value: '{"tgtCol": {"value": ""}\n}',
  language: 'json',
  quickSuggestions: true
});

Initializing an editor this way within an Angular view, perhaps wrapped into a lifecycle hook or a specific method triggered by your application’s workflow, encapsulates the setup neatly.

Summary

Implementing such a feature-intensive JSON editor interface with Monaco in an Angular application involves a detailed understanding of how users interact with the editor and how contextual information can be leveraged. Building this feature not only improves the user experience but also underlines the flexibility and power of the Monaco Editor within web applications. This approach ensures that users receive relevant suggestions, making their data entry task less error-prone and more efficient.