██╗  ██╗███████╗    ███╗   ███╗ ██████╗ ███╗   ██╗ █████╗  ██████╗ ██████╗
╚██╗██╔╝██╔════╝    ████╗ ████║██╔═══██╗████╗  ██║██╔══██╗██╔════╝██╔═══██╗
 ╚███╔╝ ███████╗    ██╔████╔██║██║   ██║██╔██╗ ██║███████║██║     ██║   ██║
 ██╔██╗ ╚════██║    ██║╚██╔╝██║██║   ██║██║╚██╗██║██╔══██║██║     ██║   ██║
██╔╝ ██╗███████║    ██║ ╚═╝ ██║╚██████╔╝██║ ╚████║██║  ██║╚██████╗╚██████╔╝
╚═╝  ╚═╝╚══════╝    ╚═╝     ╚═╝ ╚═════╝ ╚═╝  ╚═══╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝
                    ╔═══════════════════════════════════════╗
                    ║     XanoScript Monaco Editor          ║
                    ╚═══════════════════════════════════════╝

XanoScript Monaco Editor

A Monaco Editor wrapper that provides XanoScript language support with syntax highlighting, autocompletion, and language server integration via web worker.

Features

• Full XanoScript syntax highlighting
• Intelligent autocompletion
• Real-time error checking and diagnostics
• Hover tooltips with documentation
• Language Server Protocol (LSP) support via web worker

Prerequisites

• Node.js (version specified in .nvmrc - if using nvm run nvm use)
• npm

Installation

npm install @xano/xanoscript-monaco-editor

Project Structure

xanoscript-monaco-editor/
├── src/                      # TypeScript source code
│   ├── XanoScriptEditor.ts   # Main editor class
│   ├── main.ts               # Browser entry point
│   └── style.css             # Editor styles
├── tests/                    # Test files
├── public/                   # Static assets and compiled worker
└── dist/                     # Build output

Key Files

• src/XanoScriptEditor.ts - The XanoscriptMonacoEditor class containing editor initialization and iframe messaging logic
• src/main.ts - Browser entry point that instantiates the editor with dependency injection
• esbuild.js - Build script that compiles the language server into a web worker

Development

Quick Start

# Install dependencies
npm install

# Compile language server worker and start dev server
npm run start-dev

Available Scripts

| Command | Description | |---------|-------------| | npm run start-dev | Compile worker + start dev server | | npm run dev | Start Vite dev server (requires compiled worker) | | npm run compile | Type-check and compile language server worker | | npm run build | Create production build | | npm run build:prod | Create optimized production build | | npm test | Run test suite |

Build Process

Step 1: Compile Language Server Worker

Before running the dev server or building, compile the language server worker:

npm run compile

This command:

1. Runs TypeScript type checking (npm run check-types)
2. Compiles the language server using esbuild
3. Outputs the worker to public/worker.js

The compiled worker bundles the complete language server functionality into a browser-compatible web worker that communicates with Monaco Editor via the Language Server Protocol.

Step 2: Development or Production Build

# Development with hot reloading
npm run dev

# Production build
npm run build

Testing

Run the test suite:

npm test

Tests use Vitest with jsdom for browser API simulation and comprehensive mocking of Monaco Editor dependencies.

Dependencies

• monaco-editor-wrapper - Monaco Editor wrapper with LSP support
• @xano/xanoscript-language-server - XanoScript language server
• vscode-languageclient - VSCode Language Client library

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Ensure tests pass (npm test)
5. Ensure build succeeds (npm run build)
6. Submit a pull request

License

Proprietary - Xano, Inc.