npm package: @peoplefirst/code-editor
Description: 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.
Latest version: 0.0.3


# 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

```bash
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:

```ts
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

```tsx
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:

```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](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/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):

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

Stop and remove:

```powershell
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):

```ts
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:

  ```ts
  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:

  ```json
  "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.

```js
// 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...
    },
  },
])
```