Merge branch 'main' into default-blocks

Author: nperez0111

docs/app/pricing/tiers.tsx

@@ -4,6 +4,7 @@ import { CheckIcon } from "@heroicons/react/20/solid";
 import { track } from "@vercel/analytics";
 import classNames from "classnames";
 import React from "react";
+import * as Sentry from "@sentry/nextjs";
 
 type Frequency = "month" | "year";
 
@@ -76,7 +77,14 @@ function TierCTAButton({ tier }: { tier: Tier }) {
         }
 
         if (session.planType === "free") {
-          track("Signup", { tier: tier.id });
+          Sentry.captureEvent({
+            message: "Checkout",
+            level: "info",
+            extra: {
+              tier: tier.id,
+            },
+          });
+          track("Checkout", { tier: tier.id });
           e.preventDefault();
           e.stopPropagation();
           await authClient.checkout({

docs/components/AuthenticationPage.tsx

@@ -9,6 +9,8 @@ import {
   useEffect,
   useState,
 } from "react";
+import { track } from "@vercel/analytics";
+import * as Sentry from "@sentry/nextjs";
 
 import ThemedImage from "@/components/ThemedImage";
 import blockNoteLogo from "@/public/img/logos/banner.svg";
@@ -69,6 +71,14 @@ function AuthenticationBox(props: {
     setSigningInState({ state: "loading" });
 
     if (props.variant === "password") {
+      track("Sign In", { type: "password" });
+      Sentry.captureEvent({
+        message: "Sign In",
+        level: "info",
+        extra: {
+          type: "password",
+        },
+      });
       await signIn.email(
         {
           email,
@@ -88,6 +98,14 @@ function AuthenticationBox(props: {
         },
       );
     } else if (props.variant === "email") {
+      track("Sign In", { type: "magic-link" });
+      Sentry.captureEvent({
+        message: "Sign In",
+        level: "info",
+        extra: {
+          type: "magic-link",
+        },
+      });
       await signIn.magicLink(
         {
           email,
@@ -117,6 +135,14 @@ function AuthenticationBox(props: {
         },
       );
     } else {
+      track("Create Account");
+      Sentry.captureEvent({
+        message: "Sign Up",
+        level: "info",
+        extra: {
+          type: "email",
+        },
+      });
       await signUp.email(
         {
           email,
@@ -318,12 +344,20 @@ function GitHubSignInButton() {
           />
         </svg>
       }
-      onClick={async () =>
+      onClick={async () => {
+        track("Sign In", { type: "github" });
+        Sentry.captureEvent({
+          message: "Sign In",
+          level: "info",
+          extra: {
+            type: "github",
+          },
+        });
         await signIn.social({
           provider: "github",
           callbackURL,
-        })
-      }
+        });
+      }}
     />
   );
 }

docs/content/docs/features/collaboration/comments.mdx

@@ -13,6 +13,7 @@ To enable comments in your editor, you need to:
 - provide a `resolveUsers` so BlockNote can retrieve and display user information (names and avatars).
 - provide a `ThreadStore` so BlockNote can store and retrieve comment threads.
 - enable real-time collaboration (see [Real-time collaboration](/docs/features/collaboration))
+- optionally provide a schema for comments and comment editors to use. If left undefined, they will use the [default comment editor schema](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/Comments/defaultCommentEditorSchema.ts). See [here](/docs/features/custom-schemas) to find out more about custom schemas.
 
 ```tsx
 const editor = useCreateBlockNote({
@@ -21,6 +22,7 @@ const editor = useCreateBlockNote({
   },
   comments: {
     threadStore: yourThreadStore, // see below
+    schema: BlockNoteSchema.create(...) // optional, can be left undefined
   },
   // ...
   collaboration: {

docs/content/docs/foundations/document-structure.mdx

@@ -72,7 +72,6 @@ type CustomInlineContent = {
   content: StyledText[] | undefined;
   props: Record<string, boolean | number | string>;
 };
-```
 
 type InlineContent = Link | StyledText | CustomInlineContent;
 

docs/content/docs/reference/editor/overview.mdx

@@ -106,7 +106,7 @@ editor.pasteText("Hello, world!");
 Paste Markdown content into the editor.
 
 ```ts
-await editor.pasteMarkdown("# Hello\n\nThis is **bold** text.");
+editor.pasteMarkdown("# Hello\n\nThis is **bold** text.");
 ```
 
 ## Options

docs/next.config.ts

@@ -9,6 +9,7 @@ const config = {
   serverExternalPackages: ["typescript", "twoslash"],
   experimental: {
     reactCompiler: true,
+    turbopackScopeHoisting: false,
   },
   images: {
     remotePatterns: [

docs/package.json

@@ -35,11 +35,11 @@
     "@fumadocs/mdx-remote": "1.3.0",
     "@headlessui/react": "^1.7.19",
     "@heroicons/react": "^2.2.0",
-    "@liveblocks/client": "^2.23.1",
-    "@liveblocks/react": "^2.23.1",
-    "@liveblocks/react-blocknote": "^2.23.1",
-    "@liveblocks/react-tiptap": "^2.23.1",
-    "@liveblocks/react-ui": "^2.23.1",
+    "@liveblocks/client": "^3",
+    "@liveblocks/react": "^3",
+    "@liveblocks/react-blocknote": "^3",
+    "@liveblocks/react-tiptap": "^3",
+    "@liveblocks/react-ui": "^3",
     "@mantine/core": "^7.17.3",
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",

examples/05-interoperability/05-converting-blocks-to-pdf/src/App.tsx

@@ -26,13 +26,14 @@ import {
   ColumnBlock,
 } from "@blocknote/xl-multi-column";
 import { PDFViewer } from "@react-pdf/renderer";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useReducer, useState } from "react";
 
 import "./styles.css";
 
 export default function App() {
   // Stores the editor's contents as HTML.
   const [pdfDocument, setPDFDocument] = useState<any>();
+  const [renders, forceRerender] = useReducer((s) => s + 1, 0);
 
   // Creates a new editor instance with some initial content.
   const editor = useCreateBlockNote({
@@ -403,6 +404,7 @@ export default function App() {
     // Converts the editor's contents from Block objects to HTML and store to state.
     const pdfDocument = await exporter.toReactPDFDocument(editor.document);
     setPDFDocument(pdfDocument);
+    forceRerender();
 
     // const blob = await ReactPDF.pdf(pdfDocument).toBlob();
   };
@@ -424,7 +426,9 @@ export default function App() {
         </BlockNoteView>
       </div>
       <div className="pdf">
-        <PDFViewer width={"100%"}>{pdfDocument}</PDFViewer>
+        <PDFViewer width={"100%"} key={renders}>
+          {pdfDocument}
+        </PDFViewer>
       </div>
     </div>
   );

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

@@ -4,6 +4,7 @@ import {
   filterSuggestionItems,
   insertOrUpdateBlock,
 } from "@blocknote/core";
+import { en } from "@blocknote/core/locales";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
@@ -17,6 +18,12 @@ import { RiFilePdfFill } from "react-icons/ri";
 
 import { PDF } from "./PDF";
 
+// Updated English dictionary with entries for PDF blocks.
+const dictionary = en;
+en.file_blocks.add_button_text["pdf"] = "Add PDF";
+en.file_panel.embed.embed_button["pdf"] = "Embed PDF";
+en.file_panel.upload.file_placeholder["pdf"] = "Upload PDF";
+
 // Our schema with block specs, which contain the configs and implementations for blocks
 // that we want our editor to use.
 const schema = BlockNoteSchema.create({
@@ -44,6 +51,7 @@ const insertPDF = (editor: typeof schema.BlockNoteEditor) => ({
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
+    dictionary,
     schema,
     initialContent: [
       {

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

@@ -60,7 +60,6 @@ export const PDF = createReactBlockSpec(
     render: (props) => (
       <ResizableFileBlockWrapper
         {...(props as any)}
-        bbuttonText={"Add PDF"}
         buttonIcon={<RiFilePdfFill size={24} />}
       >
         <PDFPreview {...(props as any)} />