@sxo/component-monaco provides a streamlined, framework-agnostic way to integrate the Monaco Editor into your application while maintaining the Headless philosophy of the SXO ecosystem.

🧩 Headless Utility

Unlike traditional Monaco wrappers that come with heavy CSS or fixed UI layouts, this package focuses purely on the editor's lifecycle and core configuration.

• Style Freedom: No built-in theme or layout restrictions. Fits perfectly with SXO design tokens.
• Pure Logic: Focuses on editor creation, content synchronization, and event management.
• Framework Agnostic: Can be wrapped easily in React, Vue, or used in vanilla JavaScript.

✨ Features

• ⚙️ Lifecycle Management: Handles editor initialization and disposal automatically.
• 🛡️ Type Safety: Full TypeScript definitions for options and instances.
• 🎨 Configurable: Simple API for common settings like language, theme, and read-only mode.
• 🚀 Performance: Optimized for minimal overhead on top of the base editor.

🚀 Quick Start

Installation

pnpm add @sxo/component-monaco monaco-editor

Usage

import { createMonacoEditor } from '@sxo/component-monaco';

const container = document.getElementById('editor-container');
const editorInstance = createMonacoEditor(container, {
    value: 'console.log("Hello, SXO!");',
    language: 'javascript',
    theme: 'vs-dark',
    onChange: (newValue) => console.log('Content changed:', newValue)
});

// Access the underlying Monaco instance
console.log(editorInstance.editor);

// Cleanup
editorInstance.destroy();

📖 Documentation

For more details, visit the Monaco Component Documentation.

📄 License

MIT License.