Merge branch 'main' into new-release

docs/README.md

@@ -1,36 +1,21 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# BlockNote Docs
+
+This is the code for the [BlockNote documentation website](https://www.blocknotejs.org).
+
+If you're looking to work on BlockNote itself, check the [`packages`](/packages/) folder.
 
 ## Getting Started
 
-First, run the development server:
+First, run `npm run build` in the repository root.
+
+Next, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Merging
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Open a pull request to the [BlockNote GitHub repo](https://github.com/TypeCellOS/BlockNote). Pull requests will automatically be deployed to a preview environment.

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

@@ -49,6 +49,7 @@ When a user edits the document, an incremental change (or "update") is captured
 
 - [Liveblocks](https://liveblocks.io/yjs) A fully hosted WebSocket infrastructure and persisted data store for Yjs documents. Includes webhooks, REST API, and browser DevTools, all for Yjs
 - [PartyKit](https://www.partykit.io/) A serverless provider that runs on Cloudflare
+- [Y-Sweet](https://jamsocket.com/y-sweet) An open-source provider that runs fully managed on [Jamsocket](https://jamsocket.com) or self-hosted in your own cloud
 - [Hocuspocus](https://www.hocuspocus.dev/) open source and extensible Node.js server with pluggable storage (scales with Redis)
 - [y-websocket](https://github.com/yjs/y-websocket) provider that you can connect to your own websocket server
 - [y-indexeddb](https://github.com/yjs/y-indexeddb) for offline storage

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/.bnexample.json

@@ -0,0 +1,11 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "areknawo",
+  "tags": [
+    "Intermediate",
+    "UI Components",
+    "Formatting Toolbar",
+    "Appearance & Styling"
+  ]
+}

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/App.tsx

@@ -0,0 +1,42 @@
+import "@blocknote/core/fonts/inter.css";
+import {
+  ExperimentalMobileFormattingToolbarController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+
+import "./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:
+          "Check out the experimental mobile formatting toolbar by selecting some text (best experienced on a mobile device).",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance using a React component.
+  return (
+    // Disables the default formatting toolbar and re-adds it without the
+    // `FormattingToolbarController` component. You may have seen
+    // `FormattingToolbarController` used in other examples, but we omit it here
+    // as we want to control the position and visibility ourselves. BlockNote
+    // also uses the `FormattingToolbarController` when displaying the
+    // Formatting Toolbar by default.
+    <BlockNoteView editor={editor} formattingToolbar={false}>
+      <ExperimentalMobileFormattingToolbarController />
+    </BlockNoteView>
+  );
+}

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/README.md

@@ -0,0 +1,10 @@
+# Experimental Mobile Formatting Toolbar
+
+This example shows how to use the experimental mobile formatting toolbar, which uses [Visual Viewport API](https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API) to position the toolbar right above the virtual keyboard on mobile devices.
+
+Controller is currently marked **experimental** due to the flickering issue with positioning (caused by delays of the Visual Viewport API)
+
+**Relevant Docs:**
+
+- [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar)
+- [Editor Setup](/docs/editor-basics/setup)

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Experimental Mobile Formatting Toolbar</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/main.tsx

@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-experimental-mobile-formatting-toolbar",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.10.0",
+    "vite": "^5.3.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/style.css

@@ -0,0 +1,9 @@
+.bn-container {
+    display: flex;
+    flex-direction: column-reverse;
+    gap: 8px;
+}
+
+.bn-formatting-toolbar {
+    margin-inline: auto;
+}

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}

examples/03-ui-components/14-experimental-mobile-formatting-toolbar/vite.config.ts

@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));

examples/06-custom-schema/04-pdf-file-block/PDF.tsx

@@ -1,10 +1,8 @@
 import { FileBlockConfig } from "@blocknote/core";
 import {
-  AddFileButton,
   createReactBlockSpec,
-  DefaultFilePreview,
-  FileAndCaptionWrapper,
   ReactCustomBlockRenderProps,
+  ResizableFileBlockWrapper,
 } from "@blocknote/react";
 
 import { RiFilePdfFill } from "react-icons/ri";
@@ -53,31 +51,12 @@ export const PDF = createReactBlockSpec(
   },
   {
     render: (props) => (
-      <div className={"bn-file-block-content-wrapper"}>
-        {props.block.props.url === "" ? (
-          <AddFileButton
-            {...props}
-            editor={props.editor as any}
-            buttonText={"Add PDF"}
-            buttonIcon={<RiFilePdfFill size={24} />}
-          />
-        ) : !props.block.props.showPreview ? (
-          <FileAndCaptionWrapper
-            block={props.block}
-            editor={props.editor as any}>
-            <DefaultFilePreview
-              block={props.block}
-              editor={props.editor as any}
-            />
-          </FileAndCaptionWrapper>
-        ) : (
-          <FileAndCaptionWrapper
-            block={props.block}
-            editor={props.editor as any}>
-            <PDFPreview block={props.block} editor={props.editor as any} />
-          </FileAndCaptionWrapper>
-        )}
-      </div>
+      <ResizableFileBlockWrapper
+        {...(props as any)}
+        bbuttonText={"Add PDF"}
+        buttonIcon={<RiFilePdfFill size={24} />}>
+        <PDFPreview {...(props as any)} />
+      </ResizableFileBlockWrapper>
     ),
   }
 );

examples/07-collaboration/01-partykit/README.md

@@ -2,7 +2,7 @@
 
 In this example, we use PartyKit to let multiple users collaborate on a single BlockNote document in real-time.
 
-**Try it out:** Open this page ion a new browser tab or window to see it in action!
+**Try it out:** Open this page in a new browser tab or window to see it in action!
 
 **Relevant Docs:**
 

examples/07-collaboration/02-liveblocks/README.md

@@ -2,7 +2,7 @@
 
 In this example, we use Liveblocks to let multiple users collaborate on a single BlockNote document in real-time.
 
-**Try it out:** Open this page ion a new browser tab or window to see it in action!
+**Try it out:** Open this page in a new browser tab or window to see it in action!
 
 **Relevant Docs:**
 

examples/07-collaboration/03-y-sweet/.bnexample.json

@@ -0,0 +1,9 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "jakelazaroff",
+  "tags": ["Advanced", "Saving/Loading", "Collaboration"],
+  "dependencies": {
+    "@y-sweet/react": "^0.6.3"
+  }
+}

examples/07-collaboration/03-y-sweet/App.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useYDoc, useYjsProvider, YDocProvider } from "@y-sweet/react";
+import { useCreateBlockNote } from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+
+import "@blocknote/mantine/style.css";
+
+export default function App() {
+  const docId = "my-blocknote-document";
+
+  return (
+    <YDocProvider
+      docId={docId}
+      authEndpoint="https://demos.y-sweet.dev/api/auth">
+      <Document />
+    </YDocProvider>
+  );
+}
+
+function Document() {
+  const provider = useYjsProvider();
+  const doc = useYDoc();
+
+  const editor = useCreateBlockNote({
+    collaboration: {
+      provider,
+      fragment: doc.getXmlFragment("blocknote"),
+      user: { color: "#ff0000", name: "My Username" },
+    },
+  });
+
+  return <BlockNoteView editor={editor} />;
+}

examples/07-collaboration/03-y-sweet/README.md

@@ -0,0 +1,10 @@
+# Collaborative Editing with Y-Sweet
+
+In this example, we use Y-Sweet to let multiple users collaborate on a single BlockNote document in real-time.
+
+**Try it out:** Open the [Y-Sweet BlockNote demo](https://demos.y-sweet.dev/blocknote) in multiple browser tabs to see it in action!
+
+**Relevant Docs:**
+
+- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)
+- [Editor Setup](/docs/editor-basics/setup)