@resola-ai/blocknote-editor

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

Installation

# 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:

# Using npm
npm install @blocknote/[email protected] @blocknote/[email protected] @blocknote/[email protected] @mantine/[email protected]

# Using yarn
yarn add @blocknote/[email protected] @blocknote/[email protected] @blocknote/[email protected] @mantine/[email protected]

# Using pnpm
pnpm add @blocknote/[email protected] @blocknote/[email protected] @blocknote/[email protected] @mantine/[email protected]

🎨 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):

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

Example in main.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:

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:

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:

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:

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:

// 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