Merge branch 'refs/heads/main' into pro-examples-update

# Conflicts: # package-lock.json # playground/package.json
TypeCellOS · Jul 18, 2024 · ee0d436 · ee0d436
2 parents 704053e + 34c2039
commit ee0d436
Show file tree

Hide file tree

Showing 74 changed files with 1,186 additions and 2,674 deletions.
diff --git a/CONTRIBUTING.md b/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> |
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ React rich text editor. Easily add a modern text editing experience to your app.
     Documentation
   </a> - <a href="https://www.blocknotejs.org/docs/quickstart">
     Quickstart
-  </a>- <a href="https://www.blocknotejs.org/docs/examples">
+  </a>- <a href="https://www.blocknotejs.org/examples">
     Examples
   </a>
 </p>

diff --git a/docs/package.json b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "0.15.0",
+  "version": "0.15.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,11 +9,11 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@blocknote/ariakit": "^0.15.0",
-    "@blocknote/core": "^0.15.0",
-    "@blocknote/mantine": "^0.15.0",
-    "@blocknote/react": "^0.15.0",
-    "@blocknote/shadcn": "^0.15.0",
+    "@blocknote/ariakit": "^0.15.3",
+    "@blocknote/core": "^0.15.3",
+    "@blocknote/mantine": "^0.15.3",
+    "@blocknote/react": "^0.15.3",
+    "@blocknote/shadcn": "^0.15.3",
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.4",
     "@mantine/core": "^7.10.1",

diff --git a/docs/pages/docs/custom-schemas.mdx b/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.
diff --git a/docs/pages/docs/editor-basics/setup.mdx b/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>

diff --git a/docs/pages/docs/ui-components/side-menu.mdx b/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>
diff --git a/examples/01-basic/01-minimal/package.json b/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": [

diff --git a/examples/01-basic/02-block-objects/package.json b/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": [

diff --git a/examples/01-basic/03-all-blocks/package.json b/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": [

diff --git a/examples/01-basic/04-removing-default-blocks/package.json b/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": [

diff --git a/examples/01-basic/05-block-manipulation/package.json b/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": [

diff --git a/examples/01-basic/06-selection-blocks/package.json b/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": [

diff --git a/examples/01-basic/07-ariakit/package.json b/examples/01-basic/07-ariakit/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": [

diff --git a/examples/01-basic/08-shadcn/package.json b/examples/01-basic/08-shadcn/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": [

diff --git a/examples/01-basic/09-localization/package.json b/examples/01-basic/09-localization/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": [

diff --git a/examples/01-basic/testing/package.json b/examples/01-basic/testing/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": [

diff --git a/examples/02-backend/01-file-uploading/package.json b/examples/02-backend/01-file-uploading/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": [

diff --git a/examples/02-backend/02-saving-loading/package.json b/examples/02-backend/02-saving-loading/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": [

diff --git a/examples/02-backend/03-s3/package.json b/examples/02-backend/03-s3/package.json
@@ -24,9 +24,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": [

diff --git a/examples/02-backend/04-rendering-static-documents/package.json b/examples/02-backend/04-rendering-static-documents/package.json
@@ -23,9 +23,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": [

diff --git a/examples/03-ui-components/01-ui-elements-remove/package.json b/examples/03-ui-components/01-ui-elements-remove/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": [

diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/README.md b/examples/03-ui-components/02-formatting-toolbar-buttons/README.md
@@ -8,5 +8,4 @@ In this example, we add a blue text/background color and code style button to th
 
 - [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar)
 - [Manipulating Inline Content](/docs/editor-api/manipulating-inline-content)
-- [Hooks](TODO)
 - [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/package.json b/examples/03-ui-components/02-formatting-toolbar-buttons/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": [

diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/package.json
@@ -24,9 +24,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": [

diff --git a/examples/03-ui-components/04-side-menu-buttons/package.json b/examples/03-ui-components/04-side-menu-buttons/package.json
@@ -23,9 +23,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": [

diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/package.json b/examples/03-ui-components/05-side-menu-drag-handle-items/package.json
@@ -23,9 +23,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": [

diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/package.json
@@ -23,9 +23,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": [

diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/package.json b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/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": [

diff --git a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/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": [

diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/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": [

diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/package.json b/examples/03-ui-components/10-suggestion-menus-grid-mentions/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": [