Merge remote-tracking branch 'origin/main' into releases

Author: YousefED

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
       },
     },
   },
+  ignorePatterns: ["**/ui/*"],
   rules: {
     curly: 1,
     "import/no-extraneous-dependencies": [

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,7 +11,7 @@ assignees: ''
 <what's going wrong!?>
 
 **To Reproduce**
-<links to a sandbox or clear steps to reproduce are super helpful!>
+<clear steps to reproduce are super helpful! Best is to provide an online sandbox, [click to create one](https://stackblitz.com/github/TypeCellOS/BlockNote/tree/main/examples/01-basic/01-minimal?file=App.tsx)>
 
 **Misc**
 - Node version:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -18,3 +18,6 @@ A clear and concise description of any alternative solutions or features you've
 
 **Additional context**
 Add any other context or screenshots about the feature request here.
+
+**Bonus**
+[ ] I'm a [sponsor](https://github.com/sponsors/YousefED) and would appreciate if you could look into this sooner than later 💖

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

@@ -1,7 +1,8 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
-import "@blocknote/react/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";

docs/package.json

@@ -11,6 +11,9 @@
   "dependencies": {
     "@blocknote/core": "^0.12.4",
     "@blocknote/react": "^0.12.4",
+    "@blocknote/ariakit": "^0.12.4",
+    "@blocknote/mantine": "^0.12.4",
+    "@blocknote/shadcn": "^0.12.4",
     "@headlessui/react": "^1.7.18",
     "@mantine/core": "^7.7.1",
     "@next/bundle-analyzer": "^14.1.0",

docs/pages/docs/advanced/ariakit.mdx

@@ -0,0 +1,16 @@
+---
+title: BlockNote with Ariakit
+description: Ariakit rich text editor with BlockNote
+imageTitle: BlockNote with Ariakit
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+## Using Ariakit with BlockNote
+
+[Ariakit](https://ariakit.org/) is an open-source library of unstyled (headless), primitive components with a focus on Accessibility. To use BlockNote with Ariakit, you can import `BlockNoteView` from `@blocknote/ariakit` (instead of from `@blocknote/mantine`).
+
+You can fully style the components with your own CSS, or import the provided default styles using the CSS file from `@blocknote/ariakit/style.css`.
+
+<Example name="basic/ariakit" />

docs/pages/docs/advanced/nextjs.mdx

@@ -2,7 +2,6 @@
 title: Next.js and BlockNote
 description: Details on integrating BlockNote with Next.js
 imageTitle: Next.js and BlockNote
-path: /docs/nextjs
 ---
 
 # Next.js and BlockNote

docs/pages/docs/advanced/real-time-collaboration.mdx

@@ -2,7 +2,6 @@
 title: Real-time Collaborative rich text editor
 description: Let's see how you can add Multiplayer capabilities to your BlockNote setup, and allow real-time collaboration between users (similar to Google Docs)
 imageTitle: Real-time Collaboration
-path: /docs/real-time-collaboration
 ---
 
 # Real-time Collaboration (multiplayer text editor)

docs/pages/docs/advanced/shadcn.mdx

@@ -0,0 +1,52 @@
+---
+title: BlockNote with ShadCN and Tailwind
+description: ShadCN + Tailwind rich text editor using BlockNote
+imageTitle: BlockNote with ShadCN and Tailwind
+---
+
+import { Example } from "@/components/example";
+import { Callout } from "nextra/components";
+
+## Using ShadCN, Radix and Tailwind with BlockNote
+
+[shadcn/ui](https://ui.shadcn.com/) is an open-source collection of React components based on [Radix](https://radix-ui.com/) and Tailwind. To use BlockNote with shadcn, you can import `BlockNoteView` from `@blocknote/shadcn` (instead of from `@blocknote/mantine`) and the stylesheet from `@blocknote/shadcn/style.css`.
+
+<Example name="basic/shadcn" />
+
+## ShadCN Customization
+
+BlockNote comes with default shadcn components. However, it's likely that you have copied and possibly customized your own shadcn components in your project.
+To make BlockNote use the ShadCN components from your project instead of the default ones, you can pass them using the `shadCNComponents` prop of `BlockNoteView`:
+
+```tsx
+import * as Button from "@/components/ui/button"
+import * as Select from "@/components/ui/select"
+
+return (
+  <BlockNoteView editor={editor} shadCNComponents={{
+    Select,
+    Button,
+    ...
+  }} />
+);
+```
+
+You can pass components from the following ShadCN modules:
+
+- Badge
+- Button
+- Card
+- DropdownMenu
+- Form
+- Input
+- Label
+- Popover
+- Select
+- Tabs
+- Toggle
+- Tooltip
+
+<Callout type="warning" emoji="⚠️">
+  To ensure compatibility, your ShadCN components should not use Portals
+  (comment these out from your DropdownMenu, Popover and Select components).
+</Callout>

docs/pages/docs/advanced/vanilla-js.mdx

@@ -2,7 +2,6 @@
 title: Usage Without React (Vanilla JS)
 description: BlockNote is mainly designed as a quick and easy drop-in block-based editor for React apps, but can also be used in vanilla JavaScript apps.
 imageTitle: Usage Without React (Vanilla JS)
-path: /docs/vanilla-js
 ---
 
 import { Callout } from "nextra/components";