diff --git a/docs/components/AuthNavButton.tsx b/docs/components/AuthNavButton.tsx index ca1e72833d..e7878d8326 100644 --- a/docs/components/AuthNavButton.tsx +++ b/docs/components/AuthNavButton.tsx @@ -1,7 +1,7 @@ import { Menu, Transition } from "@headlessui/react"; import clsx from "clsx"; -import { signIn, signOut, useSession } from "next-auth/react"; -import Image from 'next/image'; +import { signOut, useSession } from "next-auth/react"; +import Image from "next/image"; import { ReactElement, ReactNode } from "react"; export function AuthNavButton(props: any) { @@ -14,7 +14,7 @@ export function AuthNavButton(props: any) {
đź’– Thanks for sponsoring!
@@ -26,14 +26,14 @@ export function AuthNavButton(props: any) { }} className={clsx( "nx-relative nx-hidden nx-w-full nx-select-none nx-whitespace-nowrap nx-text-gray-600 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 md:nx-inline-block", - "nx-py-1.5 nx-transition-colors ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9" + "nx-py-1.5 nx-transition-colors ltr:nx-pl-3 ltr:nx-pr-9 rtl:nx-pr-3 rtl:nx-pl-9", )}> Sign out , ]}> {session.data.user!.name!} ) : ( + <> // TODO: design button - + // ); } diff --git a/docs/components/Feature.tsx b/docs/components/Feature.tsx new file mode 100644 index 0000000000..680334de1c --- /dev/null +++ b/docs/components/Feature.tsx @@ -0,0 +1,62 @@ +export default function Feature() { + return ( +
+
+
+
+
+

+ Deploy faster +

+

+ A better workflow +

+

+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Maiores impedit perferendis suscipit eaque, iste dolor + cupiditate blanditiis ratione. +

+ +
+
+

+ “Vel ultricies morbi odio facilisi ultrices accumsan donec + lacus purus. Lectus nibh ullamcorper ac dictum justo in + euismod. Risus aenean ut elit massa. In amet aliquet eget + cras. Sem volutpat enim tristique.” +

+
+
+ +
+ + Maria Hill + {" "} + – Marketing Manager +
+
+
+
+
+ Product screenshot +
+
+
+ ); +} diff --git a/docs/components/Social.tsx b/docs/components/Social.tsx deleted file mode 100644 index cc1d8562e7..0000000000 --- a/docs/components/Social.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { DiscordIcon, GitHubIcon } from "nextra/icons"; - -function Github() { - return ( - - {/* Nextra icons have a attribute providing alt text */} - <GitHubIcon /> - </a> - ); -} - -function Discord() { - return ( - <a - className="hidden p-2 text-current sm:flex hover:opacity-75" - href="https://turbo.build/discord" - rel="noreferrer" - target="_blank" - title="Turbo Discord server" - > - <DiscordIcon /> - </a> - ); -} - -export { Github, Discord }; diff --git a/docs/components/example/ExampleList.tsx b/docs/components/example/ExampleList.tsx index dbee5ed3e7..9d68d982bc 100644 --- a/docs/components/example/ExampleList.tsx +++ b/docs/components/example/ExampleList.tsx @@ -9,14 +9,13 @@ export function ExampleGroup(props: { examples: (typeof EXAMPLES_LIST)[0] }) { </h2> <Cards> {props.examples.items.map((project, i) => { - const user = i % 2 === 0 ? "yousefed" : "matthewlipski"; // TODO return ( <Card key={i} title={project.text} href={project.link} - authorName={user} - authorImage={`https://github.com/${user}.png`} + authorName={project.author} + authorImage={`https://github.com/${project.author}.png`} /> ); })} diff --git a/docs/components/pages/home-shared/Headings.tsx b/docs/components/pages/home-shared/Headings.tsx index eca573d1bc..f17ec59d98 100644 --- a/docs/components/pages/home-shared/Headings.tsx +++ b/docs/components/pages/home-shared/Headings.tsx @@ -12,7 +12,7 @@ export function HeroText({ }) { const combinedClassname = cn( gradients.heroHeading, - "tracking-[-0.04em] leading-none text-7xl sm:text-[80px] text-transparent", + "leading-none text-7xl sm:text-[80px] text-transparent font-medium", className, ); @@ -42,7 +42,7 @@ export function SectionSubtext({ }) { return ( <p - className={`font-space-grotesk text-lg leading-snug text-[#00000080] sm:text-xl dark:text-[#FFFFFFB2]`}> + className={`font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] sm:text-xl`}> {children} </p> ); diff --git a/docs/components/pages/home-shared/gradients.module.css b/docs/components/pages/home-shared/gradients.module.css index b9c50a92cd..1e0ce34cf7 100644 --- a/docs/components/pages/home-shared/gradients.module.css +++ b/docs/components/pages/home-shared/gradients.module.css @@ -1,77 +1,3 @@ -.benchmarkTurbo { - background: linear-gradient(288.43deg, #ff1e56 28.29%, #9c51a1 78.78%); - box-shadow: 0px 0px 16px #f02662; - :global(.light) & { - background: linear-gradient( - 268.86deg, - #ff1e56 -5.68%, - #d67fdc 107.63%, - #9c51a1 107.64% - ); - box-shadow: none; - } -} - -.benchmarkActiveTab { - background: radial-gradient( - 50% 50% at 50% 100%, - rgba(255, 255, 255, 0.2) 0%, - rgba(255, 255, 255, 0) 100% - ), - linear-gradient(0deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)), - radial-gradient( - 128.57% 128.57% at 50% 0%, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ), - radial-gradient( - 100% 427.04% at 100% 0%, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ), - radial-gradient( - 100% 462.63% at 0% 0%, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ); - :global(.light) & { - background: linear-gradient( - 0deg, - rgba(255, 255, 255, 0.8), - rgba(255, 255, 255, 0.8) - ), - radial-gradient( - 50% 50% at 49.66% 0%, - rgba(255, 255, 255, 0.1) 0%, - rgba(255, 255, 255, 0) 100% - ); - } -} - -.benchmarkTurboLabel { - background: linear-gradient(288.43deg, #ff1e56 28.29%, #9c51a1 78.78%); - color: transparent; - background-clip: text; - :global(.light) & { - background: linear-gradient( - 268.86deg, - #ff1e56 -5.68%, - #d67fdc 107.63%, - #9c51a1 107.64% - ), - linear-gradient(288.43deg, #ff1e56 28.29%, #9c51a1 78.78%); - color: transparent; - background-clip: text; - } -} - -.benchmark { - background: linear-gradient(270deg, #5c5c5c 0%, #1f1f1f 100%); - :global(.light) & { - background: linear-gradient(89.98deg, #e0e0e0 0.01%, #9c9c9c 99.49%); - } -} - .barBorder { border: rgba(255, 255, 255, 0.4) 1px solid; :global(.light) & { @@ -113,26 +39,6 @@ } } -.turbopackHeaderText { - background: linear-gradient( - 90deg, - rgba(200, 221, 255, 0.75) 0%, - rgba(255, 202, 222, 0.75) 100% - ), - linear-gradient(0deg, #ffffff, #ffffff); - - :global(.light) & { - background: linear-gradient( - 90deg, - rgba(200, 221, 255, 0.1) 0%, - rgba(255, 202, 222, 0.1) 100% - ), - #000000; - background-clip: text; - } - background-clip: text; -} - .heroHeading { background: linear-gradient(180deg, #ffffff 0%, #aaaaaa 100%), #ffffff; :global(.light) & { diff --git a/docs/components/pages/landing/FAQ.tsx b/docs/components/pages/landing/FAQ.tsx index c6ef585480..30740d1292 100644 --- a/docs/components/pages/landing/FAQ.tsx +++ b/docs/components/pages/landing/FAQ.tsx @@ -35,9 +35,7 @@ export default function FAQ() { Frequently asked questions </h2> <p className="mt-6 text-base leading-7 text-gray-600 dark:text-gray-300"> - Have a different question and can’t find the answer you’re looking - for? <br /> - <Link href="/about">Reach out to our team</Link>. + More questions? <Link href="/about">Reach out to our team</Link>. </p> </div> <div className="mt-20"> diff --git a/docs/components/pages/landing/community/Community.tsx b/docs/components/pages/landing/community/Community.tsx index 1192a1fdf8..7d7a255027 100644 --- a/docs/components/pages/landing/community/Community.tsx +++ b/docs/components/pages/landing/community/Community.tsx @@ -1,14 +1,14 @@ -import { FC } from "react"; -import { SectionHeader, SectionSubtext } from "../../home-shared/Headings"; +import { Contributors } from "@/components/pages/landing/community/Contributors"; import { Join } from "@/components/pages/landing/community/Join"; import { DiscordIcon, GitHubIcon } from "nextra/icons"; -import { Contributors } from "@/components/pages/landing/community/Contributors"; +import { FC } from "react"; +import { SectionHeader, SectionSubtext } from "../../home-shared/Headings"; export const Community: FC = () => ( <section> <div className="mx-auto flex flex-col items-center gap-12 px-4 py-8 lg:px-20 lg:py-24"> <div className="flex flex-col items-center justify-center gap-2 text-center md:max-w-screen-md md:gap-4"> - <SectionHeader>Community contributors</SectionHeader> + <SectionHeader>Open Source Community</SectionHeader> <SectionSubtext> Join a community of open-source contributors by tuning in with the BlockNote community and contributing to the project. @@ -19,7 +19,7 @@ export const Community: FC = () => ( <Join text={"Become a GitHub contributor"} subtext={ - "Join the community of BlockNote developers by contributing code and supporting the project" + "Join the community of BlockNote developers by contributing code and supporting the project." } icon={GitHubIcon} linkTitle={"See our repository"} @@ -28,7 +28,7 @@ export const Community: FC = () => ( <Join text={"Join the Discord community"} subtext={ - "Ask questions, request features, and share your work with other BlockNote users on Discord" + "Ask questions, discuss features, and share your work with other BlockNote users on Discord." } icon={DiscordIcon} linkTitle={"Join our Server"} diff --git a/docs/components/pages/landing/features/Features.tsx b/docs/components/pages/landing/features/Features.tsx index 5c6277a284..80914f1e0a 100644 --- a/docs/components/pages/landing/features/Features.tsx +++ b/docs/components/pages/landing/features/Features.tsx @@ -1,32 +1,29 @@ -import { FadeIn } from "@/components/pages/landing/shared/FadeIn"; -import { - FeatureCard, - FeatureCardProps, -} from "@/components/pages/landing/features/FeatureCard"; import { SectionHeader, SectionSubtext, } from "@/components/pages/home-shared/Headings"; import { - RiInputCursorMove, + FeatureCard, + FeatureCardProps, +} from "@/components/pages/landing/features/FeatureCard"; +import { FadeIn } from "@/components/pages/landing/shared/FadeIn"; +import { RiJavascriptFill, - RiLayout4Fill, RiMarkdownFill, RiMenuAddFill, - RiMoonFill, RiPaintBrushFill, - RiSpeedUpFill, RiTeamFill, } from "react-icons/ri"; import slashMenuImageLight from "../../../../public/img/screenshots/slash_menu.png"; import slashMenuImageDark from "../../../../public/img/screenshots/slash_menu_dark.png"; +// TODO: icons, images export const featuresCardData: FeatureCardProps[] = [ { - title: "Extensibility", + title: "Modern UX", description: - "Want something more fancy? An easy to use API lets you add additional block types.", + "Built-in components like menus and toolbars instantly provide a familiar, Notion-style user experience - but are also fully customizable.", icon: RiMenuAddFill, thumbnail: { light: slashMenuImageLight, @@ -34,53 +31,54 @@ export const featuresCardData: FeatureCardProps[] = [ }, }, { - title: "Theming", - description: "Add a splash of colour to the editor with your own themes.", - icon: RiPaintBrushFill, + title: "Block-based design", + description: + "Drag, drop, or nest blocks. The block-based design enables users to create beautiful docs and unlocks a powerful API for engineers.", + icon: RiMenuAddFill, thumbnail: { light: slashMenuImageLight, dark: slashMenuImageDark, }, }, { - title: "UI Components", + title: "Collaboration", description: - "Replace any menus & toolbars with your own React components, or remove them entirely.", - icon: RiLayout4Fill, + "Craft beautiful multiplayer experiences with support for real-time collaboration.", + icon: RiTeamFill, thumbnail: { light: slashMenuImageLight, dark: slashMenuImageDark, }, }, { - title: "Quick & Easy Setup", + title: "Extensibility", description: - "Works and looks great out-of-the-box, while setup takes only a few lines of code.", - icon: RiSpeedUpFill, + "Want to go next level? Extend the editor with custom blocks, schemas, and plugins.", + icon: RiMenuAddFill, }, { - title: "Polished UX", + title: "First-class Typescript support", description: - "Editing documents is a breeze thanks to block indentation, animations, and more.", - icon: RiInputCursorMove, + "Get full type safety and autocompletion even when extending your editor with custom blocks and schemas.", + icon: RiMenuAddFill, }, { - title: "Light & Dark Modes", + title: "Theming", description: - "Automatically switches between light & dark modes based on system preference.", - icon: RiMoonFill, + "Customize the look and feel of your editor to match your brand. Built-in support for light & dark modes.", + icon: RiPaintBrushFill, }, { - title: "Collaboration", + title: "Markdown & HTML", description: - "Work on the same document with your team, in real-time, for maximum productivity.", - icon: RiTeamFill, + "Convert documents from BlockNote JSON to and from Markdown and HTML.", + icon: RiMarkdownFill, }, { - title: "Markdown & HTML", + title: "Prosemirror based", description: - "Switching to other formats is no problem with built-in Markdown & HTML conversion.", + "Builds on top of the battle-tested Prosemirror, but without the steep learning curve.", icon: RiMarkdownFill, }, { @@ -104,15 +102,21 @@ export function Features() { <FadeIn className="flex max-w-full flex-col items-center gap-2 text-center md:max-w-screen-md md:gap-4"> <SectionHeader>Why BlockNote?</SectionHeader> <SectionSubtext> - Whether you want deep customization or a great out-of-the-box - experience, BlockNote has you covered with features for any use - case. + Whether you want extensive customization or a great out-of-the-box + experience, BlockNote has you covered: </SectionSubtext> </FadeIn> <FadeIn className="grid max-w-full grid-cols-1 gap-4 md:max-w-screen-md md:grid-cols-2 xl:max-w-none xl:grid-cols-3 xl:gap-6 xl:p-0"> {featuresCardData.map((feature) => ( <FeatureCard key={feature.title} {...feature} /> ))} + <p>...and more: (TODO)</p> + <ul> + <li>Helpful Placeholders</li> + <li>Smooth Animations</li> + <li>Image Uploads</li> + <li>Resizable Tables</li> + </ul> </FadeIn> </div> </section> diff --git a/docs/components/pages/landing/hero/Demo.tsx b/docs/components/pages/landing/hero/Demo.tsx index c2ad2fff55..ac3b93633f 100644 --- a/docs/components/pages/landing/hero/Demo.tsx +++ b/docs/components/pages/landing/hero/Demo.tsx @@ -1,7 +1,7 @@ import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core"; import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; -import { useMemo } from "react"; +import { useCallback, useMemo, useState } from "react"; import YPartyKitProvider from "y-partykit/provider"; import * as Y from "yjs"; @@ -81,24 +81,18 @@ export function ReactBlockNote(props: { theme: "light" | "dark" }) { [], ); - // TODO - // useEffect(() => { - // let shownAlert = false; - // const listener = () => { - // if (!shownAlert) { - // alert( - // "Text you enter in this demo is displayed publicly on the internet to show multiplayer features. Be kind :)", - // ); - // shownAlert = true; - // } - // }; - // editor?.domElement?.addEventListener("focus", listener); - // return () => { - // editor?.domElement?.removeEventListener("focus", listener); - // }; - // }, [editor?.domElement]); + const [warningShown, setWarningShown] = useState(false); - return <BlockNoteView editor={editor} theme={props.theme} />; + const focus = useCallback(() => { + if (!warningShown) { + alert( + "Text you enter in this demo is displayed publicly on the internet to show multiplayer features. Be kind :)", + ); + setWarningShown(true); + } + }, [warningShown]); + + return <BlockNoteView onFocus={focus} editor={editor} theme={props.theme} />; } export default ReactBlockNote; diff --git a/docs/components/pages/landing/index.tsx b/docs/components/pages/landing/index.tsx index 564e89c18c..f5089fa037 100644 --- a/docs/components/pages/landing/index.tsx +++ b/docs/components/pages/landing/index.tsx @@ -2,12 +2,12 @@ import { Features } from "./features/Features"; import { Hero } from "./hero/Hero"; import { Letter } from "./letter/Letter"; +import { Community } from "@/components/pages/landing/community/Community"; import { FadeIn } from "@/components/pages/landing/shared/FadeIn"; +import { Sponsors } from "@/components/pages/landing/sponsors/Sponsors"; import FAQ from "./FAQ"; import "./gradients.css"; import "./styles.css"; -import { Sponsors } from "@/components/pages/landing/sponsors/Sponsors"; -import { Community } from "@/components/pages/landing/community/Community"; // TODO: Cleanup export function BlockNoteHome() { diff --git a/docs/components/pages/landing/sponsors/SponsorCard.tsx b/docs/components/pages/landing/sponsors/SponsorCard.tsx index 879c99ee6c..3d7144d11b 100644 --- a/docs/components/pages/landing/sponsors/SponsorCard.tsx +++ b/docs/components/pages/landing/sponsors/SponsorCard.tsx @@ -23,7 +23,7 @@ export function SponsorCard(props: SponsorCardProps) { alt={props.name} /> {props.tagline && ( - <div className={"absolute bottom-[10%] text-xs font-bold md:text-sm"}> + <div className={"absolute bottom-[10%] text-xs italic md:text-sm"}> {props.tagline} </div> )} diff --git a/docs/components/pages/landing/sponsors/Sponsors.tsx b/docs/components/pages/landing/sponsors/Sponsors.tsx index 1ba738377c..133714744b 100644 --- a/docs/components/pages/landing/sponsors/Sponsors.tsx +++ b/docs/components/pages/landing/sponsors/Sponsors.tsx @@ -1,22 +1,22 @@ -import { SectionHeader } from "../../home-shared/Headings"; -import { FadeIn } from "../shared/FadeIn"; import { SponsorCard, SponsorCardProps, } from "@/components/pages/landing/sponsors/SponsorCard"; +import { SectionHeader } from "../../home-shared/Headings"; +import { FadeIn } from "../shared/FadeIn"; -import fermatLight from "../../../../public/img/sponsors/fermat.png"; import fermatDark from "../../../../public/img/sponsors/fermat-dark.png"; -import nlnetLight from "../../../../public/img/sponsors/nlnet.svg"; +import fermatLight from "../../../../public/img/sponsors/fermat.png"; import nlnetDark from "../../../../public/img/sponsors/nlnet-dark.svg"; -import typecellLight from "../../../../public/img/sponsors/typecell.svg"; -import typecellDark from "../../../../public/img/sponsors/typecell-dark.svg"; -import poggioLight from "../../../../public/img/sponsors/poggio.svg"; +import nlnetLight from "../../../../public/img/sponsors/nlnet.svg"; +import noteplanDark from "../../../../public/img/sponsors/noteplan-dark.png"; +import noteplanLight from "../../../../public/img/sponsors/noteplan.png"; import poggioDark from "../../../../public/img/sponsors/poggio-dark.svg"; -import twentyLight from "../../../../public/img/sponsors/twenty.png"; +import poggioLight from "../../../../public/img/sponsors/poggio.svg"; import twentyDark from "../../../../public/img/sponsors/twenty-dark.png"; -import noteplanLight from "../../../../public/img/sponsors/noteplan.png"; -import noteplanDark from "../../../../public/img/sponsors/noteplan-dark.png"; +import twentyLight from "../../../../public/img/sponsors/twenty.png"; +import typecellDark from "../../../../public/img/sponsors/typecell-dark.svg"; +import typecellLight from "../../../../public/img/sponsors/typecell.svg"; export const sponsorsCardData: SponsorCardProps[] = [ { @@ -53,7 +53,7 @@ export const sponsorsCardData: SponsorCardProps[] = [ dark: twentyDark, }, name: "Twenty", - tagline: "Y Combinator S23", + tagline: "YC S23", }, { logo: { @@ -61,6 +61,7 @@ export const sponsorsCardData: SponsorCardProps[] = [ dark: noteplanDark, }, name: "Noteplan", + tagline: "Apple Top Notes Apps", }, ]; diff --git a/docs/pages/docs/_meta.json b/docs/pages/docs/_meta.json index 9d5049f9ce..4b8c99d576 100644 --- a/docs/pages/docs/_meta.json +++ b/docs/pages/docs/_meta.json @@ -7,7 +7,6 @@ "ui-components": "UI Components", "custom-schemas": "Custom Schemas", "advanced": "Advanced", - "glossary":"", "discord-link": { "title": "Community ↗", "href": "https://discord.gg/Qc2QTTH5dF", diff --git a/docs/pages/docs/editor-api/manipulating-inline-content.mdx b/docs/pages/docs/editor-api/manipulating-inline-content.mdx index 0f90561e11..6f5129ce07 100644 --- a/docs/pages/docs/editor-api/manipulating-inline-content.mdx +++ b/docs/pages/docs/editor-api/manipulating-inline-content.mdx @@ -1,6 +1,5 @@ --- title: Manipulating Inline Content -description: TODO imageTitle: Manipulating Inline Content path: /docs/block-content --- diff --git a/docs/pages/features.mdx.bak b/docs/pages/features.mdx.bak new file mode 100644 index 0000000000..77f95c3e93 --- /dev/null +++ b/docs/pages/features.mdx.bak @@ -0,0 +1,10 @@ +--- +overrideTitle: "BlockNote - Javascript Block-Based React rich text editor" +description: "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." +--- + +import Feature from "@/components/Feature"; + +<Feature /> +<Feature /> +<Feature /> diff --git a/examples/04-interoperability/02-converting-blocks-from-html/App.tsx b/examples/04-interoperability/02-converting-blocks-from-html/App.tsx index 9bcdd9f5c6..35d3f8150f 100644 --- a/examples/04-interoperability/02-converting-blocks-from-html/App.tsx +++ b/examples/04-interoperability/02-converting-blocks-from-html/App.tsx @@ -6,7 +6,6 @@ import "./styles.css"; const initialHTML = "<p>Hello, <strong>world!</strong></p>"; -// TODO: better design? export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); diff --git a/examples/04-interoperability/04-converting-blocks-from-md/App.tsx b/examples/04-interoperability/04-converting-blocks-from-md/App.tsx index 49629851e2..3c4b3cb6b8 100644 --- a/examples/04-interoperability/04-converting-blocks-from-md/App.tsx +++ b/examples/04-interoperability/04-converting-blocks-from-md/App.tsx @@ -2,7 +2,6 @@ import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; import { ChangeEvent, useCallback, useEffect } from "react"; -// TODO: better design? const initialMarkdown = "Hello, **world!**"; export default function App() { diff --git a/examples/05-custom-schema/react-custom-styles/App.tsx b/examples/05-custom-schema/react-custom-styles/App.tsx index 096d2a76f4..25e435f91e 100644 --- a/examples/05-custom-schema/react-custom-styles/App.tsx +++ b/examples/05-custom-schema/react-custom-styles/App.tsx @@ -106,7 +106,7 @@ export default function App() { ); return ( - <BlockNoteView className="root" editor={editor}> + <BlockNoteView className="root" editor={editor} formattingToolbar={false}> <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} /> diff --git a/examples/06-collaboration/01-partykit/.bnexample.json b/examples/06-collaboration/01-partykit/.bnexample.json index 9c252f12aa..d0a7ffb081 100644 --- a/examples/06-collaboration/01-partykit/.bnexample.json +++ b/examples/06-collaboration/01-partykit/.bnexample.json @@ -4,7 +4,7 @@ "author": "matthewlipski", "tags": ["Advanced", "Saving/Loading", "Collaboration"], "dependencies": { - "y-partykit": "^0.0.10", + "y-partykit": "^0.0.25", "yjs": "^13.6.1" } } diff --git a/examples/06-collaboration/01-partykit/package.json b/examples/06-collaboration/01-partykit/package.json index aacb4edc95..bbfef6771b 100644 --- a/examples/06-collaboration/01-partykit/package.json +++ b/examples/06-collaboration/01-partykit/package.json @@ -15,7 +15,7 @@ "@blocknote/react": "^0.11.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "y-partykit": "^0.0.10", + "y-partykit": "^0.0.25", "yjs": "^13.6.1" }, "devDependencies": { diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx b/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx index 1117fe1168..886f562571 100644 --- a/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx +++ b/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx @@ -56,7 +56,6 @@ const alertBlock = createBlockSpec( const dropdown = document.createElement("select"); dropdown.contentEditable = "false"; dropdown.addEventListener("change", () => { - // TODO: Something is not quite right with the typing seems like editor.updateBlock(block, { type: "alert", props: { type: dropdown.value as keyof typeof alertTypes }, diff --git a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx index e784e575bb..84eb79e917 100644 --- a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx +++ b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx @@ -119,7 +119,7 @@ export default function App() { ); return ( - <BlockNoteView className="root" editor={editor}> + <BlockNoteView className="root" editor={editor} formattingToolbar={false}> <FormattingToolbarController formattingToolbar={CustomFormattingToolbar} /> diff --git a/package-lock.json b/package-lock.json index 8567786823..5049269b06 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21225,16 +21225,6 @@ "node": ">=0.4" } }, - "node_modules/y-partykit": { - "version": "0.0.0-fffe721", - "license": "ISC", - "dependencies": { - "lib0": "^0.2.60", - "lodash.debounce": "^4.0.8", - "y-protocols": "^1.0.5", - "yjs": "^13.5.44" - } - }, "node_modules/y-prosemirror": { "version": "1.0.20", "license": "MIT", @@ -21552,7 +21542,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.20.0", - "y-partykit": "^0.0.0-4c022c1", + "y-partykit": "^0.0.25", "yjs": "^13.6.10" }, "devDependencies": { @@ -21566,6 +21556,25 @@ "vite-plugin-eslint": "^1.8.1" } }, + "playground/node_modules/lib0": { + "version": "0.2.90", + "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.90.tgz", + "integrity": "sha512-iQmk+fThPq1ZTD2cFUu8xN6JLp9gFWnjs8auR6hmI6QQXoy6sSEh85uKcdkqpuEnkhhwQm4GSlKHOYfSCVp0Mw==", + "dependencies": { + "isomorphic.js": "^0.2.4" + }, + "bin": { + "0gentesthtml": "bin/gentesthtml.js", + "0serve": "bin/0serve.js" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "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/sponsors/dmonad" + } + }, "playground/node_modules/rimraf": { "version": "5.0.5", "dev": true, @@ -21583,6 +21592,34 @@ "url": "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/sponsors/isaacs" } }, + "playground/node_modules/y-partykit": { + "version": "0.0.25", + "resolved": "https://registry.npmjs.org/y-partykit/-/y-partykit-0.0.25.tgz", + "integrity": "sha512-/EIL73TuYX6lYnxM4mb/kTTKllS1vNjBXk9KJXFwTXFrUqMo8hbJMqnE+glvBG2EDejEI06rk3jR50lpDB8Dqg==", + "dependencies": { + "lib0": "^0.2.89", + "lodash.debounce": "^4.0.8", + "react": "^18.2.0", + "y-protocols": "^1.0.6", + "yjs": "^13.6.12" + } + }, + "playground/node_modules/yjs": { + "version": "13.6.14", + "resolved": "https://registry.npmjs.org/yjs/-/yjs-13.6.14.tgz", + "integrity": "sha512-D+7KcUr0j+vBCUSKXXEWfA+bG4UQBviAwP3gYBhkstkgwy5+8diOPMx0iqLIOxNo/HxaREUimZRxqHGAHCL2BQ==", + "dependencies": { + "lib0": "^0.2.86" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=8.0.0" + }, + "funding": { + "type": "GitHub Sponsors ❤", + "url": "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/sponsors/dmonad" + } + }, "tests": { "name": "@blocknote/tests", "version": "0.11.2", diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts index 789c5b44f9..8aee5c7f75 100644 --- a/packages/core/src/editor/BlockNoteTipTapEditor.ts +++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts @@ -124,22 +124,25 @@ export class BlockNoteTipTapEditor extends TiptapEditor { * Replace the default `createView` method with a custom one - which we call on mount */ private createViewAlternative() { - this.view = new EditorView(this.options.element, { - ...this.options.editorProps, - // @ts-ignore - dispatchTransaction: this.dispatchTransaction.bind(this), - state: this.state, - }); - - // `editor.view` is not yet available at this time. - // Therefore we will add all plugins and node views directly afterwards. - const newState = this.state.reconfigure({ - plugins: this.extensionManager.plugins, + // Without queueMicrotask, custom IC / styles will give a React FlushSync error + queueMicrotask(() => { + this.view = new EditorView(this.options.element, { + ...this.options.editorProps, + // @ts-ignore + dispatchTransaction: this.dispatchTransaction.bind(this), + state: this.state, + }); + + // `editor.view` is not yet available at this time. + // Therefore we will add all plugins and node views directly afterwards. + const newState = this.state.reconfigure({ + plugins: this.extensionManager.plugins, + }); + + this.view.updateState(newState); + + this.createNodeViews(); }); - - this.view.updateState(newState); - - this.createNodeViews(); } /** diff --git a/packages/dev-scripts/examples/genDocs.ts b/packages/dev-scripts/examples/genDocs.ts index 205d019fbf..6fe505bcb5 100644 --- a/packages/dev-scripts/examples/genDocs.ts +++ b/packages/dev-scripts/examples/genDocs.ts @@ -170,6 +170,7 @@ async function generateExampleList(projects: Project[]) { return { text: project.title, link: `/examples/${project.fullSlug}`, + author: project.config.author, }; }), }; diff --git a/packages/react/src/editor/EditorContent.tsx b/packages/react/src/editor/EditorContent.tsx index 1610a0af94..7dedc6b178 100644 --- a/packages/react/src/editor/EditorContent.tsx +++ b/packages/react/src/editor/EditorContent.tsx @@ -43,7 +43,10 @@ export function EditorContent(props: { }); }, }; - props.editor._tiptapEditor.createNodeViews(); + // Without queueMicrotask, custom IC / styles will give a React FlushSync error + queueMicrotask(() => { + props.editor._tiptapEditor.createNodeViews(); + }); return () => { props.editor._tiptapEditor.contentComponent = null; };