Schemas
Schemas are the core of how BlockNote works. They basic building blocks of the editor, and are used to define the content of the editor.
The schema is a collection of definitions for the different types of blocks, inline content, and styles that can be used in the editor.
If you are using the default blocks, inline content, and styles, you do not need to specify a schema, since we can just use the default which uses the default blocks, inline content, and styles.
Creating a Schema
You can create a schema using the BlockNoteSchema.create function.
import {
BlockNoteSchema,
defaultBlockSpecs,
defaultInlineContentSpecs,
defaultStyleSpecs,
} from "@blocknote/core";
const schema = BlockNoteSchema.create({
blockSpecs: {
// Adds all default blocks.
...defaultBlockSpecs,
// Adds the Alert block.
alert: Alert,
},
// This is already the default, but you can add more inline content types here.
inlineContentSpecs: defaultInlineContentSpecs,
// This is already the default, but you can add more style types here.
styleSpecs: defaultStyleSpecs,
});Using a Schema
You can use a schema by passing it to the useCreateBlockNote hook.
import React from "react";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteSchema } from "@blocknote/core";
import { BlockNoteView } from "@blocknote/mantine";
const schema = BlockNoteSchema.create();
function Editor() {
const editor = useCreateBlockNote({
schema,
});
return <BlockNoteView editor={editor} />;
}