Magicube Editor

A modern, extensible block-based editor.

• 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

📚 Documentation

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

🚀 Installation

Basic Editor

npm install @magicube/editor

Typography Plugins

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

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:

# 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

npm run build

Development mode

npm run dev

Linting

npm run lint

Type checking

npm run check-types

📄 License

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

Built with ❤️.