From f60ac1d0c383eddc7e49afc1cf35076f051a6937 Mon Sep 17 00:00:00 2001 From: yousefed Date: Mon, 4 Mar 2024 13:14:52 +0100 Subject: [PATCH 1/5] small edits --- docs/components/AuthNavButton.tsx | 23 +++--- docs/components/example/ExampleList.tsx | 5 +- .../components/pages/home-shared/Headings.tsx | 4 +- docs/components/pages/landing/FAQ.tsx | 4 +- .../pages/landing/community/Community.tsx | 12 ++-- .../pages/landing/features/Features.tsx | 72 ++++++++++--------- docs/components/pages/landing/hero/Demo.tsx | 30 ++++---- docs/components/pages/landing/index.tsx | 4 +- .../pages/landing/sponsors/SponsorCard.tsx | 2 +- .../pages/landing/sponsors/Sponsors.tsx | 23 +++--- docs/pages/docs/_meta.json | 1 - .../manipulating-inline-content.mdx | 1 - .../02-converting-blocks-from-html/App.tsx | 1 - .../04-converting-blocks-from-md/App.tsx | 1 - .../react-vanilla-custom-blocks/App.tsx | 1 - packages/dev-scripts/examples/genDocs.ts | 1 + playground/src/examples.gen.tsx | 2 +- 17 files changed, 90 insertions(+), 97 deletions(-) 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/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] }) { {props.examples.items.map((project, i) => { - const user = i % 2 === 0 ? "yousefed" : "matthewlipski"; // TODO return ( ); })} 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 (

+ className={`font-space-grotesk text-lg leading-snug text-[#00000080] dark:text-[#FFFFFFB2] sm:text-xl`}> {children}

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

- Have a different question and can’t find the answer you’re looking - for?
- Reach out to our team. + More questions? Reach out to our team.

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 = () => (
- Community contributors + Open Source Community 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 = () => ( ( Why BlockNote? - 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: {featuresCardData.map((feature) => ( ))} +

...and more: (TODO)

+
    +
  • Helpful Placeholders
    • +
  • Smooth Animations
    • +
  • Image Uploads
    • +
  • Resizable Tables
    • +
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 ; + 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 ; } 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 && ( -
+
{props.tagline}
)} 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/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 = "

Hello, world!

"; -// 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/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/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/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index 9428017daa..1767d4c747 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -684,7 +684,7 @@ "Collaboration" ], "dependencies": { - "y-partykit": "^0.0.25", + "y-partykit": "^0.0.10", "yjs": "^13.6.1" } }, From 975b5f12e6240154d97ed42df97e3d9dcf39e065 Mon Sep 17 00:00:00 2001 From: yousefed Date: Mon, 4 Mar 2024 13:23:11 +0100 Subject: [PATCH 2/5] small cleanup --- docs/components/Social.tsx | 32 ------- .../pages/home-shared/gradients.module.css | 94 ------------------- .../01-partykit/.bnexample.json | 2 +- .../06-collaboration/01-partykit/package.json | 2 +- package-lock.json | 59 +++++++++--- playground/src/examples.gen.tsx | 2 +- 6 files changed, 51 insertions(+), 140 deletions(-) delete mode 100644 docs/components/Social.tsx 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/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/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/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/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index 1767d4c747..9428017daa 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -684,7 +684,7 @@ "Collaboration" ], "dependencies": { - "y-partykit": "^0.0.10", + "y-partykit": "^0.0.25", "yjs": "^13.6.1" } }, From b8aecfbed1c082206f9b34e27c066858810892b6 Mon Sep 17 00:00:00 2001 From: yousefed <yousefdardiry@gmail.com> Date: Mon, 4 Mar 2024 13:38:53 +0100 Subject: [PATCH 3/5] fix bugs --- .../react-custom-styles/App.tsx | 2 +- .../react-vanilla-custom-styles/App.tsx | 2 +- .../core/src/editor/BlockNoteTipTapEditor.ts | 32 ++++++++++--------- packages/react/src/editor/EditorContent.tsx | 4 ++- 4 files changed, 22 insertions(+), 18 deletions(-) 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/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/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts index 789c5b44f9..277cbe2d9b 100644 --- a/packages/core/src/editor/BlockNoteTipTapEditor.ts +++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts @@ -124,22 +124,24 @@ 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, + 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/react/src/editor/EditorContent.tsx b/packages/react/src/editor/EditorContent.tsx index 1610a0af94..3e6bdd41ff 100644 --- a/packages/react/src/editor/EditorContent.tsx +++ b/packages/react/src/editor/EditorContent.tsx @@ -43,7 +43,9 @@ export function EditorContent(props: { }); }, }; - props.editor._tiptapEditor.createNodeViews(); + queueMicrotask(() => { + props.editor._tiptapEditor.createNodeViews(); + }); return () => { props.editor._tiptapEditor.contentComponent = null; }; From 7f6435ee6caa3224fb05f3fb0f3ce258d6b94521 Mon Sep 17 00:00:00 2001 From: yousefed <yousefdardiry@gmail.com> Date: Mon, 4 Mar 2024 13:57:09 +0100 Subject: [PATCH 4/5] features (wip) --- docs/components/Feature.tsx | 62 +++++++++++++++++++++++++++++++++++++ docs/pages/features.mdx.bak | 10 ++++++ 2 files changed, 72 insertions(+) create mode 100644 docs/components/Feature.tsx create mode 100644 docs/pages/features.mdx.bak 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 ( + <div className="overflow-hidden bg-white py-24 sm:py-32"> + <div className="mx-auto max-w-7xl px-6 lg:px-8"> + <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2 lg:items-start"> + <div className="lg:pr-4 lg:pt-4"> + <div className="lg:max-w-lg"> + <h2 className="text-base font-semibold leading-7 text-indigo-600"> + Deploy faster + </h2> + <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> + A better workflow + </p> + <p className="mt-6 text-lg leading-8 text-gray-600"> + Lorem ipsum, dolor sit amet consectetur adipisicing elit. + Maiores impedit perferendis suscipit eaque, iste dolor + cupiditate blanditiis ratione. + </p> + <div className="mt-8"> + <a + href="#" + className="inline-flex rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"> + Get started + </a> + </div> + <figure className="mt-16 border-l border-gray-200 pl-8 text-gray-600"> + <blockquote className="text-base leading-7"> + <p> + “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.” + </p> + </blockquote> + <figcaption className="mt-6 flex gap-x-4 text-sm leading-6"> + <img + src="https://images.unsplash.com/photo-1509783236416-c9ad59bae472?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=1024&h=1024&q=80" + alt="" + className="h-6 w-6 flex-none rounded-full" + /> + <div> + <span className="font-semibold text-gray-900"> + Maria Hill + </span>{" "} + – Marketing Manager + </div> + </figcaption> + </figure> + </div> + </div> + <img + src="https://tailwindui.com/img/component-images/dark-project-app-screenshot.png" + alt="Product screenshot" + className="w-[48rem] max-w-none rounded-xl shadow-xl ring-1 ring-gray-400/10 sm:w-[57rem] md:-ml-4 lg:ml-0" + width={2432} + height={1442} + /> + </div> + </div> + </div> + ); +} 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 /> From 6bd954ee5576764d55292ed81b31c5b585986f41 Mon Sep 17 00:00:00 2001 From: yousefed <yousefdardiry@gmail.com> Date: Mon, 4 Mar 2024 14:32:58 +0100 Subject: [PATCH 5/5] comments --- packages/core/src/editor/BlockNoteTipTapEditor.ts | 1 + packages/react/src/editor/EditorContent.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts index 277cbe2d9b..8aee5c7f75 100644 --- a/packages/core/src/editor/BlockNoteTipTapEditor.ts +++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts @@ -124,6 +124,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { * Replace the default `createView` method with a custom one - which we call on mount */ private createViewAlternative() { + // Without queueMicrotask, custom IC / styles will give a React FlushSync error queueMicrotask(() => { this.view = new EditorView(this.options.element, { ...this.options.editorProps, diff --git a/packages/react/src/editor/EditorContent.tsx b/packages/react/src/editor/EditorContent.tsx index 3e6bdd41ff..7dedc6b178 100644 --- a/packages/react/src/editor/EditorContent.tsx +++ b/packages/react/src/editor/EditorContent.tsx @@ -43,6 +43,7 @@ export function EditorContent(props: { }); }, }; + // Without queueMicrotask, custom IC / styles will give a React FlushSync error queueMicrotask(() => { props.editor._tiptapEditor.createNodeViews(); });