@willbooster/monaco-react 0.0.0-semantically-released

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 WillBooster
+Copyright (c) 2018 Suren Atoyan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @willbooster/monaco-react
+
+[![monthly downloads](https://img.shields.io/npm/dm/@willbooster/monaco-react)](https://www.npmjs.com/package/@willbooster/monaco-react)
+[![npm version](https://img.shields.io/npm/v/@willbooster/monaco-react.svg?style=flat)](https://www.npmjs.com/package/@willbooster/monaco-react)
+[![Test](https://github.com/WillBooster/monaco-react/actions/workflows/test.yml/badge.svg)](https://github.com/WillBooster/monaco-react/actions/workflows/test.yml)
+
+React components for [Monaco Editor](https://microsoft.github.io/monaco-editor/), powered by [`@willbooster/monaco-loader`](https://github.com/WillBooster/monaco-loader).
+
+This package is a maintained fork of [`suren-atoyan/monaco-react`](https://github.com/suren-atoyan/monaco-react) published as `@willbooster/monaco-react`.
+
+## Installation
+
+```bash
+yarn add @willbooster/monaco-react monaco-editor
+```
+
+`react`, `react-dom`, and `monaco-editor` are peer dependencies. React 16.8 through 19 are supported.
+
+## Usage
+
+```tsx
+'use client';
+
+import Editor from '@willbooster/monaco-react';
+
+export default function Page() {
+  return <Editor height="90vh" defaultLanguage="typescript" defaultValue="const answer = 42;" />;
+}
+```
+
+`Editor`, `DiffEditor`, and `useMonaco` use React client-side hooks. In Next.js App Router projects, import and render them from a Client Component.
+
+## API
+
+```tsx
+import Editor, { DiffEditor, loader, useMonaco } from '@willbooster/monaco-react';
+```
+
+- `Editor`: Monaco standalone code editor component.
+- `DiffEditor`: Monaco standalone diff editor component.
+- `useMonaco`: React hook returning the initialized Monaco instance.
+- `loader`: the `@willbooster/monaco-loader` instance used by the components.
+
+### Editor
+
+```tsx
+<Editor
+  height="90vh"
+  defaultLanguage="javascript"
+  defaultValue="// hello"
+  onMount={(editor, monaco) => {
+    editor.focus();
+    monaco.editor.setTheme('vs-dark');
+  }}
+  onChange={(value) => {
+    console.log(value);
+  }}
+/>
+```
+
+### DiffEditor
+
+```tsx
+<DiffEditor height="90vh" language="typescript" original="const value = 1;" modified="const value = 2;" />
+```
+
+### Loader Configuration
+
+By default Monaco is loaded from the CDN configured by `@willbooster/monaco-loader`. You can provide your own Monaco instance or loader paths before rendering an editor.
+
+```tsx
+import * as monaco from 'monaco-editor';
+import { loader } from '@willbooster/monaco-react';
+
+loader.config({ monaco });
+```
+
+## Development
+
+```bash
+yarn install
+yarn check-for-ai
+yarn test
+```
+
+`yarn test` runs unit tests, builds the library, builds the Next.js e2e app, and runs Playwright against it.