Merge branch 'main' into releases

# Conflicts:
#	package-lock.json
#	tests/package.json

Author: matthewlipski

.github/workflows/build.yml

@@ -64,7 +64,7 @@ jobs:
           CI: true
 
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: npm run install-playwright
 
       - name: Run Playwright tests
         working-directory: ./tests

CONTRIBUTING.md

@@ -11,7 +11,7 @@ blocknote
 └── tests               - Playwright end to end tests
 ```
 
-An introduction into the BlockNote Prosemirror schema can be found in [packages/core/ARCHITECTURE.md](https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/ARCHITECTURE.md).
+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).
 
 ## Running
 

docs/components/example/ExampleBlock.tsx

@@ -1,20 +1,24 @@
 import dynamic from "next/dynamic";
-import { AiFillCodeSandboxCircle, AiFillGithub } from "react-icons/ai";
+import { AiFillGithub } from "react-icons/ai";
+import { SiStackblitz } from "react-icons/si";
 
 import { examples } from "./generated/exampleComponents.gen";
 import "./styles.css";
 
-const baseGitHubURL =
-  "https://github.com/TypeCellOS/BlockNote/tree/main/examples/";
-const baseCodeSandboxURL =
-  "https://githubbox.com/TypeCellOS/BlockNote/tree/main/examples/";
+const baseGitHubURL = "https://github.com/TypeCellOS/BlockNote/tree/main/";
+// const baseCodeSandboxURL =
+//   "https://githubbox.com/TypeCellOS/BlockNote/tree/main/";
+
+const baseStackBlitzURL =
+  "https://www.stackblitz.com/github/TypeCellOS/BlockNote/tree/main/";
 
 const ThemedExample = dynamic(() => import("./ThemedExample"), {
   ssr: false,
 });
 
 export function ExampleBlock(props: {
   name: keyof typeof examples;
+  path: string;
   children: any;
 }) {
   // const example = examplesFlattened.find((e) => e.slug === props.name);
@@ -25,24 +29,26 @@ export function ExampleBlock(props: {
   return (
     <div className="demo nx-bg-primary-700/5 dark:nx-bg-primary-300/10 mt-6 rounded-lg p-4">
       <div className={"flex flex-row gap-6 pb-4"}>
-        <button
+        <a
           className={
             "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
           }
-          onClick={() => window.open(`${baseGitHubURL}${props.name}/`)}>
+          href={`${baseGitHubURL}${props.path}/`}
+          target="_blank">
           <AiFillGithub />
           <div className={"text-sm"}>GitHub</div>
-        </button>
-        <button
+        </a>
+        <a
           className={
             "nx-select-none nx-text-gray-600 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-text-white flex flex-row items-center gap-1"
           }
-          onClick={() => window.open(`${baseCodeSandboxURL}${props.name}/`)}>
-          <AiFillCodeSandboxCircle />
-          <div className={"text-sm"}>CodeSandbox</div>
-        </button>
+          href={`${baseStackBlitzURL}${props.path}/`}
+          target="_blank">
+          <SiStackblitz />
+          <div className={"text-sm"}>StackBlitz</div>
+        </a>
       </div>
-      <div className={"h-96 overflow-auto rounded-lg"}>
+      <div className={"demo-contents h-96 overflow-auto rounded-lg"}>
         <ThemedExample name={props.name} />
       </div>
       {props.children}

docs/components/example/styles.css

@@ -1,27 +1,28 @@
 :focus-visible {
-    box-shadow: unset !important;
+  box-shadow: unset !important;
 }
 
 .demo .nextra-code-block pre {
-    background-color: transparent !important;
-    margin: 0 !important;
-    padding: 0 !important;
+  background-color: transparent !important;
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
 .demo .nextra-code-block code > span {
-    padding: 0 !important;
+  padding: 0 !important;
 }
 
-.demo .bn-container, .demo .bn-editor {
-    height: 100%;
+.demo .bn-container,
+.demo .bn-editor {
+  height: 100%;
 }
 
 .demo .bn-editor {
-    overflow: auto;
-    padding-block: 1rem;
+  overflow: auto;
+  padding-block: 1rem;
 }
 
-.demo a {
-    color: revert;
-    text-decoration: revert;
-}
+.demo-contents a {
+  color: revert;
+  text-decoration: revert;
+}

docs/components/pages/landing/gradients.css

@@ -11,8 +11,20 @@ section {
   --bg-color: #000000;
 }
 
-.editor-glow {
+.demo-glow {
   --glow-opacity: 0.4;
+  display: block;
+}
+
+.text-glow {
+  --glow-opacity: 0.2;
+  display: none;
+  @media only screen and (hover: none) and (pointer: coarse) {
+    display: block; /* disable on mobile */
+  }
+}
+
+.hero-glow {
   background: conic-gradient(
     from 33deg at 50% 50%,
     hsla(var(--glow-blue), var(--glow-opacity)),

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

@@ -29,12 +29,12 @@ const DemoEditor = dynamic(
   },
 );
 
-export function Demo(props: { theme: "light" | "dark" }) {
+export function Demo(props: { theme?: "light" | "dark" }) {
   return (
-    <div className="hero relative h-[36rem] w-full shrink-0 grow-0 rounded-lg xl:w-[584px]">
-      <div className="editor-glow absolute z-10 h-full w-full" />
+    <div className="hero-demo relative h-[36rem] w-full shrink-0 grow-0 rounded-lg sm:block xl:w-[584px]">
+      <div className="hero-glow demo-glow absolute z-10 h-full w-full" />
       <div className="relative z-20 h-full w-full rounded-lg bg-white dark:bg-[#202020]">
-        <DemoEditor theme={props.theme === "dark" ? "dark" : "light"} />
+        <DemoEditor theme={props.theme} />
       </div>
       <TryHereImage />
     </div>

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

@@ -6,8 +6,6 @@ import { useCallback, useMemo, useState } from "react";
 import YPartyKitProvider from "y-partykit/provider";
 import * as Y from "yjs";
 
-import "./styles.css";
-
 const colors = [
   "#958DF1",
   "#F98181",
@@ -54,9 +52,8 @@ function getUTCDateYYYYMMDD() {
   return `${year}${formattedMonth}${formattedDay}`;
 }
 
-export default function DemoEditor(props: { theme: "light" | "dark" }) {
+export default function DemoEditor(props: { theme?: "light" | "dark" }) {
   const [doc, provider] = useMemo(() => {
-    console.log("create");
     const doc = new Y.Doc();
     const provider = new YPartyKitProvider(
       "blocknote.yousefed.partykit.dev",

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

@@ -4,6 +4,8 @@ import { Text } from "@/components/pages/landing/hero/Text";
 import { Demo } from "@/components/pages/landing/hero/Demo";
 import { FadeIn } from "@/components/pages/landing/shared/FadeIn";
 
+import "./styles.css";
+
 export function Hero() {
   const { theme } = useTheme();
 
@@ -15,7 +17,13 @@ export function Hero() {
           "z-20 flex w-full flex-col items-center justify-between gap-6 px-6 md:max-w-screen-md xl:max-w-[1440px] xl:flex-row"
         }>
         <Text />
-        <Demo theme={theme === "dark" ? "dark" : "light"} />
+        <Demo
+          theme={
+            theme === undefined || theme === "system"
+              ? undefined
+              : (theme as "light" | "dark" | undefined)
+          }
+        />
       </FadeIn>
     </Section>
   );

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

@@ -6,15 +6,16 @@ import { CTAButton } from "@/components/pages/landing/shared/CTAButton";
 
 export function Text() {
   return (
-    <div className="flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left">
-      <HeroText h1>
+    <div className="relative flex h-fit flex-col items-center justify-center gap-6 text-center xl:w-[584px] xl:items-start xl:text-left">
+      <div className="hero-glow text-glow absolute block h-full w-full sm:hidden" />
+      <HeroText h1 className={"z-10"}>
         The open source
         <br />
         <strong>Block-Based</strong>
         <br />
         rich text editor
       </HeroText>
-      <SectionSubtext>
+      <SectionSubtext className={"z-10"}>
         A beautiful text editor that just works. Easily add an editor to your
         app that users will love. Customize it with your own functionality like
         custom blocks or AI tooling.

docs/components/pages/landing/hero/styles.css

@@ -1,16 +1,22 @@
-.hero .bn-container, .hero .bn-editor {
+.hero-demo {
+    @media only screen and (hover: none) and (pointer: coarse) {
+        display: none; /* disable on mobile */
+    }
+}
+
+.hero-demo .bn-container, .hero-demo .bn-editor {
     height: 100%
 }
 
-.hero .bn-editor {
+.hero-demo .bn-editor {
     overflow: auto;
     min-height: 100%;
     /* Removes focus outline */
     box-shadow: none !important;
     padding-block: 1rem
 }
 
-.hero a {
+.hero-demo a {
     color: revert;
     text-decoration: revert;
 }

docs/components/pages/landing/shared/Headings.tsx

@@ -48,10 +48,19 @@ export function SectionSubHeader({ children }: { children: React.ReactNode }) {
   );
 }
 
-export function SectionSubtext({ children }: { children: React.ReactNode }) {
+export function SectionSubtext({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
   return (
     <p
-      className={`font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl`}>
+      className={cn(
+        "font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] md:text-xl",
+        className,
+      )}>
       {children}
     </p>
   );

docs/components/pages/landing/styles.css

@@ -8,6 +8,10 @@
 }
 
 .nextra-nav-container {
+    z-index: 40;
+}
+
+.nextra-sidebar-container {
     z-index: 30;
 }
 

docs/package.json

@@ -14,6 +14,7 @@
     "@headlessui/react": "^1.7.18",
     "@mantine/core": "^7.5.0",
     "@next/bundle-analyzer": "^14.1.0",
+    "@vercel/analytics": "^1.2.2",
     "@vercel/og": "^0.6.2",
     "classnames": "2.3.2",
     "clsx": "^2.1.0",

docs/pages/_app.tsx

@@ -1,4 +1,5 @@
 // import "../custom.css";
+import { Analytics } from "@vercel/analytics/react";
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import { type ReactNode } from "react";
@@ -17,6 +18,7 @@ export default function Nextra({ Component, pageProps }: NextraAppProps) {
     <>
       <SessionProvider>
         <Component {...pageProps} />
+        <Analytics />
       </SessionProvider>
     </>
   );

docs/pages/_document.tsx

@@ -1,8 +1,9 @@
+import { Analytics } from "@vercel/analytics/react";
 import type { DocumentContext, DocumentInitialProps } from "next/document";
 import Document, { Head, Html, Main, NextScript } from "next/document";
 class MyDocument extends Document {
   static async getInitialProps(
-    ctx: DocumentContext
+    ctx: DocumentContext,
   ): Promise<DocumentInitialProps> {
     const initialProps = await Document.getInitialProps(ctx);
 
@@ -16,6 +17,7 @@ class MyDocument extends Document {
         <body>
           <Main />
           <NextScript />
+          <Analytics />
         </body>
       </Html>
     );

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

@@ -11,7 +11,7 @@ Let's see how you can add Multiplayer capabilities to your BlockNote setup, and
 
 <img
   style={{ maxWidth: "300px", border: "1px solid gray" }}
-  src="/img/features/collaboration.gif"
+  src="/img/features/collaboration_light.gif"
   alt="text editing collaboration"
 />
 

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

@@ -49,7 +49,7 @@ While it's up to you to decide how you want the elements to be rendered, BlockNo
 ```typescript
 type UIElement =
   | "formattingToolbar"
