react-openqasm-editor/README.md

A powerful, customizable code editor for OpenQASM (Open Quantum Assembly Language) based on Monaco Editor.

# OpenQASM Editor

A powerful, customizable code editor for OpenQASM (Open Quantum Assembly Language) based on Monaco Editor.

## Features

- Syntax highlighting for OpenQASM language
- Code completion with intelligent suggestions
- Hover information for language elements
- Code formatting capabilities
- Diagnostics and error detection
- Customizable themes and editor options
- Built-in quantum code example templates

## Installation

```bash
npm install openqasm-editor
# or
yarn add openqasm-editor
```

## Usage

```jsx
import { OpenQASMEditor } from 'openqasm-editor';

function App() {
  const handleEditorChange = (value, event) => {
    console.log('Editor content:', value);
  };

  const handleEditorMount = (editor) => {
    // You can access the editor instance here
    console.log('Editor mounted:', editor);
  };

  return (
    <OpenQASMEditor
      width="800px"
      height="500px"
      theme="vs-dark" // or "vs-light"
      defaultvalue={`OPENQASM 2.0;
include "qelib1.inc";

// Quantum program
qreg q[2];
creg c[2];

h q[0];
cx q[0], q[1];
measure q -> c;`}
      onChange={handleEditorChange}
      onMount={handleEditorMount}
      options={{
        // Monaco editor options
        fontSize: 14,
        lineNumbers: 'on',
        minimap: { enabled: false },
        // Add any other Monaco editor options here
      }}
    />
  );
}
```

## Props

| Prop           | Type       | Default                 | Description                            |
| -------------- | ---------- | ----------------------- | -------------------------------------- |
| `width`        | `string`   | `800px`                 | Width of the editor                    |
| `height`       | `string`   | `500px`                 | Height of the editor                   |
| `theme`        | `string`   | `vs-dark`               | Editor theme (`vs-dark` or `vs-light`) |
| `defaultvalue` | `string`   | *Basic quantum program* | Initial code in the editor             |
| `value`        | `string`   | `undefined`             | Controlled value for the editor        |
| `options`      | `object`   | `{}`                    | Monaco editor options                  |
| `onChange`     | `function` | `noop`                  | Called when editor content changes     |
| `onMount`      | `function` | `noop`                  | Called when editor is mounted          |

## Development

### Setup

```bash
git clone https://github.com/xy2002/openqasm-editor
npm install 
npm run generate-antlr
npm run build
```

### Scripts

- `pnpm dev` - Start development server
- `pnpm build` - Build the library
- `pnpm lint` - Run ESLint
- `pnpm storybook` - Run Storybook for component development
- `pnpm generate-antlr` - Generate ANTLR parser for OpenQASM grammar

## OpenQASM Language

This editor supports the OpenQASM 2.0 specification, which is an intermediate representation for quantum circuits. The language includes:

- Quantum register and classical register declarations
- Gate definitions and applications
- Measurements
- Conditional operations
- Mathematical expressions for rotations and phases

For more information on OpenQASM, see the [OpenQASM specification](https://github.com/openqasm/openqasm).