Embedding JavaScript Code Inside JSON Properties with Monaco Editor

Using Monaco Editor to Highlight JavaScript in JSON Properties

The Monaco Editor is a powerful code editor, widely known for being the core behind Visual Studio Code. It offers extensive customization, including syntax highlighting, tokenization, and embedding of different languages within files. However, there are cases where developers need advanced setups, like embedding JavaScript within JSON properties.

A common challenge arises when trying to display JavaScript code that resides inside JSON properties as if it were a standalone JavaScript block. This becomes essential for projects where JSON acts not only as data storage but also carries snippets of executable code, such as those under the "eval" property.

In this article, I will demonstrate the steps required to configure the Monaco Editor to recognize and correctly display JavaScript embedded inside JSON fields. Despite existing tutorials and suggestions, achieving the desired syntax highlighting requires a more tailored approach, which I will explore here.

Using the right tokenization patterns and configurations will ensure that the Monaco Editor behaves as intended. The example code provided contains a JSON structure with an "eval" field holding JavaScript code. I will guide you through the solution and highlight some pitfalls I encountered while trying to implement this feature using Copilot's suggestions.

How to Embed JavaScript in JSON Using Monaco Editor

The scripts provided earlier demonstrate how to configure the Monaco Editor to recognize and correctly display JavaScript embedded inside JSON properties, specifically under an "eval" field. This setup ensures that the editor can parse the embedded JavaScript as if it were part of a standalone JavaScript file. The key to achieving this lies in defining a custom tokenizer using Monarch syntax, which allows the editor to identify the JavaScript section and apply proper syntax highlighting within the JSON structure.

One of the most important commands in the example is monaco.languages.register. This command registers a new language configuration, effectively extending Monaco's default behavior. By using this, we introduce a custom language called "jsonWithJS" to differentiate our enhanced JSON setup from the standard one. We also employ setMonarchTokensProvider, which allows us to declare tokenization rules for the newly registered language. This is crucial for telling the editor how to handle the embedded JavaScript within the "eval" property.

The nextEmbedded property plays a critical role in enabling the transition from JSON to JavaScript within a single token. It ensures that the content inside the "eval" field is treated as JavaScript, even though it resides within a JSON file. This seamless transition makes the code inside the "eval" field appear as JavaScript and benefits developers who rely on Monaco’s syntax highlighting capabilities for better readability. Additionally, the monaco.editor.create method is used to initialize the Monaco Editor and render the editor instance within the specified HTML container.

The unit test using Jest validates that the JavaScript inside the JSON property is correctly recognized and highlighted. This ensures that our solution is reliable and works across different environments. We also implement error handling with console.error to log any issues during the editor’s initialization. This modular design allows developers to reuse the code easily and extend it for other scenarios where language embedding is required. With these configurations, developers can now benefit from a more dynamic and readable experience when working with JSON files that contain executable JavaScript code.

// Frontend Script: Monaco Editor configuration to embed JavaScript within JSON
// This solution initializes Monaco with a custom language definition.
require(['vs/editor/editor.main'], function () {
    monaco.languages.register({ id: 'jsonWithJS' });
    monaco.languages.setMonarchTokensProvider('jsonWithJS', {
        tokenizer: {
            root: [
                [/"eval"\s*:\s*"(.*)"/, { token: 'source.js', nextEmbedded: 'javascript' }],
                [/[{}[\],]/, 'delimiter'],
                [/\b\d+\b/, 'number'],
                [/"/, { token: 'string', bracket: '@open', next: '@string' }],
            ],
        }
    });
    monaco.editor.create(document.getElementById('container'), {
        value: '{"eval":"Item.val = Attr.val"}',
        language: 'jsonWithJS'
    });
});

// Frontend: Modular Monaco configuration with error handling
function setupMonacoEditor() {
    require(['vs/editor/editor.main'], function () {
        try {
            monaco.languages.register({ id: 'jsonWithEmbeddedJS' });
            monaco.languages.setMonarchTokensProvider('jsonWithEmbeddedJS', {
                tokenizer: {
                    root: [[/"eval"\s*:\s*"(.*?)"/, { token: 'source.js', nextEmbedded: 'javascript' }]]
                }
            });
            const editor = monaco.editor.create(document.getElementById('editor'), {
                value: '{"eval":"console.log(Attr.val);"}',
                language: 'jsonWithEmbeddedJS'
            });
        } catch (error) {
            console.error('Failed to initialize Monaco:', error);
        }
    });
}
setupMonacoEditor();

// Unit Test: Jest test for Monaco Editor's JSON with embedded JavaScript
test('Monaco Editor recognizes JavaScript in eval property', () => {
    const mockEditor = {
        getModel: () => ({ getValue: () => '{"eval":"console.log(Item.val);"}' })
    };
    const value = mockEditor.getModel().getValue();
    expect(value).toContain('console.log(Item.val);');
    expect(value).toMatch(/"eval":\s*".*?"/);
});

Enhancing Syntax Highlighting in JSON with Embedded JavaScript

One aspect not discussed earlier is the importance of optimizing editor performance when dealing with large JSON files containing embedded JavaScript. The Monaco Editor can handle multiple languages, but embedding languages within each other adds complexity. Without careful configuration, performance might degrade, especially if the tokenization process becomes inefficient. To avoid this, developers should ensure their Monarch tokenizer is well-defined and uses optimized regular expressions to minimize processing time.

Another critical consideration is the editor's flexibility with auto-completion. Developers may wish to enhance their JSON-with-JavaScript editor by enabling autocompletion for both JSON keys and JavaScript code. For this, the completionItemProvider API in Monaco can be used to provide suggestions dynamically as the user types. This feature can significantly improve productivity when working with complex JSON structures containing evaluative code blocks.

Security is another essential aspect. Embedding JavaScript inside JSON might raise concerns about code injection risks, particularly in environments where user-generated content is allowed. It’s recommended to validate and sanitize JSON content before rendering it in the editor. Additionally, developers should consider sandboxing or limiting the execution of embedded JavaScript to avoid potential security vulnerabilities. Combining these practices ensures that the integration of JavaScript into JSON is both smooth and secure, meeting development and safety standards.