-  | "hyperlinkToolbar"
+  | "linkToolbar"
   | "imageToolbar"
   | "sideMenu"
   | "suggestionMenu"

docs/pages/docs/custom-schemas.mdx

@@ -12,19 +12,19 @@ However, you can extend BlockNote and create custom schemas to support your own
 
 Blocks are the main elements of a document, such as paragraphs, headings, lists, etc.
 
-- [Learn how to create custom blocks for your BlockNote editor](/docs/custom-schemas/blocks)
+- [Learn how to create custom blocks for your BlockNote editor](/docs/custom-schemas/custom-blocks)
 
 ## Custom Inline Content
 
 Inline Content are elements that can be inserted inside a text block, such as links, mentions, tags, etc.
 
-- [Learn how to create custom Inline Content for your BlockNote editor](/docs/custom-schemas/inline-content)
+- [Learn how to create custom Inline Content for your BlockNote editor](/docs/custom-schemas/custom-inline-content)
 
 ## Custom Styles
 
 Text Styles are properties that can be applied to a piece of text, such as bold, italic, underline, etc.
 
-- [Learn how to add custom Styles to your BlockNote editor](/docs/custom-schemas/styles)
+- [Learn how to add custom Styles to your BlockNote editor](/docs/custom-schemas/custom-styles)
 
 ## Creating your own schema
 
@@ -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/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.
+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.

docs/pages/docs/custom-schemas/custom-inline-content.mdx

@@ -56,7 +56,7 @@ Defines the identifier of the custom inline content.
 
 **`content`**
 
-`styled` if your custom inline content should support [styled text content](/docs/editor-api/block-content#styled-text), `none` if not.
+`styled` if your custom inline content should contain [`StyledText`](/docs/editor-basics/document-structure#inline-content-objects), `none` if not.
 
 _In the mentions demo, we want each mention to be a single, non-editable element, so we set it to `"none"`._