BlockNote: A Block-Based React Rich Text Editor (Notion Style)

Introdução

BlockNote is an open-source, block-based React rich text editor that provides a Notion-style editing experience. It is built upon the powerful foundations of Prosemirror and Tiptap, offering a robust and extensible solution for developers. Designed to easily integrate a modern text editing experience into any application, BlockNote comes with a fully styled UI, making it ready to use out-of-the-box.

Instalação

To get started with BlockNote, you can install the necessary packages using npm or yarn. The @blocknote/react package provides the core React components, while @blocknote/mantine offers a styled UI.

import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

Exemplos

BlockNote offers a live demo and various examples to showcase its capabilities. You can explore them on the official website. The following React code snippet demonstrates how simple it is to integrate BlockNote into your application:

import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

Porquê usar

BlockNote provides a comprehensive set of features designed to deliver a high-quality, block-based editor experience:

• Animations: Smooth and engaging visual feedback for user interactions.
• Helpful placeholders: Intuitive prompts to guide users in content creation.
• Drag and drop blocks: Effortless rearrangement of content blocks.
• Nesting / indentation: Organize content hierarchically using tab and shift+tab.
• Slash (/) menu: Quick access to various block types and commands.
• Format menu: Contextual formatting options for selected text.
• Real-time collaboration: Built-in support for collaborative editing experiences, powered by Yjs.

Links

For more information and to get started with BlockNote, refer to the official resources:

• Homepage
• Documentation
• Quickstart
• Examples
• Discord Community