Merge branch 'refs/heads/main' into releases

Author: matthewlipski

CONTRIBUTING.md

@@ -3,12 +3,18 @@
 Directory structure:
 
 ```
-blocknote
-├── packages/core       - The core of the editor
-├── packages/react      - The main library for use in React apps
-├── examples/editor     - Example React app that embeds the editor
-├── examples/vanilla    - An advanced example if you don't want to use React or want to build your own UI components
-└── tests               - Playwright end to end tests
+BlockNote
+├── packages/core        - The core of the editor, which includes all logic to get the editor running in vanilla JS.
+├── packages/react       - A React wrapper and UI for the editor. Requires additional components for the UI.
+├── packages/ariakit     - UI components for the `react` package, made with Ariakit.
+├── packages/mantine     - UI components for the `react` package, made with Mantine.
+├── packages/shadcn      - UI components for the `react` package, made with Shadcn.
+├── packages/server-util - Utilities for converting BlockNote documents into static HTML for server-side rendering.
+├── packages/dev-scripts - A set of tools for converting example editor setups into components for the BlockNote website.
+├── examples             - Example editor setups used for demos in the BlockNote website and playground.
+├── docs                 - Code for the BlockNote website.
+├── playground           - A basic page where you can quickly test each of the example editor setups.
+└── tests                - Playwright end to end tests.
 ```
 
 An introduction into the BlockNote Prosemirror schema can be found in [packages/core/src/pm-nodes/README.md](https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/src/pm-nodes/README.md).
@@ -29,3 +35,14 @@ To run the project, open the command line in the project's root directory and en
 - Add the dependency to the relevant `package.json` file (packages/xxx/package.json)
 - run `npm run install-new-packages`
 - Double check `package-lock.json` to make sure only the relevant packages have been affected
+
+## Packages:
+
+| Package                                                                                          | Size                                                                                                                                                                                          | Version                                                                                                                                            |
+|--------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|
+| [@blocknote/core](https://github.com/TypeCellOS/BlockNote/tree/main/packages/core)               | <a href="https://bundlephobia.com/result?p=@blocknote/core@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/core?color=%238ab4f8&label=gzip%20size"></a>               | <a href="https://www.npmjs.com/package/@blocknote/core"><img src="https://img.shields.io/npm/v/@blocknote/core.svg?color=%23c1a8e2"></a>           |
+| [@blocknote/react](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react)             | <a href="https://bundlephobia.com/result?p=@blocknote/react@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/react?color=%238ab4f8&label=gzip%20size"></a>             | <a href="https://www.npmjs.com/package/@blocknote/react"><img src="https://img.shields.io/npm/v/@blocknote/react?color=%23c1a8e2"></a>             |
+| [@blocknote/ariakit](https://github.com/TypeCellOS/BlockNote/tree/main/packages/ariakit)         | <a href="https://bundlephobia.com/result?p=@blocknote/ariakit@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/ariakit?color=%238ab4f8&label=gzip%20size"></a>         | <a href="https://www.npmjs.com/package/@blocknote/ariakit"><img src="https://img.shields.io/npm/v/@blocknote/ariakit?color=%23c1a8e2"></a>         |
+| [@blocknote/mantine](https://github.com/TypeCellOS/BlockNote/tree/main/packages/mantine)         | <a href="https://bundlephobia.com/result?p=@blocknote/mantine@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/mantine?color=%238ab4f8&label=gzip%20size"></a>         | <a href="https://www.npmjs.com/package/@blocknote/mantine"><img src="https://img.shields.io/npm/v/@blocknote/mantine?color=%23c1a8e2"></a>         |
+| [@blocknote/shadcn](https://github.com/TypeCellOS/BlockNote/tree/main/packages/shadcn)           | <a href="https://bundlephobia.com/result?p=@blocknote/shadcn@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/shadcn?color=%238ab4f8&label=gzip%20size"></a>           | <a href="https://www.npmjs.com/package/@blocknote/shadcn"><img src="https://img.shields.io/npm/v/@blocknote/shadcn?color=%23c1a8e2"></a>           |
+| [@blocknote/server-util](https://github.com/TypeCellOS/BlockNote/tree/main/packages/server-util) | <a href="https://bundlephobia.com/result?p=@blocknote/server-util@latest"><img src="https://img.shields.io/bundlephobia/minzip/@blocknote/server-util?color=%238ab4f8&label=gzip%20size"></a> | <a href="https://www.npmjs.com/package/@blocknote/server-util"><img src="https://img.shields.io/npm/v/@blocknote/server-util?color=%23c1a8e2"></a> |

docs/pages/docs/custom-schemas.mdx

@@ -96,4 +96,4 @@ type MyPartialBlock = typeof schema.PartialBlock;
 
 ### Automatically override all default types (experimental)
 
-Alternatively, the easiest way to get full type safety without any additional work is to override all default types with your custom schema, by using a custom type definition file. See this [example blocknote.d.ts](https://github.com/TypeCellOS/BlockNote/blob/main/examples/05-custom-schema/react-custom-styles/blocknote.d.ts.example). This is an experimental feature - we would love to hear your feedback on this approach.
+Alternatively, the easiest way to get full type safety without any additional work is to override all default types with your custom schema, by using a custom type definition file. See this [example blocknote.d.ts](https://github.com/TypeCellOS/BlockNote/blob/main/examples/06-custom-schema/react-custom-styles/blocknote.d.ts.example). This is an experimental feature - we would love to hear your feedback on this approach.

docs/pages/docs/editor-basics/setup.mdx

@@ -58,7 +58,7 @@ The hook takes two optional parameters:
     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](/examples/basic/saving-loading) to delay the
+    the [Saving & Loading example](/examples/backend/saving-loading) to delay the
     editor creation until some content has been fetched from an external data
     source.
   </p>

docs/pages/docs/ui-components/side-menu.mdx

@@ -46,12 +46,3 @@ You can also change the items in the Drag Handle Menu. The demo below adds an it
 <Example name="ui-components/side-menu-drag-handle-items" />
 
 Here, we use the `SideMenu` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Drag Handle Menu using the `dragHandleMenu` prop.
-
-<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
-  <small>
-    <strong>Tip:</strong> The children you pass to the `DragHandleMenu` component
-    should be default items (e.g. `RemoveBlockItem`) or custom items
-    (`DragHandleMenuItem`). To see all the components you can use, head to the
-    [Drag Handle Menu's source code](link).
-  </small>
-</div>

examples/01-basic/01-minimal/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [

examples/01-basic/02-block-objects/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [

examples/01-basic/03-all-blocks/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [

examples/01-basic/04-removing-default-blocks/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [

examples/01-basic/05-block-manipulation/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [

examples/01-basic/06-selection-blocks/package.json

@@ -22,9 +22,9 @@
   "devDependencies": {
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^8.10.0",
-    "vite": "^4.4.8"
+    "vite": "^5.3.4"
   },
   "eslintConfig": {
     "extends": [