Editor Setup
You can customize your editor when you instantiate it. Let's take a closer looks at the basic methods and components to set up your BlockNote editor.
Create an editor
Create a new BlockNoteEditor by calling the useCreateBlockNote hook. This instantiates a new editor and its required state. You can later interact with the editor using the Editor API and pass it to the BlockNoteView component.
declare function useCreateBlockNote(
options?: BlockNoteEditorOptions,
deps?: React.DependencyList,
): BlockNoteEditor;The hook takes two optional parameters:
options: Configure the editor with options like (see Editor Options for all options):
initialContent- Set starting contentdomAttributes- Add HTML attributes to editor elements. See Adding DOM Attributes for more.dictionary- Customize text strings for localization. See the Localization for more.schema- Add custom blocks and styles. See Custom Schemas.tabBehavior- Control tab key behavior ("prefer-navigate-ui"or"prefer-indent")
deps: React dependency array that determines when to recreate the editor.
BlockNoteEditor.create)The useCreateBlockNote hook is actually a simple useMemo wrapper around
the BlockNoteEditor.create method. You can use this method directly if you
want to control the editor lifecycle manually. For example, we do this in
the Saving & Loading example to delay
the editor creation until some content has been fetched from an external
data source.
Render the editor
Use the <BlockNoteView> component to render the BlockNoteEditor instance you just created:
const editor = useCreateBlockNote();
return <BlockNoteView editor={editor} />;The <BlockNoteView> component has a number of props that you can use to customize the editor. See React Overview for more information. But, here are some important props to consider:
editor: TheBlockNoteEditorinstance to render.editable: Whether the editor should be editable.onChange: Callback fired when the editor content (document) changes.onSelectionChange: Callback fired when the editor selection changes.theme: The editor's theme, see Themes for more about this.
Note that the BlockNoteView component is an uncontrolled component.
This means you don't pass in the editor content directly as a prop. You can use the initialContent option in the useCreateBlockNote hook to set the initial content of the editor (similar to the defaultValue prop in a regular React <textarea>).
BlockNote handles the complexities and performance optimizations of managing editor state internally. You can interact with the editor content using the Editor API.