MonacoEditor React Library

A versatile, reusable code editor library powered by Monaco Editor, built with Vite and TypeScript. Use it as a React component or embed it as a standalone script in any HTML page.

Features

• React Component: Import and use <MonacoEditor /> in any React app.
• Standalone Script: Embed the editor in plain HTML via a <script> tag and global API.
• Powered by Monaco Editor: Full syntax highlighting, themes, and options.
• Vite + TypeScript: Fast, modern build setup.

Installation

npm install monaco-editor vite-plugin-monaco-editor

Monaco worker configuration helper

When consuming this library you must ensure Monaco's web workers are reachable from the browser. Different hosting or micro-frontend setups may require you to change where the worker files are served from.

This package exports a small helper you can call at runtime before creating any editor:

import { configureMonacoWorker } from 'dojo-code-editor';

// Call this early (e.g. in index.tsx) so Monaco can load its workers from /monaco
configureMonacoWorker({ baseUrl: '/monaco' });

What this does:

• Sets window.__MONACO_BASE_URL and window.MonacoEnvironment.getWorkerUrl so Monaco's worker requests are routed to ${baseUrl}/... (json/css/html/typescript/editor workers).
• Safe to call multiple times. No-op in SSR environments (it checks for window).

You must still make the worker files available under the chosen baseUrl (for example copy node_modules/monaco-editor/min/vs to your app's public/monaco directory or host them on your CDN).

If you prefer, you can provide your own window.MonacoEnvironment.getWorker that returns a Worker instance.

Usage

1. As a React Component

import { MonacoEditor } from 'your-library';

<MonacoEditor
  value={code}
  onChange={setCode}
  language="javascript"
  theme="vs-dark"
  options={{ fontSize: 14 }}
  filePath="src/App.js"
/>

Props

• value (string): Code content to display.
• onChange (function): Callback when content changes.
• language (string): Programming language for syntax highlighting.
• theme (string, optional): Editor theme (default: 'vs-dark').
• options (object, optional): Monaco Editor options.
• filePath (string, optional): Path of the file being edited.

2. As a Standalone Script

1. Build the UMD bundle (see below).
2. Include the script and CSS in your HTML:

<link rel="stylesheet" href="dist/style.css" />
<div id="editor" style="height:500px;"></div>
<script src="dist/standalone.umd.js"></script>
<script>
  MonacoEditor.createEditor('editor', {
    value: 'console.log("Hello, World!");',
    language: 'javascript',
    theme: 'vs-dark'
  });
</script>

Development

Project Structure

• src/lib/components/MonacoEditor.tsx — Core React component
• src/lib/index.ts — ES module entry
• src/lib/standalone.ts — UMD entry (global API)
• example.html — Standalone usage example
• src/App.tsx — React usage example

Build & Library Output

• Vite is configured to output both ES and UMD bundles.
• UMD build exposes MonacoEditor.createEditor globally.
• React/ReactDOM are externalized for ES build, bundled for UMD.

TypeScript

• Declaration files (.d.ts) are generated for all exports.

Example Pages

• React Example: See src/App.tsx for usage in a React app.
• Standalone Example: See example.html for script-tag usage.

Publishing

• Ensure package.json includes:
  • main (UMD bundle)
  • module (ES bundle)
  • types (TypeScript declarations)
  • files (published files)

License

MIT

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

Docker (production build)

Build the app and serve it with nginx using docker-compose. The provided Dockerfile builds the Vite app and the docker-compose.yml maps host port 8080 to the container.

Examples (PowerShell):

docker-compose up --build
# open http://localhost:8080

Stop and remove:

docker-compose down

Package usage, styles, and build notes

If you publish this repository as an npm package (the current package name is dojo-code-editor), here are the important notes for consumers and maintainers:

• Importing the default component (package root):

import CodeEditor from 'dojo-code-editor';
// or named import if you prefer
import { MonacoEditor } from 'dojo-code-editor';

• Where the styles live:

  The package build copies CSS files from src/styles into the published dist/styles folder. After installing the package, the styles will be available at:

  • node_modules/dojo-code-editor/dist/styles/editor.css
  • node_modules/dojo-code-editor/dist/styles/pages.css

  You can import them in your app like:

  import 'dojo-code-editor/dist/styles/editor.css';
  // or add a link tag in HTML
  // <link rel="stylesheet" href="node_modules/dojo-code-editor/dist/styles/editor.css" />

• How the library build runs automatically:

  The package includes a build:lib script that compiles TypeScript into dist/ and copies styles there. The project currently sets:

  "prepare": "npm run build:lib"

  When prepare is present it runs automatically in these cases:

  • Before npm publish or npm pack (so the published tarball contains dist/).
  • When someone installs this package directly from a git repository (e.g. npm i user/repo).
  • During a fresh npm install in this repository (local development installs).

  If you prefer the build to run only on publish/pack and not during local install or git installs, replace prepare with prepublishOnly in package.json.

• Developer tips

  • To build locally: npm run build:lib (this runs the TypeScript compile and copies styles to dist/styles).
  • To include styles automatically for consumers, consider bundling all CSS into a single dist/style.css and exposing it at package root (I can help add this).

If you want me to update README to show a one-line CSS import (import 'dojo-code-editor/style.css') and update the build to copy/produce dist/style.css, tell me and I'll implement it next.

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])