All Inline Content Types
In this example, the editor contains each of BlockNote's built-in inline content types.
Relevant Docs:
- TODO
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";
export default function App() {
// Creates a new editor instance.
const editor = useCreateBlockNote({
initialContent: [
{
type: "paragraph",
content: "Welcome to this demo!",
},
{
type: "paragraph",
content: [
{
type: "text",
text: "Styled Text",
styles: {
bold: true,
italic: true,
textColor: "red",
backgroundColor: "blue",
},
},
{
type: "text",
text: " ",
styles: {},
},
{
type: "link",
content: "Link",
href: "https://www.blocknotejs.org",
},
],
},
{
type: "paragraph",
},
],
});
// Renders the editor instance using a React component.
return <BlockNoteView editor={editor} />;
}