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;
 }