Monaco Wrapper

A wrapper for Monaco Editor with a Stimulus controller for easy integration into web applications.

Installation

npm install @sealcode/monaco-wrapper
npx sealgen register-external-controllers @sealcode/monaco-wrapper src/controllers

Usage

Add package configuration

Add this to sealgen/copyToPublic in package.json

{
  "from": "node_modules/@sealcode/monaco-wrapper",
  "to": "dist/monaco-editor"
}

HTML Structure

Your HTML should have this structure:

<div data-controller="monaco">
  <textarea data-monaco-target="textarea">
    // Your initial code here
    function example() {
      console.log("Hello, Monaco!");
    }
  </textarea>
</div>

Features

• Automatically loads Monaco Editor when the controller connects
• Syncs editor content with a hidden textarea for form submission
• Configurable default number of rows (default: 20)
• Debounced content updates for better performance
• Automatic layout adjustment

Configuration

The controller supports the following configuration:

• defaultRowsNumber: Number of rows to display (default: 20)
• Language: Currently set to "javascript" (can be modified in the controller)
• Minimap: Disabled by default
• Scrollbar: Vertical scrollbar is hidden

Dependencies

This package requires:

• stimulus - For the controller framework
• monaco-editor - The Monaco editor itself
• throttle-debounce - For debounced updates
• @sealcode/add-to-head - For loading Monaco editor scripts

Development

npm install
npm run build
npm test

License

ISC