npm package: @resola-ai/blocknote-editor
Description: A React-based rich text editor built on top of BlockNote.
Latest version: 1.1.0

# @resola-ai/blocknote-editor

A React-based rich text editor built on top of BlockNote.

## Installation

```bash
# Using npm
npm install @resola-ai/blocknote-editor

# Using yarn
yarn add @resola-ai/blocknote-editor

# Using pnpm
pnpm add @resola-ai/blocknote-editor
```

### Peer Dependencies

This package requires the following peer dependencies:

```bash
# Using npm
npm install @blocknote/core@0.15.5 @blocknote/react@0.15.5 @blocknote/shadcn@0.15.5 @mantine/core@7.17.7

# Using yarn
yarn add @blocknote/core@0.15.5 @blocknote/react@0.15.5 @blocknote/shadcn@0.15.5 @mantine/core@7.17.7

# Using pnpm
pnpm add @blocknote/core@0.15.5 @blocknote/react@0.15.5 @blocknote/shadcn@0.15.5 @mantine/core@7.17.7
```

### 🎨 CSS Import (Required)

**Important:** You must import the CSS file to ensure proper styling of the BlockNote editor components.

Add this import to your main application file (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):

```tsx
import '@resola-ai/blocknote-editor/styles.css';
```

**Example in main.tsx:**

```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import '@resola-ai/blocknote-editor/styles.css'; // Required for styling
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

## Usage

**Note:** Make sure you have imported the CSS file as shown in the installation section above.

### BlockNoteEditor

The main editor component with full editing capabilities:

```tsx
import { BlockNoteEditor } from '@resola-ai/blocknote-editor';
// Don't forget to import the CSS in your main app file:
// import '@resola-ai/blocknote-editor/styles.css';

function App() {
  return (
    <BlockNoteEditor
      initialHTML='<p>Hello World!</p>'
      onChange={(html, plainText) => {
        console.log(html, plainText);
      }}
    />
  );
}
```

### BlockNoteViewer

Read-only view of BlockNote content:

```tsx
import { BlockNoteViewer } from '@resola-ai/blocknote-editor';
// Don't forget to import the CSS in your main app file:
// import '@resola-ai/blocknote-editor/styles.css';

function App() {
  return <BlockNoteViewer initialHTML='<p>This is read-only content</p>' />;
}
```

### BlockNoteMarkdown

Render markdown content in the BlockNote format:

```tsx
import { BlockNoteMarkdown } from '@resola-ai/blocknote-editor';
// Don't forget to import the CSS in your main app file:
// import '@resola-ai/blocknote-editor/styles.css';

function App() {
  return (
    <BlockNoteMarkdown markdown='# Heading\n\nThis is a paragraph with **bold** and *italic* text.' />
  );
}
```

## Common Props

### BlockNoteEditor

| Prop          | Type              | Description                   |
| ------------- | ----------------- | ----------------------------- |
| `initialHTML` | string            | Initial HTML content          |
| `onChange`    | function          | Callback when content changes |
| `editable`    | boolean           | Whether content is editable   |
| `placeholder` | string            | Placeholder text              |
| `theme`       | 'light' \| 'dark' | Editor theme                  |

### BlockNoteViewer

| Prop          | Type              | Description             |
| ------------- | ----------------- | ----------------------- |
| `initialHTML` | string            | HTML content to display |
| `theme`       | 'light' \| 'dark' | Viewer theme            |

### BlockNoteMarkdown

| Prop       | Type              | Description                |
| ---------- | ----------------- | -------------------------- |
| `markdown` | string            | Markdown content to render |
| `theme`    | 'light' \| 'dark' | Viewer theme               |

## Requirements

- React 18 or higher
- @blocknote/core 0.15.5
- @blocknote/react 0.15.5
- @blocknote/shadcn 0.15.5
- @mantine/core 7.17.7 (for styling)

## Troubleshooting

### Missing Styles

If the BlockNote editor appears unstyled or has missing styles, make sure you have imported the CSS file:

```tsx
import '@resola-ai/blocknote-editor/styles.css';
```

This import should be added to your main application file (usually `main.tsx`, `index.tsx`, or `App.tsx`) before any component imports.

### CSS Import Order

If you're using other CSS frameworks or libraries, make sure to import the BlockNote editor CSS after your base styles but before component-specific styles:

```tsx
// Base styles (e.g., Tailwind, global styles)
import './index.css';

// Third-party library styles
import '@mantine/core/styles.css';
import '@resola-ai/blocknote-editor/styles.css'; // BlockNote editor styles

// Component imports
import App from './App';
```

## License

MIT

```

```