Block Editor - Twenty

Uses a block-based rich text editor from BlockNote to allow users to edit and view blocks of content.

jsx

import { useBlockNote } from "@blocknote/react";
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";

export const MyComponent = () => {
  const BlockNoteEditor = useBlockNote();

  return <BlockEditor editor={BlockNoteEditor} />;
};

</Tab> <Tab title="Props">

Props	Type	Description
editor	`BlockNoteEditor`	The block editor instance or configuration

</Tab> </Tabs>