npm package: @magicube/editor
Description: A modern, extensible block-based editor.
Author: Alexandre Nunes
Latest version: 0.1.1

# Magicube Editor

A modern, extensible block-based editor.

<div align="center">
  <img src="./apps/docs/db/images/1744719165586-1743886098128-magicube-no-bg-no-edges.webp" alt="Magicube Editor screenshot" />
</div>

- *Ready to use* - Fully functional and ready to use out of the box with a default set of blocks and marks
- *Easy to extend* - create your own blocks and marks for your use case
- *JSON-based content model* - easy to store and retrieve

<div align="center">
  <img src="./apps/docs/db/images/magicube-demo.gif" alt="Magicube Editor demo" />
</div>


## 📚 Documentation

Visit our comprehensive documentation at [https://magicube-editor.vercel.app](https://magicube-editor.vercel.app) to learn more about.

## 🚀 Installation

### Basic Editor

```bash
npm install @magicube/editor
```

### Typography Plugins

For a complete editing experience with headings, lists, and text formatting:

```bash
npm install @magicube/editor-typography-plugins
```

Include the following blocks:

- Heading
- Ordered List
- Unordered List
- Todo List
- Toggle List
- Code

Marks:

- Bold
- Italic
- Underline
- Strikethrough
- Code
- Link


### Additional Plugins

Enhance your editor with specialized functionality:

```bash
# Code highlighting
npm install @magicube/editor-highlight-code-plugin

# Image support
npm install @magicube/editor-image-plugin

# Mathematical equations
npm install @magicube/editor-equation-plugins
```

See docs for more information on how to use and configure the plugins.

## 🤝 Contributing

We welcome contributions to make Magicube better! Here's how you can help:

### Documentation

The entire documentation is built with Magicube. You can modify or fix the documentation locally using the built-in editor and doc application

1. Clone the repository
2. Install dependencies: `npm install`
3. Start the docs development server: `npm run dev`
4. Visit `http://localhost:4231` to view the documentation
5. Open the "Edit" button in the top right corner to edit the documentation
6. Commit your changes and create a Pull Request

### Adding Plugins

**Built-in Plugins**: This project is not meant to be exhaustive. If you believe a block type should be part of the packages distributed in this repository, please create an Issue to discuss it first.

**External Plugins**: We encourage and welcome external plugins in separate packages! No need to ask for permission, just create a package and publish it to npm or distribute it your own way.

The plugin system is designed to be extensible, and community contributions are highly valued.

## 🏗️ Project Structure

This monorepo includes:

### Apps
- `docs`: Documentation site built with Next.js

### Core Packages
- `@magicube/editor`: Core editor functionality
- `@magicube/editor-typography-plugins`: Text formatting, headings, lists
- `@magicube/editor-highlight-code-plugin`: Code syntax highlighting
- `@magicube/editor-image-plugin`: Image handling and display
- `@magicube/editor-equation-plugins`: Mathematical equations support

## 🛠️ Development

### Build all packages
```bash
npm run build
```

### Development mode
```bash
npm run dev
```

### Linting
```bash
npm run lint
```

### Type checking
```bash
npm run check-types
```

## 📄 License

This project is open source and available under the MIT License.

Built with ❤️.