refactor: UI component types, names, and API

README.md

@@ -34,11 +34,11 @@ Play with the editor @ [https://playground.blocknotejs.org/](https://playground.
 [![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)
 
 ```typescript
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 function App() {
-  const editor = useBlockNote({
+  const editor = useCreateBlockNote({
     onEditorContentChange: (editor) => {
       // Log the document to console on every update
       console.log(editor.getJSON());

docs/api/og.tsx → docs/api/og.tsx.bak

@@ -1,12 +1,11 @@
 import { ImageResponse } from "@vercel/og";
-import React from "react";
 
 export const config = {
   runtime: "edge",
 };
 
 const font = fetch(
-  new URL("../docs/public/fonts/Gilroy-Regular.ttf", import.meta.url)
+  new URL("../../assets/fonts/Gilroy-Regular.ttf", import.meta.url),
 ).then((res) => res.arrayBuffer());
 
 export default async function handler(request: { url: string }) {

docs/components/pages/landing/hero/Demo.tsx

@@ -1,5 +1,5 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { useMemo } from "react";
 import YPartyKitProvider from "y-partykit/provider";
@@ -53,11 +53,7 @@ function getUTCDateYYYYMMDD() {
   return `${year}${formattedMonth}${formattedDay}`;
 }
 
-export function ReactBlockNote(props: {
-  theme: "light" | "dark";
-}) {
-
-
+export function ReactBlockNote(props: { theme: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
     console.log("create");
     const doc = new Y.Doc();
@@ -70,7 +66,7 @@ export function ReactBlockNote(props: {
     return [doc, provider];
   }, []);
 
-  const editor = useBlockNote(
+  const editor = useCreateBlockNote(
     {
       collaboration: {
         provider,

docs/next.config.mjs

@@ -20,19 +20,20 @@ const withAnalyzer = analyzer({ enabled: false });
 
 const nextConfig = withAnalyzer(
   withNextra({
+    // transpilePackages: ["@blocknote/example-react-custom-styles"],
     images: {
       remotePatterns: [
         {
-          protocol: 'https',
-          hostname: 'avatars.githubusercontent.com',
-          port: '',
-          pathname: '/u/**',
+          protocol: "https",
+          hostname: "avatars.githubusercontent.com",
+          port: "",
+          pathname: "/u/**",
         },
         {
-          protocol: 'https',
-          hostname: 'github.com',
-          port: '',
-          pathname: '/**',
+          protocol: "https",
+          hostname: "github.com",
+          port: "",
+          pathname: "/**",
         },
       ],
     },
@@ -55,14 +56,16 @@ const nextConfig = withAnalyzer(
             vendor: {
               test: (module) => {
                 // console.log(module.resource);
-                if (module.resource?.includes("blocknote") || module.resource?.includes("mantine")) {
-
+                if (
+                  module.resource?.includes("blocknote") ||
+                  module.resource?.includes("mantine")
+                ) {
                   return true;
                 }
                 return false;
               },
-              name: 'blocknotechunk',
-              chunks: 'all',
+              name: "blocknotechunk",
+              chunks: "all",
             },
           },
         };
@@ -77,7 +80,7 @@ const nextConfig = withAnalyzer(
         // "@blocknote/react": path.resolve(__dirname, "../packages/react/src/"),
       };
     },
-  })
+  }),
 );
 
 export default nextConfig;

docs/package.json

@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "docs:build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@blocknote/core": "*",
     "@blocknote/react": "*",
     "@headlessui/react": "^1.7.18",
-    "@mantine/core": "^7.4.2",
+    "@mantine/core": "^7.5.0",
     "@next/bundle-analyzer": "^14.1.0",
     "@vercel/og": "^0.6.2",
     "classnames": "2.3.2",

docs/pages/docs/_meta.json

@@ -1,8 +1,9 @@
 {
-
   "index": "Introduction",
-  "quickstart":"",
+  "quickstart": "Quickstart",
+  "editor-basics": "Editor Basics",
   "editor-api": "Editor API",
+  "styling-theming": "Styling & Theming",
   "ui-components": "UI Components",
   "custom-schemas": "Custom Schemas",
   "advanced": "Advanced",

docs/pages/docs/advanced/nextjs.mdx

@@ -13,13 +13,13 @@ Make sure to use BlockNote in a [Client Component](https://nextjs.org/docs/getti
 
 ```typescript jsx
 "use client"; // this registers <Editor> as a Client Component
-import { BlockNoteView, useBlockNote } from "@blocknote/react";
+import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
 import "@blocknote/react/style.css";
 
 // Our <Editor> component we can reuse later
 export default function Editor() {
   // Creates a new editor instance.
-  const editor = useBlockNote({});
+  const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
   return <BlockNoteView editor={editor} />;