diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index fec535d794..de17b90b43 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,10 +1,9 @@ --- name: Bug report about: Create a report to help us improve -title: '' +title: "" labels: bug -assignees: '' - +assignees: "" --- **Describe the bug** @@ -14,7 +13,8 @@ assignees: '' **Misc** + - Node version: - Package manager: -- Browser: +- Browser: - [ ] I'm a [sponsor](https://github.com/sponsors/YousefED) and would appreciate if you could look into this sooner than later 💖 diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index a76f4cd708..ff20292958 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,10 +1,9 @@ --- name: Feature request about: Suggest an idea for this project -title: '' +title: "" labels: enhancement -assignees: '' - +assignees: "" --- **Is your feature request related to a problem? Please describe.** diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..0f4e5b7d67 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,12 @@ +{ + "$schema": "http://json.schemastore.org/prettierrc", + "semi": true, + "singleQuote": false, + "tabWidth": 2, + "printWidth": 80, + "trailingComma": "all", + "bracketSpacing": true, + "arrowParens": "always", + "endOfLine": "lf", + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/CHANGELOG.md b/CHANGELOG.md index ba35038e7e..f472486a9f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -118,4 +118,4 @@ ## Previous Versions -See [Github Releases](https://github.com/TypeCellOS/BlockNote/releases) for previous versions. \ No newline at end of file +See [Github Releases](https://github.com/TypeCellOS/BlockNote/releases) for previous versions. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 37d7f716e6..c54b5bd282 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -39,7 +39,7 @@ pnpm start ## Packages | Package | Size | Version | -|--------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------| +| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | [@blocknote/core](https://github.com/TypeCellOS/BlockNote/tree/main/packages/core) | | | | [@blocknote/react](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react) | | | | [@blocknote/ariakit](https://github.com/TypeCellOS/BlockNote/tree/main/packages/ariakit) | | | diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json index 9154c4a671..01aef10904 100644 --- a/docs/.eslintrc.json +++ b/docs/.eslintrc.json @@ -1,7 +1,7 @@ { "extends": "next/core-web-vitals", "parser": "@typescript-eslint/parser", - "plugins": [ "@typescript-eslint"], + "plugins": ["@typescript-eslint"], "rules": { "import/extensions": 0, "@next/next/no-img-element": "off" diff --git a/docs/app/api/auth/[...all]/route.ts b/docs/app/api/auth/[...all]/route.ts index a1953d1270..ff0686abed 100644 --- a/docs/app/api/auth/[...all]/route.ts +++ b/docs/app/api/auth/[...all]/route.ts @@ -1,4 +1,4 @@ import { auth } from "../../../../auth"; import { toNextJsHandler } from "better-auth/next-js"; - -export const { POST, GET } = toNextJsHandler(auth); \ No newline at end of file + +export const { POST, GET } = toNextJsHandler(auth); diff --git a/docs/app/api/og/route.tsx b/docs/app/api/og/route.tsx index 9bb7a2feb5..3d9811ce1a 100644 --- a/docs/app/api/og/route.tsx +++ b/docs/app/api/og/route.tsx @@ -20,7 +20,8 @@ export async function GET(request: Request) { height="172" viewBox="0 0 469 88" fill="none" - xmlns="http://www.w3.org/2000/svg"> + xmlns="http://www.w3.org/2000/svg" + > + gradientUnits="userSpaceOnUse" + > @@ -54,7 +56,8 @@ export async function GET(request: Request) { height: "100%", justifyContent: "center", alignItems: "center", - }}> + }} + > {bannerSVG}
+ }} + > {title}
@@ -81,7 +85,8 @@ export async function GET(request: Request) { height: "100%", justifyContent: "center", alignItems: "center", - }}> + }} + > {bannerSVG} ); diff --git a/docs/app/portal/page.tsx b/docs/app/portal/page.tsx index 5c97ff74e9..c93f41baff 100644 --- a/docs/app/portal/page.tsx +++ b/docs/app/portal/page.tsx @@ -16,4 +16,4 @@ export default function Me() { 
{JSON.stringify(session, null, 2)}
); -}; \ No newline at end of file +} diff --git a/docs/components/AuthNavButton.tsx b/docs/components/AuthNavButton.tsx index b96f4803d8..663f0a22b7 100644 --- a/docs/components/AuthNavButton.tsx +++ b/docs/components/AuthNavButton.tsx @@ -17,7 +17,8 @@ export function AuthNavButton(props: any) { className={clsx( "nx-relative nx-hidden nx-w-full nx-select-none nx-whitespace-nowrap nx-text-gray-600 dark:nx-text-gray-400 md:nx-inline-block", "nx-py-1.5 nx-px-3 font-bold", - )}> + )} + > 💖 Thanks for subscribing! 💖 @@ -30,7 +31,8 @@ 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-px-3 nx-transition-colors text-center", - )}> + )} + > {session.data.planType === "free" ? "Get BlockNote Pro" : "Manage my subscription"} @@ -44,11 +46,13 @@ 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-px-3 nx-transition-colors", - )}> + )} + > Sign out , - ]}> + ]} + > ) : ( @@ -79,13 +83,15 @@ function NavbarMenu({ + } + > {children} + leaveTo="nx-opacity-0" + > {menuItems} diff --git a/docs/components/AuthenticationPage.tsx b/docs/components/AuthenticationPage.tsx index fb21aec47a..e7bfaec323 100644 --- a/docs/components/AuthenticationPage.tsx +++ b/docs/components/AuthenticationPage.tsx @@ -24,7 +24,8 @@ function AuthenticationInput(props: {
@@ -159,7 +160,8 @@ function AuthenticationBox(props: { fill="currentColor" viewBox="0 -960 960 960" aria-hidden="true" - className="size-16"> + className="size-16" + >

{signingInState.message}

@@ -192,13 +194,15 @@ function AuthenticationBox(props: { @@ -251,7 +256,8 @@ function EmailSignInButton() { fill="currentColor" viewBox="0 -960 960 960" aria-hidden="true" - className="size-5"> + className="size-5" + > } @@ -278,7 +284,8 @@ function PasswordSignInButton() { viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" - className="size-5"> + className="size-5" + >
@@ -158,9 +162,10 @@ export function Footer({ menu }: { menu?: boolean }): ReactElement {
*/}
+ )} + >
diff --git a/docs/components/UserImage.tsx b/docs/components/UserImage.tsx index 8b6090ac96..f6aafcc2ab 100644 --- a/docs/components/UserImage.tsx +++ b/docs/components/UserImage.tsx @@ -31,7 +31,8 @@ export const UserImage = ({ user }: UserImageProps) => { fill="currentColor" viewBox="0 -960 960 960" aria-hidden="true" - className="size-4 text-white"> + className="size-4 text-white" + > )} diff --git a/docs/components/cards.tsx b/docs/components/cards.tsx index c8adf479fd..8d0dd3ff67 100644 --- a/docs/components/cards.tsx +++ b/docs/components/cards.tsx @@ -56,13 +56,15 @@ export function Card({ classes.card, "nx-bg-gray-100 nx-shadow dark:nx-border-neutral-700 dark:nx-bg-neutral-800 dark:nx-text-gray-50 hover:nx-shadow-lg dark:hover:nx-border-neutral-500 dark:hover:nx-bg-neutral-700", )} - {...props}> + {...props} + > {children} + )} + > {icon} {title} @@ -79,14 +81,16 @@ export function Card({ className={cn( classes.card, "nx-bg-transparent nx-shadow-sm dark:nx-border-neutral-800 hover:nx-bg-slate-50 hover:nx-shadow-md dark:hover:nx-border-neutral-700 dark:hover:nx-bg-neutral-900", - "nx-flex nx-items-start nx-gap-2 nx-p-4 nx-text-gray-700", + "nx-flex nx-items-start nx-gap-2 nx-p-4 nx-text-gray-700", )} - {...props}> + {...props} + > + )} + > {title} {icon} {animatedArrow} @@ -127,7 +131,8 @@ function _Cards({ ...style, "--rows": num, } as CSSProperties - }> + } + > {children}
); diff --git a/docs/components/example/ExampleBlock.tsx b/docs/components/example/ExampleBlock.tsx index 27d284f2b9..932ec57a48 100644 --- a/docs/components/example/ExampleBlock.tsx +++ b/docs/components/example/ExampleBlock.tsx @@ -47,7 +47,8 @@ export function ExampleBlock(props: { "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" } href={`${baseGitHubURL}${props.path}/`} - target="_blank"> + target="_blank" + >
GitHub
@@ -56,7 +57,8 @@ export function ExampleBlock(props: { "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" } href={`${baseStackBlitzURL}${props.path}/`} - target="_blank"> + target="_blank" + >
StackBlitz
@@ -71,7 +73,8 @@ export function ExampleBlock(props: {
+ } + >
@@ -86,7 +89,8 @@ export function ExampleBlock(props: { href={"/pricing"} color={"pro"} size={"large"} - hoverGlow={true}> + hoverGlow={true} + > Get BlockNote Pro
@@ -96,7 +100,8 @@ export function ExampleBlock(props: { Or{" "} + className="nx-text-primary-600" + > sign in diff --git a/docs/components/example/ThemedExample.tsx b/docs/components/example/ThemedExample.tsx index 197f70532d..b322b27a3c 100644 --- a/docs/components/example/ThemedExample.tsx +++ b/docs/components/example/ThemedExample.tsx @@ -10,7 +10,10 @@ export default function ThemedExample(props: { name: keyof typeof examples }) { return ( + value={{ + colorSchemePreference: resolvedTheme === "dark" ? "dark" : "light", + }} + > ); diff --git a/docs/components/pages/landing/community/Contributors.tsx b/docs/components/pages/landing/community/Contributors.tsx index 71c7faf92e..b88c6e70e9 100644 --- a/docs/components/pages/landing/community/Contributors.tsx +++ b/docs/components/pages/landing/community/Contributors.tsx @@ -95,7 +95,8 @@ export const Contributors = () => ( key={contributor.username} href={`https://github.com/${contributor.username}`} rel="nofollow noreferrer noopener" - target="_blank"> + target="_blank" + > {`${contributor.username} + "flex w-full flex-col items-start justify-between gap-4 rounded-lg bg-gray-50 p-4 sm:flex-row sm:items-center sm:gap-8 md:max-w-screen-md dark:bg-gray-800" + } + >
@@ -22,7 +23,8 @@ export const JoinButton = (props: {

+ } + > {props.text}

{props.subtext}

@@ -31,7 +33,8 @@ export const JoinButton = (props: { href={props.linkUrl} className={ "flex items-center gap-2 whitespace-nowrap text-base font-medium text-cyan-700 hover:underline" - }> + } + > {props.linkTitle + " "} + strokeWidth={"2"} + > + className="relative flex aspect-video max-w-[235px] items-center justify-center rounded-lg bg-gray-100 md:w-[235px] dark:bg-gray-900" + > {props.tagline && ( -
+
{props.tagline}
)} diff --git a/docs/components/pages/landing/features/FeatureCard.tsx b/docs/components/pages/landing/features/FeatureCard.tsx index e191ae554e..c731c4730b 100644 --- a/docs/components/pages/landing/features/FeatureCard.tsx +++ b/docs/components/pages/landing/features/FeatureCard.tsx @@ -16,7 +16,8 @@ export function FeatureCard(props: FeatureCardProps) { return (
+ className={`card relative flex w-[360px] max-w-full flex-col justify-between gap-1 overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black ${props.thumbnail ? "row-span-2" : "row-span-1"}`} + > {props.thumbnail && (
+ } + > + slashMenu={false} + > + } + > + } + > Let's build diff --git a/docs/components/pages/landing/shared/CTAButton.tsx b/docs/components/pages/landing/shared/CTAButton.tsx index 501e7cc111..54b31e195b 100644 --- a/docs/components/pages/landing/shared/CTAButton.tsx +++ b/docs/components/pages/landing/shared/CTAButton.tsx @@ -12,7 +12,8 @@ export default function CTAButton(props: {
+ href={props.href} + > {props.children} {props.hoverGlow && ( diff --git a/docs/components/pages/landing/shared/Headings.tsx b/docs/components/pages/landing/shared/Headings.tsx index f03d744196..790317bd15 100644 --- a/docs/components/pages/landing/shared/Headings.tsx +++ b/docs/components/pages/landing/shared/Headings.tsx @@ -30,7 +30,8 @@ export function SectionHeader({ children }: { children: React.ReactNode }) { className={cn( gradients.heroHeading, "text-center text-[32px] font-bold tracking-[-0.01em] text-transparent md:text-[40px]", - )}> + )} + > {children} ); @@ -42,7 +43,8 @@ export function SectionSubHeader({ children }: { children: React.ReactNode }) { className={cn( gradients.heroHeading, "text-center text-[22px] font-bold tracking-[-0.01em] text-transparent md:text-[28px]", - )}> + )} + > {children} ); @@ -58,9 +60,10 @@ export function SectionSubtext({ return (

+ )} + > {children}

); diff --git a/docs/components/pages/landing/shared/Section.tsx b/docs/components/pages/landing/shared/Section.tsx index 2c16d8d517..68c1079042 100644 --- a/docs/components/pages/landing/shared/Section.tsx +++ b/docs/components/pages/landing/shared/Section.tsx @@ -8,7 +8,8 @@ export function Section(props: { }) { return (
+ className={`relative flex h-fit w-full justify-center overflow-hidden ${props.className}`} + > {props.gradientBackground && (
diff --git a/docs/components/pages/landing/styles.css b/docs/components/pages/landing/styles.css index e7b2f3ffaa..c9754220a2 100644 --- a/docs/components/pages/landing/styles.css +++ b/docs/components/pages/landing/styles.css @@ -1,25 +1,25 @@ .dark footer, .dark body { - background-color: black !important; + background-color: black !important; } -.dark .nextra-nav-container .nextra-nav-container-blur { - background-color: rgba(0,0,0,.5) !important; +.dark .nextra-nav-container .nextra-nav-container-blur { + background-color: rgba(0, 0, 0, 0.5) !important; } .nextra-nav-container { - z-index: 40; + z-index: 40; } .nextra-sidebar-container { - z-index: 30; + z-index: 30; } .thumbnail:before { - content: ''; - width: 100%; - aspect-ratio: 16/9; - display: block; - position: absolute; - background: linear-gradient(transparent 50%, var(--bg-color)); -} \ No newline at end of file + content: ""; + width: 100%; + aspect-ratio: 16/9; + display: block; + position: absolute; + background: linear-gradient(transparent 50%, var(--bg-color)); +} diff --git a/docs/components/pages/pricing/faq.tsx b/docs/components/pages/pricing/faq.tsx index 0989453782..84373415df 100644 --- a/docs/components/pages/pricing/faq.tsx +++ b/docs/components/pages/pricing/faq.tsx @@ -25,7 +25,7 @@ const faqs = [ export function FAQ() { return (
-
+

Frequently asked questions

diff --git a/docs/components/pages/pricing/tiers.tsx b/docs/components/pages/pricing/tiers.tsx index 1f80373966..1edcebfd13 100644 --- a/docs/components/pages/pricing/tiers.tsx +++ b/docs/components/pages/pricing/tiers.tsx @@ -22,7 +22,8 @@ function TierTitle({ tier }: { tier: Tier }) { className={classNames( tier.mostPopular && "text-indigo-600", "text-3xl font-semibold leading-8", - )}> + )} + > {tier.title} ); @@ -80,7 +81,8 @@ function TierCTAButton({ tier }: { tier: Tier }) { )} onClick={() => { track("Signup", { tier: tier.id }); - }}> + }} + > {tier.id === "enterprise" ? "Get in touch" : text} ); @@ -125,7 +127,8 @@ export function Tiers({ ? "ring-indigo-600" : "ring-gray-200 dark:ring-gray-800", "rounded-md p-8 ring-2 xl:p-10", - )}> + )} + > diff --git a/docs/instrumentation.ts b/docs/instrumentation.ts index 964f937c43..7cbe93c132 100644 --- a/docs/instrumentation.ts +++ b/docs/instrumentation.ts @@ -1,12 +1,12 @@ -import * as Sentry from '@sentry/nextjs'; +import * as Sentry from "@sentry/nextjs"; export async function register() { - if (process.env.NEXT_RUNTIME === 'nodejs') { - await import('./sentry.server.config'); + if (process.env.NEXT_RUNTIME === "nodejs") { + await import("./sentry.server.config"); } - if (process.env.NEXT_RUNTIME === 'edge') { - await import('./sentry.edge.config'); + if (process.env.NEXT_RUNTIME === "edge") { + await import("./sentry.edge.config"); } } diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx index 24644c1eb0..20b5b9e0b5 100644 --- a/docs/pages/_app.tsx +++ b/docs/pages/_app.tsx @@ -15,8 +15,8 @@ export default function Nextra({ Component, pageProps }: NextraAppProps) { return ( <> - - + + ); } diff --git a/docs/theme.config.tsx b/docs/theme.config.tsx index 7799888831..160fc9d85b 100644 --- a/docs/theme.config.tsx +++ b/docs/theme.config.tsx @@ -56,7 +56,8 @@ const NavBarExtraContent = () => { <> + className="generic-hover" + > GitHub @@ -66,10 +67,12 @@ const NavBarExtraContent = () => { {session.data ? null : ( + href={`/signin?redirect=${encodeURIComponent(router.route || "")}&theme=${encodeURIComponent(theme.resolvedTheme || "")}`} + > + size={"small"} + > Sign in diff --git a/docs/tsconfig.json b/docs/tsconfig.json index e48ab02958..ab50df2102 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -1,10 +1,6 @@ { "compilerOptions": { - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -22,9 +18,7 @@ } ], "paths": { - "@/*": [ - "./*" - ] + "@/*": ["./*"] }, "target": "ES2017" }, @@ -35,7 +29,5 @@ "**/*.mdx", ".next/types/**/*.ts" ], - "exclude": [ - "node_modules" - ] + "exclude": ["node_modules"] } diff --git a/docs/types/mdx.d.ts b/docs/types/mdx.d.ts index 9273551475..670a5d641b 100644 --- a/docs/types/mdx.d.ts +++ b/docs/types/mdx.d.ts @@ -1,5 +1,5 @@ -declare module '*.mdx' { - import type { ComponentType } from 'react' - const component: ComponentType - export default component -} \ No newline at end of file +declare module "*.mdx" { + import type { ComponentType } from "react"; + const component: ComponentType; + export default component; +} diff --git a/examples/01-basic/02-block-objects/styles.css b/examples/01-basic/02-block-objects/styles.css index 89d965109f..6d5eeba7fe 100644 --- a/examples/01-basic/02-block-objects/styles.css +++ b/examples/01-basic/02-block-objects/styles.css @@ -1,25 +1,25 @@ .wrapper { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; } .item { - border-radius: 0.5rem; - flex: 1; - overflow: hidden; + border-radius: 0.5rem; + flex: 1; + overflow: hidden; } .item.bordered { - border: 1px solid gray; + border: 1px solid gray; } .item pre { - border-radius: 0.5rem; - height: 100%; - overflow: auto; - padding-block: 1rem; - padding-inline: 54px; - width: 100%; - white-space: pre-wrap; -} \ No newline at end of file + border-radius: 0.5rem; + height: 100%; + overflow: auto; + padding-block: 1rem; + padding-inline: 54px; + width: 100%; + white-space: pre-wrap; +} diff --git a/examples/01-basic/03-multi-column/App.tsx b/examples/01-basic/03-multi-column/App.tsx index b10d9808b5..c126a9d2bf 100644 --- a/examples/01-basic/03-multi-column/App.tsx +++ b/examples/01-basic/03-multi-column/App.tsx @@ -102,9 +102,9 @@ export default function App() { filterSuggestionItems( combineByGroup( getDefaultReactSlashMenuItems(editor), - getMultiColumnSlashMenuItems(editor) + getMultiColumnSlashMenuItems(editor), ), - query + query, ); }, [editor]); diff --git a/examples/01-basic/06-block-manipulation/App.tsx b/examples/01-basic/06-block-manipulation/App.tsx index 412f39c56e..b92008ef72 100644 --- a/examples/01-basic/06-block-manipulation/App.tsx +++ b/examples/01-basic/06-block-manipulation/App.tsx @@ -25,9 +25,10 @@ export default function App() { }, ], editor.document[0], - "before" + "before", ) - }> + } + > Insert First Block {/*Updates the first block*/} @@ -38,13 +39,15 @@ export default function App() { content: "This block was updated at " + new Date().toLocaleTimeString(), }) - }> + } + > Update First Block {/*Removes the first block*/} {/*Replaces the first block*/} @@ -59,9 +62,10 @@ export default function App() { "This block was replaced at " + new Date().toLocaleTimeString(), }, - ] + ], ) - }> + } + > Replace First Block
diff --git a/examples/01-basic/06-block-manipulation/styles.css b/examples/01-basic/06-block-manipulation/styles.css index eaade15302..cc97b34a4f 100644 --- a/examples/01-basic/06-block-manipulation/styles.css +++ b/examples/01-basic/06-block-manipulation/styles.css @@ -1,15 +1,15 @@ .edit-buttons { - display: flex; - justify-content: space-between; - margin-top: 8px; + display: flex; + justify-content: space-between; + margin-top: 8px; } .edit-button { - border: 1px solid gray; - border-radius: 4px; - padding-inline: 4px; + border: 1px solid gray; + border-radius: 4px; + padding-inline: 4px; } .edit-button:hover { - border: 1px solid lightgrey; -} \ No newline at end of file + border: 1px solid lightgrey; +} diff --git a/examples/01-basic/07-selection-blocks/styles.css b/examples/01-basic/07-selection-blocks/styles.css index 89d965109f..6d5eeba7fe 100644 --- a/examples/01-basic/07-selection-blocks/styles.css +++ b/examples/01-basic/07-selection-blocks/styles.css @@ -1,25 +1,25 @@ .wrapper { - display: flex; - flex-direction: column; - height: 100%; + display: flex; + flex-direction: column; + height: 100%; } .item { - border-radius: 0.5rem; - flex: 1; - overflow: hidden; + border-radius: 0.5rem; + flex: 1; + overflow: hidden; } .item.bordered { - border: 1px solid gray; + border: 1px solid gray; } .item pre { - border-radius: 0.5rem; - height: 100%; - overflow: auto; - padding-block: 1rem; - padding-inline: 54px; - width: 100%; - white-space: pre-wrap; -} \ No newline at end of file + border-radius: 0.5rem; + height: 100%; + overflow: auto; + padding-block: 1rem; + padding-inline: 54px; + width: 100%; + white-space: pre-wrap; +} diff --git a/examples/01-basic/13-custom-paste-handler/App.tsx b/examples/01-basic/13-custom-paste-handler/App.tsx index 7adafbc635..a817ac4808 100644 --- a/examples/01-basic/13-custom-paste-handler/App.tsx +++ b/examples/01-basic/13-custom-paste-handler/App.tsx @@ -24,7 +24,7 @@ export default function App() { if (event.clipboardData?.types.includes("text/plain")) { editor.pasteMarkdown( event.clipboardData.getData("text/plain") + - " - inserted by the custom paste handler" + " - inserted by the custom paste handler", ); return true; } @@ -42,12 +42,13 @@ export default function App() { onClick={async () => { try { await navigator.clipboard.writeText( - "**This is markdown in the plain text format**" + "**This is markdown in the plain text format**", ); } catch (error) { window.alert("Failed to copy plain text with markdown content"); } - }}> + }} + > Copy sample markdown to clipboard (text/plain)
diff --git a/examples/01-basic/13-custom-paste-handler/styles.css b/examples/01-basic/13-custom-paste-handler/styles.css index eaade15302..cc97b34a4f 100644 --- a/examples/01-basic/13-custom-paste-handler/styles.css +++ b/examples/01-basic/13-custom-paste-handler/styles.css @@ -1,15 +1,15 @@ .edit-buttons { - display: flex; - justify-content: space-between; - margin-top: 8px; + display: flex; + justify-content: space-between; + margin-top: 8px; } .edit-button { - border: 1px solid gray; - border-radius: 4px; - padding-inline: 4px; + border: 1px solid gray; + border-radius: 4px; + padding-inline: 4px; } .edit-button:hover { - border: 1px solid lightgrey; -} \ No newline at end of file + border: 1px solid lightgrey; +} diff --git a/examples/01-basic/testing/README.md b/examples/01-basic/testing/README.md index 9fae60ec9f..04d01f3847 100644 --- a/examples/01-basic/testing/README.md +++ b/examples/01-basic/testing/README.md @@ -1,3 +1,3 @@ # Test Editor -This example is meant for use in end-to-end tests. \ No newline at end of file +This example is meant for use in end-to-end tests. diff --git a/examples/02-backend/01-file-uploading/App.tsx b/examples/02-backend/01-file-uploading/App.tsx index 3c32f914c5..c5805f0c40 100644 --- a/examples/02-backend/01-file-uploading/App.tsx +++ b/examples/02-backend/01-file-uploading/App.tsx @@ -14,7 +14,7 @@ async function uploadFile(file: File) { }); return (await ret.json()).data.url.replace( "tmpfiles.org/", - "tmpfiles.org/dl/" + "tmpfiles.org/dl/", ); } diff --git a/examples/02-backend/04-rendering-static-documents/App.tsx b/examples/02-backend/04-rendering-static-documents/App.tsx index d00bc691fb..824a23786a 100644 --- a/examples/02-backend/04-rendering-static-documents/App.tsx +++ b/examples/02-backend/04-rendering-static-documents/App.tsx @@ -52,7 +52,7 @@ export default function App() { return (
diff --git a/examples/03-ui-components/01-ui-elements-remove/README.md b/examples/03-ui-components/01-ui-elements-remove/README.md index 55078381b0..8cc643ccf2 100644 --- a/examples/03-ui-components/01-ui-elements-remove/README.md +++ b/examples/03-ui-components/01-ui-elements-remove/README.md @@ -4,4 +4,4 @@ In this example, we remove all menus & toolbars, leaving only the editor. **Relevant Docs:** -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/.bnexample.json b/examples/03-ui-components/02-formatting-toolbar-buttons/.bnexample.json index 5663d51f0b..e38b6fb26a 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/.bnexample.json +++ b/examples/03-ui-components/02-formatting-toolbar-buttons/.bnexample.json @@ -2,5 +2,10 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": ["Intermediate", "Inline Content", "UI Components", "Formatting Toolbar"] + "tags": [ + "Intermediate", + "Inline Content", + "UI Components", + "Formatting Toolbar" + ] } diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx index 48400a273e..0451aa6a54 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx +++ b/examples/03-ui-components/02-formatting-toolbar-buttons/BlueButton.tsx @@ -15,14 +15,14 @@ export function BlueButton() { // Tracks whether the text & background are both blue. const [isSelected, setIsSelected] = useState( editor.getActiveStyles().textColor === "blue" && - editor.getActiveStyles().backgroundColor === "blue" + editor.getActiveStyles().backgroundColor === "blue", ); // Updates state on content or selection change. useEditorContentOrSelectionChange(() => { setIsSelected( editor.getActiveStyles().textColor === "blue" && - editor.getActiveStyles().backgroundColor === "blue" + editor.getActiveStyles().backgroundColor === "blue", ); }, editor); @@ -35,7 +35,8 @@ export function BlueButton() { backgroundColor: "blue", }); }} - isSelected={isSelected}> + isSelected={isSelected} + > Blue ); diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/README.md b/examples/03-ui-components/02-formatting-toolbar-buttons/README.md index 9e9b129ef1..ed3194a358 100644 --- a/examples/03-ui-components/02-formatting-toolbar-buttons/README.md +++ b/examples/03-ui-components/02-formatting-toolbar-buttons/README.md @@ -8,4 +8,4 @@ In this example, we add a blue text/background color and code style button to th - [Changing the Formatting Toolbar](/docs/ui-components/formatting-toolbar#changing-the-formatting-toolbar) - [Manipulating Inline Content](/docs/editor-api/manipulating-inline-content) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json b/examples/03-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json index 1595fd3785..69a5deece0 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json @@ -2,7 +2,13 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": ["Intermediate", "Blocks", "UI Components", "Formatting Toolbar", "Custom Schemas"], + "tags": [ + "Intermediate", + "Blocks", + "UI Components", + "Formatting Toolbar", + "Custom Schemas" + ], "dependencies": { "@mantine/core": "^7.10.1", "react-icons": "^5.2.1" diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx b/examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx index b59c24f37f..4b2af03fbe 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/Alert.tsx @@ -66,7 +66,7 @@ export const Alert = createReactBlockSpec( { render: (props) => { const alertType = alertTypes.find( - (a) => a.value === props.block.props.type + (a) => a.value === props.block.props.type, )!; const Icon = alertType.icon; return ( @@ -103,7 +103,8 @@ export const Alert = createReactBlockSpec( type: "alert", props: { type: type.value }, }) - }> + } + > {type.title} ); @@ -115,5 +116,5 @@ export const Alert = createReactBlockSpec(
); }, - } + }, ); diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/README.md b/examples/03-ui-components/03-formatting-toolbar-block-type-items/README.md index 005e3bc916..de2256c98b 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/README.md +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/README.md @@ -8,4 +8,4 @@ In this example, we add an item to the Block Type Select, so that it works for a - [Changing Block Type Select Items](/docs/ui-components/formatting-toolbar#changing-block-type-select-items) - [Custom Block Types](/docs/custom-schemas/custom-blocks) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css b/examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css index 7296b28dce..a529138eee 100644 --- a/examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css +++ b/examples/03-ui-components/03-formatting-toolbar-block-type-items/styles.css @@ -1,74 +1,74 @@ .alert { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; - border-radius: 4px; - min-height: 48px; - padding: 4px; + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + border-radius: 4px; + min-height: 48px; + padding: 4px; } .alert[data-alert-type="warning"] { - background-color: #fff6e6; + background-color: #fff6e6; } .alert[data-alert-type="error"] { - background-color: #ffe6e6; + background-color: #ffe6e6; } .alert[data-alert-type="info"] { - background-color: #e6ebff; + background-color: #e6ebff; } .alert[data-alert-type="success"] { - background-color: #e6ffe6; + background-color: #e6ffe6; } [data-color-scheme="dark"] .alert[data-alert-type="warning"] { - background-color: #805d20; + background-color: #805d20; } [data-color-scheme="dark"] .alert[data-alert-type="error"] { - background-color: #802020; + background-color: #802020; } [data-color-scheme="dark"] .alert[data-alert-type="info"] { - background-color: #203380; + background-color: #203380; } [data-color-scheme="dark"] .alert[data-alert-type="success"] { - background-color: #208020; + background-color: #208020; } .alert-icon-wrapper { - border-radius: 16px; - display: flex; - justify-content: center; - align-items: center; - margin-left: 12px; - margin-right: 12px; - height: 18px; - width: 18px; - user-select: none; - cursor: pointer; + border-radius: 16px; + display: flex; + justify-content: center; + align-items: center; + margin-left: 12px; + margin-right: 12px; + height: 18px; + width: 18px; + user-select: none; + cursor: pointer; } .alert-icon[data-alert-icon-type="warning"] { - color: #e69819 + color: #e69819; } .alert-icon[data-alert-icon-type="error"] { - color: #d80d0d + color: #d80d0d; } .alert-icon[data-alert-icon-type="info"] { - color: #507aff + color: #507aff; } .alert-icon[data-alert-icon-type="success"] { - color: #0bc10b + color: #0bc10b; } .inline-content { - flex-grow: 1; -} \ No newline at end of file + flex-grow: 1; +} diff --git a/examples/03-ui-components/04-side-menu-buttons/README.md b/examples/03-ui-components/04-side-menu-buttons/README.md index 63c89aa1ec..d0da47a212 100644 --- a/examples/03-ui-components/04-side-menu-buttons/README.md +++ b/examples/03-ui-components/04-side-menu-buttons/README.md @@ -8,4 +8,4 @@ In this example, we replace the button to add a block in the Block Side Menu, wi - [Changing the Block Side Menu](/docs/ui-components/side-menu#changing-the-block-side-menu) - [Removing Blocks](/docs/editor-api/manipulating-blocks#removing-blocks) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/README.md b/examples/03-ui-components/05-side-menu-drag-handle-items/README.md index f57b2bb495..ae1dcd1af7 100644 --- a/examples/03-ui-components/05-side-menu-drag-handle-items/README.md +++ b/examples/03-ui-components/05-side-menu-drag-handle-items/README.md @@ -8,4 +8,4 @@ In this example, we add an item to the Drag Handle Menu, which resets the hovere - [Changing Drag Handle Menu Items](/docs/ui-components/side-menu#changing-drag-handle-menu-items) - [Updating Blocks](/docs/editor-api/manipulating-blocks#updating-blocks) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx index e28ce16da0..847c7b9f6c 100644 --- a/examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx +++ b/examples/03-ui-components/05-side-menu-drag-handle-items/ResetBlockTypeItem.tsx @@ -13,7 +13,8 @@ export function ResetBlockTypeItem(props: DragHandleMenuProps) { { editor.updateBlock(props.block, { type: "paragraph" }); - }}> + }} + > Reset Type ); diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx index 844e9a47d5..9c81e78841 100644 --- a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx +++ b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/App.tsx @@ -35,7 +35,7 @@ const insertHelloWorldItem = (editor: BlockNoteEditor) => ({ // List containing all default Slash Menu Items, as well as our custom one. const getCustomSlashMenuItems = ( - editor: BlockNoteEditor + editor: BlockNoteEditor, ): DefaultReactSuggestionItem[] => [ ...getDefaultReactSlashMenuItems(editor), insertHelloWorldItem(editor), diff --git a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/README.md b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/README.md index f525b3de8e..d4d309f8ce 100644 --- a/examples/03-ui-components/06-suggestion-menus-slash-menu-items/README.md +++ b/examples/03-ui-components/06-suggestion-menus-slash-menu-items/README.md @@ -9,4 +9,4 @@ In this example, we add an item to the Slash Menu, which adds a new block below - [Changing Slash Menu Items](/docs/ui-components/suggestion-menus#changing-slash-menu-items) - [Getting Text Cursor Position](/docs/editor-api/cursor-selections#getting-text-cursor-position) - [Inserting New Blocks](/docs/editor-api/manipulating-blocks#inserting-new-blocks) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx index 2557b30973..593e3703cc 100644 --- a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx +++ b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/App.tsx @@ -12,18 +12,19 @@ import "./styles.css"; // Custom component to replace the default Slash Menu. function CustomSlashMenu( - props: SuggestionMenuProps + props: SuggestionMenuProps, ) { return (
{props.items.map((item, index) => (
{ props.onItemClick?.(item); - }}> + }} + > {item.title}
))} diff --git a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/README.md b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/README.md index 99387c4ee3..bd78bfc488 100644 --- a/examples/03-ui-components/07-suggestion-menus-slash-menu-component/README.md +++ b/examples/03-ui-components/07-suggestion-menus-slash-menu-component/README.md @@ -7,4 +7,4 @@ In this example, we replace the default Slash Menu component with a basic custom **Relevant Docs:** - [Replacing the Slash Menu Component](/docs/ui-components/suggestion-menus#replacing-the-suggestion-menu-component) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/README.md b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/README.md index 36487f8070..3886a3b9da 100644 --- a/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/README.md +++ b/examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/README.md @@ -7,4 +7,4 @@ In this example, we change the Emoji Picker to display 5 columns instead of 10. **Relevant Docs:** - [Changing Emoji Picker Columns](/docs/ui-components/suggestion-menus#changing-emoji-picker-columns) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx index 5c7c17917a..56e91935f0 100644 --- a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx +++ b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx @@ -12,22 +12,24 @@ import "./styles.css"; // Custom component to replace the default Emoji Picker. function CustomEmojiPicker( - props: GridSuggestionMenuProps + props: GridSuggestionMenuProps, ) { return (
+ } + > {props.items.map((item, index) => (
{ props.onItemClick?.(item); - }}> + }} + > {item.icon}
))} diff --git a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/README.md b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/README.md index f77d36e003..4830cab983 100644 --- a/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/README.md +++ b/examples/03-ui-components/09-suggestion-menus-emoji-picker-component/README.md @@ -7,4 +7,4 @@ In this example, we replace the default Emoji Picker component with a basic cust **Relevant Docs:** - [Replacing the Emoji Picker Component](/docs/ui-components/suggestion-menus#replacing-the-emoji-picker-component) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx index 49749a8c49..38c62d9730 100644 --- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx +++ b/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx @@ -27,7 +27,7 @@ const schema = BlockNoteSchema.create({ // Function which gets all users for the mentions menu. const getMentionMenuItems = ( - editor: typeof schema.BlockNoteEditor + editor: typeof schema.BlockNoteEditor, ): DefaultReactGridSuggestionItem[] => { const users = ["Steve", "Bob", "Joe", "Mike"]; @@ -95,7 +95,7 @@ export function App() { ...item, title: item.id, })), - query + query, ) as DefaultReactGridSuggestionItem[] } columns={2} diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx index fdcae6b8c9..b19366ff65 100644 --- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx +++ b/examples/03-ui-components/10-suggestion-menus-grid-mentions/Mention.tsx @@ -17,5 +17,5 @@ export const Mention = createReactInlineContentSpec( @{props.inlineContent.props.user} ), - } + }, ); diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/README.md b/examples/03-ui-components/10-suggestion-menus-grid-mentions/README.md index 1696d491f5..bf0088f130 100644 --- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/README.md +++ b/examples/03-ui-components/10-suggestion-menus-grid-mentions/README.md @@ -8,4 +8,4 @@ In this example, we create a custom `Mention` inline content type which is used - [Custom Inline Content Types](/docs/custom-schemas/custom-inline-content) - [Creating Suggestion Menus](/docs/ui-components/suggestion-menus#creating-additional-suggestion-menus) -- [Editor Setup](/docs/editor-basics/setup) \ No newline at end of file +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/03-ui-components/11-uppy-file-panel/App.tsx b/examples/03-ui-components/11-uppy-file-panel/App.tsx index 00962f1b1f..466c5e024c 100644 --- a/examples/03-ui-components/11-uppy-file-panel/App.tsx +++ b/examples/03-ui-components/11-uppy-file-panel/App.tsx @@ -44,7 +44,7 @@ export default function App() { items.splice( items.findIndex((c) => c.key === "replaceFileButton"), 1, - + , ); return {items}; diff --git a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx b/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx index a3f48d96b6..e498b374cf 100644 --- a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx +++ b/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx @@ -67,7 +67,8 @@ export const FileReplaceButton = () => { + variant={"panel-popover"} + > {/* Replaces default file panel with our Uppy one. */} diff --git a/examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx b/examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx index 65a57469f1..eaf2d4c253 100644 --- a/examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx +++ b/examples/03-ui-components/11-uppy-file-panel/UppyFilePanel.tsx @@ -36,7 +36,7 @@ const uppy = new Uppy() return { url: JSON.parse(text).data.url.replace( "tmpfiles.org/", - "tmpfiles.org/dl/" + "tmpfiles.org/dl/", ), }; }, @@ -51,7 +51,7 @@ export function UppyFilePanel(props: FilePanelProps) { // uploaded URL. const handler: UploadSuccessCallback> = ( file, - response + response, ) => { if (!file) { return; diff --git a/examples/03-ui-components/12-static-formatting-toolbar/.bnexample.json b/examples/03-ui-components/12-static-formatting-toolbar/.bnexample.json index 0c02809402..3f38ca0525 100644 --- a/examples/03-ui-components/12-static-formatting-toolbar/.bnexample.json +++ b/examples/03-ui-components/12-static-formatting-toolbar/.bnexample.json @@ -2,5 +2,10 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": ["Basic", "UI Components", "Formatting Toolbar", "Appearance & Styling"] -} \ No newline at end of file + "tags": [ + "Basic", + "UI Components", + "Formatting Toolbar", + "Appearance & Styling" + ] +} diff --git a/examples/03-ui-components/12-static-formatting-toolbar/style.css b/examples/03-ui-components/12-static-formatting-toolbar/style.css index 839dd7baa0..98e93611cd 100644 --- a/examples/03-ui-components/12-static-formatting-toolbar/style.css +++ b/examples/03-ui-components/12-static-formatting-toolbar/style.css @@ -1,9 +1,9 @@ .bn-container { - display: flex; - flex-direction: column-reverse; - gap: 8px; + display: flex; + flex-direction: column-reverse; + gap: 8px; } .bn-formatting-toolbar { - margin-inline: auto; -} \ No newline at end of file + margin-inline: auto; +} diff --git a/examples/03-ui-components/13-custom-ui/.bnexample.json b/examples/03-ui-components/13-custom-ui/.bnexample.json index 6969cbc23a..337dc13521 100644 --- a/examples/03-ui-components/13-custom-ui/.bnexample.json +++ b/examples/03-ui-components/13-custom-ui/.bnexample.json @@ -2,7 +2,16 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": ["Advanced", "Inline Content", "UI Components", "Block Side Menu", "Formatting Toolbar", "Suggestion Menus", "Slash Menu", "Appearance & Styling"], + "tags": [ + "Advanced", + "Inline Content", + "UI Components", + "Block Side Menu", + "Formatting Toolbar", + "Suggestion Menus", + "Slash Menu", + "Appearance & Styling" + ], "dependencies": { "@emotion/react": "^11.11.4", "@emotion/styled": "^11.11.5", @@ -10,4 +19,4 @@ "@mui/material": "^5.16.1" }, "pro": true -} \ No newline at end of file +} diff --git a/examples/03-ui-components/13-custom-ui/App.tsx b/examples/03-ui-components/13-custom-ui/App.tsx index 29e5e2ded8..d35ee2380a 100644 --- a/examples/03-ui-components/13-custom-ui/App.tsx +++ b/examples/03-ui-components/13-custom-ui/App.tsx @@ -42,7 +42,7 @@ export default function App() { mode: prefersDarkMode ? "dark" : "light", }, }), - [prefersDarkMode] + [prefersDarkMode], ); // Renders the editor instance. @@ -59,7 +59,8 @@ export default function App() { linkToolbar={false} filePanel={false} tableHandles={false} - emojiPicker={false}> + emojiPicker={false} + > {/* Adds the custom Formatting Toolbar. */} {/* `FormattingToolbarController isn't used since we make the custom */} {/* toolbar static and always visible above the editor for this */} @@ -76,9 +77,9 @@ export default function App() { getItems={async (query) => filterSuggestionItems( getDefaultReactSlashMenuItems(editor).filter( - (item) => item.title !== "Emoji" + (item) => item.title !== "Emoji", ), - query + query, ) } suggestionMenuComponent={MUISuggestionMenu} diff --git a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx b/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx index 7c4cabc3d3..d1afb85a52 100644 --- a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx +++ b/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx @@ -80,7 +80,8 @@ function MUIToolbarSelect(props: { : theme.palette.background.default } !important`, }, - }}> + }} + > + }} + > @@ -71,7 +73,7 @@ export const alertBlock = createReactBlockSpec(
), - } + }, ); const simpleImageBlock = createReactBlockSpec( @@ -93,7 +95,7 @@ const simpleImageBlock = createReactBlockSpec( alt="placeholder" /> ), - } + }, ); export const bracketsParagraphBlock = createReactBlockSpec( @@ -114,7 +116,7 @@ export const bracketsParagraphBlock = createReactBlockSpec(
{"]"}
), - } + }, ); const schema = BlockNoteSchema.create({ diff --git a/examples/06-custom-schema/react-custom-blocks/styles.css b/examples/06-custom-schema/react-custom-blocks/styles.css index 38747f13bc..d29dabb5b0 100644 --- a/examples/06-custom-schema/react-custom-blocks/styles.css +++ b/examples/06-custom-schema/react-custom-blocks/styles.css @@ -1,17 +1,18 @@ -.alert, .brackets-paragraph { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; - height: 48px; - padding: 4px; - max-width: 100%; +.alert, +.brackets-paragraph { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + height: 48px; + padding: 4px; + max-width: 100%; } .simple-image { - width: 100%; + width: 100%; } .inline-content { - flex-grow: 1; -} \ No newline at end of file + flex-grow: 1; +} diff --git a/examples/06-custom-schema/react-custom-inline-content/App.tsx b/examples/06-custom-schema/react-custom-inline-content/App.tsx index 54f0ff7251..202252cf43 100644 --- a/examples/06-custom-schema/react-custom-inline-content/App.tsx +++ b/examples/06-custom-schema/react-custom-inline-content/App.tsx @@ -21,7 +21,7 @@ const mention = createReactInlineContentSpec( render: (props) => { return @{props.inlineContent.props.user}; }, - } + }, ); const tag = createReactInlineContentSpec( @@ -38,7 +38,7 @@ const tag = createReactInlineContentSpec( ); }, - } + }, ); const schema = BlockNoteSchema.create({ diff --git a/examples/06-custom-schema/react-custom-styles/App.tsx b/examples/06-custom-schema/react-custom-styles/App.tsx index f19533c79d..c0b5075376 100644 --- a/examples/06-custom-schema/react-custom-styles/App.tsx +++ b/examples/06-custom-schema/react-custom-styles/App.tsx @@ -22,7 +22,7 @@ const small = createReactStyleSpec( render: (props) => { return ; }, - } + }, ); const fontSize = createReactStyleSpec( @@ -36,7 +36,7 @@ const fontSize = createReactStyleSpec( ); }, - } + }, ); export const schema = BlockNoteSchema.create({ @@ -62,7 +62,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { small: true, }); }} - isSelected={activeStyles.small}> + isSelected={activeStyles.small} + > Small { fontSize: "30px", }); }} - isSelected={!!activeStyles.fontSize}> + isSelected={!!activeStyles.fontSize} + > Font size @@ -105,7 +107,7 @@ export default function App() { }, ], }, - [] + [], ); return ( diff --git a/examples/07-collaboration/01-partykit/App.tsx b/examples/07-collaboration/01-partykit/App.tsx index cecfb6767e..4d317c9b3b 100644 --- a/examples/07-collaboration/01-partykit/App.tsx +++ b/examples/07-collaboration/01-partykit/App.tsx @@ -11,7 +11,7 @@ const provider = new YPartyKitProvider( "blocknote-dev.yousefed.partykit.dev", // Use a unique name as a "room" for your application. "your-project-name", - doc + doc, ); export default function App() { diff --git a/examples/07-collaboration/02-liveblocks/App.tsx b/examples/07-collaboration/02-liveblocks/App.tsx index 7d39685643..00083b961f 100644 --- a/examples/07-collaboration/02-liveblocks/App.tsx +++ b/examples/07-collaboration/02-liveblocks/App.tsx @@ -18,7 +18,8 @@ export default function App() { + } + > Loading…
}> diff --git a/examples/07-collaboration/02-liveblocks/Editor.tsx b/examples/07-collaboration/02-liveblocks/Editor.tsx index 98057d954f..ac78050fa9 100644 --- a/examples/07-collaboration/02-liveblocks/Editor.tsx +++ b/examples/07-collaboration/02-liveblocks/Editor.tsx @@ -9,7 +9,7 @@ import { Threads } from "./Threads.js"; export function Editor() { const editor = useCreateBlockNoteWithLiveblocks( {}, - { mentions: true } + { mentions: true }, ) as BlockNoteEditor; return ( diff --git a/examples/07-collaboration/02-liveblocks/globals.css b/examples/07-collaboration/02-liveblocks/globals.css index 84934412a5..1b40f1f4ca 100644 --- a/examples/07-collaboration/02-liveblocks/globals.css +++ b/examples/07-collaboration/02-liveblocks/globals.css @@ -44,4 +44,4 @@ html { .anchored-threads { display: none; } -} \ No newline at end of file +} diff --git a/examples/07-collaboration/02-liveblocks/liveblocks.config.ts b/examples/07-collaboration/02-liveblocks/liveblocks.config.ts index c7011cdf0e..28db2e07be 100644 --- a/examples/07-collaboration/02-liveblocks/liveblocks.config.ts +++ b/examples/07-collaboration/02-liveblocks/liveblocks.config.ts @@ -26,9 +26,9 @@ declare global { // Custom events, for useBroadcastEvent, useEventListener RoomEvent: {}; - // Example has two events, using a union - // | { type: "PLAY" } - // | { type: "REACTION"; emoji: "🔥" }; + // Example has two events, using a union + // | { type: "PLAY" } + // | { type: "REACTION"; emoji: "🔥" }; // Custom metadata set on threads, for useThreads, useCreateThread, etc. ThreadMetadata: { diff --git a/examples/07-collaboration/02-liveblocks/styles.css b/examples/07-collaboration/02-liveblocks/styles.css index 63457f2f8d..74625c7432 100644 --- a/examples/07-collaboration/02-liveblocks/styles.css +++ b/examples/07-collaboration/02-liveblocks/styles.css @@ -5,4 +5,4 @@ div:has(> .editor) { height: 100%; -} \ No newline at end of file +} diff --git a/examples/07-collaboration/03-y-sweet/App.tsx b/examples/07-collaboration/03-y-sweet/App.tsx index 5a0a44bb34..5a238ac497 100644 --- a/examples/07-collaboration/03-y-sweet/App.tsx +++ b/examples/07-collaboration/03-y-sweet/App.tsx @@ -12,7 +12,8 @@ export default function App() { return ( + authEndpoint="https://demos.y-sweet.dev/api/auth" + > ); diff --git a/examples/07-collaboration/04-comments/App.tsx b/examples/07-collaboration/04-comments/App.tsx index 17bbc9f9ff..7b3c98de9d 100644 --- a/examples/07-collaboration/04-comments/App.tsx +++ b/examples/07-collaboration/04-comments/App.tsx @@ -35,7 +35,8 @@ export default function App() { return ( + authEndpoint="https://demos.y-sweet.dev/api/auth" + > ); @@ -66,7 +67,7 @@ function Document() { return new YjsThreadStore( activeUser.id, doc.getMap("threads"), - new DefaultThreadStoreAuth(activeUser.id, activeUser.role) + new DefaultThreadStoreAuth(activeUser.id, activeUser.role), ); }, [doc, activeUser]); @@ -83,14 +84,15 @@ function Document() { user: { color: getRandomColor(), name: activeUser.username }, }, }, - [activeUser, threadStore] + [activeUser, threadStore], ); return ( + editable={activeUser.role === "editor"} + > {/* We place user settings select within `BlockNoteView` as it uses BlockNote UI components and needs the context for them. */}
diff --git a/examples/07-collaboration/04-comments/README.md b/examples/07-collaboration/04-comments/README.md index a168d10264..7e6f1d9cf0 100644 --- a/examples/07-collaboration/04-comments/README.md +++ b/examples/07-collaboration/04-comments/README.md @@ -10,4 +10,3 @@ In this example, you can add comments to the document while collaborating with o - [Real-time collaboration](/docs/collaboration/real-time-collaboration) - [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote) - [Editor Setup](/docs/editor-basics/setup) - diff --git a/examples/07-collaboration/04-comments/style.css b/examples/07-collaboration/04-comments/style.css index 9d02f8bfdb..1172740d3d 100644 --- a/examples/07-collaboration/04-comments/style.css +++ b/examples/07-collaboration/04-comments/style.css @@ -39,4 +39,4 @@ font-size: 12px; line-height: 12px; padding-left: 14px; -} \ No newline at end of file +} diff --git a/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json b/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json index 5a36ea6c4b..5d190c21b6 100644 --- a/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json +++ b/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json @@ -2,11 +2,7 @@ "playground": true, "docs": true, "author": "matthewlipski", - "tags": [ - "Advanced", - "Comments", - "Collaboration" - ], + "tags": ["Advanced", "Comments", "Collaboration"], "dependencies": { "@y-sweet/react": "^0.6.3", "@mantine/core": "^7.10.1" diff --git a/examples/07-collaboration/05-comments-with-sidebar/App.tsx b/examples/07-collaboration/05-comments-with-sidebar/App.tsx index 7a09a86434..8089a292e7 100644 --- a/examples/07-collaboration/05-comments-with-sidebar/App.tsx +++ b/examples/07-collaboration/05-comments-with-sidebar/App.tsx @@ -40,7 +40,8 @@ export default function App() { return ( + authEndpoint="https://demos.y-sweet.dev/api/auth" + > ); @@ -77,7 +78,7 @@ function Document() { return new YjsThreadStore( activeUser.id, doc.getMap("threads"), - new DefaultThreadStoreAuth(activeUser.id, activeUser.role) + new DefaultThreadStoreAuth(activeUser.id, activeUser.role), ); }, [doc, activeUser]); @@ -94,7 +95,7 @@ function Document() { user: { color: getRandomColor(), name: activeUser.username }, }, }, - [activeUser, threadStore] + [activeUser, threadStore], ); return ( @@ -111,7 +112,8 @@ function Document() { renderEditor={false} // We also disable the default rendering of comments in the editor, as we // want to render them in the `ThreadsSidebar` component instead. - comments={false}> + comments={false} + > {/* We place the editor, the sidebar, and any settings selects within `BlockNoteView` as they use BlockNote UI components and need the context for them. */} diff --git a/examples/07-collaboration/05-comments-with-sidebar/style.css b/examples/07-collaboration/05-comments-with-sidebar/style.css index ea297d6efe..8ec1d5103e 100644 --- a/examples/07-collaboration/05-comments-with-sidebar/style.css +++ b/examples/07-collaboration/05-comments-with-sidebar/style.css @@ -15,7 +15,8 @@ width: 0; } -.sidebar-comments-main-container .editor-section, .threads-sidebar-section { +.sidebar-comments-main-container .editor-section, +.threads-sidebar-section { border-radius: var(--bn-border-radius-large); display: flex; flex: 1; @@ -25,13 +26,15 @@ width: 0; } -.sidebar-comments-main-container .editor-section h1, .threads-sidebar-section h1 { +.sidebar-comments-main-container .editor-section h1, +.threads-sidebar-section h1 { color: var(--bn-colors-menu-text); margin: 0; font-size: 32px; } -.sidebar-comments-main-container .bn-editor, .bn-threads-sidebar { +.sidebar-comments-main-container .bn-editor, +.bn-threads-sidebar { border-radius: var(--bn-border-radius-medium); display: flex; flex-direction: column; @@ -71,4 +74,4 @@ font-size: 12px; line-height: 12px; padding-left: 14px; -} \ No newline at end of file +} diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts b/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts index abef46c69e..8bf523ffa6 100644 --- a/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts +++ b/examples/08-extensions/01-tiptap-arrow-conversion/ArrowConversionExtension.ts @@ -1,7 +1,7 @@ import { Extension } from "@tiptap/core"; export const ArrowConversionExtension = Extension.create({ - name: 'arrowConversion', + name: "arrowConversion", addInputRules() { return [ @@ -9,10 +9,10 @@ export const ArrowConversionExtension = Extension.create({ find: /->/g, handler: ({ state, range, chain }) => { const { from, to } = range; - const tr = state.tr.replaceWith(from, to, state.schema.text('→')); + const tr = state.tr.replaceWith(from, to, state.schema.text("→")); chain().insertContent(tr).run(); }, }, ]; }, -}) +}); diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx b/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx index c0dbb42ce8..1b8476a039 100644 --- a/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx +++ b/examples/vanilla-js/react-vanilla-custom-blocks/App.tsx @@ -68,32 +68,32 @@ const alertBlock = createBlockSpec( alertTypes["warning"].icon, "warning", block.props.type === "warning", - block.props.type === "warning" - ) + block.props.type === "warning", + ), ); dropdown.options.add( new Option( alertTypes["error"].icon, "error", block.props.type === "error", - block.props.type === "error" - ) + block.props.type === "error", + ), ); dropdown.options.add( new Option( alertTypes["info"].icon, "info", block.props.type === "info", - block.props.type === "info" - ) + block.props.type === "info", + ), ); dropdown.options.add( new Option( alertTypes["success"].icon, "success", block.props.type === "success", - block.props.type === "success" - ) + block.props.type === "success", + ), ); alert.appendChild(dropdown); @@ -107,7 +107,7 @@ const alertBlock = createBlockSpec( contentDOM: inlineContent, }; }, - } + }, ); const simpleImageBlock = createBlockSpec( @@ -132,7 +132,7 @@ const simpleImageBlock = createBlockSpec( dom: image, }; }, - } + }, ); const bracketsParagraphBlock = createBlockSpec( @@ -176,7 +176,7 @@ const bracketsParagraphBlock = createBlockSpec( contentDOM: inlineContent, }; }, - } + }, ); const schema = BlockNoteSchema.create({ blockSpecs: { diff --git a/examples/vanilla-js/react-vanilla-custom-blocks/styles.css b/examples/vanilla-js/react-vanilla-custom-blocks/styles.css index 38747f13bc..d29dabb5b0 100644 --- a/examples/vanilla-js/react-vanilla-custom-blocks/styles.css +++ b/examples/vanilla-js/react-vanilla-custom-blocks/styles.css @@ -1,17 +1,18 @@ -.alert, .brackets-paragraph { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; - height: 48px; - padding: 4px; - max-width: 100%; +.alert, +.brackets-paragraph { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + height: 48px; + padding: 4px; + max-width: 100%; } .simple-image { - width: 100%; + width: 100%; } .inline-content { - flex-grow: 1; -} \ No newline at end of file + flex-grow: 1; +} diff --git a/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx b/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx index 7e81477387..867fa2f1a2 100644 --- a/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx +++ b/examples/vanilla-js/react-vanilla-custom-inline-content/App.tsx @@ -27,7 +27,7 @@ const mention = createInlineContentSpec( dom: mention, }; }, - } + }, ); const tag = createInlineContentSpec( @@ -49,7 +49,7 @@ const tag = createInlineContentSpec( contentDOM: content, }; }, - } + }, ); const schema = BlockNoteSchema.create({ diff --git a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx index 813952cda7..96ddc2c4fe 100644 --- a/examples/vanilla-js/react-vanilla-custom-styles/App.tsx +++ b/examples/vanilla-js/react-vanilla-custom-styles/App.tsx @@ -30,7 +30,7 @@ const small = createStyleSpec( contentDOM: small, }; }, - } + }, ); const fontSize = createStyleSpec( @@ -48,7 +48,7 @@ const fontSize = createStyleSpec( contentDOM: span, }; }, - } + }, ); const schema = BlockNoteSchema.create({ @@ -74,7 +74,8 @@ const CustomFormattingToolbar = (props: FormattingToolbarProps) => { small: true, }); }} - isSelected={activeStyles.small}> + isSelected={activeStyles.small} + > Small { fontSize: "30px", }); }} - isSelected={!!activeStyles.fontSize}> + isSelected={!!activeStyles.fontSize} + > Font size @@ -118,7 +120,7 @@ export default function App() { }, ], }, - [] + [], ); return ( diff --git a/package.json b/package.json index e9d7525551..1a95339eb6 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,8 @@ "eslint-plugin-import": "^2.31.0", "glob": "^10.3.10", "nx": "20.6.4", - "prettier": "3.5.3", - "prettier-plugin-tailwindcss": "0.6.11", + "prettier": "^3", + "prettier-plugin-tailwindcss": "^0.6.11", "serve": "14.2.4", "typescript": "^5.3.3", "vitest": "^2.0.3", @@ -51,6 +51,6 @@ "prestart": "pnpm run build", "start": "serve playground/dist -c ../serve.json", "test": "nx run-many --target=test", - "bootstrap": "echo 'do nothing'" + "format": "prettier --write \"**/*.{js,jsx,ts,tsx,css,scss,md}\"" } } diff --git a/packages/ariakit/src/BlockNoteView.tsx b/packages/ariakit/src/BlockNoteView.tsx index 3f19326d85..6801349e25 100644 --- a/packages/ariakit/src/BlockNoteView.tsx +++ b/packages/ariakit/src/BlockNoteView.tsx @@ -14,9 +14,9 @@ import { components } from "./components.js"; export const BlockNoteView = < BSchema extends BlockSchema, ISchema extends InlineContentSchema, - SSchema extends StyleSchema + SSchema extends StyleSchema, >( - props: BlockNoteViewProps + props: BlockNoteViewProps, ) => { const { className, ...rest } = props; diff --git a/packages/ariakit/src/ariakitStyles.css b/packages/ariakit/src/ariakitStyles.css index 82e5016755..72f4e0f953 100644 --- a/packages/ariakit/src/ariakitStyles.css +++ b/packages/ariakit/src/ariakitStyles.css @@ -3,1006 +3,1005 @@ responsible for the majority of the styling. */ /* https://ariakit.org/examples/menu-nested */ .bn-ak-button { - --border: rgb(0 0 0/13%); - --highlight: rgb(255 255 255/20%); - --shadow: rgb(0 0 0/10%); - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - justify-content: center; - gap: 0.25rem; - white-space: nowrap; - border-radius: 0.5rem; - border-style: none; - background-color: hsl(204 20% 100%); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), - 0 1px 1px var(--shadow); - font-weight: 500; + --border: rgb(0 0 0/13%); + --highlight: rgb(255 255 255/20%); + --shadow: rgb(0 0 0/10%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + justify-content: center; + gap: 0.25rem; + white-space: nowrap; + border-radius: 0.5rem; + border-style: none; + background-color: hsl(204 20% 100%); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); + font-weight: 500; } .bn-ak-button:where(.dark, .dark *) { - --border: rgb(255 255 255/10%); - --highlight: rgb(255 255 255/5%); - --shadow: rgb(0 0 0/25%); - background-color: hsl(204 20% 100% / 0.05); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 -1px 0 1px var(--shadow), - inset 0 1px 0 var(--highlight); + --border: rgb(255 255 255/10%); + --highlight: rgb(255 255 255/5%); + --shadow: rgb(0 0 0/25%); + background-color: hsl(204 20% 100% / 0.05); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 -1px 0 1px var(--shadow), + inset 0 1px 0 var(--highlight); } .bn-ak-button:not(:active):hover { - --border: rgb(0 0 0/33%); + --border: rgb(0 0 0/33%); } .bn-ak-button:where(.dark, .dark *):not(:active):hover { - --border: rgb(255 255 255/25%); + --border: rgb(255 255 255/25%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-menu { - position: relative; - z-index: 50; - display: flex; - max-height: var(--popover-available-height); - min-width: 180px; - flex-direction: column; - overscroll-behavior: contain; - border-radius: 0.5rem; - border-width: 1px; - border-style: solid; - border-color: hsl(204 20% 88%); - background-color: hsl(204 20% 100%); - padding: 0.5rem; - color: hsl(204 4% 0%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - outline: none !important; - overflow: visible; + position: relative; + z-index: 50; + display: flex; + max-height: var(--popover-available-height); + min-width: 180px; + flex-direction: column; + overscroll-behavior: contain; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl(204 20% 88%); + background-color: hsl(204 20% 100%); + padding: 0.5rem; + color: hsl(204 4% 0%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + outline: none !important; + overflow: visible; } .bn-ak-menu:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: hsl(204 20% 100%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.25), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: hsl(204 20% 100%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.25), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-menu-item { - display: flex; - cursor: default; - scroll-margin: 0.5rem; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; - padding: 0.5rem; - outline: none !important; + display: flex; + cursor: default; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + padding: 0.5rem; + outline: none !important; } .bn-ak-menu-item[aria-disabled="true"] { - opacity: 0.25; + opacity: 0.25; } .bn-ak-menu-item[data-active-item] { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-menu-item:active, .bn-ak-menu-item[data-active] { - background-color: hsl(204 100% 32%); - padding-top: 9px; - padding-bottom: 7px; + background-color: hsl(204 100% 32%); + padding-top: 9px; + padding-bottom: 7px; } -.bn-ak-menu:not(:focus) -.bn-ak-menu-item:not(:focus)[aria-expanded="true"] { - background-color: hsl(204 4% 0% / 7.5%); - color: currentColor; +.bn-ak-menu:not(:focus) .bn-ak-menu-item:not(:focus)[aria-expanded="true"] { + background-color: hsl(204 4% 0% / 7.5%); + color: currentColor; } .bn-ak-menu:not(:focus) -.bn-ak-menu-item:not(:focus)[aria-expanded="true"]:where(.dark, .dark *) { - background-color: hsl(204 20% 100% / 0.1); + .bn-ak-menu-item:not(:focus)[aria-expanded="true"]:where(.dark, .dark *) { + background-color: hsl(204 20% 100% / 0.1); } .bn-ak-menu-item .label { - flex: 1 1 0%; + flex: 1 1 0%; } /* https://ariakit.org/examples/form-select */ .bn-ak-button { - --border: rgb(0 0 0/13%); - --highlight: rgb(255 255 255/20%); - --shadow: rgb(0 0 0/10%); - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - gap: 0.25rem; - white-space: nowrap; - border-style: none; - background-color: hsl(204 20% 100%); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), - 0 1px 1px var(--shadow); - justify-content: space-between; - width: 100%; - border-radius: 0.375rem; + --border: rgb(0 0 0/13%); + --highlight: rgb(255 255 255/20%); + --shadow: rgb(0 0 0/10%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + gap: 0.25rem; + white-space: nowrap; + border-style: none; + background-color: hsl(204 20% 100%); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); + justify-content: space-between; + width: 100%; + border-radius: 0.375rem; } .bn-ak-button:where(.dark, .dark *) { - --border: rgb(255 255 255/10%); - --highlight: rgb(255 255 255/5%); - --shadow: rgb(0 0 0/25%); - background-color: hsl(204 20% 100% / 0.05); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 -1px 0 1px var(--shadow), - inset 0 1px 0 var(--highlight); + --border: rgb(255 255 255/10%); + --highlight: rgb(255 255 255/5%); + --shadow: rgb(0 0 0/25%); + background-color: hsl(204 20% 100% / 0.05); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 -1px 0 1px var(--shadow), + inset 0 1px 0 var(--highlight); } .bn-ak-button:not(:active):hover { - --border: rgb(0 0 0/33%); + --border: rgb(0 0 0/33%); } .bn-ak-button:where(.dark, .dark *):not(:active):hover { - --border: rgb(255 255 255/25%); + --border: rgb(255 255 255/25%); } .bn-ak-primary { - --border: rgba(0, 0, 0, 0.15); - --highlight: rgba(255, 255, 255, 0.25); - --shadow: rgba(0, 0, 0, 0.15); - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); - justify-content: center; + --border: rgba(0, 0, 0, 0.15); + --highlight: rgba(255, 255, 255, 0.25); + --shadow: rgba(0, 0, 0, 0.15); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); + justify-content: center; } .bn-ak-primary:hover { - --border: rgba(0, 0, 0, 0.35); - background-color: hsl(204 100% 35%); + --border: rgba(0, 0, 0, 0.35); + background-color: hsl(204 100% 35%); } .bn-ak-primary:where(.dark, .dark *) { - --border: rgba(255, 255, 255, 0.25); - --highlight: rgba(255, 255, 255, 0.1); - --shadow: rgba(0, 0, 0, 0.25); - background-color: hsl(204 100% 35%); + --border: rgba(255, 255, 255, 0.25); + --highlight: rgba(255, 255, 255, 0.1); + --shadow: rgba(0, 0, 0, 0.25); + background-color: hsl(204 100% 35%); } .bn-ak-primary:hover:where(.dark, .dark *) { - --border: rgba(255, 255, 255, 0.45); - background-color: hsl(204 100% 40%); + --border: rgba(255, 255, 255, 0.45); + background-color: hsl(204 100% 40%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-wrapper { - display: flex; - width: 320px; - max-width: 100%; - flex-direction: column; - gap: 1.5rem; - border-radius: 0.5rem; - background-color: hsl(204 20% 100%); - padding: 1rem; - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.1), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + display: flex; + width: 320px; + max-width: 100%; + flex-direction: column; + gap: 1.5rem; + border-radius: 0.5rem; + background-color: hsl(204 20% 100%); + padding: 1rem; + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.1), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-label { - padding-left: 1rem; + padding-left: 1rem; } .bn-ak-popover { - z-index: 50; - display: flex; - max-height: min(var(--popover-available-height, 300px), 300px); - flex-direction: column; - overflow: auto; - overscroll-behavior: contain; - border-radius: 0.5rem; - border-width: 1px; - border-style: solid; - border-color: hsl(204 20% 88%); - background-color: hsl(204 20% 100%); - padding: 0.5rem; - color: hsl(204 4% 0%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + z-index: 50; + display: flex; + max-height: min(var(--popover-available-height, 300px), 300px); + flex-direction: column; + overflow: auto; + overscroll-behavior: contain; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl(204 20% 88%); + background-color: hsl(204 20% 100%); + padding: 0.5rem; + color: hsl(204 4% 0%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-popover:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: hsl(204 20% 100%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.25), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: hsl(204 20% 100%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.25), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-select-item { - display: flex; - cursor: default; - scroll-margin: 0.5rem; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; - padding: 0.5rem; - outline: none !important; + display: flex; + cursor: default; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + padding: 0.5rem; + outline: none !important; } .bn-ak-select-item[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-select-item[data-active-item] { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-wrapper:where(.dark, .dark *) { - background-color: hsl(204 4% 16%); - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.25), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + background-color: hsl(204 4% 16%); + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.25), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-field { - display: flex; - flex-direction: column; - gap: 0.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; } .bn-ak-input { - height: 2.5rem; - width: 100%; - border-radius: 0.375rem; - border-style: none; - background-color: hsl(204 20% 94% / 0.4); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - box-shadow: - inset 0 0 0 1px rgba(0 0 0 / 0.1), - inset 0 2px 5px 0 rgba(0 0 0 / 0.05); + height: 2.5rem; + width: 100%; + border-radius: 0.375rem; + border-style: none; + background-color: hsl(204 20% 94% / 0.4); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + box-shadow: + inset 0 0 0 1px rgba(0 0 0 / 0.1), + inset 0 2px 5px 0 rgba(0 0 0 / 0.05); } .bn-ak-input::placeholder { - color: hsl(204 4% 0% / 0.6); + color: hsl(204 4% 0% / 0.6); } .bn-ak-input:hover { - background-color: hsl(204 20% 94%); + background-color: hsl(204 20% 94%); } .bn-ak-popover:focus-visible, .bn-ak-popover[data-focus-visible], .bn-ak-input:focus-visible, .bn-ak-input[data-focus-visible] { - outline: 2px solid hsl(204 100% 40%); - outline-offset: -1px; + outline: 2px solid hsl(204 100% 40%); + outline-offset: -1px; } .bn-ak-input:where(.dark, .dark *) { - background-color: hsl(204 4% 10%); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px rgba(255 255 255 / 0.12), - inset 0 -1px 0 0 rgba(255 255 255 / 0.05), - inset 0 2px 5px 0 rgba(0 0 0 / 0.15); + background-color: hsl(204 4% 10%); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px rgba(255 255 255 / 0.12), + inset 0 -1px 0 0 rgba(255 255 255 / 0.05), + inset 0 2px 5px 0 rgba(0 0 0 / 0.15); } .bn-ak-input:where(.dark, .dark *)::placeholder { - color: hsl(204 20% 100% / 46%); + color: hsl(204 20% 100% / 46%); } .bn-ak-input:hover:where(.dark, .dark *) { - background-color: hsl(204 4% 8%); + background-color: hsl(204 4% 8%); } .bn-ak-error { - width: fit-content; - border-radius: 0.375rem; - border-width: 1px; - border-color: hsl(357 56% 80%); - background-color: hsl(357 56% 80% / 0.4); - padding-top: 0.5rem; - padding-bottom: 0.5rem; - padding-left: 1rem; - padding-right: 1rem; - color: hsl(357 100% 30%); + width: fit-content; + border-radius: 0.375rem; + border-width: 1px; + border-color: hsl(357 56% 80%); + background-color: hsl(357 56% 80% / 0.4); + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 1rem; + color: hsl(357 100% 30%); } .bn-ak-error:empty { - display: none; + display: none; } .bn-ak-error:where(.dark, .dark *) { - border-color: hsl(357 56% 50% / 0.4); - background-color: hsl(357 56% 42% / 0.25); - color: hsl(357 100% 90%); + border-color: hsl(357 56% 50% / 0.4); + background-color: hsl(357 56% 42% / 0.25); + color: hsl(357 100% 90%); } .bn-ak-buttons { - display: flex; - gap: 1rem; - padding-top: 1rem; + display: flex; + gap: 1rem; + padding-top: 1rem; } /* https://ariakit.org/components/menu */ .bn-ak-button { - --border: rgb(0 0 0/13%); - --highlight: rgb(255 255 255/20%); - --shadow: rgb(0 0 0/10%); - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - justify-content: center; - gap: 0.25rem; - white-space: nowrap; - border-radius: 0.5rem; - border-style: none; - background-color: hsl(204 20% 100%); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), - 0 1px 1px var(--shadow); - font-weight: 500; + --border: rgb(0 0 0/13%); + --highlight: rgb(255 255 255/20%); + --shadow: rgb(0 0 0/10%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + justify-content: center; + gap: 0.25rem; + white-space: nowrap; + border-radius: 0.5rem; + border-style: none; + background-color: hsl(204 20% 100%); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); + font-weight: 500; } .bn-ak-button:where(.dark, .dark *) { - --border: rgb(255 255 255/10%); - --highlight: rgb(255 255 255/5%); - --shadow: rgb(0 0 0/25%); - background-color: hsl(204 20% 100% / 0.05); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 -1px 0 1px var(--shadow), - inset 0 1px 0 var(--highlight); + --border: rgb(255 255 255/10%); + --highlight: rgb(255 255 255/5%); + --shadow: rgb(0 0 0/25%); + background-color: hsl(204 20% 100% / 0.05); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 -1px 0 1px var(--shadow), + inset 0 1px 0 var(--highlight); } .bn-ak-button:not(:active):hover { - --border: rgb(0 0 0/33%); + --border: rgb(0 0 0/33%); } .bn-ak-button:where(.dark, .dark *):not(:active):hover { - --border: rgb(255 255 255/25%); + --border: rgb(255 255 255/25%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-separator { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - height: 0px; - width: 100%; - border-top-width: 1px; - border-color: hsl(204 20% 88%); + margin-top: 0.5rem; + margin-bottom: 0.5rem; + height: 0px; + width: 100%; + border-top-width: 1px; + border-color: hsl(204 20% 88%); } .bn-ak-separator:where(.dark, .dark *) { - border-color: hsl(204 4% 28%); + border-color: hsl(204 4% 28%); } .bn-ak-menu { - position: relative; - z-index: 50; - display: flex; - /*max-height: var(--popover-available-height);*/ - min-width: 180px; - flex-direction: column; - /*overflow: auto;*/ - overscroll-behavior: contain; - border-radius: 0.5rem; - border-width: 1px; - border-style: solid; - border-color: hsl(204 20% 88%); - background-color: hsl(204 20% 100%); - padding: 0.5rem; - color: hsl(204 4% 0%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); - outline: none !important; + position: relative; + z-index: 50; + display: flex; + /*max-height: var(--popover-available-height);*/ + min-width: 180px; + flex-direction: column; + /*overflow: auto;*/ + overscroll-behavior: contain; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl(204 20% 88%); + background-color: hsl(204 20% 100%); + padding: 0.5rem; + color: hsl(204 4% 0%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); + outline: none !important; } .bn-ak-menu:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: hsl(204 20% 100%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.25), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: hsl(204 20% 100%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.25), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-menu-item { - display: flex; - cursor: default; - scroll-margin: 0.5rem; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; - padding: 0.5rem; - outline: none !important; + display: flex; + cursor: default; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + padding: 0.5rem; + outline: none !important; } .bn-ak-menu-item[aria-disabled="true"] { - opacity: 0.25; + opacity: 0.25; } .bn-ak-menu-item[data-active-item] { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-menu-item:active, .bn-ak-menu-item[data-active] { - background-color: hsl(204 100% 32%); - padding-top: 9px; - padding-bottom: 7px; + background-color: hsl(204 100% 32%); + padding-top: 9px; + padding-bottom: 7px; } /* https://ariakit.org/examples/select-group */ .bn-ak-button { - --border: rgb(0 0 0/13%); - --highlight: rgb(255 255 255/20%); - --shadow: rgb(0 0 0/10%); - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - gap: 0.25rem; - white-space: nowrap; - border-radius: 0.5rem; - border-style: none; - background-color: hsl(204 20% 100%); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), - 0 1px 1px var(--shadow); - width: 200px; - justify-content: space-between; + --border: rgb(0 0 0/13%); + --highlight: rgb(255 255 255/20%); + --shadow: rgb(0 0 0/10%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + gap: 0.25rem; + white-space: nowrap; + border-radius: 0.5rem; + border-style: none; + background-color: hsl(204 20% 100%); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); + width: 200px; + justify-content: space-between; } .bn-ak-button:where(.dark, .dark *) { - --border: rgb(255 255 255/10%); - --highlight: rgb(255 255 255/5%); - --shadow: rgb(0 0 0/25%); - background-color: hsl(204 20% 100% / 0.05); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 -1px 0 1px var(--shadow), - inset 0 1px 0 var(--highlight); + --border: rgb(255 255 255/10%); + --highlight: rgb(255 255 255/5%); + --shadow: rgb(0 0 0/25%); + background-color: hsl(204 20% 100% / 0.05); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 -1px 0 1px var(--shadow), + inset 0 1px 0 var(--highlight); } .bn-ak-button:not(:active):hover { - --border: rgb(0 0 0/33%); + --border: rgb(0 0 0/33%); } .bn-ak-button:where(.dark, .dark *):not(:active):hover { - --border: rgb(255 255 255/25%); + --border: rgb(255 255 255/25%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-wrapper { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 1rem; } .bn-ak-popover { - z-index: 50; - display: flex; - max-height: min(var(--popover-available-height, 300px), 300px); - flex-direction: column; - overflow: auto; - overscroll-behavior: contain; - border-radius: 0.5rem; - border-width: 1px; - border-style: solid; - border-color: hsl(204 20% 88%); - background-color: hsl(204 20% 100%); - padding: 0.5rem; - color: hsl(204 4% 0%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + z-index: 50; + display: flex; + max-height: min(var(--popover-available-height, 300px), 300px); + flex-direction: column; + overflow: auto; + overscroll-behavior: contain; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl(204 20% 88%); + background-color: hsl(204 20% 100%); + padding: 0.5rem; + color: hsl(204 4% 0%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-popover:focus-visible, .bn-ak-popover[data-focus-visible] { - outline: 2px solid hsl(204 100% 40%); - outline-offset: -1px; + outline: 2px solid hsl(204 100% 40%); + outline-offset: -1px; } .bn-ak-popover:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: hsl(204 20% 100%); - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.25), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: hsl(204 20% 100%); + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.25), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-select-item { - display: flex; - cursor: default; - scroll-margin: 0.5rem; - align-items: center; - gap: 0.5rem; - border-radius: 0.25rem; - padding: 0.5rem; - outline: none !important; + display: flex; + cursor: default; + scroll-margin: 0.5rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.25rem; + padding: 0.5rem; + outline: none !important; } .bn-ak-select-item[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-select-item[data-active-item] { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-separator { - margin-top: 0.5rem; - margin-bottom: 0.5rem; - height: 0px; - width: 100%; - border-top-width: 1px; - border-color: hsl(204 20% 88%); + margin-top: 0.5rem; + margin-bottom: 0.5rem; + height: 0px; + width: 100%; + border-top-width: 1px; + border-color: hsl(204 20% 88%); } .bn-ak-separator:where(.dark, .dark *) { - border-color: hsl(204 4% 28%); + border-color: hsl(204 4% 28%); } .bn-ak-group-label { - cursor: default; - padding: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - font-weight: 500; - opacity: 0.6; + cursor: default; + padding: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 500; + opacity: 0.6; } .bn-ak-group-label + * { - scroll-margin-top: 2.5rem; + scroll-margin-top: 2.5rem; } /* https://ariakit.org/components/tab */ .bn-ak-wrapper { - display: flex; - flex-direction: column; - gap: 0.5rem; - border-radius: 0.5rem; - background-color: hsl(204 20% 100%); - padding: 0.5rem; - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.1), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + display: flex; + flex-direction: column; + gap: 0.5rem; + border-radius: 0.5rem; + background-color: hsl(204 20% 100%); + padding: 0.5rem; + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.1), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-wrapper:where(.dark, .dark *) { - background-color: hsl(204 4% 16%); - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.25), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + background-color: hsl(204 4% 16%); + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.25), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-tab-list { - display: flex; - gap: 0.5rem; + display: flex; + gap: 0.5rem; } .bn-ak-tab { - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - justify-content: center; - gap: 0.5rem; - white-space: nowrap; - border-radius: 0.25rem; - border-style: none; - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + justify-content: center; + gap: 0.5rem; + white-space: nowrap; + border-radius: 0.25rem; + border-style: none; + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); } .bn-ak-tab:hover { - background-color: hsl(204 4% 0% / 7.5%); + background-color: hsl(204 4% 0% / 7.5%); } .bn-ak-tab[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-tab[aria-selected="true"] { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-tab:hover[aria-selected="true"] { - background-color: hsl(204 100% 32%); + background-color: hsl(204 100% 32%); } .bn-ak-tab[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-tab:active, .bn-ak-tab[data-active] { - padding-top: 0.125rem; + padding-top: 0.125rem; } .bn-ak-tab:hover:where(.dark, .dark *) { - background-color: hsl(204 20% 100% / 0.1); + background-color: hsl(204 20% 100% / 0.1); } .bn-ak-tab[aria-selected="true"]:where(.dark, .dark *) { - background-color: hsl(204 100% 40%); - color: hsl(204 20% 100%); + background-color: hsl(204 100% 40%); + color: hsl(204 20% 100%); } .bn-ak-tab:hover[aria-selected="true"]:where(.dark, .dark *) { - background-color: hsl(204 100% 32%); + background-color: hsl(204 100% 32%); } .bn-ak-panels { - padding: 0.5rem; + padding: 0.5rem; } /* https://ariakit.org/components/toolbar */ .bn-ak-button { - --border: rgb(0 0 0/13%); - --highlight: rgb(255 255 255/20%); - --shadow: rgb(0 0 0/10%); - display: flex; - height: 2.5rem; - user-select: none; - align-items: center; - justify-content: center; - white-space: nowrap; - border-style: none; - background-color: hsl(204 20% 100%); - padding-left: 1rem; - padding-right: 1rem; - font-size: 1rem; - line-height: 1.5rem; - color: hsl(204 4% 0%); - text-decoration-line: none; - outline-width: 2px; - outline-offset: 2px; - outline-color: hsl(204 100% 40%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), - 0 1px 1px var(--shadow); - scroll-margin-left: 0.25rem; - scroll-margin-right: 0.25rem; - gap: 0.5rem; - border-radius: 0.25rem; + --border: rgb(0 0 0/13%); + --highlight: rgb(255 255 255/20%); + --shadow: rgb(0 0 0/10%); + display: flex; + height: 2.5rem; + user-select: none; + align-items: center; + justify-content: center; + white-space: nowrap; + border-style: none; + background-color: hsl(204 20% 100%); + padding-left: 1rem; + padding-right: 1rem; + font-size: 1rem; + line-height: 1.5rem; + color: hsl(204 4% 0%); + text-decoration-line: none; + outline-width: 2px; + outline-offset: 2px; + outline-color: hsl(204 100% 40%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); + scroll-margin-left: 0.25rem; + scroll-margin-right: 0.25rem; + gap: 0.5rem; + border-radius: 0.25rem; } .bn-ak-button:where(.dark, .dark *) { - --border: rgb(255 255 255/10%); - --highlight: rgb(255 255 255/5%); - --shadow: rgb(0 0 0/25%); - background-color: hsl(204 20% 100% / 0.05); - color: hsl(204 20% 100%); - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 -1px 0 1px var(--shadow), - inset 0 1px 0 var(--highlight); + --border: rgb(255 255 255/10%); + --highlight: rgb(255 255 255/5%); + --shadow: rgb(0 0 0/25%); + background-color: hsl(204 20% 100% / 0.05); + color: hsl(204 20% 100%); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 -1px 0 1px var(--shadow), + inset 0 1px 0 var(--highlight); } .bn-ak-button:not(:active):hover { - --border: rgb(0 0 0/33%); + --border: rgb(0 0 0/33%); } .bn-ak-button:where(.dark, .dark *):not(:active):hover { - --border: rgb(255 255 255/25%); + --border: rgb(255 255 255/25%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-secondary { - background-color: transparent; - color: currentColor; - box-shadow: none; + background-color: transparent; + color: currentColor; + box-shadow: none; } .bn-ak-secondary:hover { - background-color: hsl(204 4% 0% / 0.05); + background-color: hsl(204 4% 0% / 0.05); } .bn-ak-secondary:where(.dark, .dark *) { - background-color: transparent; - box-shadow: none; + background-color: transparent; + box-shadow: none; } .bn-ak-secondary:hover:where(.dark, .dark *) { - background-color: hsl(204 20% 100% / 0.05); + background-color: hsl(204 20% 100% / 0.05); } .bn-ak-secondary:active:where(.dark, .dark *), .bn-ak-secondary[data-active]:where(.dark, .dark *) { - box-shadow: none; + box-shadow: none; } .bn-ak-toolbar { - display: flex; - max-width: 100%; - align-items: center; - gap: 0.25rem; - overflow-x: auto; - border-radius: 0.5rem; - background-color: hsl(204 20% 100%); - padding: 0.25rem; - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.1), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + display: flex; + max-width: 100%; + align-items: center; + gap: 0.25rem; + overflow-x: auto; + border-radius: 0.5rem; + background-color: hsl(204 20% 100%); + padding: 0.25rem; + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.1), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-toolbar:where(.dark, .dark *) { - background-color: hsl(204 4% 16%); - box-shadow: - 0 1px 3px 0 rgb(0 0 0 / 0.25), - 0 1px 2px -1px rgb(0 0 0 / 0.1); + background-color: hsl(204 4% 16%); + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.25), + 0 1px 2px -1px rgb(0 0 0 / 0.1); } .bn-ak-separator { - height: 2rem; - border-right-width: 1px; - border-color: hsl(204 20% 88%); + height: 2rem; + border-right-width: 1px; + border-color: hsl(204 20% 88%); } .bn-ak-separator:where(.dark, .dark *) { - border-color: hsl(204 4% 28%); + border-color: hsl(204 4% 28%); } /* https://ariakit.org/components/tooltip */ .bn-ak-tooltip { - z-index: 50; - cursor: default; - border-radius: 0.375rem; - border-width: 1px; - border-color: hsl(204 20% 82%); - background-color: hsl(204 20% 94%); - padding-top: 0.25rem; - padding-bottom: 0.25rem; - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - line-height: 1.25rem; - color: black; - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + z-index: 50; + cursor: default; + border-radius: 0.375rem; + border-width: 1px; + border-color: hsl(204 20% 82%); + background-color: hsl(204 20% 94%); + padding-top: 0.25rem; + padding-bottom: 0.25rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: black; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); } .bn-ak-tooltip:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: white; - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.15); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: white; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.15); } .bn-ak-link { - font-weight: 500; - color: hsl(204 100% 35%); - text-decoration-line: underline; - text-decoration-thickness: 1px; - text-underline-offset: 0.25em; + font-weight: 500; + color: hsl(204 100% 35%); + text-decoration-line: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.25em; } .bn-ak-link:hover { - text-decoration-thickness: 3px; + text-decoration-thickness: 3px; } .bn-ak-link:where(.dark, .dark *) { - color: hsl(204 100% 64%); + color: hsl(204 100% 64%); } /* https://ariakit.org/components/hovercard */ @@ -1061,129 +1060,129 @@ responsible for the majority of the styling. */ /*}*/ .bn-ak-primary { - --border: rgba(0, 0, 0, 0.15); - --highlight: rgba(255, 255, 255, 0.25); - --shadow: rgba(0, 0, 0, 0.15); - background-color: hsl(204 100% 40%); - color: white; + --border: rgba(0, 0, 0, 0.15); + --highlight: rgba(255, 255, 255, 0.25); + --shadow: rgba(0, 0, 0, 0.15); + background-color: hsl(204 100% 40%); + color: white; } .bn-ak-primary:hover { - --border: rgba(0, 0, 0, 0.35); - background-color: hsl(204 100% 35%); + --border: rgba(0, 0, 0, 0.35); + background-color: hsl(204 100% 35%); } .bn-ak-primary:where(.dark, .dark *) { - --border: rgba(255, 255, 255, 0.25); - --highlight: rgba(255, 255, 255, 0.1); - --shadow: rgba(0, 0, 0, 0.25); - background-color: hsl(204 100% 35%); + --border: rgba(255, 255, 255, 0.25); + --highlight: rgba(255, 255, 255, 0.1); + --shadow: rgba(0, 0, 0, 0.25); + background-color: hsl(204 100% 35%); } .bn-ak-primary:hover:where(.dark, .dark *) { - --border: rgba(255, 255, 255, 0.45); - background-color: hsl(204 100% 40%); + --border: rgba(255, 255, 255, 0.45); + background-color: hsl(204 100% 40%); } .bn-ak-button[aria-disabled="true"] { - opacity: 0.5; + opacity: 0.5; } .bn-ak-button[data-focus-visible] { - outline-style: solid; + outline-style: solid; } .bn-ak-button:active, .bn-ak-button[data-active] { - padding-top: 0.125rem; - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 2px 0 var(--border); + padding-top: 0.125rem; + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } @media (min-width: 640px) { - .bn-ak-button { - gap: 0.5rem; - } + .bn-ak-button { + gap: 0.5rem; + } } .bn-ak-button:active:where(.dark, .dark *), .bn-ak-button[data-active]:where(.dark, .dark *) { - box-shadow: - inset 0 0 0 1px var(--border), - inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-ak-flat { - box-shadow: none; + box-shadow: none; } .bn-ak-flat:where(.dark, .dark *) { - box-shadow: none; + box-shadow: none; } .bn-ak-flat:active:where(.dark, .dark *), .bn-ak-flat[data-active]:where(.dark, .dark *) { - box-shadow: none; + box-shadow: none; } .bn-ak-anchor { - font-weight: 500; - color: hsl(204 100% 35%); - text-decoration-line: underline; - text-underline-offset: 0.25em; - text-decoration-skip-ink: none; + font-weight: 500; + color: hsl(204 100% 35%); + text-decoration-line: underline; + text-underline-offset: 0.25em; + text-decoration-skip-ink: none; } .bn-ak-anchor:hover { - text-decoration-thickness: 3px; + text-decoration-thickness: 3px; } .bn-ak-anchor:where(.dark, .dark *) { - color: hsl(204 100% 64%); + color: hsl(204 100% 64%); } .bn-ak-hovercard { - position: relative; - z-index: 50; - display: flex; - width: 300px; - flex-direction: column; - gap: 0.5rem; - border-radius: 0.5rem; - border-width: 1px; - border-style: solid; - border-color: hsl(204 20% 88%); - background-color: white; - padding: 1rem; - color: black; - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.1), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + position: relative; + z-index: 50; + display: flex; + width: 300px; + flex-direction: column; + gap: 0.5rem; + border-radius: 0.5rem; + border-width: 1px; + border-style: solid; + border-color: hsl(204 20% 88%); + background-color: white; + padding: 1rem; + color: black; + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.1), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-hovercard:focus-visible, .bn-ak-hovercard[data-focus-visible] { - outline: 2px solid hsl(204 100% 40%); - outline-offset: 2px; + outline: 2px solid hsl(204 100% 40%); + outline-offset: 2px; } .bn-ak-hovercard:where(.dark, .dark *) { - border-color: hsl(204 4% 24%); - background-color: hsl(204 4% 16%); - color: white; - box-shadow: - 0 10px 15px -3px rgb(0 0 0 / 0.25), - 0 4px 6px -4px rgb(0 0 0 / 0.1); + border-color: hsl(204 4% 24%); + background-color: hsl(204 4% 16%); + color: white; + box-shadow: + 0 10px 15px -3px rgb(0 0 0 / 0.25), + 0 4px 6px -4px rgb(0 0 0 / 0.1); } .bn-ak-avatar { - width: 4rem; - border-radius: 9999px; + width: 4rem; + border-radius: 9999px; } .bn-ak-username { - font-size: 1.125rem; - line-height: 1.75rem; - font-weight: 600; -} \ No newline at end of file + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 600; +} diff --git a/packages/ariakit/src/badge/Badge.tsx b/packages/ariakit/src/badge/Badge.tsx index 92985ac251..43b6cdd7d5 100644 --- a/packages/ariakit/src/badge/Badge.tsx +++ b/packages/ariakit/src/badge/Badge.tsx @@ -33,12 +33,13 @@ export const Badge = forwardRef< className={mergeCSSClasses( className, "bn-ak-badge bn-ak-button", - isSelected && "bn-ak-primary" + isSelected && "bn-ak-primary", )} aria-selected={isSelected === true} onClick={(event) => onClick?.(event)} onMouseEnter={onMouseEnter} - ref={ref}> + ref={ref} + > {icon} {text} @@ -70,7 +71,8 @@ export const BadgeGroup = forwardRef< return ( + ref={ref} + > {children} ); diff --git a/packages/ariakit/src/comments/Card.tsx b/packages/ariakit/src/comments/Card.tsx index a4d61ea62c..c1c98066d8 100644 --- a/packages/ariakit/src/comments/Card.tsx +++ b/packages/ariakit/src/comments/Card.tsx @@ -26,12 +26,13 @@ export const Card = forwardRef< className={mergeCSSClasses( className, "bn-ak-hovercard", - selected && "selected" + selected && "selected", )} onFocus={onFocus} onBlur={onBlur} tabIndex={tabIndex} - ref={ref}> + ref={ref} + > {headerText &&
{headerText}
} {children} @@ -49,7 +50,8 @@ export const CardSection = forwardRef< return ( + ref={ref} + > {children} ); @@ -67,9 +69,10 @@ export const ExpandSectionsPrompt = forwardRef< + ref={ref} + > {children} ); diff --git a/packages/ariakit/src/comments/Comment.tsx b/packages/ariakit/src/comments/Comment.tsx index 9fee199a16..a1d1429109 100644 --- a/packages/ariakit/src/comments/Comment.tsx +++ b/packages/ariakit/src/comments/Comment.tsx @@ -73,7 +73,8 @@ export const Comment = forwardRef< ref={ref} className={className} onMouseEnter={() => setHovered(true)} - onMouseLeave={() => setHovered(false)}> + onMouseLeave={() => setHovered(false)} + > {doShowActions ? ( + }} + > {actions} ) : null} diff --git a/packages/ariakit/src/comments/Editor.tsx b/packages/ariakit/src/comments/Editor.tsx index fa95b4a260..b2f71e5c14 100644 --- a/packages/ariakit/src/comments/Editor.tsx +++ b/packages/ariakit/src/comments/Editor.tsx @@ -30,7 +30,8 @@ export const Editor = forwardRef< editable={editable} ref={ref} onFocus={onFocus} - onBlur={onBlur}> + onBlur={onBlur} + > @@ -40,7 +41,7 @@ export const Editor = forwardRef< const CustomFormattingToolbar = () => { const items = getFormattingToolbarItems([]).filter( - (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton" + (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton", ); return ( {items} diff --git a/packages/ariakit/src/menu/Button.tsx b/packages/ariakit/src/menu/Button.tsx index 04ad11500a..5c288dcecc 100644 --- a/packages/ariakit/src/menu/Button.tsx +++ b/packages/ariakit/src/menu/Button.tsx @@ -32,11 +32,12 @@ export const MenuButton = forwardRef< aria-label={label} className={mergeCSSClasses( "bn-ak-button bn-ak-secondary", - className || "" + className || "", )} ref={ref} onClick={onClick} - {...rest}> + {...rest} + > {icon} {children} diff --git a/packages/ariakit/src/menu/Menu.tsx b/packages/ariakit/src/menu/Menu.tsx index fffccb1abd..c134fd5e5c 100644 --- a/packages/ariakit/src/menu/Menu.tsx +++ b/packages/ariakit/src/menu/Menu.tsx @@ -28,7 +28,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => { + virtualFocus={true} + > {children} ); @@ -51,7 +52,8 @@ export const MenuDropdown = forwardRef< + ref={ref} + > {children} ); @@ -72,7 +74,8 @@ export const MenuItem = forwardRef< render={} className={mergeCSSClasses("bn-ak-menu-item", className || "")} ref={ref} - onClick={onClick}> + onClick={onClick} + > {icon} {children} @@ -84,7 +87,8 @@ export const MenuItem = forwardRef< + onClick={onClick} + > {icon} {children} {checked !== undefined && } @@ -103,14 +107,15 @@ export const MenuLabel = forwardRef< return ( + ref={ref} + > {children} ); }); export const MenuTrigger = ( - props: ComponentProps["Generic"]["Menu"]["Trigger"] + props: ComponentProps["Generic"]["Menu"]["Trigger"], ) => { const { children, sub, ...rest } = props; diff --git a/packages/ariakit/src/panel/Panel.tsx b/packages/ariakit/src/panel/Panel.tsx index 81076c9707..376f04a534 100644 --- a/packages/ariakit/src/panel/Panel.tsx +++ b/packages/ariakit/src/panel/Panel.tsx @@ -27,7 +27,8 @@ export const Panel = forwardRef< return (
+ ref={ref} + > + }} + > {/*{loading && }*/} diff --git a/packages/ariakit/src/panel/PanelButton.tsx b/packages/ariakit/src/panel/PanelButton.tsx index 8488809dfc..b793112416 100644 --- a/packages/ariakit/src/panel/PanelButton.tsx +++ b/packages/ariakit/src/panel/PanelButton.tsx @@ -17,7 +17,8 @@ export const PanelButton = forwardRef< className={mergeCSSClasses("bn-ak-button", className || "")} onClick={onClick} aria-label={label} - ref={ref}> + ref={ref} + > {children} ); diff --git a/packages/ariakit/src/popover/Popover.tsx b/packages/ariakit/src/popover/Popover.tsx index 9f6bb28950..8e9cdc0d43 100644 --- a/packages/ariakit/src/popover/Popover.tsx +++ b/packages/ariakit/src/popover/Popover.tsx @@ -32,16 +32,17 @@ export const PopoverContent = forwardRef< className={mergeCSSClasses( "bn-ak-popover", className || "", - variant === "panel-popover" ? "bn-ak-panel-popover" : "" + variant === "panel-popover" ? "bn-ak-panel-popover" : "", )} - ref={ref}> + ref={ref} + > {children} ); }); export const Popover = ( - props: ComponentProps["Generic"]["Popover"]["Root"] + props: ComponentProps["Generic"]["Popover"]["Root"], ) => { const { children, opened, position, ...rest } = props; diff --git a/packages/ariakit/src/sideMenu/SideMenuButton.tsx b/packages/ariakit/src/sideMenu/SideMenuButton.tsx index 3b0cb9ce9b..fbf2aac8dc 100644 --- a/packages/ariakit/src/sideMenu/SideMenuButton.tsx +++ b/packages/ariakit/src/sideMenu/SideMenuButton.tsx @@ -32,11 +32,12 @@ export const SideMenuButton = forwardRef< aria-label={label} className={mergeCSSClasses( "bn-ak-button bn-ak-secondary", - className || "" + className || "", )} ref={ref} onClick={onClick} - {...rest}> + {...rest} + > {icon} {children} diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index 2de17b435b..c1ec4bc105 100644 --- a/packages/ariakit/src/style.css +++ b/packages/ariakit/src/style.css @@ -23,11 +23,15 @@ .bn-toolbar .bn-ak-button[data-selected] { padding-top: 0.125rem; - box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--border); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--border); } .bn-toolbar .bn-ak-button[data-selected]:where(.dark, .dark *) { - box-shadow: inset 0 0 0 1px var(--border), inset 0 1px 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 1px 1px 1px var(--shadow); } .bn-toolbar .bn-ak-popover { @@ -89,8 +93,11 @@ --border: rgb(0 0 0/13%); --highlight: rgb(255 255 255/20%); --shadow: rgb(0 0 0/10%); - box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight), - inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow); + box-shadow: + inset 0 0 0 1px var(--border), + inset 0 2px 0 var(--highlight), + inset 0 -1px 0 var(--shadow), + 0 1px 1px var(--shadow); font-size: 0.7rem; border-radius: 4px; padding-inline: 4px; @@ -246,7 +253,7 @@ .bn-ak-author-info { align-items: center; display: flex; - gap: 16px + gap: 16px; } .bn-ariakit .bn-comment-editor .bn-editor { @@ -338,4 +345,4 @@ .bn-ariakit .bn-thread.selected .bn-ak-author-info, .bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt { color: var(--bn-colors-selected-text); -} \ No newline at end of file +} diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx index fcdac15661..ee90e4559f 100644 --- a/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx +++ b/packages/ariakit/src/suggestionMenu/SuggestionMenu.tsx @@ -17,7 +17,8 @@ export const SuggestionMenu = forwardRef< className={mergeCSSClasses("bn-ak-menu", className || "")} id={id} role="listbox" - ref={ref}> + ref={ref} + > {children} ); diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx index 82eee48bef..9859ffb7d2 100644 --- a/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx +++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuEmptyItem.tsx @@ -13,7 +13,8 @@ export const SuggestionMenuEmptyItem = forwardRef< return (
+ ref={ref} + >
{children}
); diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx index 8acf330c3a..fab49329f4 100644 --- a/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx +++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuItem.tsx @@ -19,7 +19,7 @@ export const SuggestionMenuItem = forwardRef< const overflow = elementOverflow( itemRef.current, - document.querySelector(".bn-suggestion-menu")! + document.querySelector(".bn-suggestion-menu")!, ); if (overflow === "top") { @@ -36,11 +36,13 @@ export const SuggestionMenuItem = forwardRef< id={id} onClick={onClick} role="option" - aria-selected={isSelected || undefined}> + aria-selected={isSelected || undefined} + > {item.icon && (
+ data-position="left" + > {item.icon}
)} @@ -53,7 +55,8 @@ export const SuggestionMenuItem = forwardRef< {item.badge && (
+ className="bn-ak-suggestion-menu-item-section" + >
{item.badge}
)} diff --git a/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx b/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx index b4b563640d..fc781c2b50 100644 --- a/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx +++ b/packages/ariakit/src/suggestionMenu/SuggestionMenuLabel.tsx @@ -13,7 +13,8 @@ export const SuggestionMenuLabel = forwardRef< return (
+ ref={ref} + > {children}
); diff --git a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index b61454efe3..5bfa4e0141 100644 --- a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,8 @@ export const GridSuggestionMenu = forwardRef< style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any} ref={ref} id={id} - role="grid"> + role="grid" + > {children}
); diff --git a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx index 390cbb80e7..2d2c086ac6 100644 --- a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx +++ b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx @@ -14,7 +14,8 @@ export const GridSuggestionMenuEmptyItem = forwardRef<
+ ref={ref} + >
{children}
); diff --git a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx index 75624ede1e..f1b0346e38 100644 --- a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx +++ b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx @@ -19,7 +19,7 @@ export const GridSuggestionMenuItem = forwardRef< const overflow = elementOverflow( itemRef.current, - document.querySelector(".bn-grid-suggestion-menu")! + document.querySelector(".bn-grid-suggestion-menu")!, ); if (overflow === "top") { @@ -36,7 +36,8 @@ export const GridSuggestionMenuItem = forwardRef< id={id} role="option" onClick={onClick} - aria-selected={isSelected || undefined}> + aria-selected={isSelected || undefined} + > {item.icon}
); diff --git a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx index e78431e2ab..ab5d7dcd54 100644 --- a/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx +++ b/packages/ariakit/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuLoader.tsx @@ -19,7 +19,8 @@ export const GridSuggestionMenuLoader = forwardRef<
+ ref={ref} + > {children}
); diff --git a/packages/ariakit/src/tableHandle/ExtendButton.tsx b/packages/ariakit/src/tableHandle/ExtendButton.tsx index 67b1639056..f023837522 100644 --- a/packages/ariakit/src/tableHandle/ExtendButton.tsx +++ b/packages/ariakit/src/tableHandle/ExtendButton.tsx @@ -18,12 +18,13 @@ export const ExtendButton = forwardRef< + {...rest} + > {children} ); diff --git a/packages/ariakit/src/tableHandle/TableHandle.tsx b/packages/ariakit/src/tableHandle/TableHandle.tsx index fe480c8b4a..ace181fac4 100644 --- a/packages/ariakit/src/tableHandle/TableHandle.tsx +++ b/packages/ariakit/src/tableHandle/TableHandle.tsx @@ -27,7 +27,7 @@ export const TableHandle = forwardRef< + {...rest} + > {children} ); diff --git a/packages/ariakit/src/toolbar/Toolbar.tsx b/packages/ariakit/src/toolbar/Toolbar.tsx index 9bed2b250b..be498bc6ed 100644 --- a/packages/ariakit/src/toolbar/Toolbar.tsx +++ b/packages/ariakit/src/toolbar/Toolbar.tsx @@ -25,9 +25,10 @@ export const Toolbar = forwardRef( className={mergeCSSClasses("bn-ak-toolbar", className || "")} ref={ref} onMouseEnter={onMouseEnter} - onMouseLeave={onMouseLeave}> + onMouseLeave={onMouseLeave} + > {children} ); - } + }, ); diff --git a/packages/ariakit/src/toolbar/ToolbarButton.tsx b/packages/ariakit/src/toolbar/ToolbarButton.tsx index 5042e64f19..ad4e15f0a9 100644 --- a/packages/ariakit/src/toolbar/ToolbarButton.tsx +++ b/packages/ariakit/src/toolbar/ToolbarButton.tsx @@ -43,7 +43,7 @@ export const ToolbarButton = forwardRef( aria-label={label} className={mergeCSSClasses( "bn-ak-button bn-ak-secondary", - className || "" + className || "", )} // Needed as Safari doesn't focus button elements on mouse down // unlike other browsers. @@ -57,7 +57,8 @@ export const ToolbarButton = forwardRef( data-selected={isSelected ? "true" : undefined} disabled={isDisabled || false} ref={ref} - {...rest}> + {...rest} + > {icon} {children} @@ -69,5 +70,5 @@ export const ToolbarButton = forwardRef( ); - } + }, ); diff --git a/packages/ariakit/src/toolbar/ToolbarSelect.tsx b/packages/ariakit/src/toolbar/ToolbarSelect.tsx index 83d0cf8bd7..f596cbbae6 100644 --- a/packages/ariakit/src/toolbar/ToolbarSelect.tsx +++ b/packages/ariakit/src/toolbar/ToolbarSelect.tsx @@ -32,18 +32,21 @@ export const ToolbarSelect = forwardRef< className={"bn-ak-button bn-ak-secondary"} disabled={isDisabled} aria-label="Text alignment" - render={}> + render={} + > {selectedItem.icon} {selectedItem.text} + gutter={4} + > {items.map((option) => ( + value={option.text} + > {option.icon} {option.text} {option.text === selectedItem.text && } diff --git a/packages/core/src/api/README.md b/packages/core/src/api/README.md index 2f7465ed67..0633c57156 100644 --- a/packages/core/src/api/README.md +++ b/packages/core/src/api/README.md @@ -5,4 +5,4 @@ Implements the BlockNote API surface - `blockManipulation`: API to insert / update / remove blocks - `exporters`: exporting to HTML / markdown / other formats - `nodeConversions`: internal API for converting between BlockNote Schema (Blocks) and Prosemirror (Nodes) -- `parsers`: importing from HTML / markdown / other formats \ No newline at end of file +- `parsers`: importing from HTML / markdown / other formats diff --git a/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.test.ts index 789e31b499..409f0e6abb 100644 --- a/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.test.ts +++ b/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.test.ts @@ -12,17 +12,17 @@ function insertBlocks( editor: BlockNoteEditor, blocksToInsert: PartialBlock[], referenceBlock: BlockIdentifier, - placement: "before" | "after" = "before" + placement: "before" | "after" = "before", ) { return editor.transact((tr) => - insertBlocksTr(tr, blocksToInsert, referenceBlock, placement) + insertBlocksTr(tr, blocksToInsert, referenceBlock, placement), ); } describe("Test insertBlocks", () => { it("Insert single basic block before (without type)", () => { expect( - insertBlocks(getEditor(), [{ content: "test" }], "paragraph-0", "before") + insertBlocks(getEditor(), [{ content: "test" }], "paragraph-0", "before"), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -34,8 +34,8 @@ describe("Test insertBlocks", () => { getEditor(), [{ type: "paragraph" }], "paragraph-0", - "before" - ) + "before", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -43,7 +43,12 @@ describe("Test insertBlocks", () => { it("Insert single basic block after", () => { expect( - insertBlocks(getEditor(), [{ type: "paragraph" }], "paragraph-0", "after") + insertBlocks( + getEditor(), + [{ type: "paragraph" }], + "paragraph-0", + "after", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -59,8 +64,8 @@ describe("Test insertBlocks", () => { { type: "paragraph", content: "Inserted paragraph 3" }, ], "paragraph-0", - "before" - ) + "before", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -76,8 +81,8 @@ describe("Test insertBlocks", () => { { type: "paragraph", content: "Inserted paragraph 3" }, ], "paragraph-0", - "after" - ) + "after", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -119,8 +124,8 @@ describe("Test insertBlocks", () => { }, ], "paragraph-0", - "before" - ) + "before", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -162,8 +167,8 @@ describe("Test insertBlocks", () => { }, ], "paragraph-0", - "after" - ) + "after", + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); diff --git a/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.ts b/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.ts index 0863484df0..0daf3a4517 100644 --- a/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.ts +++ b/packages/core/src/api/blockManipulation/commands/insertBlocks/insertBlocks.ts @@ -17,18 +17,18 @@ import { getPmSchema } from "../../../pmUtil.js"; export function insertBlocks< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( tr: Transaction, blocksToInsert: PartialBlock[], referenceBlock: BlockIdentifier, - placement: "before" | "after" = "before" + placement: "before" | "after" = "before", ): Block[] { const id = typeof referenceBlock === "string" ? referenceBlock : referenceBlock.id; const pmSchema = getPmSchema(tr); const nodesToInsert = blocksToInsert.map((block) => - blockToNode(block, pmSchema) + blockToNode(block, pmSchema), ); const posInfo = getNodeById(id, tr.doc); @@ -42,13 +42,13 @@ export function insertBlocks< } tr.step( - new ReplaceStep(pos, pos, new Slice(Fragment.from(nodesToInsert), 0, 0)) + new ReplaceStep(pos, pos, new Slice(Fragment.from(nodesToInsert), 0, 0)), ); // Now that the `PartialBlock`s have been converted to nodes, we can // re-convert them into full `Block`s. const insertedBlocks = nodesToInsert.map((node) => - nodeToBlock(node, pmSchema) + nodeToBlock(node, pmSchema), ); return insertedBlocks; diff --git a/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts index dbcd1f568b..57ec776d3a 100644 --- a/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts +++ b/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.test.ts @@ -8,13 +8,13 @@ const getEditor = setupTestEnv(); function mergeBlocks(posBetweenBlocks: number) { return getEditor()._tiptapEditor.commands.command( - mergeBlocksCommand(posBetweenBlocks) + mergeBlocksCommand(posBetweenBlocks), ); } function getPosBeforeSelectedBlock() { return getEditor().transact( - (tr) => getBlockInfoFromTransaction(tr).bnBlock.beforePos + (tr) => getBlockInfoFromTransaction(tr).bnBlock.beforePos, ); } @@ -63,7 +63,7 @@ describe("Test mergeBlocks", () => { getEditor().setTextCursorPosition("paragraph-0", "end"); const firstBlockEndOffset = getEditor().transact( - (tr) => tr.selection.$anchor.parentOffset + (tr) => tr.selection.$anchor.parentOffset, ); getEditor().setTextCursorPosition("paragraph-1"); diff --git a/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.ts b/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.ts index 9345287faa..50f8aa346c 100644 --- a/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.ts +++ b/packages/core/src/api/blockManipulation/commands/mergeBlocks/mergeBlocks.ts @@ -20,11 +20,11 @@ export const getParentBlockInfo = (doc: Node, beforePos: number) => { // get start pos of parent const parentBeforePos = $pos.posAtIndex( $pos.index($pos.depth - 1), - $pos.depth - 1 + $pos.depth - 1, ); const parentBlockInfo = getBlockInfoFromResolvedPos( - doc.resolve(parentBeforePos) + doc.resolve(parentBeforePos), ); return parentBlockInfo; }; @@ -45,7 +45,7 @@ export const getPrevBlockInfo = (doc: Node, beforePos: number) => { const prevBlockBeforePos = $pos.posAtIndex(indexInParent - 1); const prevBlockInfo = getBlockInfoFromResolvedPos( - doc.resolve(prevBlockBeforePos) + doc.resolve(prevBlockBeforePos), ); return prevBlockInfo; }; @@ -86,12 +86,12 @@ const mergeBlocks = ( state: EditorState, dispatch: ((args?: any) => any) | undefined, prevBlockInfo: BlockInfo, - nextBlockInfo: BlockInfo + nextBlockInfo: BlockInfo, ) => { // Un-nests all children of the next block. if (!nextBlockInfo.isBlockContainer) { throw new Error( - `Attempted to merge block at position ${nextBlockInfo.bnBlock.beforePos} into previous block at position ${prevBlockInfo.bnBlock.beforePos}, but next block is not a block container` + `Attempted to merge block at position ${nextBlockInfo.bnBlock.beforePos} into previous block at position ${prevBlockInfo.bnBlock.beforePos}, but next block is not a block container`, ); } @@ -99,10 +99,10 @@ const mergeBlocks = ( // group nodes. if (nextBlockInfo.childContainer) { const childBlocksStart = state.doc.resolve( - nextBlockInfo.childContainer.beforePos + 1 + nextBlockInfo.childContainer.beforePos + 1, ); const childBlocksEnd = state.doc.resolve( - nextBlockInfo.childContainer.afterPos - 1 + nextBlockInfo.childContainer.afterPos - 1, ); const childBlocksRange = childBlocksStart.blockRange(childBlocksEnd); @@ -118,7 +118,7 @@ const mergeBlocks = ( if (dispatch) { if (!prevBlockInfo.isBlockContainer) { throw new Error( - `Attempted to merge block at position ${nextBlockInfo.bnBlock.beforePos} into previous block at position ${prevBlockInfo.bnBlock.beforePos}, but previous block is not a block container` + `Attempted to merge block at position ${nextBlockInfo.bnBlock.beforePos} into previous block at position ${prevBlockInfo.bnBlock.beforePos}, but previous block is not a block container`, ); } @@ -126,8 +126,8 @@ const mergeBlocks = ( dispatch( state.tr.delete( prevBlockInfo.blockContent.afterPos - 1, - nextBlockInfo.blockContent.beforePos + 1 - ) + nextBlockInfo.blockContent.beforePos + 1, + ), ); } @@ -148,7 +148,7 @@ export const mergeBlocksCommand = const prevBlockInfo = getPrevBlockInfo( state.doc, - nextBlockInfo.bnBlock.beforePos + nextBlockInfo.bnBlock.beforePos, ); if (!prevBlockInfo) { @@ -157,7 +157,7 @@ export const mergeBlocksCommand = const bottomNestedBlockInfo = getBottomNestedBlockInfo( state.doc, - prevBlockInfo + prevBlockInfo, ); if (!canMerge(bottomNestedBlockInfo, nextBlockInfo)) { diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts index 5a67b7b46c..8c637d5985 100644 --- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts +++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.test.ts @@ -14,11 +14,11 @@ const getEditor = setupTestEnv(); function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") { const blockInfo = getEditor().transact((tr) => - getBlockInfoFromTransaction(tr) + getBlockInfoFromTransaction(tr), ); if (!blockInfo.isBlockContainer) { throw new Error( - `Selection points to a ${blockInfo.blockNoteType} node, not a blockContainer node` + `Selection points to a ${blockInfo.blockNoteType} node, not a blockContainer node`, ); } const { blockContent } = blockInfo; @@ -30,13 +30,13 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") { CellSelection.create( tr.doc, tr.doc.resolve(blockContent.beforePos + 3).before(), - tr.doc.resolve(blockContent.afterPos - 3).before() - ) - ) + tr.doc.resolve(blockContent.afterPos - 3).before(), + ), + ), ); } else if (selectionType === "node") { editor.transact((tr) => - tr.setSelection(NodeSelection.create(tr.doc, blockContent.beforePos)) + tr.setSelection(NodeSelection.create(tr.doc, blockContent.beforePos)), ); } else { editor.transact((tr) => @@ -44,9 +44,9 @@ function makeSelectionSpanContent(selectionType: "text" | "node" | "cell") { TextSelection.create( tr.doc, blockContent.beforePos + 1, - blockContent.afterPos - 1 - ) - ) + blockContent.afterPos - 1, + ), + ), ); } } @@ -63,7 +63,7 @@ describe("Test moveSelectedBlockAndSelection", () => { makeSelectionSpanContent("text"); expect( - selection.eq(getEditor().transact((tr) => tr.selection)) + selection.eq(getEditor().transact((tr) => tr.selection)), ).toBeTruthy(); }); @@ -78,7 +78,7 @@ describe("Test moveSelectedBlockAndSelection", () => { makeSelectionSpanContent("node"); expect( - selection.eq(getEditor().transact((tr) => tr.selection)) + selection.eq(getEditor().transact((tr) => tr.selection)), ).toBeTruthy(); }); @@ -93,7 +93,7 @@ describe("Test moveSelectedBlockAndSelection", () => { makeSelectionSpanContent("cell"); expect( - selection.eq(getEditor().transact((tr) => tr.selection)) + selection.eq(getEditor().transact((tr) => tr.selection)), ).toBeTruthy(); }); @@ -106,7 +106,7 @@ describe("Test moveSelectedBlockAndSelection", () => { getEditor().setSelection("paragraph-1", "paragraph-2"); expect( - selection.eq(getEditor().transact((tr) => tr.selection)) + selection.eq(getEditor().transact((tr) => tr.selection)), ).toBeTruthy(); }); @@ -119,7 +119,7 @@ describe("Test moveSelectedBlockAndSelection", () => { getEditor().setSelection("paragraph-6", "table-0"); expect( - selection.eq(getEditor().transact((tr) => tr.selection)) + selection.eq(getEditor().transact((tr) => tr.selection)), ).toBeTruthy(); }); }); diff --git a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts index acbb5d3973..8d4591123e 100644 --- a/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts +++ b/packages/core/src/api/blockManipulation/commands/moveBlocks/moveBlocks.ts @@ -41,7 +41,7 @@ type BlockSelectionData = ( * @param editor The BlockNote editor instance to get the selection data from. */ function getBlockSelectionData( - editor: BlockNoteEditor + editor: BlockNoteEditor, ): BlockSelectionData { return editor.transact((tr) => { const anchorBlockPosInfo = getNearestBlockPos(tr.doc, tr.selection.anchor); @@ -87,12 +87,12 @@ function getBlockSelectionData( */ function updateBlockSelectionFromData( tr: Transaction, - data: BlockSelectionData + data: BlockSelectionData, ) { const anchorBlockPos = getNodeById(data.anchorBlockId, tr.doc)?.posBeforeNode; if (anchorBlockPos === undefined) { throw new Error( - `Could not find block with ID ${data.anchorBlockId} to update selection` + `Could not find block with ID ${data.anchorBlockId} to update selection`, ); } @@ -101,7 +101,7 @@ function updateBlockSelectionFromData( selection = CellSelection.create( tr.doc, anchorBlockPos + data.anchorCellOffset, - anchorBlockPos + data.headCellOffset + anchorBlockPos + data.headCellOffset, ); } else if (data.type === "node") { selection = NodeSelection.create(tr.doc, anchorBlockPos + 1); @@ -109,14 +109,14 @@ function updateBlockSelectionFromData( const headBlockPos = getNodeById(data.headBlockId, tr.doc)?.posBeforeNode; if (headBlockPos === undefined) { throw new Error( - `Could not find block with ID ${data.headBlockId} to update selection` + `Could not find block with ID ${data.headBlockId} to update selection`, ); } selection = TextSelection.create( tr.doc, anchorBlockPos + data.anchorOffset, - headBlockPos + data.headOffset + headBlockPos + data.headOffset, ); } @@ -130,7 +130,7 @@ function updateBlockSelectionFromData( * @param blocks The blocks to flatten. */ function flattenColumns( - blocks: Block[] + blocks: Block[], ): Block[] { return blocks .map((block) => { @@ -161,7 +161,7 @@ function flattenColumns( export function moveSelectedBlocksAndSelection( editor: BlockNoteEditor, referenceBlock: BlockIdentifier, - placement: "before" | "after" + placement: "before" | "after", ) { // We want this to be a single step in the undo history editor.transact((tr) => { @@ -198,7 +198,7 @@ function checkPlacementIsValid(parentBlock?: Block): boolean { function getMoveUpPlacement( editor: BlockNoteEditor, prevBlock?: Block, - parentBlock?: Block + parentBlock?: Block, ): | { referenceBlock: BlockIdentifier; placement: "before" | "after" } | undefined { @@ -230,7 +230,7 @@ function getMoveUpPlacement( placement === "after" ? referenceBlock : editor.getPrevBlock(referenceBlock), - referenceBlockParent + referenceBlockParent, ); } @@ -250,7 +250,7 @@ function getMoveUpPlacement( function getMoveDownPlacement( editor: BlockNoteEditor, nextBlock?: Block, - parentBlock?: Block + parentBlock?: Block, ): | { referenceBlock: BlockIdentifier; placement: "before" | "after" } | undefined { @@ -282,7 +282,7 @@ function getMoveDownPlacement( placement === "before" ? referenceBlock : editor.getNextBlock(referenceBlock), - referenceBlockParent + referenceBlockParent, ); } @@ -297,7 +297,7 @@ export function moveBlocksUp(editor: BlockNoteEditor) { const moveUpPlacement = getMoveUpPlacement( editor, editor.getPrevBlock(block), - editor.getParentBlock(block) + editor.getParentBlock(block), ); if (!moveUpPlacement) { @@ -307,7 +307,7 @@ export function moveBlocksUp(editor: BlockNoteEditor) { moveSelectedBlocksAndSelection( editor, moveUpPlacement.referenceBlock, - moveUpPlacement.placement + moveUpPlacement.placement, ); }); } @@ -322,7 +322,7 @@ export function moveBlocksDown(editor: BlockNoteEditor) { const moveDownPlacement = getMoveDownPlacement( editor, editor.getNextBlock(block), - editor.getParentBlock(block) + editor.getParentBlock(block), ); if (!moveDownPlacement) { @@ -332,7 +332,7 @@ export function moveBlocksDown(editor: BlockNoteEditor) { moveSelectedBlocksAndSelection( editor, moveDownPlacement.referenceBlock, - moveDownPlacement.placement + moveDownPlacement.placement, ); }); } diff --git a/packages/core/src/api/blockManipulation/commands/nestBlock/nestBlock.ts b/packages/core/src/api/blockManipulation/commands/nestBlock/nestBlock.ts index 9917a9f979..2ef86d71cc 100644 --- a/packages/core/src/api/blockManipulation/commands/nestBlock/nestBlock.ts +++ b/packages/core/src/api/blockManipulation/commands/nestBlock/nestBlock.ts @@ -18,7 +18,7 @@ function sinkListItem(itemType: NodeType, groupType: NodeType) { $to, (node) => node.childCount > 0 && - (node.type.name === "blockGroup" || node.type.name === "column") // change necessary to not look at first item child type + (node.type.name === "blockGroup" || node.type.name === "column"), // change necessary to not look at first item child type ); if (!range) { return false; @@ -38,10 +38,10 @@ function sinkListItem(itemType: NodeType, groupType: NodeType) { const inner = Fragment.from(nestedBefore ? itemType.create() : null); const slice = new Slice( Fragment.from( - itemType.create(null, Fragment.from(groupType.create(null, inner))) // change necessary to create "groupType" instead of parent.type + itemType.create(null, Fragment.from(groupType.create(null, inner))), // change necessary to create "groupType" instead of parent.type ), nestedBefore ? 3 : 1, - 0 + 0, ); const before = range.start; @@ -56,10 +56,10 @@ function sinkListItem(itemType: NodeType, groupType: NodeType) { after, slice, 1, - true - ) + true, + ), ) - .scrollIntoView() + .scrollIntoView(), ); } return true; @@ -70,8 +70,8 @@ export function nestBlock(editor: BlockNoteEditor) { return editor.exec((state, dispatch) => sinkListItem( state.schema.nodes["blockContainer"], - state.schema.nodes["blockGroup"] - )(state, dispatch) + state.schema.nodes["blockGroup"], + )(state, dispatch), ); } diff --git a/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.test.ts b/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.test.ts index 4ba6721b4d..ecdc1e49a2 100644 --- a/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.test.ts +++ b/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.test.ts @@ -11,10 +11,10 @@ const getEditor = setupTestEnv(); function replaceBlocks( editor: BlockNoteEditor, blocksToRemove: BlockIdentifier[], - blocksToInsert: PartialBlock[] + blocksToInsert: PartialBlock[], ) { return editor.transact((tr) => - removeAndInsertBlocks(tr, blocksToRemove, blocksToInsert) + removeAndInsertBlocks(tr, blocksToRemove, blocksToInsert), ); } @@ -29,7 +29,7 @@ describe("Test replaceBlocks", () => { replaceBlocks( getEditor(), ["paragraph-0", "paragraph-1", "paragraph-with-children"], - [] + [], ); expect(getEditor().document).toMatchSnapshot(); @@ -39,7 +39,7 @@ describe("Test replaceBlocks", () => { replaceBlocks( getEditor(), ["paragraph-0", "table-0", "heading-with-everything"], - [] + [], ); expect(getEditor().document).toMatchSnapshot(); @@ -55,7 +55,7 @@ describe("Test replaceBlocks", () => { replaceBlocks( getEditor(), ["paragraph-0", "paragraph-1", "paragraph-with-children"], - [{ type: "paragraph" }] + [{ type: "paragraph" }], ); expect(getEditor().document).toMatchSnapshot(); @@ -65,7 +65,7 @@ describe("Test replaceBlocks", () => { replaceBlocks( getEditor(), ["paragraph-0", "table-0", "heading-with-everything"], - [{ type: "paragraph" }] + [{ type: "paragraph" }], ); expect(getEditor().document).toMatchSnapshot(); @@ -79,7 +79,7 @@ describe("Test replaceBlocks", () => { { type: "paragraph", content: "Inserted paragraph 1" }, { type: "paragraph", content: "Inserted paragraph 2" }, { type: "paragraph", content: "Inserted paragraph 3" }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); @@ -93,7 +93,7 @@ describe("Test replaceBlocks", () => { { type: "paragraph", content: "Inserted paragraph 1" }, { type: "paragraph", content: "Inserted paragraph 2" }, { type: "paragraph", content: "Inserted paragraph 3" }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); @@ -107,7 +107,7 @@ describe("Test replaceBlocks", () => { { type: "paragraph", content: "Inserted paragraph 1" }, { type: "paragraph", content: "Inserted paragraph 2" }, { type: "paragraph", content: "Inserted paragraph 3" }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); @@ -147,7 +147,7 @@ describe("Test replaceBlocks", () => { }, ], }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); @@ -187,7 +187,7 @@ describe("Test replaceBlocks", () => { }, ], }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); @@ -227,7 +227,7 @@ describe("Test replaceBlocks", () => { }, ], }, - ] + ], ); expect(getEditor().document).toMatchSnapshot(); diff --git a/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.ts b/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.ts index 10796c3f61..afa97afe04 100644 --- a/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.ts +++ b/packages/core/src/api/blockManipulation/commands/replaceBlocks/replaceBlocks.ts @@ -14,11 +14,11 @@ import { getPmSchema } from "../../../pmUtil.js"; export function removeAndInsertBlocks< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( tr: Transaction, blocksToRemove: BlockIdentifier[], - blocksToInsert: PartialBlock[] + blocksToInsert: PartialBlock[], ): { insertedBlocks: Block[]; removedBlocks: Block[]; @@ -27,13 +27,13 @@ export function removeAndInsertBlocks< // Converts the `PartialBlock`s to ProseMirror nodes to insert them into the // document. const nodesToInsert: Node[] = blocksToInsert.map((block) => - blockToNode(block, pmSchema) + blockToNode(block, pmSchema), ); const idsOfBlocksToRemove = new Set( blocksToRemove.map((block) => - typeof block === "string" ? block : block.id - ) + typeof block === "string" ? block : block.id, + ), ); const removedBlocks: Block[] = []; @@ -95,13 +95,13 @@ export function removeAndInsertBlocks< throw Error( "Blocks with the following IDs could not be found in the editor: " + - notFoundIds + notFoundIds, ); } // Converts the nodes created from `blocksToInsert` into full `Block`s. const insertedBlocks = nodesToInsert.map((node) => - nodeToBlock(node, pmSchema) + nodeToBlock(node, pmSchema), ); return { insertedBlocks, removedBlocks }; diff --git a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts index 8a6015ffbb..4165ebc98d 100644 --- a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts +++ b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.test.ts @@ -15,17 +15,17 @@ const getEditor = setupTestEnv(); function splitBlock( posInBlock: number, keepType?: boolean, - keepProps?: boolean + keepProps?: boolean, ) { getEditor()._tiptapEditor.commands.command( - splitBlockCommand(posInBlock, keepType, keepProps) + splitBlockCommand(posInBlock, keepType, keepProps), ); } function setSelectionWithOffset( doc: Node, targetBlockId: string, - offset: number + offset: number, ) { const posInfo = getNodeById(targetBlockId, doc); if (!posInfo) { @@ -40,8 +40,8 @@ function setSelectionWithOffset( getEditor().transact((tr) => tr.setSelection( - TextSelection.create(doc, info.blockContent.beforePos + offset + 1) - ) + TextSelection.create(doc, info.blockContent.beforePos + offset + 1), + ), ); } @@ -83,7 +83,7 @@ describe("Test splitBlocks", () => { splitBlock( getEditor().transact((tr) => tr.selection.anchor), - true + true, ); expect(getEditor().document).toMatchSnapshot(); @@ -96,7 +96,7 @@ describe("Test splitBlocks", () => { splitBlock( getEditor().transact((tr) => tr.selection.anchor), - false + false, ); expect(getEditor().document).toMatchSnapshot(); @@ -110,7 +110,7 @@ describe("Test splitBlocks", () => { splitBlock( getEditor().transact((tr) => tr.selection.anchor), false, - true + true, ); expect(getEditor().document).toMatchSnapshot(); @@ -124,7 +124,7 @@ describe("Test splitBlocks", () => { splitBlock( getEditor().transact((tr) => tr.selection.anchor), false, - false + false, ); expect(getEditor().document).toMatchSnapshot(); @@ -138,7 +138,7 @@ describe("Test splitBlocks", () => { splitBlock(getEditor().transact((tr) => tr.selection.anchor)); const bnBlock = getEditor().transact( - (tr) => getBlockInfoFromTransaction(tr).bnBlock + (tr) => getBlockInfoFromTransaction(tr).bnBlock, ); const anchorIsAtStartOfNewBlock = diff --git a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.ts b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.ts index 67b29b7833..6a08ae4254 100644 --- a/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.ts +++ b/packages/core/src/api/blockManipulation/commands/splitBlock/splitBlock.ts @@ -8,7 +8,7 @@ import { export const splitBlockCommand = ( posInBlock: number, keepType?: boolean, - keepProps?: boolean + keepProps?: boolean, ) => { return ({ state, @@ -23,7 +23,7 @@ export const splitBlockCommand = ( if (!info.isBlockContainer) { throw new Error( - `BlockContainer expected when calling splitBlock, position ${posInBlock}` + `BlockContainer expected when calling splitBlock, position ${posInBlock}`, ); } diff --git a/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.test.ts b/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.test.ts index cb738b43b2..0cc82a15a2 100644 --- a/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.test.ts +++ b/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.test.ts @@ -13,7 +13,7 @@ describe("Test updateBlock typing", () => { { // @ts-expect-error invalid type type: "non-existing", - } + }, ); } catch (e) { // ID doesn't exist, which is fine - this is a compile-time check @@ -30,7 +30,7 @@ describe("Test updateBlock typing", () => { // @ts-expect-error invalid type level: 1, }, - } + }, ); } catch (e) { // ID doesn't exist, which is fine - this is a compile-time check @@ -43,7 +43,7 @@ describe("Test updateBlock typing", () => { props: { level: 1, }, - } + }, ); } catch (e) { // ID doesn't exist, which is fine - this is a compile-time check @@ -57,8 +57,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "heading-with-everything", { id: "new-id", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); }); @@ -68,8 +68,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "heading-with-everything", { type: "paragraph", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -82,8 +82,8 @@ describe("Test updateBlock", () => { props: { level: 3, }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -99,8 +99,8 @@ describe("Test updateBlock", () => { textAlignment: "right", textColor: "blue", }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -113,8 +113,8 @@ describe("Test updateBlock", () => { props: { level: undefined, }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -130,8 +130,8 @@ describe("Test updateBlock", () => { textAlignment: undefined, textColor: undefined, }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -142,8 +142,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "heading-with-everything", { content: "New content", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -166,8 +166,8 @@ describe("Test updateBlock", () => { styles: { backgroundColor: "blue" }, }, ], - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -191,8 +191,8 @@ describe("Test updateBlock", () => { ], }, ], - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -236,8 +236,8 @@ describe("Test updateBlock", () => { ], }, ], - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -248,7 +248,7 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "paragraph-0", { type: "table", - }) + }), ); }).toThrow(); }); @@ -258,8 +258,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "table-0", { type: "paragraph", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -284,8 +284,8 @@ describe("Test updateBlock", () => { }, ], }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -297,8 +297,8 @@ describe("Test updateBlock", () => { updateBlock(tr, "table-0", { type: "paragraph", content: "Paragraph", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -309,8 +309,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "paragraph-0", { type: "image", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -321,8 +321,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "image-0", { type: "paragraph", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -334,8 +334,8 @@ describe("Test updateBlock", () => { updateBlock(tr, "image-0", { type: "paragraph", content: "Paragraph", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -346,8 +346,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "image-0", { type: "table", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -399,8 +399,8 @@ describe("Test updateBlock", () => { }, ], }, - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); @@ -411,8 +411,8 @@ describe("Test updateBlock", () => { getEditor().transact((tr) => updateBlock(tr, "table-0", { type: "image", - }) - ) + }), + ), ).toMatchSnapshot(); expect(getEditor().document).toMatchSnapshot(); diff --git a/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.ts b/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.ts index fbea6739d8..8510f8974d 100644 --- a/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.ts +++ b/packages/core/src/api/blockManipulation/commands/updateBlock/updateBlock.ts @@ -31,10 +31,10 @@ import { getPmSchema } from "../../../pmUtil.js"; export const updateBlockCommand = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( posBeforeBlock: number, - block: PartialBlock + block: PartialBlock, ) => { return ({ tr, @@ -53,11 +53,11 @@ export const updateBlockCommand = < const updateBlockTr = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( tr: Transaction, posBeforeBlock: number, - block: PartialBlock + block: PartialBlock, ) => { const blockInfo = getBlockInfoFromResolvedPos(tr.doc.resolve(posBeforeBlock)); @@ -96,8 +96,8 @@ const updateBlockTr = < children: existingBlock.children, // if no children are passed in, use existing children ...block, }, - pmSchema - ) + pmSchema, + ), ); return; @@ -114,7 +114,7 @@ const updateBlockTr = < function updateBlockContentNode< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( block: PartialBlock, tr: Transaction, @@ -125,7 +125,7 @@ function updateBlockContentNode< | { node: PMNode; beforePos: number; afterPos: number } | undefined; blockContent: { node: PMNode; beforePos: number; afterPos: number }; - } + }, ) { const pmSchema = getPmSchema(tr); let content: PMNode[] | "keep" = "keep"; @@ -137,7 +137,7 @@ function updateBlockContentNode< content = inlineContentToNodes( [block.content], pmSchema, - newNodeType.name + newNodeType.name, ); } else if (Array.isArray(block.content)) { // Adds a text node with the provided styles converted into marks to the content, @@ -178,7 +178,7 @@ function updateBlockContentNode< { ...blockInfo.blockContent.node.attrs, ...block.props, - } + }, ); } else { // use replaceWith to replace the content and the block itself @@ -192,8 +192,8 @@ function updateBlockContentNode< ...blockInfo.blockContent.node.attrs, ...block.props, }, - content - ) + content, + ), ); } } @@ -201,7 +201,7 @@ function updateBlockContentNode< function updateChildren< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(block: PartialBlock, tr: Transaction, blockInfo: BlockInfo) { const pmSchema = getPmSchema(tr); if (block.children !== undefined && block.children.length > 0) { @@ -218,8 +218,8 @@ function updateChildren< new ReplaceStep( blockInfo.childContainer.beforePos + 1, blockInfo.childContainer.afterPos - 1, - new Slice(Fragment.from(childNodes), 0, 0) - ) + new Slice(Fragment.from(childNodes), 0, 0), + ), ); } else { if (!blockInfo.isBlockContainer) { @@ -228,7 +228,7 @@ function updateChildren< // Inserts a new blockGroup containing the child nodes created earlier. tr.insert( blockInfo.blockContent.afterPos, - pmSchema.nodes["blockGroup"].createChecked({}, childNodes) + pmSchema.nodes["blockGroup"].createChecked({}, childNodes), ); } } @@ -237,11 +237,11 @@ function updateChildren< export function updateBlock< BSchema extends BlockSchema = any, I extends InlineContentSchema = any, - S extends StyleSchema = any + S extends StyleSchema = any, >( tr: Transaction, blockToUpdate: BlockIdentifier, - update: PartialBlock + update: PartialBlock, ): Block { const id = typeof blockToUpdate === "string" ? blockToUpdate : blockToUpdate.id; diff --git a/packages/core/src/api/blockManipulation/getBlock/getBlock.ts b/packages/core/src/api/blockManipulation/getBlock/getBlock.ts index fe8c607f67..c018c907a5 100644 --- a/packages/core/src/api/blockManipulation/getBlock/getBlock.ts +++ b/packages/core/src/api/blockManipulation/getBlock/getBlock.ts @@ -13,10 +13,10 @@ import { getPmSchema } from "../../pmUtil.js"; export function getBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( doc: Node, - blockIdentifier: BlockIdentifier + blockIdentifier: BlockIdentifier, ): Block | undefined { const id = typeof blockIdentifier === "string" ? blockIdentifier : blockIdentifier.id; @@ -33,10 +33,10 @@ export function getBlock< export function getPrevBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( doc: Node, - blockIdentifier: BlockIdentifier + blockIdentifier: BlockIdentifier, ): Block | undefined { const id = typeof blockIdentifier === "string" ? blockIdentifier : blockIdentifier.id; @@ -59,10 +59,10 @@ export function getPrevBlock< export function getNextBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( doc: Node, - blockIdentifier: BlockIdentifier + blockIdentifier: BlockIdentifier, ): Block | undefined { const id = typeof blockIdentifier === "string" ? blockIdentifier : blockIdentifier.id; @@ -73,7 +73,7 @@ export function getNextBlock< } const $posAfterNode = doc.resolve( - posInfo.posBeforeNode + posInfo.node.nodeSize + posInfo.posBeforeNode + posInfo.node.nodeSize, ); const nodeToConvert = $posAfterNode.nodeAfter; if (!nodeToConvert) { @@ -86,10 +86,10 @@ export function getNextBlock< export function getParentBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( doc: Node, - blockIdentifier: BlockIdentifier + blockIdentifier: BlockIdentifier, ): Block | undefined { const id = typeof blockIdentifier === "string" ? blockIdentifier : blockIdentifier.id; diff --git a/packages/core/src/api/blockManipulation/insertContentAt.ts b/packages/core/src/api/blockManipulation/insertContentAt.ts index 33ee527291..3409583a37 100644 --- a/packages/core/src/api/blockManipulation/insertContentAt.ts +++ b/packages/core/src/api/blockManipulation/insertContentAt.ts @@ -10,7 +10,7 @@ export function insertContentAt( nodes: Node[], options: { updateSelection: boolean; - } = { updateSelection: true } + } = { updateSelection: true }, ) { // don’t dispatch an empty fragment because this can lead to strange errors // if (content.toString() === "<>") { diff --git a/packages/core/src/api/blockManipulation/selections/selection.ts b/packages/core/src/api/blockManipulation/selections/selection.ts index aed087f080..a3019dd802 100644 --- a/packages/core/src/api/blockManipulation/selections/selection.ts +++ b/packages/core/src/api/blockManipulation/selections/selection.ts @@ -17,7 +17,7 @@ import { getBlockNoteSchema, getPmSchema } from "../../pmUtil.js"; export function getSelection< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(tr: Transaction): Selection | undefined { const pmSchema = getPmSchema(tr); // Return undefined if the selection is collapsed or a node is selected. @@ -26,10 +26,10 @@ export function getSelection< } const $startBlockBeforePos = tr.doc.resolve( - getNearestBlockPos(tr.doc, tr.selection.from).posBeforeNode + getNearestBlockPos(tr.doc, tr.selection.from).posBeforeNode, ); const $endBlockBeforePos = tr.doc.resolve( - getNearestBlockPos(tr.doc, tr.selection.to).posBeforeNode + getNearestBlockPos(tr.doc, tr.selection.to).posBeforeNode, ); // Converts the node at the given index and depth around `$startBlockBeforePos` @@ -37,14 +37,14 @@ export function getSelection< // at the depth of `$startBlockBeforePos`. const indexToBlock = ( index: number, - depth?: number + depth?: number, ): Block => { const pos = $startBlockBeforePos.posAtIndex(index, depth); const node = tr.doc.resolve(pos).nodeAfter; if (!node) { throw new Error( - `Error getting selection - node not found at position ${pos}` + `Error getting selection - node not found at position ${pos}`, ); } @@ -120,7 +120,7 @@ export function getSelection< if (blocks.length === 0) { throw new Error( - `Error getting selection - selection doesn't span any blocks (${tr.selection})` + `Error getting selection - selection doesn't span any blocks (${tr.selection})`, ); } @@ -132,7 +132,7 @@ export function getSelection< export function setSelection( tr: Transaction, startBlock: BlockIdentifier, - endBlock: BlockIdentifier + endBlock: BlockIdentifier, ) { const startBlockId = typeof startBlock === "string" ? startBlock : startBlock.id; @@ -142,7 +142,7 @@ export function setSelection( if (startBlockId === endBlockId) { throw new Error( - `Attempting to set selection with the same anchor and head blocks (id ${startBlockId})` + `Attempting to set selection with the same anchor and head blocks (id ${startBlockId})`, ); } const anchorPosInfo = getNodeById(startBlockId, tr.doc); @@ -171,12 +171,12 @@ export function setSelection( anchorBlockConfig.content === "none" ) { throw new Error( - `Attempting to set selection anchor in block without content (id ${startBlockId})` + `Attempting to set selection anchor in block without content (id ${startBlockId})`, ); } if (!headBlockInfo.isBlockContainer || headBlockConfig.content === "none") { throw new Error( - `Attempting to set selection anchor in block without content (id ${endBlockId})` + `Attempting to set selection anchor in block without content (id ${endBlockId})`, ); } @@ -201,7 +201,7 @@ export function setSelection( tableMap.positionAt( tableMap.height - 1, tableMap.width - 1, - headBlockInfo.blockContent.node + headBlockInfo.blockContent.node, ) + 1; const lastCellNodeSize = tr.doc.resolve(lastCellPos).nodeAfter!.nodeSize; diff --git a/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.test.ts b/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.test.ts index 4ad98d0808..21f4578652 100644 --- a/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.test.ts +++ b/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.test.ts @@ -15,7 +15,7 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { }); expect( - getEditor().transact((tr) => getTextCursorPosition(tr)) + getEditor().transact((tr) => getTextCursorPosition(tr)), ).toMatchSnapshot(); }); @@ -25,7 +25,7 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { }); expect( - getEditor().transact((tr) => getTextCursorPosition(tr)) + getEditor().transact((tr) => getTextCursorPosition(tr)), ).toMatchSnapshot(); }); @@ -35,7 +35,7 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { }); expect( - getEditor().transact((tr) => getTextCursorPosition(tr)) + getEditor().transact((tr) => getTextCursorPosition(tr)), ).toMatchSnapshot(); }); @@ -45,7 +45,7 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { }); expect( - getEditor().transact((tr) => getTextCursorPosition(tr)) + getEditor().transact((tr) => getTextCursorPosition(tr)), ).toMatchSnapshot(); }); @@ -55,7 +55,7 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { }); expect( - getEditor().transact((tr) => tr.selection.$from.parentOffset) === 0 + getEditor().transact((tr) => tr.selection.$from.parentOffset) === 0, ).toBeTruthy(); }); @@ -67,8 +67,8 @@ describe("Test getTextCursorPosition & setTextCursorPosition", () => { expect( getEditor().transact((tr) => tr.selection.$from.parentOffset) === getEditor().transact( - (tr) => tr.selection.$from.node().firstChild!.nodeSize - ) + (tr) => tr.selection.$from.node().firstChild!.nodeSize, + ), ).toBeTruthy(); }); }); diff --git a/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts b/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts index 0da001e9cc..19a890976c 100644 --- a/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts +++ b/packages/core/src/api/blockManipulation/selections/textCursorPosition/textCursorPosition.ts @@ -23,7 +23,7 @@ import { getBlockNoteSchema, getPmSchema } from "../../../pmUtil.js"; export function getTextCursorPosition< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(tr: Transaction): TextCursorPosition { const { bnBlock } = getBlockInfoFromTransaction(tr); const pmSchema = getPmSchema(tr.doc); @@ -58,7 +58,7 @@ export function getTextCursorPosition< export function setTextCursorPosition( tr: Transaction, targetBlock: BlockIdentifier, - placement: "start" | "end" = "start" + placement: "start" | "end" = "start", ) { const id = typeof targetBlock === "string" ? targetBlock : targetBlock.id; const pmSchema = getPmSchema(tr.doc); @@ -84,11 +84,11 @@ export function setTextCursorPosition( if (contentType === "inline") { if (placement === "start") { tr.setSelection( - TextSelection.create(tr.doc, blockContent.beforePos + 1) + TextSelection.create(tr.doc, blockContent.beforePos + 1), ); } else { tr.setSelection( - TextSelection.create(tr.doc, blockContent.afterPos - 1) + TextSelection.create(tr.doc, blockContent.afterPos - 1), ); } } else if (contentType === "table") { @@ -97,11 +97,11 @@ export function setTextCursorPosition( // and `tableCell` nodes to get to the `tableParagraph` node we want to // set the selection in. tr.setSelection( - TextSelection.create(tr.doc, blockContent.beforePos + 4) + TextSelection.create(tr.doc, blockContent.beforePos + 4), ); } else { tr.setSelection( - TextSelection.create(tr.doc, blockContent.afterPos - 4) + TextSelection.create(tr.doc, blockContent.afterPos - 4), ); } } else { diff --git a/packages/core/src/api/blockManipulation/tables/tables.test.ts b/packages/core/src/api/blockManipulation/tables/tables.test.ts index 91b8a45dd0..166076ef0f 100644 --- a/packages/core/src/api/blockManipulation/tables/tables.test.ts +++ b/packages/core/src/api/blockManipulation/tables/tables.test.ts @@ -716,35 +716,35 @@ describe("Test getAbsoluteTableCellIndices", () => { row: 0, col: 0, cell: tableWithColspan.content.rows[0].cells[0], - } + }, ); expect(getAbsoluteTableCells({ row: 0, col: 1 }, tableWithColspan)).toEqual( { row: 0, col: 2, cell: tableWithColspan.content.rows[0].cells[1], - } + }, ); expect(getAbsoluteTableCells({ row: 1, col: 0 }, tableWithColspan)).toEqual( { row: 1, col: 0, cell: tableWithColspan.content.rows[1].cells[0], - } + }, ); expect(getAbsoluteTableCells({ row: 1, col: 1 }, tableWithColspan)).toEqual( { row: 1, col: 1, cell: tableWithColspan.content.rows[1].cells[1], - } + }, ); expect(getAbsoluteTableCells({ row: 1, col: 2 }, tableWithColspan)).toEqual( { row: 1, col: 2, cell: tableWithColspan.content.rows[1].cells[2], - } + }, ); }); @@ -754,49 +754,49 @@ describe("Test getAbsoluteTableCellIndices", () => { row: 0, col: 0, cell: tableWithRowspan.content.rows[0].cells[0], - } + }, ); expect(getAbsoluteTableCells({ row: 0, col: 1 }, tableWithRowspan)).toEqual( { row: 0, col: 1, cell: tableWithRowspan.content.rows[0].cells[1], - } + }, ); expect(getAbsoluteTableCells({ row: 0, col: 2 }, tableWithRowspan)).toEqual( { row: 0, col: 2, cell: tableWithRowspan.content.rows[0].cells[2], - } + }, ); expect(getAbsoluteTableCells({ row: 1, col: 0 }, tableWithRowspan)).toEqual( { row: 1, col: 1, cell: tableWithRowspan.content.rows[1].cells[0], - } + }, ); expect(getAbsoluteTableCells({ row: 1, col: 1 }, tableWithRowspan)).toEqual( { row: 1, col: 2, cell: tableWithRowspan.content.rows[1].cells[1], - } + }, ); expect(getAbsoluteTableCells({ row: 2, col: 0 }, tableWithRowspan)).toEqual( { row: 2, col: 0, cell: tableWithRowspan.content.rows[2].cells[0], - } + }, ); expect(getAbsoluteTableCells({ row: 2, col: 1 }, tableWithRowspan)).toEqual( { row: 2, col: 1, cell: tableWithRowspan.content.rows[2].cells[1], - } + }, ); }); @@ -804,8 +804,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 0, col: 0 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 0, col: 0, @@ -814,8 +814,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 0, col: 1 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 0, col: 2, @@ -824,8 +824,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 0, col: 2 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 0, col: 3, @@ -834,8 +834,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 1, col: 0 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 1, col: 2, @@ -844,8 +844,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 1, col: 1 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 1, col: 3, @@ -854,8 +854,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 2, col: 0 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 2, col: 0, @@ -864,8 +864,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 2, col: 1 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 2, col: 1, @@ -874,8 +874,8 @@ describe("Test getAbsoluteTableCellIndices", () => { expect( getAbsoluteTableCells( { row: 2, col: 2 }, - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row: 2, col: 3, @@ -914,42 +914,42 @@ describe("Test getRelativeTableCellIndices", () => { row: 0, col: 0, cell: tableWithColspan.content.rows[0].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 0, col: 1 }, tableWithColspan)).toEqual( { row: 0, col: 0, cell: tableWithColspan.content.rows[0].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 0, col: 2 }, tableWithColspan)).toEqual( { row: 0, col: 1, cell: tableWithColspan.content.rows[0].cells[1], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 0 }, tableWithColspan)).toEqual( { row: 1, col: 0, cell: tableWithColspan.content.rows[1].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 1 }, tableWithColspan)).toEqual( { row: 1, col: 1, cell: tableWithColspan.content.rows[1].cells[1], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 2 }, tableWithColspan)).toEqual( { row: 1, col: 2, cell: tableWithColspan.content.rows[1].cells[2], - } + }, ); }); @@ -959,125 +959,125 @@ describe("Test getRelativeTableCellIndices", () => { row: 0, col: 0, cell: tableWithRowspan.content.rows[0].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 0, col: 1 }, tableWithRowspan)).toEqual( { row: 0, col: 1, cell: tableWithRowspan.content.rows[0].cells[1], - } + }, ); expect(getRelativeTableCells({ row: 0, col: 2 }, tableWithRowspan)).toEqual( { row: 0, col: 2, cell: tableWithRowspan.content.rows[0].cells[2], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 0 }, tableWithRowspan)).toEqual( { row: 0, col: 0, cell: tableWithRowspan.content.rows[0].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 1 }, tableWithRowspan)).toEqual( { row: 1, col: 0, cell: tableWithRowspan.content.rows[1].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 1, col: 2 }, tableWithRowspan)).toEqual( { row: 1, col: 1, cell: tableWithRowspan.content.rows[1].cells[1], - } + }, ); expect(getRelativeTableCells({ row: 2, col: 0 }, tableWithRowspan)).toEqual( { row: 2, col: 0, cell: tableWithRowspan.content.rows[2].cells[0], - } + }, ); expect(getRelativeTableCells({ row: 2, col: 1 }, tableWithRowspan)).toEqual( { row: 2, col: 1, cell: tableWithRowspan.content.rows[2].cells[1], - } + }, ); expect(getRelativeTableCells({ row: 2, col: 2 }, tableWithRowspan)).toEqual( { row: 2, col: 2, cell: tableWithRowspan.content.rows[2].cells[2], - } + }, ); }); it("should resolve absolute table cell indices to relative table cell indices with colspan and rowspan", () => { expect( - getRelativeTableCells({ row: 0, col: 0 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 0, col: 0 }, tableWithColspanAndRowspan), ).toEqual({ row: 0, col: 0, cell: tableWithColspanAndRowspan.content.rows[0].cells[0], }); expect( - getRelativeTableCells({ row: 0, col: 1 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 0, col: 1 }, tableWithColspanAndRowspan), ).toEqual({ row: 0, col: 1, cell: tableWithColspanAndRowspan.content.rows[0].cells[1], }); expect( - getRelativeTableCells({ row: 0, col: 2 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 0, col: 2 }, tableWithColspanAndRowspan), ).toEqual({ row: 0, col: 2, cell: tableWithColspanAndRowspan.content.rows[0].cells[2], }); expect( - getRelativeTableCells({ row: 1, col: 0 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 1, col: 0 }, tableWithColspanAndRowspan), ).toEqual({ row: 0, col: 0, cell: tableWithColspanAndRowspan.content.rows[0].cells[0], }); expect( - getRelativeTableCells({ row: 1, col: 1 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 1, col: 1 }, tableWithColspanAndRowspan), ).toEqual({ row: 1, col: 0, cell: tableWithColspanAndRowspan.content.rows[1].cells[0], }); expect( - getRelativeTableCells({ row: 1, col: 2 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 1, col: 2 }, tableWithColspanAndRowspan), ).toEqual({ row: 1, col: 0, cell: tableWithColspanAndRowspan.content.rows[1].cells[0], }); expect( - getRelativeTableCells({ row: 2, col: 0 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 2, col: 0 }, tableWithColspanAndRowspan), ).toEqual({ row: 2, col: 0, cell: tableWithColspanAndRowspan.content.rows[2].cells[0], }); expect( - getRelativeTableCells({ row: 2, col: 1 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 2, col: 1 }, tableWithColspanAndRowspan), ).toEqual({ row: 2, col: 1, cell: tableWithColspanAndRowspan.content.rows[2].cells[1], }); expect( - getRelativeTableCells({ row: 2, col: 2 }, tableWithColspanAndRowspan) + getRelativeTableCells({ row: 2, col: 2 }, tableWithColspanAndRowspan), ).toEqual({ row: 2, col: 2, @@ -1087,63 +1087,63 @@ describe("Test getRelativeTableCellIndices", () => { it("should resolve absolute table cell indices to relative table cell indices with colspans and rowspans", () => { expect( - getRelativeTableCells({ row: 0, col: 0 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 0, col: 0 }, tableWithColspansAndRowspans), ).toEqual({ row: 0, col: 0, cell: tableWithColspansAndRowspans.content.rows[0].cells[0], }); expect( - getRelativeTableCells({ row: 0, col: 1 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 0, col: 1 }, tableWithColspansAndRowspans), ).toEqual({ row: 0, col: 1, cell: tableWithColspansAndRowspans.content.rows[0].cells[1], }); expect( - getRelativeTableCells({ row: 0, col: 2 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 0, col: 2 }, tableWithColspansAndRowspans), ).toEqual({ row: 0, col: 1, cell: tableWithColspansAndRowspans.content.rows[0].cells[1], }); expect( - getRelativeTableCells({ row: 1, col: 0 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 1, col: 0 }, tableWithColspansAndRowspans), ).toEqual({ row: 0, col: 0, cell: tableWithColspansAndRowspans.content.rows[0].cells[0], }); expect( - getRelativeTableCells({ row: 1, col: 1 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 1, col: 1 }, tableWithColspansAndRowspans), ).toEqual({ row: 1, col: 0, cell: tableWithColspansAndRowspans.content.rows[1].cells[0], }); expect( - getRelativeTableCells({ row: 1, col: 2 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 1, col: 2 }, tableWithColspansAndRowspans), ).toEqual({ row: 1, col: 0, cell: tableWithColspansAndRowspans.content.rows[1].cells[0], }); expect( - getRelativeTableCells({ row: 2, col: 0 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 2, col: 0 }, tableWithColspansAndRowspans), ).toEqual({ row: 2, col: 0, cell: tableWithColspansAndRowspans.content.rows[2].cells[0], }); expect( - getRelativeTableCells({ row: 2, col: 1 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 2, col: 1 }, tableWithColspansAndRowspans), ).toEqual({ row: 1, col: 0, cell: tableWithColspansAndRowspans.content.rows[1].cells[0], }); expect( - getRelativeTableCells({ row: 2, col: 2 }, tableWithColspansAndRowspans) + getRelativeTableCells({ row: 2, col: 2 }, tableWithColspansAndRowspans), ).toEqual({ row: 1, col: 0, @@ -1163,8 +1163,8 @@ describe("resolveAbsoluteTableCellIndices and resolveRelativeTableCellIndices sh expect( getRelativeTableCells( getAbsoluteTableCells({ row, col }, simpleTable), - simpleTable - ) + simpleTable, + ), ).toEqual({ row, col, cell: simpleTable.content.rows[row].cells[col] }); } } @@ -1179,8 +1179,8 @@ describe("resolveAbsoluteTableCellIndices and resolveRelativeTableCellIndices sh expect( getRelativeTableCells( getAbsoluteTableCells({ row, col }, tableWithColspan), - tableWithColspan - ) + tableWithColspan, + ), ).toEqual({ row, col, @@ -1200,8 +1200,8 @@ describe("resolveAbsoluteTableCellIndices and resolveRelativeTableCellIndices sh expect( getRelativeTableCells( getAbsoluteTableCells({ row, col }, tableWithRowspan), - tableWithRowspan - ) + tableWithRowspan, + ), ).toEqual({ row, col, @@ -1225,8 +1225,8 @@ describe("resolveAbsoluteTableCellIndices and resolveRelativeTableCellIndices sh expect( getRelativeTableCells( getAbsoluteTableCells({ row, col }, tableWithColspanAndRowspan), - tableWithColspanAndRowspan - ) + tableWithColspanAndRowspan, + ), ).toEqual({ row, col, @@ -1252,10 +1252,10 @@ describe("resolveAbsoluteTableCellIndices and resolveRelativeTableCellIndices sh getRelativeTableCells( getAbsoluteTableCells( { row, col }, - tableWithComplexRowspansAndColspans + tableWithComplexRowspansAndColspans, ), - tableWithComplexRowspansAndColspans - ) + tableWithComplexRowspansAndColspans, + ), ).toEqual({ row, col, @@ -1275,7 +1275,7 @@ describe("Test getRow", () => { row: 0, col, cell, - })) + })), ); }); @@ -1368,7 +1368,7 @@ describe("Test getRow", () => { col: 2, cell: tableWithComplexRowspansAndColspans.content.rows[0].cells[2], }, - ] + ], ); expect(getCellsAtRowHandle(tableWithComplexRowspansAndColspans, 1)).toEqual( [ @@ -1392,10 +1392,10 @@ describe("Test getRow", () => { col: 2, cell: tableWithComplexRowspansAndColspans.content.rows[2].cells[2], }, - ] + ], ); expect(getCellsAtRowHandle(tableWithComplexRowspansAndColspans, 2)).toEqual( - [] + [], ); }); }); @@ -1513,7 +1513,7 @@ describe("Test getColumn", () => { it("should get the column of the table with complex rowspans and colspans", () => { expect( - getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 0) + getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 0), ).toEqual([ { row: 0, @@ -1527,7 +1527,7 @@ describe("Test getColumn", () => { }, ]); expect( - getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 1) + getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 1), ).toEqual([ { row: 0, @@ -1541,7 +1541,7 @@ describe("Test getColumn", () => { }, ]); expect( - getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 2) + getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 2), ).toEqual([ { row: 0, @@ -1560,7 +1560,7 @@ describe("Test getColumn", () => { }, ]); expect( - getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 3) + getCellsAtColumnHandle(tableWithComplexRowspansAndColspans, 3), ).toEqual([]); }); }); @@ -1629,8 +1629,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ]), }, }, - "rows" - ) + "rows", + ), ).toEqual([ { cells: [ @@ -1661,8 +1661,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ]), }, }, - "rows" - ) + "rows", + ), ).toEqual(tableWithColspan.content.rows); }); @@ -1683,8 +1683,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual(tableWithColspan.content.rows); }); @@ -1702,8 +1702,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ]), }, }, - "rows" - ) + "rows", + ), ).toEqual(tableWithRowspan.content.rows); }); @@ -1727,8 +1727,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual(tableWithRowspan.content.rows); }); @@ -1746,8 +1746,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ]), }, }, - "rows" - ) + "rows", + ), ).toEqual(tableWithColspanAndRowspan.content.rows); }); @@ -1780,8 +1780,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual(tableWithColspanAndRowspan.content.rows); }); @@ -1799,8 +1799,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ]), }, }, - "rows" - ) + "rows", + ), ).toEqual(tableWithComplexRowspansAndColspans.content.rows); }); @@ -1833,8 +1833,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual(tableWithComplexRowspansAndColspans.content.rows); }); @@ -1855,8 +1855,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "rows" - ) + "rows", + ), ).toEqual([ { cells: [emptyCell, emptyCell], @@ -1881,8 +1881,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual([ { cells: [emptyCell], @@ -1919,8 +1919,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "rows" - ) + "rows", + ), ).toEqual([ { cells: [ @@ -1965,8 +1965,8 @@ describe("Test cropEmptyRowsOrColumns", () => { ], }, }, - "columns" - ) + "columns", + ), ).toEqual([ { cells: [ diff --git a/packages/core/src/api/blockManipulation/tables/tables.ts b/packages/core/src/api/blockManipulation/tables/tables.ts index a84e62351c..f770a34afd 100644 --- a/packages/core/src/api/blockManipulation/tables/tables.ts +++ b/packages/core/src/api/blockManipulation/tables/tables.ts @@ -185,7 +185,7 @@ type OccupancyGrid = (RelativeCellIndices & { * @returns an {@link OccupancyGrid} */ export function getTableCellOccupancyGrid( - block: BlockFromConfigNoChildren + block: BlockFromConfigNoChildren, ): OccupancyGrid { const { height, width } = getDimensionsOfTable(block); @@ -209,7 +209,7 @@ export function getTableCellOccupancyGrid( } throw new Error( - "Unable to create occupancy grid for table, no more available cells" + "Unable to create occupancy grid for table, no more available cells", ); }; @@ -231,7 +231,7 @@ export function getTableCellOccupancyGrid( if (grid[i][j]) { // The cell is already occupied, the table is malformed throw new Error( - `Unable to create occupancy grid for table, cell at ${i},${j} is already occupied` + `Unable to create occupancy grid for table, cell at ${i},${j} is already occupied`, ); } @@ -258,7 +258,7 @@ export function getTableCellOccupancyGrid( * @note This will remove duplicates from the occupancy grid. And does no bounds checking for validity of the occupancy grid. */ export function getTableRowsFromOccupancyGrid( - occupancyGrid: OccupancyGrid + occupancyGrid: OccupancyGrid, ): TableContent["rows"] { // Because a cell can have a rowspan or colspan, it can occupy multiple cells in the occupancy grid // So, we need to remove duplicates from the occupancy grid before we can return the table rows @@ -299,7 +299,7 @@ export function getAbsoluteTableCells( /** * The occupancy grid of the table. */ - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): AbsoluteCellIndices & { cell: TableCell; } { @@ -317,7 +317,7 @@ export function getAbsoluteTableCells( } throw new Error( - `Unable to resolve relative table cell indices for table, cell at ${relativeCellIndices.row},${relativeCellIndices.col} is not occupied` + `Unable to resolve relative table cell indices for table, cell at ${relativeCellIndices.row},${relativeCellIndices.col} is not occupied`, ); } @@ -327,7 +327,7 @@ export function getAbsoluteTableCells( * @returns The height and width of the table. */ export function getDimensionsOfTable( - block: BlockFromConfigNoChildren + block: BlockFromConfigNoChildren, ): { /** * The number of rows in the table. @@ -374,7 +374,7 @@ export function getRelativeTableCells( /** * The occupancy grid of the table. */ - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): | (RelativeCellIndices & { cell: TableContent["rows"][number]["cells"][number]; @@ -429,7 +429,7 @@ export function getRelativeTableCells( */ export function getCellsAtRowHandle( block: BlockFromConfigNoChildren, - relativeRowIndex: RelativeCellIndices["row"] + relativeRowIndex: RelativeCellIndices["row"], ) { const occupancyGrid = getTableCellOccupancyGrid(block); @@ -459,12 +459,12 @@ export function getCellsAtRowHandle( return getRelativeTableCells( { row: absoluteRow, col }, block, - occupancyGrid + occupancyGrid, ); }) .filter( (a): a is RelativeCellIndices & { cell: TableCell } => - a !== undefined + a !== undefined, ); // Filter out duplicates based on row and col properties @@ -508,7 +508,7 @@ export function getCellsAtRowHandle( */ export function getCellsAtColumnHandle( block: BlockFromConfigNoChildren, - relativeColumnIndex: RelativeCellIndices["col"] + relativeColumnIndex: RelativeCellIndices["col"], ) { const occupancyGrid = getTableCellOccupancyGrid(block); @@ -541,12 +541,12 @@ export function getCellsAtColumnHandle( return getRelativeTableCells( { row, col: absoluteCol }, block, - occupancyGrid + occupancyGrid, ); }) .filter( (a): a is RelativeCellIndices & { cell: TableCell } => - a !== undefined + a !== undefined, ); // Filter out duplicates based on row and col properties @@ -566,7 +566,7 @@ export function moveColumn( block: BlockFromConfigNoChildren, fromColIndex: RelativeCellIndices["col"], toColIndex: RelativeCellIndices["col"], - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): TableContent["rows"] { // To move cells in a column, we need to layout the whole table // and then move the cells accordingly. @@ -576,7 +576,7 @@ export function moveColumn( col: fromColIndex, }, block, - occupancyGrid + occupancyGrid, ); const { col: absoluteTargetCol } = getAbsoluteTableCells( { @@ -584,7 +584,7 @@ export function moveColumn( col: toColIndex, }, block, - occupancyGrid + occupancyGrid, ); /** @@ -610,7 +610,7 @@ export function moveRow( block: BlockFromConfigNoChildren, fromRowIndex: RelativeCellIndices["row"], toRowIndex: RelativeCellIndices["row"], - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): TableContent["rows"] { // To move cells in a column, we need to layout the whole table // and then move the cells accordingly. @@ -620,7 +620,7 @@ export function moveRow( col: 0, }, block, - occupancyGrid + occupancyGrid, ); const { row: absoluteTargetRow } = getAbsoluteTableCells( { @@ -628,7 +628,7 @@ export function moveRow( col: 0, }, block, - occupancyGrid + occupancyGrid, ); /** @@ -650,7 +650,7 @@ export function moveRow( function isCellEmpty( cell: | PartialTableContent["rows"][number]["cells"][number] - | undefined + | undefined, ): boolean { if (!cell) { return true; @@ -664,12 +664,12 @@ function isCellEmpty( typeof c === "string" ? c.length === 0 : isStyledTextInlineContent(c) - ? c.text.length === 0 - : isPartialLinkInlineContent(c) - ? typeof c.content === "string" - ? c.content.length === 0 - : c.content.every((s) => s.text.length === 0) - : false + ? c.text.length === 0 + : isPartialLinkInlineContent(c) + ? typeof c.content === "string" + ? c.content.length === 0 + : c.content.every((s) => s.text.length === 0) + : false, ); } else { return false; @@ -684,7 +684,7 @@ function isCellEmpty( export function cropEmptyRowsOrColumns( block: BlockFromConfigNoChildren, removeEmpty: "columns" | "rows", - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): TableContent["rows"] { if (removeEmpty === "columns") { // strips empty columns on the right @@ -696,7 +696,7 @@ export function cropEmptyRowsOrColumns( ) { const isEmpty = occupancyGrid.every( (row) => - isCellEmpty(row[cellIndex].cell) && row[cellIndex].colspan === 1 + isCellEmpty(row[cellIndex].cell) && row[cellIndex].colspan === 1, ); if (!isEmpty) { break; @@ -709,7 +709,7 @@ export function cropEmptyRowsOrColumns( // We maintain at least one cell, even if all the cells are empty const cellsToRemove = Math.max( occupancyGrid[i].length - emptyColsOnRight, - 1 + 1, ); occupancyGrid[i] = occupancyGrid[i].slice(0, cellsToRemove); } @@ -721,7 +721,7 @@ export function cropEmptyRowsOrColumns( let emptyRowsOnBottom = 0; for (let rowIndex = occupancyGrid.length - 1; rowIndex >= 0; rowIndex--) { const isEmpty = occupancyGrid[rowIndex].every( - (cell) => isCellEmpty(cell.cell) && cell.rowspan === 1 + (cell) => isCellEmpty(cell.cell) && cell.rowspan === 1, ); if (!isEmpty) { break; @@ -752,7 +752,7 @@ export function addRowsOrColumns( * @note if negative, it will remove rows or columns. */ numToAdd: number, - occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block) + occupancyGrid: OccupancyGrid = getTableCellOccupancyGrid(block), ): TableContent["rows"] { const { width, height } = getDimensionsOfTable(block); @@ -802,7 +802,7 @@ export function addRowsOrColumns( export function canRowBeDraggedInto( block: BlockFromConfigNoChildren, draggingIndex: RelativeCellIndices["row"], - targetRowIndex: RelativeCellIndices["row"] + targetRowIndex: RelativeCellIndices["row"], ) { // Check cells at the target row const targetCells = getCellsAtRowHandle(block, targetRowIndex); @@ -837,7 +837,7 @@ export function canRowBeDraggedInto( export function canColumnBeDraggedInto( block: BlockFromConfigNoChildren, draggingIndex: RelativeCellIndices["col"], - targetColumnIndex: RelativeCellIndices["col"] + targetColumnIndex: RelativeCellIndices["col"], ) { // Check cells at the target column const targetCells = getCellsAtColumnHandle(block, targetColumnIndex); @@ -874,7 +874,7 @@ export function canColumnBeDraggedInto( export function areInSameColumn( from: RelativeCellIndices, to: RelativeCellIndices, - block: BlockFromConfigNoChildren + block: BlockFromConfigNoChildren, ) { // Table indices are relative to the table, so we need to resolve the absolute cell indices const anchorAbsoluteCellIndices = getAbsoluteTableCells(from, block); diff --git a/packages/core/src/api/clipboard/fromClipboard/fileDropExtension.ts b/packages/core/src/api/clipboard/fromClipboard/fileDropExtension.ts index 89b5d2bb26..f602ef4a2d 100644 --- a/packages/core/src/api/clipboard/fromClipboard/fileDropExtension.ts +++ b/packages/core/src/api/clipboard/fromClipboard/fileDropExtension.ts @@ -13,9 +13,9 @@ import { handleFileInsertion } from "./handleFileInsertion.js"; export const createDropFileExtension = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => Extension.create<{ editor: BlockNoteEditor }, undefined>({ name: "dropFile", diff --git a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts index ccdca124e6..588763e9a9 100644 --- a/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts +++ b/packages/core/src/api/clipboard/fromClipboard/handleFileInsertion.ts @@ -11,7 +11,7 @@ import { acceptedMIMETypes } from "./acceptedMIMETypes.js"; function checkFileExtensionsMatch( fileExtension1: string, - fileExtension2: string + fileExtension2: string, ) { if (!fileExtension1.startsWith(".") || !fileExtension2.startsWith(".")) { throw new Error(`The strings provided are not valid file extensions.`); @@ -44,11 +44,11 @@ function checkMIMETypesMatch(mimeType1: string, mimeType2: string) { function insertOrUpdateBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, referenceBlock: Block, - newBlock: PartialBlock + newBlock: PartialBlock, ) { let insertedBlockId: string | undefined; @@ -61,7 +61,7 @@ function insertOrUpdateBlock< insertedBlockId = editor.insertBlocks( [newBlock], referenceBlock, - "after" + "after", )[0].id; } @@ -71,12 +71,12 @@ function insertOrUpdateBlock< export async function handleFileInsertion< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(event: DragEvent | ClipboardEvent, editor: BlockNoteEditor) { if (!editor.uploadFile) { // eslint-disable-next-line no-console console.warn( - "Attempted ot insert file, but uploadFile is not set in the BlockNote editor options" + "Attempted ot insert file, but uploadFile is not set in the BlockNote editor options", ); return; } @@ -106,7 +106,7 @@ export async function handleFileInsertion< event.preventDefault(); const fileBlockConfigs = Object.values(editor.schema.blockSchema).filter( - (blockConfig) => blockConfig.isFileBlock + (blockConfig) => blockConfig.isFileBlock, ) as FileBlockConfig[]; for (let i = 0; i < items.length; i++) { @@ -125,7 +125,7 @@ export async function handleFileInsertion< (isFileExtension && checkFileExtensionsMatch( "." + file.name.split(".").pop(), - mimeType + mimeType, )) ) { fileBlockType = fileBlockConfig.type; @@ -165,7 +165,7 @@ export async function handleFileInsertion< return insertOrUpdateBlock( editor, editor.getBlock(posInfo.node.attrs.id)!, - fileBlock + fileBlock, ); }); } else { diff --git a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts index eb15099451..b566dfdbe2 100644 --- a/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts +++ b/packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts @@ -2,7 +2,7 @@ import { EditorView } from "prosemirror-view"; export async function handleVSCodePaste( event: ClipboardEvent, - view: EditorView + view: EditorView, ) { const { schema } = view.state; @@ -34,8 +34,8 @@ export async function handleVSCodePaste( view.pasteHTML( `
${text.replace(
       /\r\n?/g,
-      "\n"
-    )}
` + "\n", + )}`, ); return true; diff --git a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts index c10a57c624..a0eb03889e 100644 --- a/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts +++ b/packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts @@ -31,7 +31,7 @@ function defaultPasteHandler({ const isInCodeBlock = editor.transact( (tr) => tr.selection.$from.parent.type.spec.code && - tr.selection.$to.parent.type.spec.code + tr.selection.$to.parent.type.spec.code, ); if (isInCodeBlock) { @@ -106,13 +106,13 @@ function defaultPasteHandler({ export const createPasteFromClipboardExtension = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, pasteHandler: Exclude< BlockNoteEditorOptions["pasteHandler"], undefined - > + >, ) => Extension.create({ name: "pasteFromClipboard", diff --git a/packages/core/src/api/clipboard/toClipboard/copyExtension.ts b/packages/core/src/api/clipboard/toClipboard/copyExtension.ts index 4ad69e8456..e5f4fec1bd 100644 --- a/packages/core/src/api/clipboard/toClipboard/copyExtension.ts +++ b/packages/core/src/api/clipboard/toClipboard/copyExtension.ts @@ -21,11 +21,11 @@ import { function fragmentToExternalHTML< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( view: EditorView, selectedFragment: Fragment, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) { let isWithinBlockContent = false; const isWithinTable = view.state.selection instanceof CellSelection; @@ -37,7 +37,7 @@ function fragmentToExternalHTML< const fragmentWithoutParents = view.state.doc.slice( view.state.selection.from, view.state.selection.to, - false + false, ).content; const children = []; @@ -50,7 +50,7 @@ function fragmentToExternalHTML< (child) => child.type.isInGroup("bnBlock") || child.type.name === "blockGroup" || - child.type.spec.group === "blockContent" + child.type.spec.group === "blockContent", ) === undefined; if (isWithinBlockContent) { selectedFragment = fragmentWithoutParents; @@ -61,7 +61,7 @@ function fragmentToExternalHTML< const externalHTMLExporter = createExternalHTMLExporter( view.state.schema, - editor + editor, ); if (isWithinTable) { @@ -76,13 +76,13 @@ function fragmentToExternalHTML< const ic = contentNodeToTableContent( selectedFragment as any, editor.schema.inlineContentSchema, - editor.schema.styleSchema + editor.schema.styleSchema, ); // Wrap in table to ensure correct parsing by spreadsheet applications externalHTML = `${externalHTMLExporter.exportInlineContent( ic as any, - {} + {}, )}
`; } else if (isWithinBlockContent) { // first convert selection to blocknote-style inline content, and then @@ -90,7 +90,7 @@ function fragmentToExternalHTML< const ic = contentNodeToInlineContent( selectedFragment as any, editor.schema.inlineContentSchema, - editor.schema.styleSchema + editor.schema.styleSchema, ); externalHTML = externalHTMLExporter.exportInlineContent(ic, {}); } else { @@ -103,10 +103,10 @@ function fragmentToExternalHTML< export function selectedFragmentToHTML< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( view: EditorView, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): { clipboardHTML: string; externalHTML: string; @@ -122,14 +122,14 @@ export function selectedFragmentToHTML< ) { editor.transact((tr) => tr.setSelection( - new NodeSelection(tr.doc.resolve(view.state.selection.from - 1)) - ) + new NodeSelection(tr.doc.resolve(view.state.selection.from - 1)), + ), ); } // Uses default ProseMirror clipboard serialization. const clipboardHTML: string = view.serializeForClipboard( - view.state.selection.content() + view.state.selection.content(), ).dom.innerHTML; const selectedFragment = view.state.selection.content().content; @@ -137,7 +137,7 @@ export function selectedFragmentToHTML< const externalHTML = fragmentToExternalHTML( view, selectedFragment, - editor + editor, ); const markdown = cleanHTMLToMarkdown(externalHTML); @@ -176,11 +176,11 @@ const checkIfSelectionInNonEditableBlock = () => { const copyToClipboard = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, view: EditorView, - event: ClipboardEvent + event: ClipboardEvent, ) => { // Stops the default browser copy behaviour. event.preventDefault(); @@ -188,7 +188,7 @@ const copyToClipboard = < const { clipboardHTML, externalHTML, markdown } = selectedFragmentToHTML( view, - editor + editor, ); // TODO: Writing to other MIME types not working in Safari for @@ -201,9 +201,9 @@ const copyToClipboard = < export const createCopyToClipboardExtension = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => Extension.create<{ editor: BlockNoteEditor }, undefined>({ name: "copyToClipboard", @@ -254,9 +254,9 @@ export const createCopyToClipboardExtension = < editor.transact((tr) => tr.setSelection( new NodeSelection( - tr.doc.resolve(view.state.selection.from - 1) - ) - ) + tr.doc.resolve(view.state.selection.from - 1), + ), + ), ); // Stops the default browser drag start behaviour. diff --git a/packages/core/src/api/exporters/html/externalHTMLExporter.ts b/packages/core/src/api/exporters/html/externalHTMLExporter.ts index c0fa524804..715dded6ad 100644 --- a/packages/core/src/api/exporters/html/externalHTMLExporter.ts +++ b/packages/core/src/api/exporters/html/externalHTMLExporter.ts @@ -32,17 +32,17 @@ import { export const createExternalHTMLExporter = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( schema: Schema, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { const serializer = DOMSerializer.fromSchema(schema); return { exportBlocks: ( blocks: PartialBlock[], - options: { document?: Document } + options: { document?: Document }, ) => { const html = serializeBlocksExternalHTML( editor, @@ -50,7 +50,7 @@ export const createExternalHTMLExporter = < serializer, new Set(["numberedListItem"]), new Set(["bulletListItem", "checkListItem"]), - options + options, ); const div = document.createElement("div"); div.append(html); @@ -59,13 +59,13 @@ export const createExternalHTMLExporter = < exportInlineContent: ( inlineContent: InlineContent[], - options: { document?: Document } + options: { document?: Document }, ) => { const domFragment = serializeInlineContentExternalHTML( editor, inlineContent as any, serializer, - options + options, ); const parent = document.createElement("div"); diff --git a/packages/core/src/api/exporters/html/internalHTMLSerializer.ts b/packages/core/src/api/exporters/html/internalHTMLSerializer.ts index f1a2b41401..5b3003cf55 100644 --- a/packages/core/src/api/exporters/html/internalHTMLSerializer.ts +++ b/packages/core/src/api/exporters/html/internalHTMLSerializer.ts @@ -19,17 +19,17 @@ import { serializeBlocksInternalHTML } from "./util/serializeBlocksInternalHTML. export const createInternalHTMLSerializer = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( schema: Schema, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { const serializer = DOMSerializer.fromSchema(schema); return { serializeBlocks: ( blocks: PartialBlock[], - options: { document?: Document } + options: { document?: Document }, ) => { return serializeBlocksInternalHTML(editor, blocks, serializer, options) .outerHTML; diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts index 61a657ed71..f74757c8d7 100644 --- a/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts +++ b/packages/core/src/api/exporters/html/util/serializeBlocksExternalHTML.ts @@ -17,7 +17,7 @@ function addAttributesAndRemoveClasses(element: HTMLElement) { // Removes all BlockNote specific class names. const className = Array.from(element.classList).filter( - (className) => !className.startsWith("bn-") + (className) => !className.startsWith("bn-"), ) || []; if (className.length > 0) { @@ -30,12 +30,12 @@ function addAttributesAndRemoveClasses(element: HTMLElement) { export function serializeInlineContentExternalHTML< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, blockContent: PartialBlock["content"], serializer: DOMSerializer, - options?: { document?: Document } + options?: { document?: Document }, ) { let nodes: any; @@ -72,7 +72,7 @@ export function serializeInlineContentExternalHTML< function serializeBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( fragment: DocumentFragment, editor: BlockNoteEditor, @@ -80,7 +80,7 @@ function serializeBlock< serializer: DOMSerializer, orderedListItemBlockTypes: Set, unorderedListItemBlockTypes: Set, - options?: { document?: Document } + options?: { document?: Document }, ) { const doc = options?.document ?? document; const BC_NODE = editor.pmSchema.nodes["blockContainer"]; @@ -90,7 +90,7 @@ function serializeBlock< if (!block.props) { props = {}; for (const [name, spec] of Object.entries( - editor.schema.blockSchema[block.type as any].propSchema + editor.schema.blockSchema[block.type as any].propSchema, )) { if (spec.default !== undefined) { (props as any)[name] = spec.default; @@ -102,7 +102,7 @@ function serializeBlock< BC_NODE.create({ id: block.id, ...props, - }) + }), ) as { dom: HTMLElement; contentDOM?: HTMLElement; @@ -130,7 +130,7 @@ function serializeBlock< attr.name !== "data-node-type" && attr.name !== "data-id" && attr.name !== "data-index" && - attr.name !== "data-editable" + attr.name !== "data-editable", ); // ret.dom = ret.dom.firstChild! as any; @@ -149,7 +149,7 @@ function serializeBlock< editor, block.content as any, // TODO serializer, - options + options, ); ret.contentDOM.appendChild(ic); @@ -187,7 +187,7 @@ function serializeBlock< serializer, orderedListItemBlockTypes, unorderedListItemBlockTypes, - options + options, ); if ( fragment.lastChild?.nodeName === "UL" || @@ -215,7 +215,7 @@ function serializeBlock< const serializeBlocksToFragment = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( fragment: DocumentFragment, editor: BlockNoteEditor, @@ -223,7 +223,7 @@ const serializeBlocksToFragment = < serializer: DOMSerializer, orderedListItemBlockTypes: Set, unorderedListItemBlockTypes: Set, - options?: { document?: Document } + options?: { document?: Document }, ) => { for (const block of blocks) { serializeBlock( @@ -233,7 +233,7 @@ const serializeBlocksToFragment = < serializer, orderedListItemBlockTypes, unorderedListItemBlockTypes, - options + options, ); } }; @@ -241,14 +241,14 @@ const serializeBlocksToFragment = < export const serializeBlocksExternalHTML = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, blocks: PartialBlock[], serializer: DOMSerializer, orderedListItemBlockTypes: Set, unorderedListItemBlockTypes: Set, - options?: { document?: Document } + options?: { document?: Document }, ) => { const doc = options?.document ?? document; const fragment = doc.createDocumentFragment(); @@ -260,7 +260,7 @@ export const serializeBlocksExternalHTML = < serializer, orderedListItemBlockTypes, unorderedListItemBlockTypes, - options + options, ); return fragment; }; diff --git a/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts b/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts index edfc3837e4..0bd7722172 100644 --- a/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts +++ b/packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts @@ -16,13 +16,13 @@ import { export function serializeInlineContentInternalHTML< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, blockContent: PartialBlock["content"], serializer: DOMSerializer, blockType?: string, - options?: { document?: Document } + options?: { document?: Document }, ) { let nodes: any; @@ -50,13 +50,13 @@ export function serializeInlineContentInternalHTML< function serializeBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, block: PartialBlock, serializer: DOMSerializer, listIndex: number, - options?: { document?: Document } + options?: { document?: Document }, ) { const BC_NODE = editor.pmSchema.nodes["blockContainer"]; @@ -65,7 +65,7 @@ function serializeBlock< if (!block.props) { props = {}; for (const [name, spec] of Object.entries( - editor.schema.blockSchema[block.type as any].propSchema + editor.schema.blockSchema[block.type as any].propSchema, )) { if (spec.default !== undefined) { (props as any)[name] = spec.default; @@ -92,7 +92,7 @@ function serializeBlock< block.content as any, // TODO serializer, block.type, - options + options, ); ret.contentDOM.appendChild(ic); } @@ -105,7 +105,7 @@ function serializeBlock< editor, block.children, serializer, - options + options, ); ret.contentDOM?.append(fragment); @@ -118,7 +118,7 @@ function serializeBlock< BC_NODE.create({ id: block.id, ...props, - }) + }), ) as { dom: HTMLElement; contentDOM?: HTMLElement; @@ -128,7 +128,7 @@ function serializeBlock< if (block.children && block.children.length > 0) { bc.contentDOM?.appendChild( - serializeBlocksInternalHTML(editor, block.children, serializer, options) + serializeBlocksInternalHTML(editor, block.children, serializer, options), ); } return bc.dom; @@ -137,12 +137,12 @@ function serializeBlock< function serializeBlocks< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, blocks: PartialBlock[], serializer: DOMSerializer, - options?: { document?: Document } + options?: { document?: Document }, ) { const doc = options?.document ?? document; const fragment = doc.createDocumentFragment(); @@ -159,7 +159,7 @@ function serializeBlocks< block, serializer, listIndex, - options + options, ); fragment.appendChild(blockDOM); } @@ -170,12 +170,12 @@ function serializeBlocks< export const serializeBlocksInternalHTML = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, blocks: PartialBlock[], serializer: DOMSerializer, - options?: { document?: Document } + options?: { document?: Document }, ) => { const BG_NODE = editor.pmSchema.nodes["blockGroup"]; diff --git a/packages/core/src/api/exporters/markdown/markdownExporter.ts b/packages/core/src/api/exporters/markdown/markdownExporter.ts index cea05fc413..488886c76d 100644 --- a/packages/core/src/api/exporters/markdown/markdownExporter.ts +++ b/packages/core/src/api/exporters/markdown/markdownExporter.ts @@ -21,7 +21,7 @@ export function cleanHTMLToMarkdown(cleanHTMLString: string) { if (!deps) { throw new Error( - "cleanHTMLToMarkdown requires ESM dependencies to be initialized" + "cleanHTMLToMarkdown requires ESM dependencies to be initialized", ); } @@ -43,12 +43,12 @@ export function cleanHTMLToMarkdown(cleanHTMLString: string) { export async function blocksToMarkdown< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( blocks: PartialBlock[], schema: Schema, editor: BlockNoteEditor, - options: { document?: Document } + options: { document?: Document }, ): Promise { await initializeESMDependencies(); const exporter = createExternalHTMLExporter(schema, editor); diff --git a/packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts b/packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts index ee2ae06e30..2553faa111 100644 --- a/packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts +++ b/packages/core/src/api/exporters/markdown/util/addSpacesToCheckboxesRehypePlugin.ts @@ -11,7 +11,7 @@ export function addSpacesToCheckboxes() { if (!deps) { throw new Error( - "addSpacesToCheckboxes requires ESM dependencies to be initialized" + "addSpacesToCheckboxes requires ESM dependencies to be initialized", ); } @@ -38,8 +38,8 @@ export function addSpacesToCheckboxes() { 0, 0, deps.hastUtilFromDom.fromDom( - document.createTextNode(" ") - ) as HASTElement + document.createTextNode(" "), + ) as HASTElement, ); } else { helper(child as HASTParent); diff --git a/packages/core/src/api/getBlockInfoFromPos.ts b/packages/core/src/api/getBlockInfoFromPos.ts index e071373e23..019c89f9ed 100644 --- a/packages/core/src/api/getBlockInfoFromPos.ts +++ b/packages/core/src/api/getBlockInfoFromPos.ts @@ -101,7 +101,7 @@ export function getNearestBlockPos(doc: Node, pos: number) { const resolvedPos = doc.resolve( allBlockContainerPositions.find((position) => position >= pos) || - allBlockContainerPositions[allBlockContainerPositions.length - 1] + allBlockContainerPositions[allBlockContainerPositions.length - 1], ); return { posBeforeNode: resolvedPos.pos, @@ -122,11 +122,11 @@ export function getNearestBlockPos(doc: Node, pos: number) { */ export function getBlockInfoWithManualOffset( node: Node, - bnBlockBeforePosOffset: number + bnBlockBeforePosOffset: number, ): BlockInfo { if (!node.type.isInGroup("bnBlock")) { throw new Error( - `Attempted to get bnBlock node at position but found node of different type ${node.type}` + `Attempted to get bnBlock node at position but found node of different type ${node.type}`, ); } @@ -171,7 +171,7 @@ export function getBlockInfoWithManualOffset( if (!blockContent) { throw new Error( - `blockContainer node does not contain a blockContent node in its children: ${bnBlockNode}` + `blockContainer node does not contain a blockContent node in its children: ${bnBlockNode}`, ); } @@ -185,7 +185,7 @@ export function getBlockInfoWithManualOffset( } else { if (!bnBlock.node.type.isInGroup("childContainer")) { throw new Error( - `bnBlock node is not in the childContainer group: ${bnBlock.node}` + `bnBlock node is not in the childContainer group: ${bnBlock.node}`, ); } @@ -222,7 +222,7 @@ export function getBlockInfo(posInfo: { posBeforeNode: number; node: Node }) { export function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos) { if (!resolvedPos.nodeAfter) { throw new Error( - `Attempted to get blockContainer node at position ${resolvedPos.pos} but a node at this position does not exist` + `Attempted to get blockContainer node at position ${resolvedPos.pos} but a node at this position does not exist`, ); } return getBlockInfoWithManualOffset(resolvedPos.nodeAfter, resolvedPos.pos); diff --git a/packages/core/src/api/nodeConversions/blockToNode.ts b/packages/core/src/api/nodeConversions/blockToNode.ts index 8280d4dda8..8035f32d2b 100644 --- a/packages/core/src/api/nodeConversions/blockToNode.ts +++ b/packages/core/src/api/nodeConversions/blockToNode.ts @@ -29,7 +29,7 @@ function styledTextToNodes( styledText: StyledText, schema: Schema, styleSchema: T, - blockType?: string + blockType?: string, ): Node[] { const marks: Mark[] = []; @@ -79,7 +79,7 @@ function styledTextToNodes( function linkToNodes( link: PartialLink, schema: Schema, - styleSchema: StyleSchema + styleSchema: StyleSchema, ): Node[] { const linkMark = schema.marks.link.create({ href: link.href, @@ -95,7 +95,7 @@ function linkToNodes( return node; } throw new Error("unexpected node type"); - } + }, ); } @@ -107,7 +107,7 @@ function styledTextArrayToNodes( content: string | StyledText[], schema: Schema, styleSchema: S, - blockType?: string + blockType?: string, ): Node[] { const nodes: Node[] = []; @@ -117,15 +117,15 @@ function styledTextArrayToNodes( { type: "text", text: content, styles: {} }, schema, styleSchema, - blockType - ) + blockType, + ), ); return nodes; } for (const styledText of content) { nodes.push( - ...styledTextToNodes(styledText, schema, styleSchema, blockType) + ...styledTextToNodes(styledText, schema, styleSchema, blockType), ); } return nodes; @@ -136,29 +136,29 @@ function styledTextArrayToNodes( */ export function inlineContentToNodes< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( blockContent: PartialInlineContent, schema: Schema, blockType?: string, - styleSchema: S = getStyleSchema(schema) + styleSchema: S = getStyleSchema(schema), ): Node[] { const nodes: Node[] = []; for (const content of blockContent) { if (typeof content === "string") { nodes.push( - ...styledTextArrayToNodes(content, schema, styleSchema, blockType) + ...styledTextArrayToNodes(content, schema, styleSchema, blockType), ); } else if (isPartialLinkInlineContent(content)) { nodes.push(...linkToNodes(content, schema, styleSchema)); } else if (isStyledTextInlineContent(content)) { nodes.push( - ...styledTextArrayToNodes([content], schema, styleSchema, blockType) + ...styledTextArrayToNodes([content], schema, styleSchema, blockType), ); } else { nodes.push( - blockOrInlineContentToContentNode(content, schema, styleSchema) + blockOrInlineContentToContentNode(content, schema, styleSchema), ); } } @@ -170,11 +170,11 @@ export function inlineContentToNodes< */ export function tableContentToNodes< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( tableContent: PartialTableContent, schema: Schema, - styleSchema: StyleSchema = getStyleSchema(schema) + styleSchema: StyleSchema = getStyleSchema(schema), ): Node[] { const rowNodes: Node[] = []; // Header rows and columns are used to determine the type of the cell @@ -207,7 +207,7 @@ export function tableContentToNodes< row: rowIndex, col: cellIndex, }, - { type: "table", content: tableContent } as any + { type: "table", content: tableContent } as any, ); // Assume the column width is the width of the cell at the absolute cell index @@ -227,7 +227,7 @@ export function tableContentToNodes< cell.content, schema, "tableParagraph", - styleSchema + styleSchema, ); } const colspan = getColspan(cell); @@ -244,7 +244,7 @@ export function tableContentToNodes< cell, schema, "tableParagraph", - styleSchema + styleSchema, ); } @@ -255,7 +255,7 @@ export function tableContentToNodes< ...(isPartialTableCell(cell) ? cell.props : {}), colwidth, }, - schema.nodes["tableParagraph"].createChecked(attrs, content) + schema.nodes["tableParagraph"].createChecked(attrs, content), ); columnNodes.push(cellNode); } @@ -270,7 +270,7 @@ function blockOrInlineContentToContentNode( | PartialBlock | PartialCustomInlineContentFromConfig, schema: Schema, - styleSchema: StyleSchema + styleSchema: StyleSchema, ) { let contentNode: Node; let type = block.type; @@ -291,7 +291,7 @@ function blockOrInlineContentToContentNode( [block.content], schema, type, - styleSchema + styleSchema, ); contentNode = schema.nodes[type].createChecked(block.props, nodes); } else if (Array.isArray(block.content)) { @@ -299,7 +299,7 @@ function blockOrInlineContentToContentNode( block.content, schema, type, - styleSchema + styleSchema, ); contentNode = schema.nodes[type].createChecked(block.props, nodes); } else if (block.content.type === "tableContent") { @@ -317,7 +317,7 @@ function blockOrInlineContentToContentNode( export function blockToNode( block: PartialBlock, schema: Schema, - styleSchema: StyleSchema = getStyleSchema(schema) + styleSchema: StyleSchema = getStyleSchema(schema), ) { let id = block.id; @@ -343,7 +343,7 @@ export function blockToNode( const contentNode = blockOrInlineContentToContentNode( block, schema, - styleSchema + styleSchema, ); const groupNode = @@ -356,7 +356,7 @@ export function blockToNode( id: id, ...block.props, }, - groupNode ? [contentNode, groupNode] : contentNode + groupNode ? [contentNode, groupNode] : contentNode, ); } else if (schema.nodes[block.type].isInGroup("bnBlock")) { // this is a bnBlock node like Column or ColumnList that directly translates to a prosemirror node @@ -365,11 +365,11 @@ export function blockToNode( id: id, ...block.props, }, - children + children, ); } else { throw new Error( - `block type ${block.type} doesn't match blockContent or bnBlock group` + `block type ${block.type} doesn't match blockContent or bnBlock group`, ); } } diff --git a/packages/core/src/api/nodeConversions/fragmentToBlocks.ts b/packages/core/src/api/nodeConversions/fragmentToBlocks.ts index d5985566f6..724b552bda 100644 --- a/packages/core/src/api/nodeConversions/fragmentToBlocks.ts +++ b/packages/core/src/api/nodeConversions/fragmentToBlocks.ts @@ -14,7 +14,7 @@ import { nodeToBlock } from "./nodeToBlock.js"; export function fragmentToBlocks< B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(fragment: Fragment) { // first convert selection to blocknote-style blocks, and then // pass these to the exporter diff --git a/packages/core/src/api/nodeConversions/nodeToBlock.ts b/packages/core/src/api/nodeConversions/nodeToBlock.ts index 59edf8a60d..6ad2236ef4 100644 --- a/packages/core/src/api/nodeConversions/nodeToBlock.ts +++ b/packages/core/src/api/nodeConversions/nodeToBlock.ts @@ -30,7 +30,7 @@ import { getBlockSchema } from "../pmUtil.js"; */ export function contentNodeToTableContent< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(contentNode: Node, inlineContentSchema: I, styleSchema: S) { const ret: TableContent = { type: "tableContent", @@ -70,34 +70,37 @@ export function contentNodeToTableContent< // Convert cell content to inline content and merge adjacent styled text nodes const content = cellNode.content.content .map((child) => - contentNodeToInlineContent(child, inlineContentSchema, styleSchema) + contentNodeToInlineContent(child, inlineContentSchema, styleSchema), ) // The reason that we merge this content is that we allow table cells to contain multiple tableParagraph nodes // So that we can leverage prosemirror-tables native merging // If the schema only allowed a single tableParagraph node, then the merging would not work and cause prosemirror to fit the content into a new cell - .reduce((acc, contentPartial) => { - if (!acc.length) { - return contentPartial; - } + .reduce( + (acc, contentPartial) => { + if (!acc.length) { + return contentPartial; + } - const last = acc[acc.length - 1]; - const first = contentPartial[0]; + const last = acc[acc.length - 1]; + const first = contentPartial[0]; - // Only merge if the last and first content are both styled text nodes and have the same styles - if ( - first && - isStyledTextInlineContent(last) && - isStyledTextInlineContent(first) && - JSON.stringify(last.styles) === JSON.stringify(first.styles) - ) { - // Join them together if they have the same styles - last.text += "\n" + first.text; - acc.push(...contentPartial.slice(1)); + // Only merge if the last and first content are both styled text nodes and have the same styles + if ( + first && + isStyledTextInlineContent(last) && + isStyledTextInlineContent(first) && + JSON.stringify(last.styles) === JSON.stringify(first.styles) + ) { + // Join them together if they have the same styles + last.text += "\n" + first.text; + acc.push(...contentPartial.slice(1)); + return acc; + } + acc.push(...contentPartial); return acc; - } - acc.push(...contentPartial); - return acc; - }, [] as InlineContent[]); + }, + [] as InlineContent[], + ); return { type: "tableCell", @@ -135,7 +138,7 @@ export function contentNodeToTableContent< */ export function contentNodeToInlineContent< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(contentNode: Node, inlineContentSchema: I, styleSchema: S) { const content: InlineContent[] = []; let currentContent: InlineContent | undefined = undefined; @@ -182,7 +185,7 @@ export function contentNodeToInlineContent< } content.push( - nodeToCustomInlineContent(node, inlineContentSchema, styleSchema) + nodeToCustomInlineContent(node, inlineContentSchema, styleSchema), ); return; @@ -259,7 +262,8 @@ export function contentNodeToInlineContent< // Styles are the same. if ( JSON.stringify( - currentContent.content[currentContent.content.length - 1].styles + currentContent.content[currentContent.content.length - 1] + .styles, ) === JSON.stringify(styles) ) { currentContent.content[currentContent.content.length - 1].text += @@ -336,7 +340,7 @@ export function contentNodeToInlineContent< export function nodeToCustomInlineContent< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(node: Node, inlineContentSchema: I, styleSchema: S): InlineContent { if (node.type.name === "text" || node.type.name === "link") { throw new Error("unexpected"); @@ -363,7 +367,7 @@ export function nodeToCustomInlineContent< content = contentNodeToInlineContent( node, inlineContentSchema, - styleSchema + styleSchema, ) as any; // TODO: is this safe? could we have Links here that are undesired? } else { content = undefined; @@ -385,14 +389,14 @@ export function nodeToCustomInlineContent< export function nodeToBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( node: Node, schema: Schema, blockSchema: BSchema = getBlockSchema(schema) as BSchema, inlineContentSchema: I = getInlineContentSchema(schema) as I, styleSchema: S = getStyleSchema(schema) as S, - blockCache = getBlockCache(schema) + blockCache = getBlockCache(schema), ): Block { if (!node.type.isInGroup("bnBlock")) { throw Error("Node should be a bnBlock, but is instead: " + node.type.name); @@ -445,8 +449,8 @@ export function nodeToBlock< blockSchema, inlineContentSchema, styleSchema, - blockCache - ) + blockCache, + ), ); }); @@ -459,7 +463,7 @@ export function nodeToBlock< content = contentNodeToInlineContent( blockInfo.blockContent.node, inlineContentSchema, - styleSchema + styleSchema, ); } else if (blockConfig.content === "table") { if (!blockInfo.isBlockContainer) { @@ -468,7 +472,7 @@ export function nodeToBlock< content = contentNodeToTableContent( blockInfo.blockContent.node, inlineContentSchema, - styleSchema + styleSchema, ); } else if (blockConfig.content === "none") { content = undefined; diff --git a/packages/core/src/api/nodeUtil.test.ts b/packages/core/src/api/nodeUtil.test.ts index d7c3486e21..9fa46b4315 100644 --- a/packages/core/src/api/nodeUtil.test.ts +++ b/packages/core/src/api/nodeUtil.test.ts @@ -27,7 +27,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-inserted.json" + "__snapshots__/blocks-inserted.json", ); }); @@ -41,14 +41,14 @@ describe("Test getBlocksChangedByTransaction", () => { }, ], "paragraph-0", - "after" + "after", ); return getBlocksChangedByTransaction(tr); }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-inserted-nested.json" + "__snapshots__/blocks-inserted-nested.json", ); }); @@ -59,7 +59,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-deleted.json" + "__snapshots__/blocks-deleted.json", ); }); @@ -70,7 +70,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-deleted-nested-deep.json" + "__snapshots__/blocks-deleted-nested-deep.json", ); }); @@ -81,7 +81,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-deleted-nested.json" + "__snapshots__/blocks-deleted-nested.json", ); }); @@ -97,7 +97,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated.json" + "__snapshots__/blocks-updated.json", ); }); @@ -113,7 +113,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-nested.json" + "__snapshots__/blocks-updated-nested.json", ); }); @@ -127,7 +127,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-nested-deep.json" + "__snapshots__/blocks-updated-nested-deep.json", ); }); @@ -146,7 +146,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-nested-multiple.json" + "__snapshots__/blocks-updated-nested-multiple.json", ); }); @@ -167,7 +167,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-single.json" + "__snapshots__/blocks-updated-single.json", ); }); @@ -188,7 +188,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-multiple.json" + "__snapshots__/blocks-updated-multiple.json", ); }); @@ -197,19 +197,19 @@ describe("Test getBlocksChangedByTransaction", () => { editor.insertBlocks( [{ type: "paragraph", content: "ABC" }], "paragraph-0", - "after" + "after", ); editor.insertBlocks( [{ type: "paragraph", content: "DEF" }], "paragraph-1", - "after" + "after", ); return getBlocksChangedByTransaction(tr); }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-multiple-insert.json" + "__snapshots__/blocks-updated-multiple-insert.json", ); }); @@ -222,7 +222,7 @@ describe("Test getBlocksChangedByTransaction", () => { }); await expect(blocksChanged).toMatchFileSnapshot( - "__snapshots__/blocks-updated-content-inserted.json" + "__snapshots__/blocks-updated-content-inserted.json", ); }); }); diff --git a/packages/core/src/api/nodeUtil.ts b/packages/core/src/api/nodeUtil.ts index 450698bcc0..45e3556fe3 100644 --- a/packages/core/src/api/nodeUtil.ts +++ b/packages/core/src/api/nodeUtil.ts @@ -22,7 +22,7 @@ import { getPmSchema } from "./pmUtil.js"; */ export function getNodeById( id: string, - doc: Node + doc: Node, ): { node: Node; posBeforeNode: number } | undefined { let targetNode: Node | undefined = undefined; let posBeforeNode: number | undefined = undefined; @@ -98,7 +98,7 @@ export type BlockChangeSource = export type BlocksChanged< BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, - SSchema extends StyleSchema = DefaultStyleSchema + SSchema extends StyleSchema = DefaultStyleSchema, > = Array< { /** @@ -134,10 +134,10 @@ export type BlocksChanged< function areBlocksDifferentExcludingChildren< BSchema extends BlockSchema, ISchema extends InlineContentSchema, - SSchema extends StyleSchema + SSchema extends StyleSchema, >( block1: Block, - block2: Block + block2: Block, ): boolean { // TODO use an actual diff algorithm // Compare all properties except children @@ -158,10 +158,10 @@ function areBlocksDifferentExcludingChildren< export function getBlocksChangedByTransaction< BSchema extends BlockSchema = DefaultBlockSchema, ISchema extends InlineContentSchema = DefaultInlineContentSchema, - SSchema extends StyleSchema = DefaultStyleSchema + SSchema extends StyleSchema = DefaultStyleSchema, >( transaction: Transaction, - appendedTransactions: Transaction[] = [] + appendedTransactions: Transaction[] = [], ): BlocksChanged { let source: BlockChangeSource = { type: "local" }; @@ -198,7 +198,7 @@ export function getBlocksChangedByTransaction< return findChildrenInRange( combinedTransaction.before, range.oldRange, - isNodeBlock + isNodeBlock, ); }) .map(({ node }) => nodeToBlock(node, pmSchema)); @@ -208,7 +208,7 @@ export function getBlocksChangedByTransaction< return findChildrenInRange( combinedTransaction.doc, range.newRange, - isNodeBlock + isNodeBlock, ); }) .map(({ node }) => nodeToBlock(node, pmSchema)); @@ -216,12 +216,12 @@ export function getBlocksChangedByTransaction< const nextBlocks = new Map( nextAffectedBlocks.map((block) => { return [block.id, block]; - }) + }), ); const prevBlocks = new Map( prevAffectedBlocks.map((block) => { return [block.id, block]; - }) + }), ); const changes: BlocksChanged = []; diff --git a/packages/core/src/api/parsers/html/parseHTML.ts b/packages/core/src/api/parsers/html/parseHTML.ts index b736607713..726805b81d 100644 --- a/packages/core/src/api/parsers/html/parseHTML.ts +++ b/packages/core/src/api/parsers/html/parseHTML.ts @@ -11,7 +11,7 @@ import { nestedListsToBlockNoteStructure } from "./util/nestedLists.js"; export async function HTMLToBlocks< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(html: string, pmSchema: Schema): Promise[]> { const htmlNode = nestedListsToBlockNoteStructure(html); const parser = DOMParser.fromSchema(pmSchema); diff --git a/packages/core/src/api/parsers/html/util/nestedLists.ts b/packages/core/src/api/parsers/html/util/nestedLists.ts index 7e8a9fe657..9c2427af86 100644 --- a/packages/core/src/api/parsers/html/util/nestedLists.ts +++ b/packages/core/src/api/parsers/html/util/nestedLists.ts @@ -33,7 +33,7 @@ function liftNestedListsToParent(element: HTMLElement) { const index = getChildIndex(list); const parentListItem = list.parentElement!; const siblingsAfter = Array.from(parentListItem.childNodes).slice( - index + 1 + index + 1, ); list.remove(); siblingsAfter.forEach((sibling) => { @@ -110,7 +110,7 @@ function detachedDoc() { } export function nestedListsToBlockNoteStructure( - elementOrHTML: HTMLElement | string + elementOrHTML: HTMLElement | string, ) { if (typeof elementOrHTML === "string") { const element = detachedDoc().createElement("div"); diff --git a/packages/core/src/api/parsers/markdown/parseMarkdown.ts b/packages/core/src/api/parsers/markdown/parseMarkdown.ts index 555b49c5da..d48a0fae19 100644 --- a/packages/core/src/api/parsers/markdown/parseMarkdown.ts +++ b/packages/core/src/api/parsers/markdown/parseMarkdown.ts @@ -70,7 +70,7 @@ export async function markdownToHTML(markdown: string): Promise { export async function markdownToBlocks< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(markdown: string, pmSchema: Schema): Promise[]> { const htmlString = await markdownToHTML(markdown); diff --git a/packages/core/src/api/pmUtil.ts b/packages/core/src/api/pmUtil.ts index 95fa59fca3..0d4be4ee08 100644 --- a/packages/core/src/api/pmUtil.ts +++ b/packages/core/src/api/pmUtil.ts @@ -16,7 +16,7 @@ export function getPmSchema(trOrNode: Transaction | Node) { function getBlockNoteEditor< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(schema: Schema): BlockNoteEditor { return schema.cached.blockNoteEditor as BlockNoteEditor; } @@ -24,7 +24,7 @@ function getBlockNoteEditor< export function getBlockNoteSchema< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(schema: Schema): BlockNoteSchema { return getBlockNoteEditor(schema).schema as unknown as BlockNoteSchema< BSchema, @@ -34,13 +34,13 @@ export function getBlockNoteSchema< } export function getBlockSchema( - schema: Schema + schema: Schema, ): BSchema { return getBlockNoteSchema(schema).blockSchema as BSchema; } export function getInlineContentSchema( - schema: Schema + schema: Schema, ): I { return getBlockNoteSchema(schema).inlineContentSchema as I; } diff --git a/packages/core/src/api/positionMapping.test.ts b/packages/core/src/api/positionMapping.test.ts index 6b45e1da29..aad3021257 100644 --- a/packages/core/src/api/positionMapping.test.ts +++ b/packages/core/src/api/positionMapping.test.ts @@ -23,7 +23,7 @@ describe("PositionStorage with local editor", () => { expect(editor._tiptapEditor.on).toHaveBeenCalledWith( "transaction", - expect.any(Function) + expect.any(Function), ); }); }); @@ -59,7 +59,7 @@ describe("PositionStorage with local editor", () => { }, ], editor.document[0], - "before" + "before", ); // Start tracking @@ -98,7 +98,7 @@ describe("PositionStorage with local editor", () => { }, ], editor.document[0], - "before" + "before", ); // Start tracking const getPos = trackPosition(editor, 10); diff --git a/packages/core/src/api/positionMapping.ts b/packages/core/src/api/positionMapping.ts index 595226d099..d5bfab8bbf 100644 --- a/packages/core/src/api/positionMapping.ts +++ b/packages/core/src/api/positionMapping.ts @@ -59,10 +59,10 @@ export function trackPosition( /** * This is the side of the position to track. "left" is the default. "right" would move with the change if the change is in the right direction. */ - side: "left" | "right" = "left" + side: "left" | "right" = "left", ): () => number { const ySyncPluginState = ySyncPluginKey.getState( - editor._tiptapEditor.state + editor._tiptapEditor.state, ) as { doc: Y.Doc; binding: ProsemirrorBinding; @@ -90,18 +90,18 @@ export function trackPosition( // Track the position after the position if we are on the right side position + (side === "right" ? 1 : 0), ySyncPluginState.binding.type, - ySyncPluginState.binding.mapping + ySyncPluginState.binding.mapping, ); return () => { const curYSyncPluginState = ySyncPluginKey.getState( - editor._tiptapEditor.state + editor._tiptapEditor.state, ) as typeof ySyncPluginState; const pos = relativePositionToAbsolutePosition( curYSyncPluginState.doc, curYSyncPluginState.binding.type, relativePosition, - curYSyncPluginState.binding.mapping + curYSyncPluginState.binding.mapping, ); // This can happen if the element is garbage collected diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts index b00771d947..7a3e0101fe 100644 --- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts +++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts @@ -47,7 +47,7 @@ export const audioBlockConfig = { export const audioRender = ( block: BlockFromConfig, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { const icon = document.createElement("div"); icon.innerHTML = FILE_AUDIO_ICON_SVG; @@ -70,12 +70,12 @@ export const audioRender = ( editor, { dom: audio }, editor.dictionary.file_blocks.audio.add_button_text, - icon.firstElementChild as HTMLElement + icon.firstElementChild as HTMLElement, ); }; export const audioParse = ( - element: HTMLElement + element: HTMLElement, ): Partial> | undefined => { if (element.tagName === "AUDIO") { // Ignore if parent figure has already been parsed. @@ -104,7 +104,7 @@ export const audioParse = ( }; export const audioToExternalHTML = ( - block: BlockFromConfig + block: BlockFromConfig, ) => { if (!block.props.url) { const div = document.createElement("p"); diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts index c1e775d234..239add82b4 100644 --- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts +++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts @@ -64,7 +64,7 @@ type CodeBlockConfigOptions = { export const shikiParserSymbol = Symbol.for("blocknote.shikiParser"); export const shikiHighlighterPromiseSymbol = Symbol.for( - "blocknote.shikiHighlighterPromise" + "blocknote.shikiHighlighterPromise", ); export const defaultCodeBlockPropSchema = { language: { @@ -166,7 +166,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ { ...(this.options.domAttributes?.inlineContent || {}), ...HTMLAttributes, - } + }, ); dom.removeChild(contentDOM); @@ -192,7 +192,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); const handleLanguageChange = (event: Event) => { const language = (event.target as HTMLSelectElement).value; @@ -205,7 +205,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ }; Object.entries( - options.editor.settings.codeBlock.supportedLanguages + options.editor.settings.codeBlock.supportedLanguages, ).forEach(([id, { name }]) => { const option = document.createElement("option"); @@ -256,7 +256,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ if (process.env.NODE_ENV === "development" && !hasWarned) { // eslint-disable-next-line no-console console.log( - "For syntax highlighting of code blocks, you must provide a `codeBlock.createHighlighter` function" + "For syntax highlighting of code blocks, you must provide a `codeBlock.createHighlighter` function", ); hasWarned = true; } @@ -270,12 +270,12 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ return globalThisForShiki[shikiHighlighterPromiseSymbol].then( (createdHighlighter) => { highlighter = createdHighlighter; - } + }, ); } const language = getLanguageId( options.editor.settings.codeBlock, - parserOptions.language! + parserOptions.language!, ); if ( @@ -331,7 +331,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ .canReplaceWith( $start.index(-1), $start.indexAfter(-1), - this.type + this.type, ) ) { return null; @@ -418,7 +418,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ $from.pos - $from.parentOffset + $from.parent.nodeSize, { type: "paragraph", - } + }, ) .run(); @@ -430,16 +430,16 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode( CodeBlockContent, - defaultCodeBlockPropSchema + defaultCodeBlockPropSchema, ); function getLanguageId( options: CodeBlockOptions, - languageName: string + languageName: string, ): string | undefined { return Object.entries(options.supportedLanguages).find( ([id, { aliases }]) => { return aliases?.includes(languageName) || id === languageName; - } + }, )?.[0]; } diff --git a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts index ad861393ca..433487d8e0 100644 --- a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts +++ b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts @@ -36,7 +36,7 @@ export const fileBlockConfig = { export const fileRender = ( block: BlockFromConfig, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { return createFileBlockWrapper(block, editor); }; @@ -69,7 +69,7 @@ export const fileParse = (element: HTMLElement) => { }; export const fileToExternalHTML = ( - block: BlockFromConfig + block: BlockFromConfig, ) => { if (!block.props.url) { const div = document.createElement("p"); diff --git a/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts index 2e306bb86a..4da64002c9 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/parse/parseFigureElement.ts @@ -1,9 +1,9 @@ export const parseFigureElement = ( figureElement: HTMLElement, - targetTag: string + targetTag: string, ) => { const targetElement = figureElement.querySelector( - targetTag + targetTag, ) as HTMLElement | null; if (!targetElement) { return undefined; diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts index 69960212c7..686b1acf0d 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createAddFileButton.ts @@ -5,7 +5,7 @@ export const createAddFileButton = ( block: BlockFromConfig, editor: BlockNoteEditor, buttonText?: string, - buttonIcon?: HTMLElement + buttonIcon?: HTMLElement, ) => { const addFileButton = document.createElement("div"); addFileButton.className = "bn-add-file-button"; @@ -35,13 +35,13 @@ export const createAddFileButton = ( editor.transact((tr) => tr.setMeta(editor.filePanel!.plugin, { block: block, - }) + }), ); }; addFileButton.addEventListener( "mousedown", addFileButtonMouseDownHandler, - true + true, ); addFileButton.addEventListener("click", addFileButtonClickHandler, true); @@ -51,12 +51,12 @@ export const createAddFileButton = ( addFileButton.removeEventListener( "mousedown", addFileButtonMouseDownHandler, - true + true, ); addFileButton.removeEventListener( "click", addFileButtonClickHandler, - true + true, ); }, }; diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts index 4d2314dc33..02af916f2d 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileBlockWrapper.ts @@ -16,7 +16,7 @@ export const createFileBlockWrapper = ( >, element?: { dom: HTMLElement; destroy?: () => void }, buttonText?: string, - buttonIcon?: HTMLElement + buttonIcon?: HTMLElement, ) => { const wrapper = document.createElement("div"); wrapper.className = "bn-file-block-content-wrapper"; @@ -28,7 +28,7 @@ export const createFileBlockWrapper = ( block, editor, buttonText, - buttonIcon + buttonIcon, ); wrapper.appendChild(addFileButton.dom); diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts index cd4b37b291..dded8dbde6 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createFileNameWithIcon.ts @@ -3,7 +3,7 @@ import { BlockFromConfig, FileBlockConfig } from "../../../../schema/index.js"; export const FILE_ICON_SVG = ``; export const createFileNameWithIcon = ( - block: BlockFromConfig + block: BlockFromConfig, ): { dom: HTMLElement; destroy?: () => void } => { const file = document.createElement("div"); file.className = "bn-file-name-with-icon"; diff --git a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts index 484b442fdc..b4c4ae95d7 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/render/createResizableFileBlockWrapper.ts @@ -8,14 +8,14 @@ export const createResizableFileBlockWrapper = ( element: { dom: HTMLElement; destroy?: () => void }, resizeHandlesContainerElement: HTMLElement, buttonText: string, - buttonIcon: HTMLElement + buttonIcon: HTMLElement, ): { dom: HTMLElement; destroy: () => void } => { const { dom, destroy } = createFileBlockWrapper( block, editor, element, buttonText, - buttonIcon + buttonIcon, ); const wrapper = dom; if (block.props.url && block.props.showPreview) { @@ -93,7 +93,7 @@ export const createResizableFileBlockWrapper = ( // predetermined minimum width. width = Math.min( Math.max(newWidth, minWidth), - editor.domElement?.firstElementChild?.clientWidth || Number.MAX_VALUE + editor.domElement?.firstElementChild?.clientWidth || Number.MAX_VALUE, ); wrapper.style.width = `${width}px`; }; @@ -183,11 +183,11 @@ export const createResizableFileBlockWrapper = ( wrapper.addEventListener("mouseleave", wrapperMouseLeaveHandler); leftResizeHandle.addEventListener( "mousedown", - leftResizeHandleMouseDownHandler + leftResizeHandleMouseDownHandler, ); rightResizeHandle.addEventListener( "mousedown", - rightResizeHandleMouseDownHandler + rightResizeHandleMouseDownHandler, ); return { @@ -200,11 +200,11 @@ export const createResizableFileBlockWrapper = ( wrapper.removeEventListener("mouseleave", wrapperMouseLeaveHandler); leftResizeHandle.removeEventListener( "mousedown", - leftResizeHandleMouseDownHandler + leftResizeHandleMouseDownHandler, ); rightResizeHandle.removeEventListener( "mousedown", - rightResizeHandleMouseDownHandler + rightResizeHandleMouseDownHandler, ); }, }; diff --git a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts index 8379d38383..d2e5ae7ac9 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createFigureWithCaption.ts @@ -1,6 +1,6 @@ export const createFigureWithCaption = ( element: HTMLElement, - caption: string + caption: string, ) => { const figure = document.createElement("figure"); const captionElement = document.createElement("figcaption"); diff --git a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts index 95a03fccd5..5091d836bc 100644 --- a/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts +++ b/packages/core/src/blocks/FileBlockContent/helpers/toExternalHTML/createLinkWithCaption.ts @@ -1,6 +1,6 @@ export const createLinkWithCaption = ( element: HTMLElement, - caption: string + caption: string, ) => { const wrapper = document.createElement("div"); const fileCaption = document.createElement("p"); diff --git a/packages/core/src/blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts b/packages/core/src/blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts index 6ec9401ec3..ab0a686e82 100644 --- a/packages/core/src/blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts +++ b/packages/core/src/blocks/FileBlockContent/uploadToTmpFilesDotOrg_DEV_ONLY.ts @@ -4,7 +4,7 @@ * @warning This function should only be used for development purposes, replace with your own backend! */ export const uploadToTmpFilesDotOrg_DEV_ONLY = async ( - file: File + file: File, ): Promise => { const body = new FormData(); body.append("file", file); @@ -15,6 +15,6 @@ export const uploadToTmpFilesDotOrg_DEV_ONLY = async ( }); return (await ret.json()).data.url.replace( "tmpfiles.org/", - "tmpfiles.org/dl/" + "tmpfiles.org/dl/", ); }; diff --git a/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts b/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts index 22ef291623..8299892a03 100644 --- a/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts +++ b/packages/core/src/blocks/HeadingBlockContent/HeadingBlockContent.ts @@ -46,7 +46,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({ props: { level: level as any, }, - }) + }), ) // Removes the "#" character(s) used to set the heading. .deleteRange({ from: range.from, to: range.to }) @@ -75,7 +75,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({ props: { level: 1 as any, }, - }) + }), ); }, "Mod-Alt-2": () => { @@ -93,7 +93,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({ props: { level: 2 as any, }, - }) + }), ); }, "Mod-Alt-3": () => { @@ -111,7 +111,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({ props: { level: 3 as any, }, - }) + }), ); }, }; @@ -150,12 +150,12 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, }); export const Heading = createBlockSpecFromStronglyTypedTiptapNode( HeadingBlockContent, - headingPropSchema + headingPropSchema, ); diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts index 9d70b4c00e..32b7338640 100644 --- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts +++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts @@ -52,7 +52,7 @@ export const imageBlockConfig = { export const imageRender = ( block: BlockFromConfig, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { const icon = document.createElement("div"); icon.innerHTML = FILE_IMAGE_ICON_SVG; @@ -81,12 +81,12 @@ export const imageRender = ( { dom: imageWrapper }, imageWrapper, editor.dictionary.file_blocks.image.add_button_text, - icon.firstElementChild as HTMLElement + icon.firstElementChild as HTMLElement, ); }; export const imageParse = ( - element: HTMLElement + element: HTMLElement, ): Partial> | undefined => { if (element.tagName === "IMG") { // Ignore if parent figure has already been parsed. @@ -115,7 +115,7 @@ export const imageParse = ( }; export const imageToExternalHTML = ( - block: BlockFromConfig + block: BlockFromConfig, ) => { if (!block.props.url) { const div = document.createElement("p"); diff --git a/packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts b/packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts index 5bc867809b..e6412633c4 100644 --- a/packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts +++ b/packages/core/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts @@ -41,7 +41,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "bulletListItem", props: {}, - }) + }), ) // Removes the "-", "+", or "*" character used to set the list. .deleteRange({ from: range.from, to: range.to }); @@ -66,7 +66,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "bulletListItem", props: {}, - }) + }), ); }, }; @@ -122,12 +122,12 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, }); export const BulletListItem = createBlockSpecFromStronglyTypedTiptapNode( BulletListItemBlockContent, - bulletListItemPropSchema + bulletListItemPropSchema, ); diff --git a/packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts b/packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts index 056c6e3256..8ebf62aa63 100644 --- a/packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts +++ b/packages/core/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts @@ -52,7 +52,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ props: { checked: false as any, }, - }) + }), ) // Removes the characters used to set the list. .deleteRange({ from: range.from, to: range.to }); @@ -77,7 +77,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ props: { checked: true as any, }, - }) + }), ) // Removes the characters used to set the list. .deleteRange({ from: range.from, to: range.to }); @@ -102,7 +102,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "checkListItem", props: {}, - }) + }), ); }, }; @@ -155,7 +155,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ ) { const checkbox = (element.querySelector( - "input[type=checkbox]" + "input[type=checkbox]", ) as HTMLInputElement) || null; if (checkbox === null) { @@ -196,7 +196,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); dom.insertBefore(checkbox, contentDOM); @@ -234,12 +234,12 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ if (typeof getPos !== "boolean") { const beforeBlockContainerPos = getNearestBlockPos( editor.state.doc, - getPos() + getPos(), ); if (beforeBlockContainerPos.node.type.name !== "blockContainer") { throw new Error( - `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}` + `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}`, ); } @@ -249,7 +249,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ props: { checked: checkbox.checked as any, }, - }) + }), ); } }; @@ -262,7 +262,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); if (typeof getPos !== "boolean") { @@ -295,5 +295,5 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({ export const CheckListItem = createBlockSpecFromStronglyTypedTiptapNode( checkListItemBlockContent, - checkListItemPropSchema + checkListItemPropSchema, ); diff --git a/packages/core/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts b/packages/core/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts index c6a0529850..f901206c10 100644 --- a/packages/core/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts +++ b/packages/core/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts @@ -36,7 +36,7 @@ export const handleEnter = (editor: BlockNoteEditor) => { updateBlockCommand(blockContainer.beforePos, { type: "paragraph", props: {}, - }) + }), ); } diff --git a/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts b/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts index d114532728..a17024647c 100644 --- a/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts +++ b/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts @@ -35,7 +35,7 @@ export const NumberedListIndexingPlugin = () => { // first block in its nesting level, or the previous block is not an ordered list item. const prevBlock = tr.doc.resolve( - blockInfo.bnBlock.beforePos + blockInfo.bnBlock.beforePos, ).nodeBefore; if (prevBlock) { diff --git a/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts b/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts index fd837ca7b4..4e271bae14 100644 --- a/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts +++ b/packages/core/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts @@ -65,7 +65,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({ ({ start: startIndex, } as any), - }) + }), ) // Removes the "1." characters used to set the list. .deleteRange({ from: range.from, to: range.to }); @@ -90,7 +90,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "numberedListItem", props: {}, - }) + }), ); }, }; @@ -160,12 +160,12 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, }); export const NumberedListItem = createBlockSpecFromStronglyTypedTiptapNode( NumberedListItemBlockContent, - numberedListItemPropSchema + numberedListItemPropSchema, ); diff --git a/packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts b/packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts index 15e5da68f6..8a200b4dab 100644 --- a/packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts +++ b/packages/core/src/blocks/ListItemBlockContent/getListItemContent.ts @@ -26,7 +26,7 @@ export function getListItemContent( /** * The name of the list item node. */ - name: string + name: string, ): Fragment { /** * To actually implement this algorithm, we need to leverage ProseMirror's "fitting" algorithm. @@ -70,8 +70,8 @@ export function getListItemContent( // and continuing with the rest of the algorithm. blockGroupNode = blockGroupNode.copy( blockGroupNode.content.cut( - blockGroupNode.firstChild.firstChild.nodeSize + 2 - ) + blockGroupNode.firstChild.firstChild.nodeSize + 2, + ), ); } @@ -90,14 +90,14 @@ export function getListItemContent( // The remaining nodes in the `blockGroup` stay in-place. const listItemNode = schema.nodes[name].create( {}, - listItemsFirstChild.content + listItemsFirstChild.content, ); // We have `blockGroup[]>` // We want to extract out the rest of the nodes as `<...blockContainer[]>` const remainingListItemChildren = blockGroupNode.content.cut( // +2 for the `blockGroup` node's start and end markers - listItemsFirstChild.nodeSize + 2 + listItemsFirstChild.nodeSize + 2, ); const hasRemainingListItemChildren = remainingListItemChildren.size > 0; diff --git a/packages/core/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts b/packages/core/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts index e1e72ab59c..c8343a30f3 100644 --- a/packages/core/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts +++ b/packages/core/src/blocks/PageBreakBlockContent/PageBreakBlockContent.ts @@ -22,7 +22,7 @@ export const pageBreakRender = () => { }; }; export const pageBreakParse = ( - element: HTMLElement + element: HTMLElement, ): Partial> | undefined => { if (element.tagName === "DIV" && element.hasAttribute("data-page-break")) { return { diff --git a/packages/core/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts b/packages/core/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts index 6c7b10ad80..ad58140a2e 100644 --- a/packages/core/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts +++ b/packages/core/src/blocks/PageBreakBlockContent/getPageBreakSlashMenuItems.ts @@ -10,9 +10,9 @@ import { pageBreakSchema } from "./schema.js"; export function checkPageBreakBlocksInSchema< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - editor: BlockNoteEditor + editor: BlockNoteEditor, ): editor is BlockNoteEditor { return ( "pageBreak" in editor.schema.blockSchema && @@ -24,7 +24,7 @@ export function checkPageBreakBlocksInSchema< export function getPageBreakSlashMenuItems< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(editor: BlockNoteEditor) { const items: (Omit & { key: "page_break" })[] = []; diff --git a/packages/core/src/blocks/PageBreakBlockContent/schema.ts b/packages/core/src/blocks/PageBreakBlockContent/schema.ts index c9b64a59c5..15ea54cbe5 100644 --- a/packages/core/src/blocks/PageBreakBlockContent/schema.ts +++ b/packages/core/src/blocks/PageBreakBlockContent/schema.ts @@ -18,9 +18,9 @@ export const pageBreakSchema = BlockNoteSchema.create({ export const withPageBreak = < B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - schema: BlockNoteSchema + schema: BlockNoteSchema, ) => { return BlockNoteSchema.create({ blockSpecs: { diff --git a/packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts b/packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts index ba86d9efa8..0c35c117a7 100644 --- a/packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts +++ b/packages/core/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts @@ -31,7 +31,7 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "paragraph", props: {}, - }) + }), ); }, }; @@ -67,12 +67,12 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, }); export const Paragraph = createBlockSpecFromStronglyTypedTiptapNode( ParagraphBlockContent, - paragraphPropSchema + paragraphPropSchema, ); diff --git a/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts b/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts index 7c89f2e2bc..3c13c56c2d 100644 --- a/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts +++ b/packages/core/src/blocks/QuoteBlockContent/QuoteBlockContent.ts @@ -36,7 +36,7 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "quote", props: {}, - }) + }), ) // Removes the ">" character used to set the list. .deleteRange({ from: range.from, to: range.to }); @@ -59,7 +59,7 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({ return this.editor.commands.command( updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "quote", - }) + }), ); }, }; @@ -88,12 +88,12 @@ export const QuoteBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, }); export const Quote = createBlockSpecFromStronglyTypedTiptapNode( QuoteBlockContent, - quotePropSchema + quotePropSchema, ); diff --git a/packages/core/src/blocks/README.md b/packages/core/src/blocks/README.md index b5a8581591..bf794ae4c5 100644 --- a/packages/core/src/blocks/README.md +++ b/packages/core/src/blocks/README.md @@ -1,3 +1,3 @@ ### @blocknote/core/src/blocks -The default built-in blocks that ship with BlockNote \ No newline at end of file +The default built-in blocks that ship with BlockNote diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 1062f303ca..f56de3b4b1 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -42,7 +42,7 @@ export const TableBlockContent = createStronglyTypedTiptapNode({ ...(this.options.domAttributes?.blockContent || {}), ...HTMLAttributes, }, - this.options.domAttributes?.inlineContent || {} + this.options.domAttributes?.inlineContent || {}, ); }, @@ -59,18 +59,18 @@ export const TableBlockContent = createStronglyTypedTiptapNode({ constructor( public node: PMNode, public cellMinWidth: number, - public blockContentHTMLAttributes: Record + public blockContentHTMLAttributes: Record, ) { super(node, cellMinWidth); const blockContent = document.createElement("div"); blockContent.className = mergeCSSClasses( "bn-block-content", - blockContentHTMLAttributes.class + blockContentHTMLAttributes.class, ); blockContent.setAttribute("data-content-type", "table"); for (const [attribute, value] of Object.entries( - blockContentHTMLAttributes + blockContentHTMLAttributes, )) { if (attribute !== "class") { blockContent.setAttribute(attribute, value); @@ -229,5 +229,5 @@ export const Table = createBlockSpecFromStronglyTypedTiptapNode( }, }), TableRow, - ] + ], ); diff --git a/packages/core/src/blocks/TableBlockContent/TableExtension.ts b/packages/core/src/blocks/TableBlockContent/TableExtension.ts index 0ed6836eea..3660d8c620 100644 --- a/packages/core/src/blocks/TableBlockContent/TableExtension.ts +++ b/packages/core/src/blocks/TableBlockContent/TableExtension.ts @@ -56,12 +56,12 @@ export const TableExtension = Extension.create({ // Enables navigating cells using the tab key. Tab: () => { return this.editor.commands.command(({ state, dispatch, view }) => - goToNextCell(1)(state, dispatch, view) + goToNextCell(1)(state, dispatch, view), ); }, "Shift-Tab": () => { return this.editor.commands.command(({ state, dispatch, view }) => - goToNextCell(-1)(state, dispatch, view) + goToNextCell(-1)(state, dispatch, view), ); }, }; @@ -76,7 +76,7 @@ export const TableExtension = Extension.create({ return { tableRole: callOrReturn( - getExtensionField(extension, "tableRole", context) + getExtensionField(extension, "tableRole", context), ), }; }, diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts index 8a7f7fe804..af65e3d0df 100644 --- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts +++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts @@ -52,7 +52,7 @@ export const videoBlockConfig = { export const videoRender = ( block: BlockFromConfig, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { const icon = document.createElement("div"); icon.innerHTML = FILE_VIDEO_ICON_SVG; @@ -81,12 +81,12 @@ export const videoRender = ( { dom: videoWrapper }, videoWrapper, editor.dictionary.file_blocks.video.add_button_text, - icon.firstElementChild as HTMLElement + icon.firstElementChild as HTMLElement, ); }; export const videoParse = ( - element: HTMLElement + element: HTMLElement, ): Partial> | undefined => { if (element.tagName === "VIDEO") { // Ignore if parent figure has already been parsed. @@ -115,7 +115,7 @@ export const videoParse = ( }; export const videoToExternalHTML = ( - block: BlockFromConfig + block: BlockFromConfig, ) => { if (!block.props.url) { const div = document.createElement("p"); diff --git a/packages/core/src/blocks/defaultBlockHelpers.ts b/packages/core/src/blocks/defaultBlockHelpers.ts index 056587a79f..5f19cc052f 100644 --- a/packages/core/src/blocks/defaultBlockHelpers.ts +++ b/packages/core/src/blocks/defaultBlockHelpers.ts @@ -18,12 +18,12 @@ export function createDefaultBlockDOMOutputSpec( blockName: string, htmlTag: string, blockContentHTMLAttributes: Record, - inlineContentHTMLAttributes: Record + inlineContentHTMLAttributes: Record, ) { const blockContent = document.createElement("div"); blockContent.className = mergeCSSClasses( "bn-block-content", - blockContentHTMLAttributes.class + blockContentHTMLAttributes.class, ); blockContent.setAttribute("data-content-type", blockName); for (const [attribute, value] of Object.entries(blockContentHTMLAttributes)) { @@ -35,10 +35,10 @@ export function createDefaultBlockDOMOutputSpec( const inlineContent = document.createElement(htmlTag); inlineContent.className = mergeCSSClasses( "bn-inline-content", - inlineContentHTMLAttributes.class + inlineContentHTMLAttributes.class, ); for (const [attribute, value] of Object.entries( - inlineContentHTMLAttributes + inlineContentHTMLAttributes, )) { if (attribute !== "class") { inlineContent.setAttribute(attribute, value); @@ -59,10 +59,10 @@ export function createDefaultBlockDOMOutputSpec( export const defaultBlockToHTML = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( block: BlockNoDefaults, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): { dom: HTMLElement; contentDOM?: HTMLElement; @@ -78,7 +78,7 @@ export const defaultBlockToHTML = < if (toDOM === undefined) { throw new Error( - "This block has no default HTML serialization as its corresponding TipTap node doesn't implement `renderHTML`." + "This block has no default HTML serialization as its corresponding TipTap node doesn't implement `renderHTML`.", ); } @@ -86,7 +86,7 @@ export const defaultBlockToHTML = < if (typeof renderSpec !== "object" || !("dom" in renderSpec)) { throw new Error( - "Cannot use this block's default HTML serialization as its corresponding TipTap node's `renderHTML` function does not return an object with the `dom` property." + "Cannot use this block's default HTML serialization as its corresponding TipTap node's `renderHTML` function does not return an object with the `dom` property.", ); } diff --git a/packages/core/src/blocks/defaultBlockTypeGuards.ts b/packages/core/src/blocks/defaultBlockTypeGuards.ts index 1704456045..5db988da9a 100644 --- a/packages/core/src/blocks/defaultBlockTypeGuards.ts +++ b/packages/core/src/blocks/defaultBlockTypeGuards.ts @@ -20,10 +20,10 @@ import { Selection } from "prosemirror-state"; export function checkDefaultBlockTypeInSchema< BlockType extends keyof DefaultBlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( blockType: BlockType, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): editor is BlockNoteEditor<{ Type: DefaultBlockSchema[BlockType] }, I, S> { return ( blockType in editor.schema.blockSchema && @@ -34,10 +34,10 @@ export function checkDefaultBlockTypeInSchema< export function checkDefaultInlineContentTypeInSchema< InlineContentType extends keyof DefaultInlineContentSchema, B extends BlockSchema, - S extends StyleSchema + S extends StyleSchema, >( inlineContentType: InlineContentType, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): editor is BlockNoteEditor< B, { Type: DefaultInlineContentSchema[InlineContentType] }, @@ -53,11 +53,11 @@ export function checkDefaultInlineContentTypeInSchema< export function checkBlockIsDefaultType< BlockType extends keyof DefaultBlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( blockType: BlockType, block: Block, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): block is BlockFromConfig { return ( block.type === blockType && @@ -69,10 +69,10 @@ export function checkBlockIsDefaultType< export function checkBlockIsFileBlock< B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( block: Block, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): block is BlockFromConfig { return ( (block.type in editor.schema.blockSchema && @@ -84,10 +84,10 @@ export function checkBlockIsFileBlock< export function checkBlockIsFileBlockWithPreview< B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( block: Block, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): block is BlockFromConfig< FileBlockConfig & { propSchema: Required; @@ -106,7 +106,7 @@ export function checkBlockIsFileBlockWithPreview< export function checkBlockIsFileBlockWithPlaceholder< B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(block: Block, editor: BlockNoteEditor) { const config = editor.schema.blockSchema[block.type]; return config.isFileBlock && !block.props.url; @@ -115,11 +115,11 @@ export function checkBlockIsFileBlockWithPlaceholder< export function checkBlockTypeHasDefaultProp< Prop extends keyof typeof defaultProps, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( prop: Prop, blockType: string, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): editor is BlockNoteEditor< { [BT in string]: { @@ -143,11 +143,11 @@ export function checkBlockTypeHasDefaultProp< export function checkBlockHasDefaultProp< Prop extends keyof typeof defaultProps, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( prop: Prop, block: Block, - editor: BlockNoteEditor + editor: BlockNoteEditor, ): block is BlockFromConfig< { type: string; @@ -163,7 +163,7 @@ export function checkBlockHasDefaultProp< } export function isTableCellSelection( - selection: Selection + selection: Selection, ): selection is CellSelection { return selection instanceof CellSelection; } diff --git a/packages/core/src/blocks/defaultBlocks.ts b/packages/core/src/blocks/defaultBlocks.ts index 9991e86069..5e6deeb46c 100644 --- a/packages/core/src/blocks/defaultBlocks.ts +++ b/packages/core/src/blocks/defaultBlocks.ts @@ -78,7 +78,7 @@ export const defaultInlineContentSpecs = { } satisfies InlineContentSpecs; export const defaultInlineContentSchema = getInlineContentSchemaFromSpecs( - defaultInlineContentSpecs + defaultInlineContentSpecs, ); // underscore is used that in case a user overrides DefaultInlineContentSchema, @@ -89,11 +89,11 @@ export type DefaultInlineContentSchema = _DefaultInlineContentSchema; export type PartialBlock< BSchema extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, > = PartialBlockNoDefaults; export type Block< BSchema extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, > = BlockNoDefaults; diff --git a/packages/core/src/comments/threadstore/DefaultThreadStoreAuth.ts b/packages/core/src/comments/threadstore/DefaultThreadStoreAuth.ts index 513e98b7b0..9b79a5aaf1 100644 --- a/packages/core/src/comments/threadstore/DefaultThreadStoreAuth.ts +++ b/packages/core/src/comments/threadstore/DefaultThreadStoreAuth.ts @@ -18,7 +18,7 @@ import { ThreadStoreAuth } from "./ThreadStoreAuth.js"; export class DefaultThreadStoreAuth extends ThreadStoreAuth { constructor( private readonly userId: string, - private readonly role: "comment" | "editor" + private readonly role: "comment" | "editor", ) { super(); } @@ -84,7 +84,7 @@ export class DefaultThreadStoreAuth extends ThreadStoreAuth { return !comment.reactions.some( (reaction) => - reaction.emoji === emoji && reaction.userIds.includes(this.userId) + reaction.emoji === emoji && reaction.userIds.includes(this.userId), ); } @@ -100,7 +100,7 @@ export class DefaultThreadStoreAuth extends ThreadStoreAuth { return comment.reactions.some( (reaction) => - reaction.emoji === emoji && reaction.userIds.includes(this.userId) + reaction.emoji === emoji && reaction.userIds.includes(this.userId), ); } } diff --git a/packages/core/src/comments/threadstore/ThreadStore.ts b/packages/core/src/comments/threadstore/ThreadStore.ts index 362bfb274e..6d8fc55fba 100644 --- a/packages/core/src/comments/threadstore/ThreadStore.ts +++ b/packages/core/src/comments/threadstore/ThreadStore.ts @@ -129,6 +129,6 @@ export abstract class ThreadStore { * @returns a function to unsubscribe from the thread store */ abstract subscribe( - cb: (threads: Map) => void + cb: (threads: Map) => void, ): () => void; } diff --git a/packages/core/src/comments/threadstore/TipTapThreadStore.ts b/packages/core/src/comments/threadstore/TipTapThreadStore.ts index aef4b06d80..b0d25ed046 100644 --- a/packages/core/src/comments/threadstore/TipTapThreadStore.ts +++ b/packages/core/src/comments/threadstore/TipTapThreadStore.ts @@ -28,7 +28,7 @@ export class TiptapThreadStore extends ThreadStore { constructor( private readonly userId: string, private readonly provider: TiptapCollabProvider, - auth: ThreadStoreAuth // TODO: use? + auth: ThreadStoreAuth, // TODO: use? ) { super(auth); } @@ -80,7 +80,7 @@ export class TiptapThreadStore extends ThreadStore { }); return this.tiptapCommentToCommentData( - thread.comments[thread.comments.length - 1] + thread.comments[thread.comments.length - 1], ); } @@ -98,7 +98,7 @@ export class TiptapThreadStore extends ThreadStore { const comment = this.provider.getThreadComment( options.threadId, options.commentId, - true + true, ); if (!comment) { @@ -120,12 +120,12 @@ export class TiptapThreadStore extends ThreadStore { for (const reaction of (comment.data?.reactions || []) as ReactionAsTiptapData[]) { const existingReaction = reactions.find( - (r) => r.emoji === reaction.emoji + (r) => r.emoji === reaction.emoji, ); if (existingReaction) { existingReaction.userIds.push(reaction.userId); existingReaction.createdAt = new Date( - Math.min(existingReaction.createdAt.getTime(), reaction.createdAt) + Math.min(existingReaction.createdAt.getTime(), reaction.createdAt), ); } else { reactions.push({ @@ -153,7 +153,7 @@ export class TiptapThreadStore extends ThreadStore { type: "thread", id: thread.id, comments: thread.comments.map((comment) => - this.tiptapCommentToCommentData(comment) + this.tiptapCommentToCommentData(comment), ), resolved: !!thread.resolvedAt, metadata: thread.data?.metadata, @@ -207,7 +207,7 @@ export class TiptapThreadStore extends ThreadStore { const comment = this.provider.getThreadComment( options.threadId, options.commentId, - true + true, ); if (!comment) { @@ -242,7 +242,7 @@ export class TiptapThreadStore extends ThreadStore { const comment = this.provider.getThreadComment( options.threadId, options.commentId, - true + true, ); if (!comment) { @@ -256,7 +256,7 @@ export class TiptapThreadStore extends ThreadStore { (comment.data?.reactions || []) as ReactionAsTiptapData[] ).filter( (reaction) => - reaction.emoji !== options.emoji && reaction.userId !== this.userId + reaction.emoji !== options.emoji && reaction.userId !== this.userId, ), }, }); @@ -276,7 +276,7 @@ export class TiptapThreadStore extends ThreadStore { return new Map( this.provider .getThreads() - .map((thread) => [thread.id, this.tiptapThreadToThreadData(thread)]) + .map((thread) => [thread.id, this.tiptapThreadToThreadData(thread)]), ); } diff --git a/packages/core/src/comments/threadstore/yjs/RESTYjsThreadStore.ts b/packages/core/src/comments/threadstore/yjs/RESTYjsThreadStore.ts index c8119578b4..d3f81c50f5 100644 --- a/packages/core/src/comments/threadstore/yjs/RESTYjsThreadStore.ts +++ b/packages/core/src/comments/threadstore/yjs/RESTYjsThreadStore.ts @@ -22,7 +22,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase { private readonly BASE_URL: string, private readonly headers: Record, threadsYMap: Y.Map, - auth: ThreadStoreAuth + auth: ThreadStoreAuth, ) { super(threadsYMap, auth); } @@ -102,7 +102,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase { const { threadId, commentId, ...rest } = options; return this.doRequest( `/${threadId}/comments/${commentId}?soft=${!!rest.softDelete}`, - "DELETE" + "DELETE", ); }; @@ -127,7 +127,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase { return this.doRequest( `/${threadId}/comments/${commentId}/reactions`, "POST", - rest + rest, ); }; @@ -138,7 +138,7 @@ export class RESTYjsThreadStore extends YjsThreadStoreBase { }) => { return this.doRequest( `/${options.threadId}/comments/${options.commentId}/reactions/${options.emoji}`, - "DELETE" + "DELETE", ); }; } diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts index 2f5c400b6e..8f967eb547 100644 --- a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts +++ b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.test.ts @@ -25,7 +25,7 @@ describe("YjsThreadStore", () => { store = new YjsThreadStore( "test-user", threadsYMap, - new DefaultThreadStoreAuth("test-user", "editor") + new DefaultThreadStoreAuth("test-user", "editor"), ); }); @@ -99,7 +99,7 @@ describe("YjsThreadStore", () => { comment: { body: "Test comment" as CommentBody, }, - }) + }), ).rejects.toThrow("Thread not found"); }); }); diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts index 9732a9ed15..7504e43fb1 100644 --- a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts +++ b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts @@ -26,13 +26,13 @@ export class YjsThreadStore extends YjsThreadStoreBase { constructor( private readonly userId: string, threadsYMap: Y.Map, - auth: ThreadStoreAuth + auth: ThreadStoreAuth, ) { super(threadsYMap, auth); } private transact = ( - fn: (options: T) => R + fn: (options: T) => R, ): ((options: T) => Promise) => { return async (options: T) => { return this.threadsYMap.doc!.transact(() => { @@ -79,7 +79,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { this.threadsYMap.set(thread.id, threadToYMap(thread)); return thread; - } + }, ); // YjsThreadStore does not support addThreadToDocument @@ -121,7 +121,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { yThread.set("updatedAt", new Date().getTime()); return comment; - } + }, ); public updateComment = this.transact( @@ -140,7 +140,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { const yCommentIndex = yArrayFindIndex( yThread.get("comments"), - (comment) => comment.get("id") === options.commentId + (comment) => comment.get("id") === options.commentId, ); if (yCommentIndex === -1) { @@ -156,7 +156,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { yComment.set("body", options.comment.body); yComment.set("updatedAt", new Date().getTime()); yComment.set("metadata", options.comment.metadata); - } + }, ); public deleteComment = this.transact( @@ -172,7 +172,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { const yCommentIndex = yArrayFindIndex( yThread.get("comments"), - (comment) => comment.get("id") === options.commentId + (comment) => comment.get("id") === options.commentId, ); if (yCommentIndex === -1) { @@ -210,13 +210,13 @@ export class YjsThreadStore extends YjsThreadStoreBase { } yThread.set("updatedAt", new Date().getTime()); - } + }, ); public deleteThread = this.transact((options: { threadId: string }) => { if ( !this.auth.canDeleteThread( - yMapToThread(this.threadsYMap.get(options.threadId)) + yMapToThread(this.threadsYMap.get(options.threadId)), ) ) { throw new Error("Not authorized"); @@ -263,7 +263,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { const yCommentIndex = yArrayFindIndex( yThread.get("comments"), - (comment) => comment.get("id") === options.commentId + (comment) => comment.get("id") === options.commentId, ); if (yCommentIndex === -1) { @@ -292,7 +292,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { reaction.set("userId", this.userId); reactionsByUser.set(key, reaction); } - } + }, ); public deleteReaction = this.transact( @@ -304,7 +304,7 @@ export class YjsThreadStore extends YjsThreadStoreBase { const yCommentIndex = yArrayFindIndex( yThread.get("comments"), - (comment) => comment.get("id") === options.commentId + (comment) => comment.get("id") === options.commentId, ); if (yCommentIndex === -1) { @@ -324,13 +324,13 @@ export class YjsThreadStore extends YjsThreadStoreBase { const reactionsByUser = yComment.get("reactionsByUser"); reactionsByUser.delete(key); - } + }, ); } function yArrayFindIndex( yArray: Y.Array, - predicate: (item: any) => boolean + predicate: (item: any) => boolean, ) { for (let i = 0; i < yArray.length; i++) { if (predicate(yArray.get(i))) { diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStoreBase.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStoreBase.ts index 1b7689245a..e178c35c73 100644 --- a/packages/core/src/comments/threadstore/yjs/YjsThreadStoreBase.ts +++ b/packages/core/src/comments/threadstore/yjs/YjsThreadStoreBase.ts @@ -11,7 +11,7 @@ import { yMapToThread } from "./yjsHelpers.js"; export abstract class YjsThreadStoreBase extends ThreadStore { constructor( protected readonly threadsYMap: Y.Map, - auth: ThreadStoreAuth + auth: ThreadStoreAuth, ) { super(auth); } diff --git a/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts b/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts index 7c45eb59e0..cd90c3e583 100644 --- a/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts +++ b/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts @@ -52,7 +52,7 @@ type SingleUserCommentReactionData = { }; export function yMapToReaction( - yMap: Y.Map + yMap: Y.Map, ): SingleUserCommentReactionData { return { emoji: yMap.get("emoji"), @@ -63,7 +63,7 @@ export function yMapToReaction( function yMapToReactions(yMap: Y.Map): CommentReactionData[] { const flatReactions = [...yMap.values()].map((reaction: Y.Map) => - yMapToReaction(reaction) + yMapToReaction(reaction), ); // combine reactions by the same emoji return flatReactions.reduce( @@ -74,8 +74,8 @@ function yMapToReactions(yMap: Y.Map): CommentReactionData[] { existingReaction.createdAt = new Date( Math.min( existingReaction.createdAt.getTime(), - reaction.createdAt.getTime() - ) + reaction.createdAt.getTime(), + ), ); } else { acc.push({ @@ -86,7 +86,7 @@ function yMapToReactions(yMap: Y.Map): CommentReactionData[] { } return acc; }, - [] as CommentReactionData[] + [] as CommentReactionData[], ); } @@ -113,7 +113,7 @@ export function yMapToThread(yMap: Y.Map): ThreadData { createdAt: new Date(yMap.get("createdAt")), updatedAt: new Date(yMap.get("updatedAt")), comments: ((yMap.get("comments") as Y.Array>) || []).map( - (comment) => yMapToComment(comment) + (comment) => yMapToComment(comment), ), resolved: yMap.get("resolved"), resolvedUpdatedAt: new Date(yMap.get("resolvedUpdatedAt")), diff --git a/packages/core/src/editor/BlockNoteEditor.test.ts b/packages/core/src/editor/BlockNoteEditor.test.ts index d77787a93c..62aeb3585c 100644 --- a/packages/core/src/editor/BlockNoteEditor.test.ts +++ b/packages/core/src/editor/BlockNoteEditor.test.ts @@ -18,7 +18,7 @@ it("creates an editor", () => { it("immediately replaces doc", async () => { const editor = BlockNoteEditor.create(); const blocks = await editor.tryParseMarkdownToBlocks( - "This is a normal text\n\n# And this is a large heading" + "This is a normal text\n\n# And this is a large heading", ); editor.replaceBlocks(editor.document, blocks); expect(editor.document).toMatchInlineSnapshot(` @@ -67,11 +67,11 @@ it("adds id attribute when requested", async () => { setIdAttribute: true, }); const blocks = await editor.tryParseMarkdownToBlocks( - "This is a normal text\n\n# And this is a large heading" + "This is a normal text\n\n# And this is a large heading", ); editor.replaceBlocks(editor.document, blocks); expect(await editor.blocksToFullHTML(editor.document)).toMatchInlineSnapshot( - `"

This is a normal text

And this is a large heading

"` + `"

This is a normal text

And this is a large heading

"`, ); }); diff --git a/packages/core/src/editor/BlockNoteExtensions.ts b/packages/core/src/editor/BlockNoteExtensions.ts index b0c5db73ba..e7ed226899 100644 --- a/packages/core/src/editor/BlockNoteExtensions.ts +++ b/packages/core/src/editor/BlockNoteExtensions.ts @@ -55,7 +55,7 @@ import type { type ExtensionOptions< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { editor: BlockNoteEditor; domAttributes: Partial; @@ -97,9 +97,9 @@ type ExtensionOptions< export const getBlockNoteExtensions = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - opts: ExtensionOptions + opts: ExtensionOptions, ) => { const ret: Record = {}; const tiptapExtensions = getTipTapExtensions(opts); @@ -120,12 +120,12 @@ export const getBlockNoteExtensions = < // Note: this is pretty hardcoded and will break when user provides plugins with same keys. // Define name on plugins instead and not make this a map? ret["formattingToolbar"] = new FormattingToolbarProsemirrorPlugin( - opts.editor + opts.editor, ); ret["linkToolbar"] = new LinkToolbarProsemirrorPlugin(opts.editor); ret["sideMenu"] = new SideMenuProsemirrorPlugin( opts.editor, - opts.sideMenuDetection + opts.sideMenuDetection, ); ret["suggestionMenus"] = new SuggestionMenuProseMirrorPlugin(opts.editor); ret["filePanel"] = new FilePanelProsemirrorPlugin(opts.editor as any); @@ -155,7 +155,7 @@ export const getBlockNoteExtensions = < ret["comments"] = new CommentsPlugin( opts.editor, opts.comments.threadStore, - CommentMark.name + CommentMark.name, ); } @@ -175,9 +175,9 @@ let LINKIFY_INITIALIZED = false; const getTipTapExtensions = < BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - opts: ExtensionOptions + opts: ExtensionOptions, ) => { const tiptapExtensions: AnyExtension[] = [ extensions.ClipboardTextSerializer, @@ -264,7 +264,7 @@ const getTipTapExtensions = < ext.configure({ editor: opts.editor, domAttributes: opts.domAttributes, - }) + }), ), // the actual node itself blockSpec.implementation.node.configure({ @@ -282,7 +282,7 @@ const getTipTapExtensions = < prioritizeMarkdownOverHTML?: boolean; plainTextAsMarkdown?: boolean; }) => boolean | undefined; - }) => context.defaultPasteHandler()) + }) => context.defaultPasteHandler()), ), createDropFileExtension(opts.editor), diff --git a/packages/core/src/editor/BlockNoteSchema.ts b/packages/core/src/editor/BlockNoteSchema.ts index a2fe42756d..e9af493884 100644 --- a/packages/core/src/editor/BlockNoteSchema.ts +++ b/packages/core/src/editor/BlockNoteSchema.ts @@ -28,14 +28,14 @@ function removeUndefined | undefined>(obj: T): T { return obj; } return Object.fromEntries( - Object.entries(obj).filter(([, value]) => value !== undefined) + Object.entries(obj).filter(([, value]) => value !== undefined), ) as T; } export class BlockNoteSchema< BSchema extends BlockSchema, ISchema extends InlineContentSchema, - SSchema extends StyleSchema + SSchema extends StyleSchema, > { public readonly blockSpecs: BlockSpecs; public readonly inlineContentSpecs: InlineContentSpecs; @@ -61,7 +61,7 @@ export class BlockNoteSchema< public static create< BSpecs extends BlockSpecs = typeof defaultBlockSpecs, ISpecs extends InlineContentSpecs = typeof defaultInlineContentSpecs, - SSpecs extends StyleSpecs = typeof defaultStyleSpecs + SSpecs extends StyleSpecs = typeof defaultStyleSpecs, >(options?: { /** * A list of custom block types that should be available in the editor. @@ -100,7 +100,7 @@ export class BlockNoteSchema< this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any; this.inlineContentSchema = getInlineContentSchemaFromSpecs( - this.inlineContentSpecs + this.inlineContentSpecs, ) as any; this.styleSchema = getStyleSchemaFromSpecs(this.styleSpecs) as any; } diff --git a/packages/core/src/editor/BlockNoteTipTapEditor.ts b/packages/core/src/editor/BlockNoteTipTapEditor.ts index 66ee5055ef..6dd7b2e853 100644 --- a/packages/core/src/editor/BlockNoteTipTapEditor.ts +++ b/packages/core/src/editor/BlockNoteTipTapEditor.ts @@ -26,7 +26,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { public static create = ( options: BlockNoteTipTapEditorOptions, - styleSchema: StyleSchema + styleSchema: StyleSchema, ) => { // because we separate the constructor from the creation of the view, // we need to patch setTimeout to prevent this code from having any effect: @@ -48,7 +48,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { protected constructor( options: BlockNoteTipTapEditorOptions, - styleSchema: StyleSchema + styleSchema: StyleSchema, ) { // possible fix for next.js server side rendering // const d = globalThis.document; @@ -93,7 +93,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { try { const pmNodes = options?.content.map((b) => - blockToNode(b, this.schema, styleSchema).toJSON() + blockToNode(b, this.schema, styleSchema).toJSON(), ); doc = createDocument( { @@ -106,17 +106,17 @@ export class BlockNoteTipTapEditor extends TiptapEditor { ], }, this.schema, - this.options.parseOptions + this.options.parseOptions, ); } catch (e) { // eslint-disable-next-line no-console console.error( "Error creating document from blocks passed as `initialContent`. Caused by exception: ", - e + e, ); throw new Error( "Error creating document from blocks passed as `initialContent`:\n" + - +JSON.stringify(options.content) + +JSON.stringify(options.content), ); } @@ -221,7 +221,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { */ private createViewAlternative( blockNoteEditor: BlockNoteEditor, - contentComponent?: any + contentComponent?: any, ) { (this as any).contentComponent = contentComponent; @@ -244,7 +244,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { state: this.state, markViews, nodeViews: this.extensionManager.nodeViews, - } + }, ); // `editor.view` is not yet available at this time. @@ -263,7 +263,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { this.commands.focus( this.options.autofocus || this.options.element.getAttribute("data-bn-autofocus") === "true", - { scrollIntoView: false } + { scrollIntoView: false }, ); this.emit("create", { editor: this }); this.isInitialized = true; @@ -277,7 +277,7 @@ export class BlockNoteTipTapEditor extends TiptapEditor { public mount = ( blockNoteEditor: BlockNoteEditor, element?: HTMLElement | null, - contentComponent?: any + contentComponent?: any, ) => { if (!element) { this.destroy(); diff --git a/packages/core/src/editor/README.md b/packages/core/src/editor/README.md index f87722a4e9..d2de149c3c 100644 --- a/packages/core/src/editor/README.md +++ b/packages/core/src/editor/README.md @@ -1,3 +1,3 @@ ### @blocknote/core/src/editor -Contains main functions to set up the editor \ No newline at end of file +Contains main functions to set up the editor diff --git a/packages/core/src/editor/cursorPositionTypes.ts b/packages/core/src/editor/cursorPositionTypes.ts index e1da325d52..fbb8c09339 100644 --- a/packages/core/src/editor/cursorPositionTypes.ts +++ b/packages/core/src/editor/cursorPositionTypes.ts @@ -8,7 +8,7 @@ import { export type TextCursorPosition< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { block: Block; prevBlock: Block | undefined; diff --git a/packages/core/src/editor/editor.css b/packages/core/src/editor/editor.css index 0f5c486337..3c5871b899 100644 --- a/packages/core/src/editor/editor.css +++ b/packages/core/src/editor/editor.css @@ -55,9 +55,21 @@ Tippy popups that are appended to document.body directly .bn-default-styles { font-size: 16px; font-weight: normal; - font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, - "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", - "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: + "Inter", + "SF Pro Display", + -apple-system, + BlinkMacSystemFont, + "Open Sans", + "Segoe UI", + "Roboto", + "Oxygen", + "Ubuntu", + "Cantarell", + "Fira Sans", + "Droid Sans", + "Helvetica Neue", + sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/packages/core/src/editor/selectionTypes.ts b/packages/core/src/editor/selectionTypes.ts index d5f248d0bb..50326c966b 100644 --- a/packages/core/src/editor/selectionTypes.ts +++ b/packages/core/src/editor/selectionTypes.ts @@ -8,7 +8,7 @@ import { export type Selection< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { blocks: Block[]; }; diff --git a/packages/core/src/editor/transformPasted.ts b/packages/core/src/editor/transformPasted.ts index 13017d3403..42e45fd122 100644 --- a/packages/core/src/editor/transformPasted.ts +++ b/packages/core/src/editor/transformPasted.ts @@ -36,7 +36,7 @@ export function wrapTableRows(f: Fragment, schema: Schema) { // create new table to wrap tableRow with const newTable = schema.nodes.table.createChecked( undefined, - f.child(i) + f.child(i), ); newItems.push(newTable); } @@ -96,7 +96,7 @@ export function transformPasted(slice: Slice, view: EditorView) { } const container = view.state.schema.nodes.blockContainer.createChecked( undefined, - content + content, ); f = f.replaceChild(i, container); } diff --git a/packages/core/src/exporter/Exporter.ts b/packages/core/src/exporter/Exporter.ts index b2a863093e..75cf9a1705 100644 --- a/packages/core/src/exporter/Exporter.ts +++ b/packages/core/src/exporter/Exporter.ts @@ -42,7 +42,7 @@ export abstract class Exporter< RB, RI, RS, - TS + TS, > { public constructor( _schema: BlockNoteSchema, // only used for type inference @@ -51,7 +51,7 @@ export abstract class Exporter< inlineContentMapping: InlineContentMapping; styleMapping: StyleMapping; }, - public readonly options: ExporterOptions + public readonly options: ExporterOptions, ) {} public async resolveFile(url: string) { @@ -76,7 +76,7 @@ export abstract class Exporter< public mapInlineContent(inlineContent: InlineContent) { return this.mappings.inlineContentMapping[inlineContent.type]( inlineContent, - this + this, ); } @@ -89,13 +89,13 @@ export abstract class Exporter< public async mapBlock( block: BlockFromConfig, nestingLevel: number, - numberedListIndex: number + numberedListIndex: number, ) { return this.mappings.blockMapping[block.type]( block, this, nestingLevel, - numberedListIndex + numberedListIndex, ); } } diff --git a/packages/core/src/exporter/mapping.ts b/packages/core/src/exporter/mapping.ts index 3144dbb24d..2700d279ea 100644 --- a/packages/core/src/exporter/mapping.ts +++ b/packages/core/src/exporter/mapping.ts @@ -17,7 +17,7 @@ export type BlockMapping< I extends InlineContentSchema, S extends StyleSchema, RB, - RI + RI, > = { [K in keyof B]: ( block: BlockFromConfigNoChildren, @@ -26,7 +26,7 @@ export type BlockMapping< // this is why there are many `any` types here (same for types below) exporter: Exporter, nestingLevel: number, - numberedListIndex?: number + numberedListIndex?: number, ) => RB | Promise; }; @@ -37,11 +37,11 @@ export type InlineContentMapping< I extends InlineContentSchema, S extends StyleSchema, RI, - TS + TS, > = { [K in keyof I]: ( inlineContent: InlineContentFromConfig, - exporter: Exporter + exporter: Exporter, ) => RI; }; @@ -51,7 +51,7 @@ export type InlineContentMapping< export type StyleMapping = { [K in keyof S]: ( style: Styles[K], - exporter: Exporter + exporter: Exporter, ) => RS; }; @@ -62,13 +62,13 @@ export type StyleMapping = { export function mappingFactory< B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(_schema: BlockNoteSchema) { return { createBlockMapping: (mapping: BlockMapping) => mapping, createInlineContentMapping: ( - mapping: InlineContentMapping + mapping: InlineContentMapping, ) => mapping, createStyleMapping: (mapping: StyleMapping) => mapping, }; diff --git a/packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts b/packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts index 03c57dd4ac..1d1a20d3a0 100644 --- a/packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts +++ b/packages/core/src/extensions/BackgroundColor/BackgroundColorMark.ts @@ -44,5 +44,5 @@ const BackgroundColorMark = Mark.create({ export const BackgroundColor = createStyleSpecFromTipTapMark( BackgroundColorMark, - "string" + "string", ); diff --git a/packages/core/src/extensions/Collaboration/CursorPlugin.ts b/packages/core/src/extensions/Collaboration/CursorPlugin.ts index d6acf74c82..6a6b9896f1 100644 --- a/packages/core/src/extensions/Collaboration/CursorPlugin.ts +++ b/packages/core/src/extensions/Collaboration/CursorPlugin.ts @@ -23,7 +23,7 @@ export class CursorPlugin { provider: { awareness: Awareness }; renderCursor?: (user: CollaborationUser) => HTMLElement; showCursorLabels?: "always" | "activity"; - } + }, ) { this.provider = collaboration.provider; this.recentlyUpdatedCursors = new Map(); @@ -58,7 +58,7 @@ export class CursorPlugin { }); } } - } + }, ); } diff --git a/packages/core/src/extensions/Comments/CommentsPlugin.ts b/packages/core/src/extensions/Comments/CommentsPlugin.ts index cac5f022bb..f28e27a6b3 100644 --- a/packages/core/src/extensions/Comments/CommentsPlugin.ts +++ b/packages/core/src/extensions/Comments/CommentsPlugin.ts @@ -102,7 +102,7 @@ export class CommentsPlugin extends EventEmitter { const trimmedFrom = Math.max(pos, 0); const trimmedTo = Math.min( pos + node.nodeSize, - tr.doc.content.size - 1 + tr.doc.content.size - 1, ); tr.removeMark(trimmedFrom, trimmedTo, mark); tr.addMark( @@ -111,7 +111,7 @@ export class CommentsPlugin extends EventEmitter { markType.create({ ...mark.attrs, orphan: isOrphan, - }) + }), ); if (isOrphan && this.selectedThreadId === markThreadId) { @@ -129,7 +129,7 @@ export class CommentsPlugin extends EventEmitter { constructor( private readonly editor: BlockNoteEditor, public readonly threadStore: ThreadStore, - private readonly markType: string + private readonly markType: string, ) { super(); @@ -187,7 +187,7 @@ export class CommentsPlugin extends EventEmitter { if (self.selectedThreadId) { const selectedThreadPosition = threadPositions.get( - self.selectedThreadId + self.selectedThreadId, ); if (selectedThreadPosition) { @@ -197,8 +197,8 @@ export class CommentsPlugin extends EventEmitter { selectedThreadPosition.to, { class: "bn-thread-mark-selected", - } - ) + }, + ), ); } } @@ -228,7 +228,7 @@ export class CommentsPlugin extends EventEmitter { } const commentMark = node.marks.find( - (mark) => mark.type.name === markType && mark.attrs.orphan !== true + (mark) => mark.type.name === markType && mark.attrs.orphan !== true, ); const threadId = commentMark?.attrs.threadId as string | undefined; @@ -246,7 +246,7 @@ export class CommentsPlugin extends EventEmitter { pendingComment: boolean; selectedThreadId: string | undefined; threadPositions: Map; - }) => void + }) => void, ) { return this.on("update", callback); } @@ -263,7 +263,7 @@ export class CommentsPlugin extends EventEmitter { this.editor.transact((tr) => tr.setMeta(PLUGIN_KEY, { name: SET_SELECTED_THREAD_ID, - }) + }), ); if (threadId && scrollToThread) { diff --git a/packages/core/src/extensions/Comments/userstore/UserStore.ts b/packages/core/src/extensions/Comments/userstore/UserStore.ts index 170c14ff2f..b33568f84e 100644 --- a/packages/core/src/extensions/Comments/userstore/UserStore.ts +++ b/packages/core/src/extensions/Comments/userstore/UserStore.ts @@ -14,7 +14,7 @@ export class UserStore extends EventEmitter { private loadingUsers = new Set(); public constructor( - private readonly resolveUsers: (userIds: string[]) => Promise + private readonly resolveUsers: (userIds: string[]) => Promise, ) { super(); } @@ -24,7 +24,7 @@ export class UserStore extends EventEmitter { */ public async loadUsers(userIds: string[]) { const missingUsers = userIds.filter( - (id) => !this.userCache.has(id) && !this.loadingUsers.has(id) + (id) => !this.userCache.has(id) && !this.loadingUsers.has(id), ); if (missingUsers.length === 0) { diff --git a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts index e48b71ce42..66d4c86f9f 100644 --- a/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts +++ b/packages/core/src/extensions/FilePanel/FilePanelPlugin.ts @@ -14,7 +14,7 @@ import { ySyncPluginKey } from "y-prosemirror"; export type FilePanelState< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = UiElementPosition & { // TODO: This typing is not quite right (children should be from BSchema) block: BlockFromConfig; @@ -34,7 +34,7 @@ export class FilePanelView >, private readonly pluginKey: PluginKey>, private readonly pmView: EditorView, - emitUpdate: (state: FilePanelState) => void + emitUpdate: (state: FilePanelState) => void, ) { this.emitUpdate = () => { if (!this.state) { @@ -71,7 +71,7 @@ export class FilePanelView scrollHandler = () => { if (this.state?.show) { const blockElement = this.pmView.root.querySelector( - `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]` + `[data-node-type="blockContainer"][data-id="${this.state.block.id}"]`, ); if (!blockElement) { return; @@ -87,7 +87,7 @@ export class FilePanelView if (!this.state?.show && pluginState?.block && this.editor.isEditable) { const blockElement = this.pmView.root.querySelector( - `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]` + `[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`, ); if (!blockElement) { return; @@ -132,12 +132,12 @@ export class FilePanelView } const filePanelPluginKey = new PluginKey>( - "FilePanelPlugin" + "FilePanelPlugin", ); export class FilePanelProsemirrorPlugin< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > extends EventEmitter { private view: FilePanelView | undefined; public readonly plugin: Plugin; @@ -155,7 +155,7 @@ export class FilePanelProsemirrorPlugin< editorView, (state) => { this.emit("update", state); - } + }, ); return this.view; }, diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts index 907cb3435f..94f789c70c 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts @@ -53,12 +53,12 @@ export class FormattingToolbarView implements PluginView { StyleSchema >, private readonly pmView: EditorView, - emitUpdate: (state: FormattingToolbarState) => void + emitUpdate: (state: FormattingToolbarState) => void, ) { this.emitUpdate = () => { if (!this.state) { throw new Error( - "Attempting to update uninitialized formatting toolbar" + "Attempting to update uninitialized formatting toolbar", ); } @@ -96,7 +96,7 @@ export class FormattingToolbarView implements PluginView { (editorWrapper === (event.relatedTarget as Node) || editorWrapper.contains(event.relatedTarget as Node) || (event.relatedTarget as HTMLElement).matches( - ".bn-ui-container, .bn-ui-container *" + ".bn-ui-container, .bn-ui-container *", )) ) { return; @@ -233,7 +233,7 @@ export class FormattingToolbarView implements PluginView { } export const formattingToolbarPluginKey = new PluginKey( - "FormattingToolbarPlugin" + "FormattingToolbarPlugin", ); export class FormattingToolbarProsemirrorPlugin extends EventEmitter { diff --git a/packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts b/packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts index d0abda0ab2..4067820453 100644 --- a/packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts +++ b/packages/core/src/extensions/KeyboardShortcuts/KeyboardShortcutsExtension.ts @@ -48,7 +48,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ updateBlockCommand(blockInfo.bnBlock.beforePos, { type: "paragraph", props: {}, - }) + }), ); } @@ -114,7 +114,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ const prevBlockInfo = getPrevBlockInfo( state.doc, - blockInfo.bnBlock.beforePos + blockInfo.bnBlock.beforePos, ); if (prevBlockInfo) { @@ -124,7 +124,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ const parentBlockInfo = getParentBlockInfo( state.doc, - blockInfo.bnBlock.beforePos + blockInfo.bnBlock.beforePos, ); if (parentBlockInfo?.blockNoteType !== "column") { @@ -135,7 +135,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ const columnList = getParentBlockInfo( state.doc, - column.bnBlock.beforePos + column.bnBlock.beforePos, ); if (columnList?.blockNoteType !== "columnList") { throw new Error("parent of column is not a column list"); @@ -156,7 +156,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ const blockToMove = state.doc.slice( blockInfo.bnBlock.beforePos, blockInfo.bnBlock.afterPos, - false + false, ); /* @@ -180,8 +180,8 @@ export const KeyboardShortcutsExtension = Extension.create<{ columnList.bnBlock.afterPos - 2, blockToMove, blockToMove.size, // append existing content to blockToMove - false - ) + false, + ), ); const pos = state.tr.doc.resolve(column.bnBlock.beforePos); state.tr.setSelection(TextSelection.between(pos, pos)); @@ -197,11 +197,11 @@ export const KeyboardShortcutsExtension = Extension.create<{ column.bnBlock.beforePos - 1, blockToMove, 0, // prepend existing content to blockToMove - false - ) + false, + ), ); const pos = state.tr.doc.resolve( - state.tr.mapping.map(column.bnBlock.beforePos - 1) + state.tr.mapping.map(column.bnBlock.beforePos - 1), ); state.tr.setSelection(TextSelection.between(pos, pos)); } @@ -210,43 +210,43 @@ export const KeyboardShortcutsExtension = Extension.create<{ // delete column state.tr.delete( column.bnBlock.beforePos, - column.bnBlock.afterPos + column.bnBlock.afterPos, ); // move before columnlist state.tr.insert( columnList.bnBlock.beforePos, - blockToMove.content + blockToMove.content, ); const pos = state.tr.doc.resolve( - columnList.bnBlock.beforePos + columnList.bnBlock.beforePos, ); state.tr.setSelection(TextSelection.between(pos, pos)); } else { // just delete the closing and opening tags to merge the columns state.tr.delete( column.bnBlock.beforePos - 1, - column.bnBlock.beforePos + 1 + column.bnBlock.beforePos + 1, ); } } else { // delete block state.tr.delete( blockInfo.bnBlock.beforePos, - blockInfo.bnBlock.afterPos + blockInfo.bnBlock.afterPos, ); if (isFirstColumn) { // move before columnlist state.tr.insert( columnList.bnBlock.beforePos - 1, - blockToMove.content + blockToMove.content, ); } else { // append block to previous column state.tr.insert( column.bnBlock.beforePos - 1, - blockToMove.content + blockToMove.content, ); } const pos = state.tr.doc.resolve(column.bnBlock.beforePos - 1); @@ -272,7 +272,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ if (blockEmpty) { const prevBlockInfo = getPrevBlockInfo( state.doc, - blockInfo.bnBlock.beforePos + blockInfo.bnBlock.beforePos, ); if (!prevBlockInfo || !prevBlockInfo.isBlockContainer) { return false; @@ -291,7 +291,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ const lastCellParagraphEndPos = lastCellEndPos - 1; chainedCommands = chainedCommands.setTextSelection( - lastCellParagraphEndPos + lastCellParagraphEndPos, ); } else if ( prevBlockInfo.blockContent.node.type.spec.content === "" @@ -301,7 +301,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ prevBlockInfo.blockContent.node.nodeSize; chainedCommands = chainedCommands.setNodeSelection( - nonEditableBlockContentStartPos + nonEditableBlockContentStartPos, ); } else { const blockContentStartPos = @@ -341,13 +341,13 @@ export const KeyboardShortcutsExtension = Extension.create<{ const prevBlockInfo = getPrevBlockInfo( state.doc, - blockInfo.bnBlock.beforePos + blockInfo.bnBlock.beforePos, ); if (prevBlockInfo && selectionAtBlockStart && selectionEmpty) { const bottomBlock = getBottomNestedBlockInfo( state.doc, - prevBlockInfo + prevBlockInfo, ); if (!bottomBlock.isBlockContainer) { @@ -368,7 +368,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ from: blockInfo.bnBlock.beforePos, to: blockInfo.bnBlock.afterPos, }, - bottomBlock.bnBlock.afterPos + bottomBlock.bnBlock.afterPos, ) .deleteRange({ from: bottomBlock.bnBlock.beforePos, @@ -521,7 +521,7 @@ export const KeyboardShortcutsExtension = Extension.create<{ .insert(newBlockInsertionPos, newBlock) .scrollIntoView(); state.tr.setSelection( - new TextSelection(state.doc.resolve(newBlockContentPos)) + new TextSelection(state.doc.resolve(newBlockContentPos)), ); } @@ -551,8 +551,8 @@ export const KeyboardShortcutsExtension = Extension.create<{ splitBlockCommand( state.selection.from, selectionAtBlockStart, - selectionAtBlockStart - ) + selectionAtBlockStart, + ), ) .run(); diff --git a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts index e70514fb0c..c1a8a669b0 100644 --- a/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts +++ b/packages/core/src/extensions/LinkToolbar/LinkToolbarPlugin.ts @@ -41,7 +41,7 @@ class LinkToolbarView implements PluginView { constructor( private readonly editor: BlockNoteEditor, private readonly pmView: EditorView, - emitUpdate: (state: LinkToolbarState) => void + emitUpdate: (state: LinkToolbarState) => void, ) { this.emitUpdate = () => { if (!this.state) { @@ -70,7 +70,7 @@ class LinkToolbarView implements PluginView { this.pmView.root.addEventListener( "click", this.clickHandler as EventListener, - true + true, ); // Setting capture=true ensures that any parent container of the editor that @@ -146,7 +146,7 @@ class LinkToolbarView implements PluginView { this.state.referencePos = posToDOMRect( this.pmView, this.linkMarkRange!.from, - this.linkMarkRange!.to + this.linkMarkRange!.to, ); this.emitUpdate(); } @@ -160,7 +160,7 @@ class LinkToolbarView implements PluginView { tr.addMark( this.linkMarkRange!.from, this.linkMarkRange!.from + text.length, - pmSchema.mark("link", { href: url }) + pmSchema.mark("link", { href: url }), ); }); this.pmView.focus(); @@ -177,9 +177,9 @@ class LinkToolbarView implements PluginView { .removeMark( this.linkMarkRange!.from, this.linkMarkRange!.to, - this.linkMark!.type + this.linkMark!.type, ) - .setMeta("preventAutolink", true) + .setMeta("preventAutolink", true), ); this.pmView.focus(); @@ -226,7 +226,7 @@ class LinkToolbarView implements PluginView { getMarkRange( this.pmView.state.selection.$from, mark.type, - mark.attrs + mark.attrs, ) || undefined; break; @@ -251,12 +251,12 @@ class LinkToolbarView implements PluginView { referencePos: posToDOMRect( this.pmView, this.linkMarkRange!.from, - this.linkMarkRange!.to + this.linkMarkRange!.to, ), url: this.linkMark!.attrs.href, text: this.pmView.state.doc.textBetween( this.linkMarkRange!.from, - this.linkMarkRange!.to + this.linkMarkRange!.to, ), }; this.emitUpdate(); @@ -290,7 +290,7 @@ class LinkToolbarView implements PluginView { this.pmView.root.removeEventListener( "click", this.clickHandler as EventListener, - true + true, ); } } @@ -300,7 +300,7 @@ export const linkToolbarPluginKey = new PluginKey("LinkToolbarPlugin"); export class LinkToolbarProsemirrorPlugin< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > extends EventEmitter { private view: LinkToolbarView | undefined; public readonly plugin: Plugin; diff --git a/packages/core/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts b/packages/core/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts index 933e497b8c..c6e37b500e 100644 --- a/packages/core/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts +++ b/packages/core/src/extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.ts @@ -47,13 +47,13 @@ export class NodeSelectionKeyboardPlugin { tr .insert( view.state.tr.selection.$to.after(), - view.state.schema.nodes["paragraph"].createChecked() + view.state.schema.nodes["paragraph"].createChecked(), ) .setSelection( new TextSelection( - tr.doc.resolve(view.state.tr.selection.$to.after() + 1) - ) - ) + tr.doc.resolve(view.state.tr.selection.$to.after() + 1), + ), + ), ); return true; diff --git a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts index ebb4c27b18..a749e490d1 100644 --- a/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts +++ b/packages/core/src/extensions/Placeholder/PlaceholderPlugin.ts @@ -12,7 +12,7 @@ export class PlaceholderPlugin { placeholders: Record< string | "default" | "emptyDocument", string | undefined - > + >, ) { this.plugin = new Plugin({ key: PLUGIN_KEY, @@ -51,8 +51,8 @@ export class PlaceholderPlugin { styleSheet.insertRule( `${getSelector(blockTypeSelector)} { content: ${JSON.stringify( - placeholder - )}; }` + placeholder, + )}; }`, ); } @@ -62,21 +62,21 @@ export class PlaceholderPlugin { // placeholder for when there's only one empty block styleSheet.insertRule( `${getSelector(onlyBlockSelector)} { content: ${JSON.stringify( - emptyPlaceholder - )}; }` + emptyPlaceholder, + )}; }`, ); // placeholder for default blocks, only when the cursor is in the block (mustBeFocused) styleSheet.insertRule( `${getSelector(mustBeFocusedSelector)} { content: ${JSON.stringify( - defaultPlaceholder - )}; }` + defaultPlaceholder, + )}; }`, ); } catch (e) { // eslint-disable-next-line no-console console.warn( `Failed to insert placeholder CSS rule - this is likely due to the browser not supporting certain CSS pseudo-element selectors (:has, :only-child:, or :before)`, - e + e, ); } @@ -115,7 +115,7 @@ export class PlaceholderPlugin { decs.push( Decoration.node(2, 4, { "data-is-only-empty-block": "true", - }) + }), ); } @@ -128,7 +128,7 @@ export class PlaceholderPlugin { decs.push( Decoration.node(before, before + node.nodeSize, { "data-is-empty-and-focused": "true", - }) + }), ); } diff --git a/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts b/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts index 26aaff1fdd..764614c463 100644 --- a/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts +++ b/packages/core/src/extensions/PreviousBlockType/PreviousBlockTypePlugin.ts @@ -37,7 +37,7 @@ export class PreviousBlockTypePlugin { // for one DOM-render the decorations have been applied timeout = setTimeout(() => { view.dispatch( - view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true }) + view.state.tr.setMeta(PLUGIN_KEY, { clearUpdate: true }), ); }, 0); } @@ -93,7 +93,7 @@ export class PreviousBlockTypePlugin { const oldNodes = findChildren(oldState.doc, (node) => node.attrs.id); const oldNodesById = new Map( - oldNodes.map((node) => [node.node.attrs.id, node]) + oldNodes.map((node) => [node.node.attrs.id, node]), ); const newNodes = findChildren(newState.doc, (node) => node.attrs.id); diff --git a/packages/core/src/extensions/README.md b/packages/core/src/extensions/README.md index 9272867e4f..4c20b989bb 100644 --- a/packages/core/src/extensions/README.md +++ b/packages/core/src/extensions/README.md @@ -1,3 +1,3 @@ ### @blocknote/core/src/extensions -All extra extensions for TipTap / Prosemirror needed to implement the Prosemirror UX and editor behavior. \ No newline at end of file +All extra extensions for TipTap / Prosemirror needed to implement the Prosemirror UX and editor behavior. diff --git a/packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts b/packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts index a002143e1f..cc241f0c35 100644 --- a/packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts +++ b/packages/core/src/extensions/SideMenu/MultipleNodeSelection.ts @@ -77,7 +77,7 @@ export class MultipleNodeSelection extends Selection { return new MultipleNodeSelection( doc.resolve(fromResult.pos), - doc.resolve(toResult.pos) + doc.resolve(toResult.pos), ); } diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts index e984307436..2840eef29b 100644 --- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts +++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts @@ -24,7 +24,7 @@ import { dragStart, unsetDragImage } from "./dragging.js"; export type SideMenuState< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = UiElementPosition & { // The block that the side menu is attached to. block: Block; @@ -36,12 +36,12 @@ function getBlockFromCoords( view: EditorView, coords: { left: number; top: number }, sideMenuDetection: "viewport" | "editor", - adjustForColumns = true + adjustForColumns = true, ) { const elements = view.root.elementsFromPoint( // bit hacky - offset x position to right to account for the width of sidemenu itself coords.left + (sideMenuDetection === "editor" ? 50 : 0), - coords.top + coords.top, ); for (const element of elements) { @@ -59,7 +59,7 @@ function getBlockFromCoords( top: coords.top, }, sideMenuDetection, - false + false, ); } } @@ -74,7 +74,7 @@ function getBlockFromMousePos( y: number; }, view: EditorView, - sideMenuDetection: "viewport" | "editor" + sideMenuDetection: "viewport" | "editor", ): { node: HTMLElement; id: string } | undefined { // Editor itself may have padding or other styling which affects // size/position, so we get the boundingRect of the first child (i.e. the @@ -137,7 +137,7 @@ function getBlockFromMousePos( export class SideMenuView< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > implements PluginView { public state?: SideMenuState; @@ -155,7 +155,7 @@ export class SideMenuView< private readonly editor: BlockNoteEditor, private readonly sideMenuDetection: "viewport" | "editor", private readonly pmView: EditorView, - emitUpdate: (state: SideMenuState) => void + emitUpdate: (state: SideMenuState) => void, ) { this.emitUpdate = () => { if (!this.state) { @@ -167,21 +167,21 @@ export class SideMenuView< this.pmView.root.addEventListener( "dragstart", - this.onDragStart as EventListener + this.onDragStart as EventListener, ); this.pmView.root.addEventListener( "dragover", - this.onDragOver as EventListener + this.onDragOver as EventListener, ); this.pmView.root.addEventListener( "drop", this.onDrop as EventListener, - true + true, ); this.pmView.root.addEventListener( "dragend", this.onDragEnd as EventListener, - true + true, ); initializeESMDependencies(); @@ -189,14 +189,14 @@ export class SideMenuView< this.pmView.root.addEventListener( "mousemove", this.onMouseMove as EventListener, - true + true, ); // Hides and unfreezes the menu whenever the user presses a key. this.pmView.root.addEventListener( "keydown", this.onKeyDown as EventListener, - true + true, ); // Setting capture=true ensures that any parent container of the editor that @@ -218,7 +218,7 @@ export class SideMenuView< const block = getBlockFromMousePos( this.mousePos, this.pmView, - this.sideMenuDetection + this.sideMenuDetection, ); // Closes the menu if the mouse cursor is beyond the editor vertically. @@ -270,10 +270,10 @@ export class SideMenuView< ).getBoundingClientRect().x, blockContentBoundingBox.y, blockContentBoundingBox.width, - blockContentBoundingBox.height + blockContentBoundingBox.height, ), block: this.editor.getBlock( - this.hoveredBlock!.getAttribute("data-id")! + this.hoveredBlock!.getAttribute("data-id")!, )!, }); } @@ -312,9 +312,9 @@ export class SideMenuView< this.pmView.state.tr.setSelection( TextSelection.create( this.pmView.state.tr.doc, - this.pmView.state.tr.selection.to - ) - ) + this.pmView.state.tr.selection.to, + ), + ), ); } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) { // Because the editor from which the block originates doesn't get a drop @@ -330,7 +330,7 @@ export class SideMenuView< // handle the event. setTimeout( () => this.pmView.dispatch(this.pmView.state.tr.deleteSelection()), - 0 + 0, ); } } @@ -535,7 +535,7 @@ export class SideMenuView< evt.clientY = Math.min( Math.max(event.clientY, editorBoundingBox.top), - editorBoundingBox.top + editorBoundingBox.height + editorBoundingBox.top + editorBoundingBox.height, ); evt.dataTransfer = event.dataTransfer; @@ -573,30 +573,30 @@ export class SideMenuView< this.pmView.root.removeEventListener( "mousemove", this.onMouseMove as EventListener, - true + true, ); this.pmView.root.removeEventListener( "dragstart", - this.onDragStart as EventListener + this.onDragStart as EventListener, ); this.pmView.root.removeEventListener( "dragover", - this.onDragOver as EventListener + this.onDragOver as EventListener, ); this.pmView.root.removeEventListener( "drop", this.onDrop as EventListener, - true + true, ); this.pmView.root.removeEventListener( "dragend", this.onDragEnd as EventListener, - true + true, ); this.pmView.root.removeEventListener( "keydown", this.onKeyDown as EventListener, - true + true, ); this.pmView.root.removeEventListener("scroll", this.onScroll, true); } @@ -607,14 +607,14 @@ export const sideMenuPluginKey = new PluginKey("SideMenuPlugin"); export class SideMenuProsemirrorPlugin< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > extends EventEmitter { public view: SideMenuView | undefined; public readonly plugin: Plugin; constructor( private readonly editor: BlockNoteEditor, - sideMenuDetection: "viewport" | "editor" + sideMenuDetection: "viewport" | "editor", ) { super(); this.plugin = new Plugin({ @@ -626,7 +626,7 @@ export class SideMenuProsemirrorPlugin< editorView, (state) => { this.emit("update", state); - } + }, ); return this.view; }, @@ -645,7 +645,7 @@ export class SideMenuProsemirrorPlugin< dataTransfer: DataTransfer | null; clientY: number; }, - block: Block + block: Block, ) => { if (this.view) { this.view.isDragOrigin = true; diff --git a/packages/core/src/extensions/SideMenu/dragging.ts b/packages/core/src/extensions/SideMenu/dragging.ts index a5224324c4..3eaab54c50 100644 --- a/packages/core/src/extensions/SideMenu/dragging.ts +++ b/packages/core/src/extensions/SideMenu/dragging.ts @@ -21,7 +21,7 @@ let dragImageElement: Element | undefined; export type SideMenuState< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = UiElementPosition & { // The block that the side menu is attached to. block: Block; @@ -81,12 +81,12 @@ function setDragImage(view: EditorView, from: number, to = from) { const firstSelectedBlockIndex = getElementIndex( parent, // Expects from position to be just before the first selected block. - view.domAtPos(from + 1).node.parentElement! + view.domAtPos(from + 1).node.parentElement!, ); const lastSelectedBlockIndex = getElementIndex( parent, // Expects to position to be just after the last selected block. - view.domAtPos(to - 1).node.parentElement! + view.domAtPos(to - 1).node.parentElement!, ); for (let i = parent.childElementCount - 1; i >= 0; i--) { @@ -120,7 +120,7 @@ function setDragImage(view: EditorView, from: number, to = from) { (className) => className !== "ProseMirror" && className !== "bn-root" && - className !== "bn-editor" + className !== "bn-editor", ) .join(" "); @@ -149,11 +149,11 @@ export function unsetDragImage(rootEl: Document | ShadowRoot) { export function dragStart< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( e: { dataTransfer: DataTransfer | null; clientY: number }, block: Block, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) { if (!e.dataTransfer) { return; @@ -183,12 +183,12 @@ export function dragStart< if (draggedBlockInSelection && multipleBlocksSelected) { view.dispatch( - view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to)) + view.state.tr.setSelection(MultipleNodeSelection.create(doc, from, to)), ); setDragImage(view, from, to); } else { view.dispatch( - view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)) + view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos)), ); setDragImage(view, pos); } diff --git a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts index 2220f75968..dfa3170c83 100644 --- a/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts +++ b/packages/core/src/extensions/SuggestionMenu/SuggestionPlugin.ts @@ -22,7 +22,7 @@ export type SuggestionMenuState = UiElementPosition & { class SuggestionMenuView< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > { public state?: SuggestionMenuState; public emitUpdate: (triggerCharacter: string) => void; @@ -31,7 +31,7 @@ class SuggestionMenuView< constructor( private readonly editor: BlockNoteEditor, - emitUpdate: (menuName: string, state: SuggestionMenuState) => void + emitUpdate: (menuName: string, state: SuggestionMenuState) => void, ) { this.pluginState = undefined; @@ -57,7 +57,7 @@ class SuggestionMenuView< handleScroll = () => { if (this.state?.show) { const decorationNode = this.rootEl?.querySelector( - `[data-decoration-id="${this.pluginState!.decorationId}"]` + `[data-decoration-id="${this.pluginState!.decorationId}"]`, ); if (!decorationNode) { return; @@ -71,7 +71,7 @@ class SuggestionMenuView< const prev: SuggestionPluginState = suggestionMenuPluginKey.getState(prevState); const next: SuggestionPluginState = suggestionMenuPluginKey.getState( - view.state + view.state, ); // See how the state changed @@ -96,7 +96,7 @@ class SuggestionMenuView< } const decorationNode = this.rootEl?.querySelector( - `[data-decoration-id="${this.pluginState!.decorationId}"]` + `[data-decoration-id="${this.pluginState!.decorationId}"]`, ); if (this.editor.isEditable && decorationNode) { @@ -165,7 +165,7 @@ const suggestionMenuPluginKey = new PluginKey("SuggestionMenuPlugin"); export class SuggestionMenuProseMirrorPlugin< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > extends EventEmitter { private view: SuggestionMenuView | undefined; public readonly plugin: Plugin; @@ -183,7 +183,7 @@ export class SuggestionMenuProseMirrorPlugin< editor, (triggerCharacter, state) => { this.emit(`update ${triggerCharacter}`, state); - } + }, ); return this.view; }, @@ -199,7 +199,7 @@ export class SuggestionMenuProseMirrorPlugin< transaction, prev, _oldState, - newState + newState, ): SuggestionPluginState => { // TODO: More clearly define which transactions should be ignored. if (transaction.getMeta("orderedListIndexing") !== undefined) { @@ -231,7 +231,7 @@ export class SuggestionMenuProseMirrorPlugin< editor, newState.selection.from - // Need to account for the trigger char that was inserted, so we offset the position by the length of the trigger character. - suggestionPluginTransactionMeta.triggerCharacter.length + suggestionPluginTransactionMeta.triggerCharacter.length, ); return { triggerCharacter: @@ -271,7 +271,7 @@ export class SuggestionMenuProseMirrorPlugin< newState.selection.from < prev.queryStartPos()) || // Moving the caret to a new block should hide the menu. !newState.selection.$from.sameParent( - newState.doc.resolve(prev.queryStartPos()) + newState.doc.resolve(prev.queryStartPos()), ) ) { return undefined; @@ -282,7 +282,7 @@ export class SuggestionMenuProseMirrorPlugin< // Updates the current query. next.query = newState.doc.textBetween( prev.queryStartPos(), - newState.selection.from + newState.selection.from, ); return next; @@ -298,7 +298,7 @@ export class SuggestionMenuProseMirrorPlugin< .setMeta(suggestionMenuPluginKey, { triggerCharacter: text, }) - .scrollIntoView() + .scrollIntoView(), ); return true; @@ -329,7 +329,7 @@ export class SuggestionMenuProseMirrorPlugin< nodeName: "span", class: "bn-suggestion-decorator", "data-decoration-id": suggestionPluginState.decorationId, - } + }, ), ]); } @@ -344,7 +344,7 @@ export class SuggestionMenuProseMirrorPlugin< nodeName: "span", class: "bn-suggestion-decorator", "data-decoration-id": suggestionPluginState.decorationId, - } + }, ), ]); }, @@ -354,7 +354,7 @@ export class SuggestionMenuProseMirrorPlugin< public onUpdate( triggerCharacter: string, - callback: (state: SuggestionMenuState) => void + callback: (state: SuggestionMenuState) => void, ) { if (!this.triggerCharacters.includes(triggerCharacter)) { this.addTriggerCharacter(triggerCharacter); @@ -370,7 +370,7 @@ export class SuggestionMenuProseMirrorPlugin< // TODO: Should this be called automatically when listeners are removed? removeTriggerCharacter = (triggerCharacter: string) => { this.triggerCharacters = this.triggerCharacters.filter( - (c) => c !== triggerCharacter + (c) => c !== triggerCharacter, ); }; @@ -386,7 +386,7 @@ export class SuggestionMenuProseMirrorPlugin< export function createSuggestionMenu< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(editor: BlockNoteEditor, triggerCharacter: string) { editor.suggestionMenus.addTriggerCharacter(triggerCharacter); } diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts index e8ca656480..4f02c94625 100644 --- a/packages/core/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts +++ b/packages/core/src/extensions/SuggestionMenu/getDefaultEmojiPickerItems.ts @@ -49,10 +49,10 @@ async function loadEmojiMart() { export async function getDefaultEmojiPickerItems< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, - query: string + query: string, ): Promise { if (!checkDefaultInlineContentTypeInSchema("text", editor)) { return []; diff --git a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts index 8e27866cc0..8073694d9d 100644 --- a/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts +++ b/packages/core/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts @@ -18,7 +18,7 @@ import { DefaultSuggestionItem } from "./DefaultSuggestionItem.js"; function setSelectionToNextContentEditableBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(editor: BlockNoteEditor) { let block: Block | undefined = editor.getTextCursorPosition().block; @@ -44,10 +44,10 @@ function setSelectionToNextContentEditableBlock< export function insertOrUpdateBlock< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( editor: BlockNoteEditor, - block: PartialBlock + block: PartialBlock, ): Block { const currentBlock = editor.getTextCursorPosition().block; @@ -83,7 +83,7 @@ export function insertOrUpdateBlock< export function getDefaultSlashMenuItems< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >(editor: BlockNoteEditor) { const items: DefaultSuggestionItem[] = []; @@ -121,7 +121,7 @@ export function getDefaultSlashMenuItems< badge: formatKeyboardShortcut("Mod-Alt-3"), key: "heading_3", ...editor.dictionary.slash_menu.heading_3, - } + }, ); } @@ -237,7 +237,7 @@ export function getDefaultSlashMenuItems< editor.transact((tr) => tr.setMeta(editor.filePanel!.plugin, { block: insertedBlock, - }) + }), ); }, key: "image", @@ -256,7 +256,7 @@ export function getDefaultSlashMenuItems< editor.transact((tr) => tr.setMeta(editor.filePanel!.plugin, { block: insertedBlock, - }) + }), ); }, key: "video", @@ -275,7 +275,7 @@ export function getDefaultSlashMenuItems< editor.transact((tr) => tr.setMeta(editor.filePanel!.plugin, { block: insertedBlock, - }) + }), ); }, key: "audio", @@ -294,7 +294,7 @@ export function getDefaultSlashMenuItems< editor.transact((tr) => tr.setMeta(editor.filePanel!.plugin, { block: insertedBlock, - }) + }), ); }, key: "file", @@ -317,14 +317,14 @@ export function getDefaultSlashMenuItems< } export function filterSuggestionItems< - T extends { title: string; aliases?: readonly string[] } + T extends { title: string; aliases?: readonly string[] }, >(items: T[], query: string) { return items.filter( ({ title, aliases }) => title.toLowerCase().includes(query.toLowerCase()) || (aliases && aliases.filter((alias) => - alias.toLowerCase().includes(query.toLowerCase()) - ).length !== 0) + alias.toLowerCase().includes(query.toLowerCase()), + ).length !== 0), ); } diff --git a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts index b78c457dc7..4cb296f31c 100644 --- a/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts +++ b/packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts @@ -46,7 +46,7 @@ let dragImageElement: HTMLElement | undefined; // TODO consider switching this to jotai, it is a bit messy and noisy export type TableHandlesState< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { show: boolean; showAddOrRemoveRowsButton: boolean; @@ -146,7 +146,7 @@ function hideElements(selector: string, rootEl: Document | ShadowRoot) { export class TableHandlesView< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > implements PluginView { public state?: TableHandlesState; @@ -169,7 +169,7 @@ export class TableHandlesView< S >, private readonly pmView: EditorView, - emitUpdate: (state: TableHandlesState) => void + emitUpdate: (state: TableHandlesState) => void, ) { this.emitUpdate = () => { if (!this.state) { @@ -185,11 +185,11 @@ export class TableHandlesView< pmView.root.addEventListener( "dragover", - this.dragOverHandler as EventListener + this.dragOverHandler as EventListener, ); pmView.root.addEventListener( "drop", - this.dropHandler as unknown as EventListener + this.dropHandler as unknown as EventListener, ); } @@ -264,7 +264,7 @@ export class TableHandlesView< | undefined; const pmNodeInfo = this.editor.transact((tr) => - getNodeById(blockEl.id, tr.doc) + getNodeById(blockEl.id, tr.doc), ); if (!pmNodeInfo) { throw new Error(`Block with ID ${blockEl.id} not found`); @@ -275,7 +275,7 @@ export class TableHandlesView< this.editor.pmSchema, this.editor.schema.blockSchema, this.editor.schema.inlineContentSchema, - this.editor.schema.styleSchema + this.editor.schema.styleSchema, ); if (checkBlockIsDefaultType("table", block, this.editor)) { @@ -368,7 +368,7 @@ export class TableHandlesView< hideElements( ".prosemirror-dropcursor-block, .prosemirror-dropcursor-inline", - this.pmView.root + this.pmView.root, ); // The mouse cursor coordinates, bounded to the table's bounding box. The @@ -377,11 +377,11 @@ export class TableHandlesView< const boundedMouseCoords = { left: Math.min( Math.max(event.clientX, this.state.referencePosTable.left + 1), - this.state.referencePosTable.right - 1 + this.state.referencePosTable.right - 1, ), top: Math.min( Math.max(event.clientY, this.state.referencePosTable.top + 1), - this.state.referencePosTable.bottom - 1 + this.state.referencePosTable.bottom - 1, ), }; @@ -390,7 +390,7 @@ export class TableHandlesView< const tableCellElements = this.pmView.root .elementsFromPoint(boundedMouseCoords.left, boundedMouseCoords.top) .filter( - (element) => element.tagName === "TD" || element.tagName === "TH" + (element) => element.tagName === "TD" || element.tagName === "TH", ); if (tableCellElements.length === 0) { return; @@ -461,7 +461,7 @@ export class TableHandlesView< this.state.colIndex === undefined ) { throw new Error( - "Attempted to drop table row or column, but no table block was hovered prior." + "Attempted to drop table row or column, but no table block was hovered prior.", ); } @@ -476,7 +476,7 @@ export class TableHandlesView< !canRowBeDraggedInto( this.state.block, draggingState.originalIndex, - rowIndex + rowIndex, ) ) { // If the target row is invalid, don't move the row @@ -485,7 +485,7 @@ export class TableHandlesView< const newTable = moveRow( this.state.block, draggingState.originalIndex, - rowIndex + rowIndex, ); this.editor.updateBlock(this.state.block, { type: "table", @@ -499,7 +499,7 @@ export class TableHandlesView< !canColumnBeDraggedInto( this.state.block, draggingState.originalIndex, - colIndex + colIndex, ) ) { // If the target column is invalid, don't move the column @@ -508,7 +508,7 @@ export class TableHandlesView< const newTable = moveColumn( this.state.block, draggingState.originalIndex, - colIndex + colIndex, ); const [columnWidth] = columnWidths.splice(draggingState.originalIndex, 1); columnWidths.splice(colIndex, 0, columnWidth); @@ -538,6 +538,7 @@ export class TableHandlesView< this.state.block = this.editor.getBlock(this.state.block.id)!; if ( !this.state.block || + this.state.block.type !== "table" || // when collaborating, the table element might be replaced and out of date // because yjs replaces the element when for example you change the color via the side menu !this.tableElement?.isConnected @@ -551,7 +552,7 @@ export class TableHandlesView< } const { height: rowCount, width: colCount } = getDimensionsOfTable( - this.state.block + this.state.block, ); if ( @@ -574,7 +575,7 @@ export class TableHandlesView< if (!tableBody) { throw new Error( - "Table block does not contain a 'tbody' HTML element. This should never happen." + "Table block does not contain a 'tbody' HTML element. This should never happen.", ); } @@ -602,11 +603,11 @@ export class TableHandlesView< this.pmView.dom.removeEventListener("mousedown", this.viewMousedownHandler); this.pmView.root.removeEventListener( "dragover", - this.dragOverHandler as EventListener + this.dragOverHandler as EventListener, ); this.pmView.root.removeEventListener( "drop", - this.dropHandler as unknown as EventListener + this.dropHandler as unknown as EventListener, ); } } @@ -615,7 +616,7 @@ export const tableHandlesPluginKey = new PluginKey("TableHandlesPlugin"); export class TableHandlesProsemirrorPlugin< I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > extends EventEmitter { private view: TableHandlesView | undefined; public readonly plugin: Plugin; @@ -625,7 +626,7 @@ export class TableHandlesProsemirrorPlugin< BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>, I, S - > + >, ) { super(); this.plugin = new Plugin({ @@ -684,18 +685,18 @@ export class TableHandlesProsemirrorPlugin< if (this.view.state.draggingState.draggedCellOrientation === "row") { const cellsInRow = getCellsAtRowHandle( this.view.state.block, - newIndex + newIndex, ); cellsInRow.forEach(({ row, col }) => { // Gets each row in the table. const rowResolvedPos = state.doc.resolve( - tableResolvedPos.posAtIndex(row) + 1 + tableResolvedPos.posAtIndex(row) + 1, ); // Gets the cell within the row. const cellResolvedPos = state.doc.resolve( - rowResolvedPos.posAtIndex(col) + 1 + rowResolvedPos.posAtIndex(col) + 1, ); const cellNode = cellResolvedPos.node(); // Creates a decoration at the start or end of each cell, @@ -724,24 +725,24 @@ export class TableHandlesProsemirrorPlugin< widget.style.height = "4px"; return widget; - }) + }), ); }); } else { const cellsInColumn = getCellsAtColumnHandle( this.view.state.block, - newIndex + newIndex, ); cellsInColumn.forEach(({ row, col }) => { // Gets each row in the table. const rowResolvedPos = state.doc.resolve( - tableResolvedPos.posAtIndex(row) + 1 + tableResolvedPos.posAtIndex(row) + 1, ); // Gets the cell within the row. const cellResolvedPos = state.doc.resolve( - rowResolvedPos.posAtIndex(col) + 1 + rowResolvedPos.posAtIndex(col) + 1, ); const cellNode = cellResolvedPos.node(); @@ -772,7 +773,7 @@ export class TableHandlesProsemirrorPlugin< widget.style.width = "4px"; return widget; - }) + }), ); }); } @@ -800,7 +801,7 @@ export class TableHandlesProsemirrorPlugin< this.view!.state.colIndex === undefined ) { throw new Error( - "Attempted to drag table column, but no table block was hovered prior." + "Attempted to drag table column, but no table block was hovered prior.", ); } @@ -818,7 +819,7 @@ export class TableHandlesProsemirrorPlugin< originalIndex: this.view!.state!.colIndex, newIndex: this.view!.state!.colIndex, tablePos: this.view!.tablePos, - }) + }), ); if (!this.editor.prosemirrorView) { @@ -843,7 +844,7 @@ export class TableHandlesProsemirrorPlugin< this.view!.state.rowIndex === undefined ) { throw new Error( - "Attempted to drag table row, but no table block was hovered prior." + "Attempted to drag table row, but no table block was hovered prior.", ); } @@ -861,7 +862,7 @@ export class TableHandlesProsemirrorPlugin< originalIndex: this.view!.state!.rowIndex, newIndex: this.view!.state!.rowIndex, tablePos: this.view!.tablePos, - }) + }), ); if (!this.editor.prosemirrorView) { @@ -880,7 +881,7 @@ export class TableHandlesProsemirrorPlugin< dragEnd = () => { if (this.view!.state === undefined) { throw new Error( - "Attempted to drag table row, but no table block was hovered prior." + "Attempted to drag table row, but no table block was hovered prior.", ); } @@ -914,7 +915,7 @@ export class TableHandlesProsemirrorPlugin< getCellsAtRowHandle = ( block: BlockFromConfigNoChildren, - relativeRowIndex: RelativeCellIndices["row"] + relativeRowIndex: RelativeCellIndices["row"], ) => { return getCellsAtRowHandle(block, relativeRowIndex); }; @@ -924,7 +925,7 @@ export class TableHandlesProsemirrorPlugin< */ getCellsAtColumnHandle = ( block: BlockFromConfigNoChildren, - relativeColumnIndex: RelativeCellIndices["col"] + relativeColumnIndex: RelativeCellIndices["col"], ) => { return getCellsAtColumnHandle(block, relativeColumnIndex); }; @@ -936,7 +937,7 @@ export class TableHandlesProsemirrorPlugin< private setCellSelection = ( state: EditorState, relativeStartCell: RelativeCellIndices, - relativeEndCell: RelativeCellIndices = relativeStartCell + relativeEndCell: RelativeCellIndices = relativeStartCell, ) => { const view = this.view; @@ -946,18 +947,18 @@ export class TableHandlesProsemirrorPlugin< const tableResolvedPos = state.doc.resolve(view.tablePos! + 1); const startRowResolvedPos = state.doc.resolve( - tableResolvedPos.posAtIndex(relativeStartCell.row) + 1 + tableResolvedPos.posAtIndex(relativeStartCell.row) + 1, ); const startCellResolvedPos = state.doc.resolve( // No need for +1, since CellSelection expects the position before the cell - startRowResolvedPos.posAtIndex(relativeStartCell.col) + startRowResolvedPos.posAtIndex(relativeStartCell.col), ); const endRowResolvedPos = state.doc.resolve( - tableResolvedPos.posAtIndex(relativeEndCell.row) + 1 + tableResolvedPos.posAtIndex(relativeEndCell.row) + 1, ); const endCellResolvedPos = state.doc.resolve( // No need for +1, since CellSelection expects the position before the cell - endRowResolvedPos.posAtIndex(relativeEndCell.col) + endRowResolvedPos.posAtIndex(relativeEndCell.col), ); // Begin a new transaction to set the selection @@ -965,7 +966,7 @@ export class TableHandlesProsemirrorPlugin< // Set the selection to the given cell or a range of cells tr.setSelection( - new CellSelection(startCellResolvedPos, endCellResolvedPos) + new CellSelection(startCellResolvedPos, endCellResolvedPos), ); // Quickly apply the transaction to get the new state to update the selection before splitting the cell @@ -979,14 +980,14 @@ export class TableHandlesProsemirrorPlugin< index: RelativeCellIndices["row"] | RelativeCellIndices["col"], direction: | { orientation: "row"; side: "above" | "below" } - | { orientation: "column"; side: "left" | "right" } + | { orientation: "column"; side: "left" | "right" }, ) => { this.editor.exec((beforeState, dispatch) => { const state = this.setCellSelection( beforeState, direction.orientation === "row" ? { row: index, col: 0 } - : { row: 0, col: index } + : { row: 0, col: index }, ); if (direction.orientation === "row") { @@ -1010,7 +1011,7 @@ export class TableHandlesProsemirrorPlugin< */ removeRowOrColumn = ( index: RelativeCellIndices["row"] | RelativeCellIndices["col"], - direction: "row" | "column" + direction: "row" | "column", ) => { if (direction === "row") { return this.editor.exec((beforeState, dispatch) => { @@ -1043,7 +1044,7 @@ export class TableHandlesProsemirrorPlugin< ? this.setCellSelection( beforeState, cellsToMerge.relativeStartCell, - cellsToMerge.relativeEndCell + cellsToMerge.relativeEndCell, ) : beforeState; @@ -1099,10 +1100,10 @@ export class TableHandlesProsemirrorPlugin< // Assumes we are within a tableParagraph // And find the from and to cells by resolving the positions $fromCell = tr.doc.resolve( - selection.$from.pos - selection.$from.parentOffset - 1 + selection.$from.pos - selection.$from.parentOffset - 1, ); $toCell = tr.doc.resolve( - selection.$to.pos - selection.$to.parentOffset - 1 + selection.$to.pos - selection.$to.parentOffset - 1, ); // Opt-out when the selection is not pointing into cells @@ -1113,7 +1114,7 @@ export class TableHandlesProsemirrorPlugin< // Find the row and table that the from and to cells are in const $fromRow = tr.doc.resolve( - $fromCell.pos - $fromCell.parentOffset - 1 + $fromCell.pos - $fromCell.parentOffset - 1, ); const $toRow = tr.doc.resolve($toCell.pos - $toCell.parentOffset - 1); @@ -1155,7 +1156,7 @@ export class TableHandlesProsemirrorPlugin< getMergeDirection = ( block: | BlockFromConfigNoChildren - | undefined + | undefined, ) => { return this.editor.transact((tr) => { const isSelectingTableCells = isTableCellSelection(tr.selection) @@ -1187,7 +1188,7 @@ export class TableHandlesProsemirrorPlugin< cropEmptyRowsOrColumns = ( block: BlockFromConfigNoChildren, - removeEmpty: "columns" | "rows" + removeEmpty: "columns" | "rows", ) => { return cropEmptyRowsOrColumns(block, removeEmpty); }; @@ -1195,7 +1196,7 @@ export class TableHandlesProsemirrorPlugin< addRowsOrColumns = ( block: BlockFromConfigNoChildren, addType: "columns" | "rows", - numToAdd: number + numToAdd: number, ) => { return addRowsOrColumns(block, addType, numToAdd); }; diff --git a/packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts b/packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts index 90a28efa74..ea70567d68 100644 --- a/packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts +++ b/packages/core/src/extensions/TrailingNode/TrailingNodeExtension.ts @@ -40,7 +40,7 @@ export const TrailingNode = Extension.create({ return tr.insert( endPosition, - type.create(undefined, contentType.create()) + type.create(undefined, contentType.create()), ); }, state: { diff --git a/packages/core/src/extensions/UniqueID/UniqueID.ts b/packages/core/src/extensions/UniqueID/UniqueID.ts index 6b9fa0e5ba..b0f5be9827 100644 --- a/packages/core/src/extensions/UniqueID/UniqueID.ts +++ b/packages/core/src/extensions/UniqueID/UniqueID.ts @@ -35,7 +35,7 @@ function removeDuplicates(array: any, by = JSON.stringify) { */ function findDuplicates(items: any) { const filtered = items.filter( - (el: any, index: number) => items.indexOf(el) !== index + (el: any, index: number) => items.indexOf(el) !== index, ); const duplicates = removeDuplicates(filtered); return duplicates; @@ -154,7 +154,7 @@ const UniqueID = Extension.create({ const { types, attributeName, generateID } = this.options; const transform = combineTransactionSteps( oldState.doc, - transactions as any + transactions as any, ); const { mapping } = transform; // get changed ranges based on the old state @@ -166,7 +166,7 @@ const UniqueID = Extension.create({ newRange, (node) => { return types.includes(node.type.name); - } + }, ); const newIds = newNodes .map(({ node }) => node.attrs[attributeName]) @@ -193,7 +193,7 @@ const UniqueID = Extension.create({ if (wasInitial) { // the old state was the "initial content" const jsonNode = JSON.parse( - JSON.stringify(newState.doc.toJSON()) + JSON.stringify(newState.doc.toJSON()), ); jsonNode.content[0].content[0].attrs.id = "initialBlockId"; // would the new state with the fix also be the "initial content"? @@ -308,7 +308,7 @@ const UniqueID = Extension.create({ [attributeName]: null, }, removeId(node.content), - node.marks + node.marks, ); list.push(nodeWithoutId); }); @@ -319,7 +319,7 @@ const UniqueID = Extension.create({ return new Slice( removeId(slice.content), slice.openStart, - slice.openEnd + slice.openEnd, ); }, }, diff --git a/packages/core/src/extensions/getDraggableBlockFromElement.ts b/packages/core/src/extensions/getDraggableBlockFromElement.ts index 7217242456..abc6bd2906 100644 --- a/packages/core/src/extensions/getDraggableBlockFromElement.ts +++ b/packages/core/src/extensions/getDraggableBlockFromElement.ts @@ -2,7 +2,7 @@ import { EditorView } from "prosemirror-view"; export function getDraggableBlockFromElement( element: Element, - view: EditorView + view: EditorView, ) { while ( element && diff --git a/packages/core/src/fonts/inter.css b/packages/core/src/fonts/inter.css index a074dfe49d..57337cdd50 100644 --- a/packages/core/src/fonts/inter.css +++ b/packages/core/src/fonts/inter.css @@ -5,7 +5,8 @@ font-family: "Inter"; font-style: normal; font-weight: 100; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -15,7 +16,8 @@ font-family: "Inter"; font-style: normal; font-weight: 200; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -25,7 +27,8 @@ font-family: "Inter"; font-style: normal; font-weight: 300; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -35,7 +38,8 @@ font-family: "Inter"; font-style: normal; font-weight: 400; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-regular.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -45,7 +49,8 @@ font-family: "Inter"; font-style: normal; font-weight: 500; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -55,7 +60,8 @@ font-family: "Inter"; font-style: normal; font-weight: 600; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -65,7 +71,8 @@ font-family: "Inter"; font-style: normal; font-weight: 700; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -75,7 +82,8 @@ font-family: "Inter"; font-style: normal; font-weight: 800; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ @@ -85,7 +93,8 @@ font-family: "Inter"; font-style: normal; font-weight: 900; - src: local(""), + src: + local(""), url("./inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"), /* Chrome 26+, Opera 23+, Firefox 39+ */ url("./inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ diff --git a/packages/core/src/locales.ts b/packages/core/src/locales.ts index 0d98f03ebc..b061732c13 100644 --- a/packages/core/src/locales.ts +++ b/packages/core/src/locales.ts @@ -1 +1 @@ -export * from "./i18n/index.js"; \ No newline at end of file +export * from "./i18n/index.js"; diff --git a/packages/core/src/pm-nodes/BlockGroup.ts b/packages/core/src/pm-nodes/BlockGroup.ts index 820b7eeb9d..70f6242307 100644 --- a/packages/core/src/pm-nodes/BlockGroup.ts +++ b/packages/core/src/pm-nodes/BlockGroup.ts @@ -37,7 +37,7 @@ export const BlockGroup = Node.create<{ const blockGroup = document.createElement("div"); blockGroup.className = mergeCSSClasses( "bn-block-group", - blockGroupHTMLAttributes.class + blockGroupHTMLAttributes.class, ); blockGroup.setAttribute("data-node-type", "blockGroup"); for (const [attribute, value] of Object.entries(blockGroupHTMLAttributes)) { diff --git a/packages/core/src/pm-nodes/Doc.ts b/packages/core/src/pm-nodes/Doc.ts index 69d086b5d4..3499af41ce 100644 --- a/packages/core/src/pm-nodes/Doc.ts +++ b/packages/core/src/pm-nodes/Doc.ts @@ -1,7 +1,7 @@ -import {Node} from "@tiptap/core"; +import { Node } from "@tiptap/core"; export const Doc = Node.create({ - name: "doc", - topNode: true, - content: "blockGroup", + name: "doc", + topNode: true, + content: "blockGroup", }); diff --git a/packages/core/src/schema/README.md b/packages/core/src/schema/README.md index 0aaf329fa1..639f92e106 100644 --- a/packages/core/src/schema/README.md +++ b/packages/core/src/schema/README.md @@ -1,3 +1,3 @@ ### @blocknote/core/src/schema -The BlockNote Schema consists of Blocks, InlineContent and Styles. \ No newline at end of file +The BlockNote Schema consists of Blocks, InlineContent and Styles. diff --git a/packages/core/src/schema/blocks/createSpec.ts b/packages/core/src/schema/blocks/createSpec.ts index ac1bc4328d..1b24598205 100644 --- a/packages/core/src/schema/blocks/createSpec.ts +++ b/packages/core/src/schema/blocks/createSpec.ts @@ -26,7 +26,7 @@ export type CustomBlockConfig = BlockConfig & { export type CustomBlockImplementation< T extends CustomBlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { render: ( /** @@ -38,7 +38,7 @@ export type CustomBlockImplementation< * This is typed generically. If you want an editor with your custom schema, you need to * cast it manually, e.g.: `const e = editor as BlockNoteEditor;` */ - editor: BlockNoteEditor, I, S> + editor: BlockNoteEditor, I, S>, // (note) if we want to fix the manual cast, we need to prevent circular references and separate block definition and render implementations // or allow manually passing , but that's not possible without passing the other generics because Typescript doesn't support partial inferred generics ) => { @@ -52,14 +52,14 @@ export type CustomBlockImplementation< // TODO: Maybe can return undefined to ignore when serializing? toExternalHTML?: ( block: BlockFromConfig, - editor: BlockNoteEditor, I, S> + editor: BlockNoteEditor, I, S>, ) => { dom: HTMLElement; contentDOM?: HTMLElement; }; parse?: ( - el: HTMLElement + el: HTMLElement, ) => PartialBlockFromConfig["props"] | undefined; }; @@ -85,7 +85,7 @@ export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) { // from the clipboard. export function getParseRules( config: BlockConfig, - customParseFunction: CustomBlockImplementation["parse"] + customParseFunction: CustomBlockImplementation["parse"], ) { const rules: TagParseRule[] = [ { @@ -136,10 +136,10 @@ export function getParseRules( export function createBlockSpec< T extends CustomBlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( blockConfig: T, - blockImplementation: CustomBlockImplementation, I, S> + blockImplementation: CustomBlockImplementation, I, S>, ) { const node = createStronglyTypedTiptapNode({ name: blockConfig.type as T["type"], @@ -173,7 +173,7 @@ export function createBlockSpec< {}, blockConfig.propSchema, blockConfig.isFileBlock, - HTMLAttributes + HTMLAttributes, ); }, @@ -186,7 +186,7 @@ export function createBlockSpec< getPos, editor, this.editor, - blockConfig.type + blockConfig.type, ); // Gets the custom HTML attributes for `blockContent` nodes const blockContentDOMAttributes = @@ -199,7 +199,7 @@ export function createBlockSpec< block.type, block.props, blockConfig.propSchema, - blockContentDOMAttributes + blockContentDOMAttributes, ); if (blockConfig.isSelectable === false) { @@ -213,7 +213,7 @@ export function createBlockSpec< if (node.name !== blockConfig.type) { throw new Error( - "Node name does not match block type. This is a bug in BlockNote." + "Node name does not match block type. This is a bug in BlockNote.", ); } @@ -231,7 +231,7 @@ export function createBlockSpec< block.props, blockConfig.propSchema, blockConfig.isFileBlock, - blockContentDOMAttributes + blockContentDOMAttributes, ); }, // TODO: this should not have wrapInBlockStructure and generally be a lot simpler @@ -242,7 +242,7 @@ export function createBlockSpec< let output = blockImplementation.toExternalHTML?.( block as any, - editor as any + editor as any, ); if (output === undefined) { output = blockImplementation.render(block as any, editor as any); @@ -252,7 +252,7 @@ export function createBlockSpec< block.type, block.props, blockConfig.propSchema, - blockContentDOMAttributes + blockContentDOMAttributes, ); }, }); diff --git a/packages/core/src/schema/blocks/internal.ts b/packages/core/src/schema/blocks/internal.ts index 740e3867d5..d3749ab53a 100644 --- a/packages/core/src/schema/blocks/internal.ts +++ b/packages/core/src/schema/blocks/internal.ts @@ -99,17 +99,17 @@ export function getBlockFromPos< Config extends BlockConfig, BSchema extends BlockSchemaWithBlock, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( getPos: (() => number) | boolean, editor: BlockNoteEditor, tipTapEditor: Editor, - type: BType + type: BType, ) { // Gets position of the node if (typeof getPos === "boolean") { throw new Error( - "Cannot find node position as getPos is a boolean, not a function." + "Cannot find node position as getPos is a boolean, not a function.", ); } const pos = getPos(); @@ -142,7 +142,7 @@ export function getBlockFromPos< // an `inlineContent` class to it. export function wrapInBlockStructure< BType extends string, - PSchema extends PropSchema + PSchema extends PropSchema, >( element: { dom: HTMLElement; @@ -153,7 +153,7 @@ export function wrapInBlockStructure< blockProps: Props, propSchema: PSchema, isFileBlock = false, - domAttributes?: Record + domAttributes?: Record, ): { dom: HTMLElement; contentDOM?: HTMLElement; @@ -173,7 +173,7 @@ export function wrapInBlockStructure< // Sets blockContent class blockContent.className = mergeCSSClasses( "bn-block-content", - domAttributes?.class || "" + domAttributes?.class || "", ); // Sets content type attribute blockContent.setAttribute("data-content-type", blockType); @@ -197,7 +197,7 @@ export function wrapInBlockStructure< if (element.contentDOM !== undefined) { element.contentDOM.className = mergeCSSClasses( "bn-inline-content", - element.contentDOM.className + element.contentDOM.className, ); } @@ -215,7 +215,7 @@ type StronglyTypedTipTapNode< | "tableRow+" | "blockContainer+" | "column column+" - | "" + | "", > = Node & { name: Name; config: { content: Content } }; export function createStronglyTypedTiptapNode< @@ -225,7 +225,7 @@ export function createStronglyTypedTiptapNode< | "tableRow+" | "blockContainer+" | "column column+" - | "" + | "", >(config: NodeConfig & { name: Name; content: Content }) { return Node.create(config) as StronglyTypedTipTapNode; // force re-typing (should be safe as it's type-checked from the config) } @@ -239,7 +239,7 @@ export function createInternalBlockSpec( any, InlineContentSchema, StyleSchema - > + >, ) { return { config, @@ -249,7 +249,7 @@ export function createInternalBlockSpec( export function createBlockSpecFromStronglyTypedTiptapNode< T extends Node, - P extends PropSchema + P extends PropSchema, >(node: T, propSchema: P, requiredExtensions?: Array) { return createInternalBlockSpec( { @@ -257,12 +257,12 @@ export function createBlockSpecFromStronglyTypedTiptapNode< content: (node.config.content === "inline*" ? "inline" : node.config.content === "tableRow+" - ? "table" - : "none") as T["config"]["content"] extends "inline*" + ? "table" + : "none") as T["config"]["content"] extends "inline*" ? "inline" : T["config"]["content"] extends "tableRow+" - ? "table" - : "none", + ? "table" + : "none", propSchema, }, { @@ -271,12 +271,12 @@ export function createBlockSpecFromStronglyTypedTiptapNode< toInternalHTML: defaultBlockToHTML, toExternalHTML: defaultBlockToHTML, // parse: () => undefined, // parse rules are in node already - } + }, ); } export function getBlockSchemaFromSpecs(specs: T) { return Object.fromEntries( - Object.entries(specs).map(([key, value]) => [key, value.config]) + Object.entries(specs).map(([key, value]) => [key, value.config]), ) as BlockSchemaFromSpecs; } diff --git a/packages/core/src/schema/blocks/types.ts b/packages/core/src/schema/blocks/types.ts index b2f7998193..0f97205638 100644 --- a/packages/core/src/schema/blocks/types.ts +++ b/packages/core/src/schema/blocks/types.ts @@ -74,7 +74,7 @@ export type TiptapBlockImplementation< T extends BlockConfig, B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { requiredExtensions?: Array; node: Node; @@ -82,7 +82,7 @@ export type TiptapBlockImplementation< block: BlockFromConfigNoChildren & { children: BlockNoDefaults[]; }, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { dom: HTMLElement; contentDOM?: HTMLElement; @@ -91,7 +91,7 @@ export type TiptapBlockImplementation< block: BlockFromConfigNoChildren & { children: BlockNoDefaults[]; }, - editor: BlockNoteEditor + editor: BlockNoteEditor, ) => { dom: HTMLElement; contentDOM?: HTMLElement; @@ -103,7 +103,7 @@ export type BlockSpec< T extends BlockConfig, B extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { config: T; implementation: TiptapBlockImplementation, B, I, S>; @@ -141,7 +141,7 @@ export type BlockSchemaFromSpecs = { export type BlockSchemaWithBlock< BType extends string, - C extends BlockConfig + C extends BlockConfig, > = { [k in BType]: C; }; @@ -156,7 +156,7 @@ export type TableCellProps = { export type TableCell< I extends InlineContentSchema, - S extends StyleSchema = StyleSchema + S extends StyleSchema = StyleSchema, > = { type: "tableCell"; props: TableCellProps; @@ -165,7 +165,7 @@ export type TableCell< export type TableContent< I extends InlineContentSchema, - S extends StyleSchema = StyleSchema + S extends StyleSchema = StyleSchema, > = { type: "tableContent"; columnWidths: (number | undefined)[]; @@ -182,7 +182,7 @@ export type TableContent< export type BlockFromConfigNoChildren< B extends BlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { id: string; type: B["type"]; @@ -190,16 +190,16 @@ export type BlockFromConfigNoChildren< content: B["content"] extends "inline" ? InlineContent[] : B["content"] extends "table" - ? TableContent - : B["content"] extends "none" - ? undefined - : never; + ? TableContent + : B["content"] extends "none" + ? undefined + : never; }; export type BlockFromConfig< B extends BlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = BlockFromConfigNoChildren & { children: BlockNoDefaults[]; }; @@ -210,7 +210,7 @@ export type BlockFromConfig< type BlocksWithoutChildren< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { [BType in keyof BSchema]: BlockFromConfigNoChildren; }; @@ -220,7 +220,7 @@ type BlocksWithoutChildren< export type BlockNoDefaults< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = BlocksWithoutChildren[keyof BSchema] & { children: BlockNoDefaults[]; }; @@ -229,7 +229,7 @@ export type SpecificBlock< BSchema extends BlockSchema, BType extends keyof BSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = BlocksWithoutChildren[BType] & { children: BlockNoDefaults[]; }; @@ -243,7 +243,7 @@ export type SpecificBlock< export type PartialTableCell< I extends InlineContentSchema, - S extends StyleSchema = StyleSchema + S extends StyleSchema = StyleSchema, > = { type: "tableCell"; props?: Partial; @@ -252,7 +252,7 @@ export type PartialTableCell< export type PartialTableContent< I extends InlineContentSchema, - S extends StyleSchema = StyleSchema + S extends StyleSchema = StyleSchema, > = { type: "tableContent"; columnWidths?: (number | undefined)[]; @@ -266,7 +266,7 @@ export type PartialTableContent< type PartialBlockFromConfigNoChildren< B extends BlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { id?: string; type?: B["type"]; @@ -274,14 +274,14 @@ type PartialBlockFromConfigNoChildren< content?: B["content"] extends "inline" ? PartialInlineContent : B["content"] extends "table" - ? PartialTableContent - : undefined; + ? PartialTableContent + : undefined; }; type PartialBlocksWithoutChildren< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { [BType in keyof BSchema]: PartialBlockFromConfigNoChildren< BSchema[BType], @@ -293,7 +293,7 @@ type PartialBlocksWithoutChildren< export type PartialBlockNoDefaults< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = PartialBlocksWithoutChildren< BSchema, I, @@ -307,7 +307,7 @@ export type SpecificPartialBlock< BSchema extends BlockSchema, I extends InlineContentSchema, BType extends keyof BSchema, - S extends StyleSchema + S extends StyleSchema, > = PartialBlocksWithoutChildren[BType] & { children?: BlockNoDefaults[]; }; @@ -315,7 +315,7 @@ export type SpecificPartialBlock< export type PartialBlockFromConfig< B extends BlockConfig, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = PartialBlockFromConfigNoChildren & { children?: BlockNoDefaults[]; }; diff --git a/packages/core/src/schema/inlineContent/createSpec.ts b/packages/core/src/schema/inlineContent/createSpec.ts index c6d2837127..686cc859f6 100644 --- a/packages/core/src/schema/inlineContent/createSpec.ts +++ b/packages/core/src/schema/inlineContent/createSpec.ts @@ -25,7 +25,7 @@ export type CustomInlineContentImplementation< T extends CustomInlineContentConfig, // B extends BlockSchema, // I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, > = { render: ( /** @@ -33,14 +33,14 @@ export type CustomInlineContentImplementation< */ inlineContent: InlineContentFromConfig, updateInlineContent: ( - update: PartialCustomInlineContentFromConfig + update: PartialCustomInlineContentFromConfig, ) => void, /** * The BlockNote editor instance * This is typed generically. If you want an editor with your custom schema, you need to * cast it manually, e.g.: `const e = editor as BlockNoteEditor;` */ - editor: BlockNoteEditor + editor: BlockNoteEditor, // (note) if we want to fix the manual cast, we need to prevent circular references and separate block definition and render implementations // or allow manually passing , but that's not possible without passing the other generics because Typescript doesn't support partial inferred generics ) => { @@ -51,7 +51,7 @@ export type CustomInlineContentImplementation< }; export function getInlineContentParseRules( - config: CustomInlineContentConfig + config: CustomInlineContentConfig, ): TagParseRule[] { return [ { @@ -71,10 +71,10 @@ export function getInlineContentParseRules( export function createInlineContentSpec< T extends CustomInlineContentConfig, - S extends StyleSchema + S extends StyleSchema, >( inlineContentConfig: T, - inlineContentImplementation: CustomInlineContentImplementation + inlineContentImplementation: CustomInlineContentImplementation, ): InlineContentSpec { const node = Node.create({ name: inlineContentConfig.type, @@ -105,19 +105,19 @@ export function createInlineContentSpec< nodeToCustomInlineContent( node, editor.schema.inlineContentSchema, - editor.schema.styleSchema + editor.schema.styleSchema, ) as any as InlineContentFromConfig, // TODO: fix cast () => { // No-op }, - editor + editor, ); return addInlineContentAttributes( output, inlineContentConfig.type, node.attrs as Props, - inlineContentConfig.propSchema + inlineContentConfig.propSchema, ); }, @@ -129,7 +129,7 @@ export function createInlineContentSpec< nodeToCustomInlineContent( node, editor.schema.inlineContentSchema, - editor.schema.styleSchema + editor.schema.styleSchema, ) as any as InlineContentFromConfig, // TODO: fix cast (update) => { if (typeof getPos === "boolean") { @@ -142,18 +142,18 @@ export function createInlineContentSpec< editor.prosemirrorView.state.tr.replaceWith( getPos(), getPos() + node.nodeSize, - content - ) + content, + ), ); }, - editor + editor, ); return addInlineContentAttributes( output, inlineContentConfig.type, node.attrs as Props, - inlineContentConfig.propSchema + inlineContentConfig.propSchema, ); }; }, @@ -161,6 +161,6 @@ export function createInlineContentSpec< return createInlineContentSpecFromTipTapNode( node, - inlineContentConfig.propSchema + inlineContentConfig.propSchema, ) as InlineContentSpec; // TODO: fix cast } diff --git a/packages/core/src/schema/inlineContent/internal.ts b/packages/core/src/schema/inlineContent/internal.ts index b8cbc362e7..3e438d7cfb 100644 --- a/packages/core/src/schema/inlineContent/internal.ts +++ b/packages/core/src/schema/inlineContent/internal.ts @@ -16,7 +16,7 @@ import { // is lost on internal copy & paste. export function addInlineContentAttributes< IType extends string, - PSchema extends PropSchema + PSchema extends PropSchema, >( element: { dom: HTMLElement; @@ -24,7 +24,7 @@ export function addInlineContentAttributes< }, inlineContentType: IType, inlineContentProps: Props, - propSchema: PSchema + propSchema: PSchema, ): { dom: HTMLElement; contentDOM?: HTMLElement; @@ -52,9 +52,9 @@ export function addInlineContentAttributes< // see https://github.com/TypeCellOS/BlockNote/pull/435 export function addInlineContentKeyboardShortcuts< - T extends CustomInlineContentConfig + T extends CustomInlineContentConfig, >( - config: T + config: T, ): { [p: string]: KeyboardShortcutCommand; } { @@ -75,7 +75,7 @@ export function addInlineContentKeyboardShortcuts< // config and implementation that conform to the type of Config export function createInternalInlineContentSpec( config: T, - implementation: InlineContentImplementation + implementation: InlineContentImplementation, ) { return { config, @@ -85,7 +85,7 @@ export function createInternalInlineContentSpec( export function createInlineContentSpecFromTipTapNode< T extends Node, - P extends PropSchema + P extends PropSchema, >(node: T, propSchema: P) { return createInternalInlineContentSpec( { @@ -95,14 +95,14 @@ export function createInlineContentSpecFromTipTapNode< }, { node, - } + }, ); } export function getInlineContentSchemaFromSpecs( - specs: T + specs: T, ) { return Object.fromEntries( - Object.entries(specs).map(([key, value]) => [key, value.config]) + Object.entries(specs).map(([key, value]) => [key, value.config]), ) as InlineContentSchemaFromSpecs; } diff --git a/packages/core/src/schema/inlineContent/types.ts b/packages/core/src/schema/inlineContent/types.ts index 7625bd206b..6ec87055d4 100644 --- a/packages/core/src/schema/inlineContent/types.ts +++ b/packages/core/src/schema/inlineContent/types.ts @@ -44,55 +44,55 @@ export type InlineContentSchemaFromSpecs = { export type CustomInlineContentFromConfig< I extends CustomInlineContentConfig, - S extends StyleSchema + S extends StyleSchema, > = { type: I["type"]; props: Props; content: I["content"] extends "styled" ? StyledText[] : I["content"] extends "plain" - ? string - : I["content"] extends "none" - ? undefined - : never; + ? string + : I["content"] extends "none" + ? undefined + : never; }; export type InlineContentFromConfig< I extends InlineContentConfig, - S extends StyleSchema + S extends StyleSchema, > = I extends "text" ? StyledText : I extends "link" - ? Link - : I extends CustomInlineContentConfig - ? CustomInlineContentFromConfig - : never; + ? Link + : I extends CustomInlineContentConfig + ? CustomInlineContentFromConfig + : never; export type PartialCustomInlineContentFromConfig< I extends CustomInlineContentConfig, - S extends StyleSchema + S extends StyleSchema, > = { type: I["type"]; props?: Props; content?: I["content"] extends "styled" ? StyledText[] | string : I["content"] extends "plain" - ? string - : I["content"] extends "none" - ? undefined - : never; + ? string + : I["content"] extends "none" + ? undefined + : never; }; export type PartialInlineContentFromConfig< I extends InlineContentConfig, - S extends StyleSchema + S extends StyleSchema, > = I extends "text" ? string | StyledText : I extends "link" - ? PartialLink - : I extends CustomInlineContentConfig - ? PartialCustomInlineContentFromConfig - : never; + ? PartialLink + : I extends CustomInlineContentConfig + ? PartialCustomInlineContentFromConfig + : never; export type StyledText = { type: "text"; @@ -112,33 +112,33 @@ export type PartialLink = Omit, "content"> & { export type InlineContent< I extends InlineContentSchema, - T extends StyleSchema + T extends StyleSchema, > = InlineContentFromConfig; type PartialInlineContentElement< I extends InlineContentSchema, - T extends StyleSchema + T extends StyleSchema, > = PartialInlineContentFromConfig; export type PartialInlineContent< I extends InlineContentSchema, - T extends StyleSchema + T extends StyleSchema, > = PartialInlineContentElement[] | string; export function isLinkInlineContent( - content: InlineContent + content: InlineContent, ): content is Link { return content.type === "link"; } export function isPartialLinkInlineContent( - content: PartialInlineContentElement + content: PartialInlineContentElement, ): content is PartialLink { return typeof content !== "string" && content.type === "link"; } export function isStyledTextInlineContent( - content: PartialInlineContentElement + content: PartialInlineContentElement, ): content is StyledText { return typeof content !== "string" && content.type === "text"; } diff --git a/packages/core/src/schema/propTypes.ts b/packages/core/src/schema/propTypes.ts index 42095971ed..76a8df2769 100644 --- a/packages/core/src/schema/propTypes.ts +++ b/packages/core/src/schema/propTypes.ts @@ -39,14 +39,14 @@ export type Props = { ? PSchema[PName]["values"][number] : boolean : PSchema[PName] extends { default: number } | { type: "number" } - ? PSchema[PName]["values"] extends readonly number[] - ? PSchema[PName]["values"][number] - : number - : PSchema[PName] extends { default: string } | { type: "string" } - ? PSchema[PName]["values"] extends readonly string[] - ? PSchema[PName]["values"][number] - : string - : never + ? PSchema[PName]["values"] extends readonly number[] + ? PSchema[PName]["values"][number] + : number + : PSchema[PName] extends { default: string } | { type: "string" } + ? PSchema[PName]["values"] extends readonly string[] + ? PSchema[PName]["values"][number] + : string + : never ) extends infer T ? PSchema[PName] extends { optional: true } ? T | undefined diff --git a/packages/core/src/schema/styles/createSpec.ts b/packages/core/src/schema/styles/createSpec.ts index c2ea71993e..4d224b0b10 100644 --- a/packages/core/src/schema/styles/createSpec.ts +++ b/packages/core/src/schema/styles/createSpec.ts @@ -42,7 +42,7 @@ export function getStyleParseRules(config: StyleConfig): ParseRule[] { export function createStyleSpec( styleConfig: T, - styleImplementation: CustomStyleImplementation + styleImplementation: CustomStyleImplementation, ): StyleSpec { const mark = Mark.create({ name: styleConfig.type, @@ -75,7 +75,7 @@ export function createStyleSpec( renderResult, styleConfig.type, mark.attrs.stringValue, - styleConfig.propSchema + styleConfig.propSchema, ); }, }); diff --git a/packages/core/src/schema/styles/internal.ts b/packages/core/src/schema/styles/internal.ts index 2d9c389e00..d1e9292eeb 100644 --- a/packages/core/src/schema/styles/internal.ts +++ b/packages/core/src/schema/styles/internal.ts @@ -9,7 +9,7 @@ import { } from "./types.js"; export function stylePropsToAttributes( - propSchema: StylePropSchema + propSchema: StylePropSchema, ): Attributes { if (propSchema === "boolean") { return {}; @@ -34,7 +34,7 @@ export function stylePropsToAttributes( // on internal copy & paste. export function addStyleAttributes< SType extends string, - PSchema extends StylePropSchema + PSchema extends StylePropSchema, >( element: { dom: HTMLElement; @@ -42,7 +42,7 @@ export function addStyleAttributes< }, styleType: SType, styleValue: PSchema extends "boolean" ? undefined : string, - propSchema: PSchema + propSchema: PSchema, ): { dom: HTMLElement; contentDOM?: HTMLElement; @@ -66,7 +66,7 @@ export function addStyleAttributes< // config and implementation that conform to the type of Config export function createInternalStyleSpec( config: T, - implementation: StyleImplementation + implementation: StyleImplementation, ) { return { config, @@ -76,7 +76,7 @@ export function createInternalStyleSpec( export function createStyleSpecFromTipTapMark< T extends Mark, - P extends StylePropSchema + P extends StylePropSchema, >(mark: T, propSchema: P) { return createInternalStyleSpec( { @@ -85,12 +85,12 @@ export function createStyleSpecFromTipTapMark< }, { mark, - } + }, ); } export function getStyleSchemaFromSpecs(specs: T) { return Object.fromEntries( - Object.entries(specs).map(([key, value]) => [key, value.config]) + Object.entries(specs).map(([key, value]) => [key, value.config]), ) as StyleSchemaFromSpecs; } diff --git a/packages/core/src/schema/styles/types.ts b/packages/core/src/schema/styles/types.ts index 69caf021c9..b215578b3d 100644 --- a/packages/core/src/schema/styles/types.ts +++ b/packages/core/src/schema/styles/types.ts @@ -37,6 +37,6 @@ export type Styles = { [K in keyof T]?: T[K]["propSchema"] extends "boolean" ? boolean : T[K]["propSchema"] extends "string" - ? string - : never; + ? string + : never; }; diff --git a/packages/core/src/util/EventEmitter.ts b/packages/core/src/util/EventEmitter.ts index caf947b454..e85d5078f4 100644 --- a/packages/core/src/util/EventEmitter.ts +++ b/packages/core/src/util/EventEmitter.ts @@ -3,11 +3,11 @@ type StringKeyOf = Extract; type CallbackType< T extends Record, - EventName extends StringKeyOf + EventName extends StringKeyOf, > = T[EventName] extends any[] ? T[EventName] : [T[EventName]]; type CallbackFunction< T extends Record, - EventName extends StringKeyOf + EventName extends StringKeyOf, > = (...props: CallbackType) => any; export class EventEmitter> { @@ -16,7 +16,7 @@ export class EventEmitter> { public on>( event: EventName, - fn: CallbackFunction + fn: CallbackFunction, ) { if (!this.callbacks[event]) { this.callbacks[event] = []; @@ -40,7 +40,7 @@ export class EventEmitter> { public off>( event: EventName, - fn?: CallbackFunction + fn?: CallbackFunction, ) { const callbacks = this.callbacks[event]; diff --git a/packages/core/src/util/README.md b/packages/core/src/util/README.md index 4fe456fd0e..04b1280d87 100644 --- a/packages/core/src/util/README.md +++ b/packages/core/src/util/README.md @@ -1,3 +1,3 @@ ### @blocknote/core/src/@util -Contains generic utility files with helper functions / classes. \ No newline at end of file +Contains generic utility files with helper functions / classes. diff --git a/packages/core/src/util/combineByGroup.ts b/packages/core/src/util/combineByGroup.ts index c9fd825d68..eab93e2cea 100644 --- a/packages/core/src/util/combineByGroup.ts +++ b/packages/core/src/util/combineByGroup.ts @@ -12,7 +12,7 @@ export function combineByGroup( for (const additionalItems of additionalItemsArray) { for (const additionalItem of additionalItems) { const lastItemWithSameGroup = combinedItems.findLastIndex( - (item) => item.group === additionalItem.group + (item) => item.group === additionalItem.group, ); if (lastItemWithSameGroup === -1) { combinedItems.push(additionalItem as T); diff --git a/packages/core/src/util/table.ts b/packages/core/src/util/table.ts index e06aca7b1e..f7ecd84910 100644 --- a/packages/core/src/util/table.ts +++ b/packages/core/src/util/table.ts @@ -13,47 +13,50 @@ import { PartialTableCell, TableCell } from "../schema/blocks/types.js"; */ export function mapTableCell< T extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - content: PartialInlineContent | PartialTableCell | TableCell + content: + | PartialInlineContent + | PartialTableCell + | TableCell, ): TableCell { return isTableCell(content) ? { ...content } : isPartialTableCell(content) - ? { - type: "tableCell", - content: ([] as InlineContent[]).concat(content.content as any), - props: { - backgroundColor: content.props?.backgroundColor ?? "default", - textColor: content.props?.textColor ?? "default", - textAlignment: content.props?.textAlignment ?? "left", - colspan: content.props?.colspan ?? 1, - rowspan: content.props?.rowspan ?? 1, - }, - } - : { - type: "tableCell", - content: ([] as InlineContent[]).concat(content as any), - props: { - backgroundColor: "default", - textColor: "default", - textAlignment: "left", - colspan: 1, - rowspan: 1, - }, - }; + ? { + type: "tableCell", + content: ([] as InlineContent[]).concat(content.content as any), + props: { + backgroundColor: content.props?.backgroundColor ?? "default", + textColor: content.props?.textColor ?? "default", + textAlignment: content.props?.textAlignment ?? "left", + colspan: content.props?.colspan ?? 1, + rowspan: content.props?.rowspan ?? 1, + }, + } + : { + type: "tableCell", + content: ([] as InlineContent[]).concat(content as any), + props: { + backgroundColor: "default", + textColor: "default", + textAlignment: "left", + colspan: 1, + rowspan: 1, + }, + }; } export function isPartialTableCell< T extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( content: | TableCell | PartialInlineContent | PartialTableCell | undefined - | null + | null, ): content is PartialTableCell { return ( content !== undefined && @@ -66,14 +69,14 @@ export function isPartialTableCell< export function isTableCell< T extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( content: | TableCell | PartialInlineContent | PartialTableCell | undefined - | null + | null, ): content is TableCell { return ( isPartialTableCell(content) && @@ -86,7 +89,7 @@ export function getColspan( cell: | TableCell | PartialTableCell - | PartialInlineContent + | PartialInlineContent, ): number { if (isTableCell(cell)) { return cell.props.colspan ?? 1; @@ -98,7 +101,7 @@ export function getRowspan( cell: | TableCell | PartialTableCell - | PartialInlineContent + | PartialInlineContent, ): number { if (isTableCell(cell)) { return cell.props.rowspan ?? 1; diff --git a/packages/dev-scripts/examples/genDocs.ts b/packages/dev-scripts/examples/genDocs.ts index 4330405a73..48d8e3e2b8 100644 --- a/packages/dev-scripts/examples/genDocs.ts +++ b/packages/dev-scripts/examples/genDocs.ts @@ -21,7 +21,7 @@ const getLanguageFromFileName = (fileName: string) => fileName.split(".").pop(); /******* templates + generate functions *******/ const templateExampleBlock = ( project: Project, - files: Files + files: Files, ) => `import { ExampleBlock } from "@/components/example/ExampleBlock"; import { Tabs } from "nextra/components"; @@ -29,7 +29,7 @@ import { Tabs } from "nextra/components"; project.pathFromRoot }" isProExample={props.isProExample}> fileName.slice(1)) + Object.keys(files).map((fileName) => fileName.slice(1)), )}}> ${Object.entries(files) .map( @@ -40,7 +40,7 @@ import { Tabs } from "nextra/components"; ${file.code} \`\`\`
- ` + `, ) .join("")} @@ -48,7 +48,7 @@ ${file.code} const COMPONENT_DIR = path.resolve( dir, - "../../../docs/components/example/generated/" + "../../../docs/components/example/generated/", ); const EXAMPLES_PAGES_DIR = path.resolve(dir, "../../../docs/pages/examples/"); @@ -62,7 +62,7 @@ async function generateCodeForExample(project: Project) { const files = getProjectFiles(project); const filtered = Object.fromEntries( - Object.entries(files).filter(([filename, file]) => !file.hidden) + Object.entries(files).filter(([filename, file]) => !file.hidden), ); const code = templateExampleBlock(project, filtered); @@ -74,7 +74,7 @@ async function generateCodeForExample(project: Project) { const templatePageForExample = ( project: Project, - readme: string + readme: string, ) => `import { Example } from "@/components/example"; ${readme} @@ -116,7 +116,7 @@ async function generateMetaForExampleGroup(group: { { title: project.config.shortTitle || project.title, }, - ]) + ]), ); const code = JSON.stringify(meta, undefined, 2); @@ -125,7 +125,7 @@ async function generateMetaForExampleGroup(group: { } const templateExampleComponents = ( - projects: Project[] + projects: Project[], ) => `// generated by dev-scripts/examples/genDocs.ts import dynamic from "next/dynamic"; diff --git a/packages/dev-scripts/examples/template-react/index.html.template.tsx b/packages/dev-scripts/examples/template-react/index.html.template.tsx index 63992318ee..e44967c90e 100644 --- a/packages/dev-scripts/examples/template-react/index.html.template.tsx +++ b/packages/dev-scripts/examples/template-react/index.html.template.tsx @@ -7,7 +7,8 @@ const template = (project: Project) => ( + }} + > {project.title} diff --git a/packages/dev-scripts/examples/template-react/main.tsx.template.tsx b/packages/dev-scripts/examples/template-react/main.tsx.template.tsx index 7b7c4d0507..957a01a8c9 100644 --- a/packages/dev-scripts/examples/template-react/main.tsx.template.tsx +++ b/packages/dev-scripts/examples/template-react/main.tsx.template.tsx @@ -1,7 +1,7 @@ import type { Project } from "../util"; const template = ( - project: Project + project: Project, ) => `// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY import React from "react"; import { createRoot } from "react-dom/client"; diff --git a/packages/dev-scripts/examples/template-react/package.json.template.tsx b/packages/dev-scripts/examples/template-react/package.json.template.tsx index cd85f8b850..bce6790cd2 100644 --- a/packages/dev-scripts/examples/template-react/package.json.template.tsx +++ b/packages/dev-scripts/examples/template-react/package.json.template.tsx @@ -9,7 +9,7 @@ const template = (project: Project) => ({ start: "vite", dev: "vite", "build:prod": "tsc && vite build", - preview: "vite preview" + preview: "vite preview", }, dependencies: { "@blocknote/core": "latest", @@ -27,7 +27,7 @@ const template = (project: Project) => ({ "@vitejs/plugin-react": "^4.3.1", vite: "^5.3.4", ...(project.config?.devDependencies || {}), - } + }, }); export default template; diff --git a/packages/dev-scripts/examples/template-react/vite.config.ts.template.tsx b/packages/dev-scripts/examples/template-react/vite.config.ts.template.tsx index 5def193823..809fa7159c 100644 --- a/packages/dev-scripts/examples/template-react/vite.config.ts.template.tsx +++ b/packages/dev-scripts/examples/template-react/vite.config.ts.template.tsx @@ -2,7 +2,7 @@ import type { Project } from "../util"; // TODO: the ../../ paths are broken const template = ( - project: Project + project: Project, ) => `// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY import react from "@vitejs/plugin-react"; import * as fs from "fs"; diff --git a/packages/dev-scripts/examples/util.ts b/packages/dev-scripts/examples/util.ts index 5326c0e801..d5bb43fccf 100644 --- a/packages/dev-scripts/examples/util.ts +++ b/packages/dev-scripts/examples/util.ts @@ -71,7 +71,7 @@ export function groupProjects(projects: Project[]) { projects, }, ]; - }) + }), ); } @@ -80,8 +80,8 @@ export function addTitleToGroups(grouped: ReturnType) { const meta = JSON.parse( fs.readFileSync( path.resolve(dir, "../../../docs/pages/examples/_meta.json"), - "utf-8" - ) + "utf-8", + ), ); const groupsWithTitles = Object.fromEntries( @@ -89,7 +89,7 @@ export function addTitleToGroups(grouped: ReturnType) { const title = meta[key]; if (!title) { throw new Error( - `Missing group title for ${key}, add to examples/_meta.json?` + `Missing group title for ${key}, add to examples/_meta.json?`, ); } return [ @@ -99,7 +99,7 @@ export function addTitleToGroups(grouped: ReturnType) { title, }, ]; - }) + }), ); return groupsWithTitles; } @@ -132,7 +132,7 @@ export function getProjectFiles(project: Project): Files { filename.endsWith("main.tsx"), }, ]; - }) + }), ); return passedFiles; } @@ -184,7 +184,7 @@ export function getExampleProjects(): Project[] { const group = { pathFromRoot: replacePathSepToSlash( - path.relative(path.resolve("../../"), path.join(directory, "..")) + path.relative(path.resolve("../../"), path.join(directory, "..")), ), // remove optional 01- prefix slug: groupDir.replace(/^\d{2}-/, ""), @@ -195,7 +195,7 @@ export function getExampleProjects(): Project[] { projectSlug, fullSlug: `${group.slug}/${projectSlug}`, pathFromRoot: replacePathSepToSlash( - path.relative(path.resolve("../../"), directory) + path.relative(path.resolve("../../"), directory), ), config, title, diff --git a/packages/mantine/src/BlockNoteTheme.ts b/packages/mantine/src/BlockNoteTheme.ts index 948ec649b7..503c4729cd 100644 --- a/packages/mantine/src/BlockNoteTheme.ts +++ b/packages/mantine/src/BlockNoteTheme.ts @@ -37,7 +37,7 @@ type NestedObject = { [key: string]: number | string | NestedObject }; const cssVariablesHelper = ( theme: Theme, editorDOM: HTMLElement, - unset = false + unset = false, ) => { const result: string[] = []; @@ -72,7 +72,7 @@ const cssVariablesHelper = ( export const applyBlockNoteCSSVariablesFromTheme = ( theme: Theme, - editorDOM: HTMLElement + editorDOM: HTMLElement, ) => cssVariablesHelper(theme, editorDOM); // We don't need a theme to remove the CSS variables, but having access to a diff --git a/packages/mantine/src/BlockNoteView.tsx b/packages/mantine/src/BlockNoteView.tsx index 5bb536d0a7..4bf8f5ffb2 100644 --- a/packages/mantine/src/BlockNoteView.tsx +++ b/packages/mantine/src/BlockNoteView.tsx @@ -29,7 +29,7 @@ const mantineTheme = { export const BlockNoteView = < BSchema extends BlockSchema, ISchema extends InlineContentSchema, - SSchema extends StyleSchema + SSchema extends StyleSchema, >( props: Omit, "theme"> & { theme?: @@ -40,7 +40,7 @@ export const BlockNoteView = < light: Theme; dark: Theme; }; - } + }, ) => { const { className, theme, ...rest } = props; @@ -62,7 +62,7 @@ export const BlockNoteView = < if ("light" in theme && "dark" in theme) { applyBlockNoteCSSVariablesFromTheme( theme[defaultColorScheme === "dark" ? "dark" : "light"], - node + node, ); return; } @@ -71,15 +71,15 @@ export const BlockNoteView = < return; } }, - [defaultColorScheme, theme] + [defaultColorScheme, theme], ); const finalTheme = typeof theme === "string" ? theme : defaultColorScheme !== "no-preference" - ? defaultColorScheme - : "light"; + ? defaultColorScheme + : "light"; return ( @@ -92,7 +92,8 @@ export const BlockNoteView = < // element needs to already be rendered, so we can't set it to the // editor container element. Instead, we set it to `undefined` and set it // manually in `BlockNoteViewRaw`. - getRootElement={() => undefined}> + getRootElement={() => undefined} + > + ref={ref} + > {icon} {text} @@ -65,7 +66,8 @@ export const Badge = forwardRef< mainTooltip={mainTooltip} secondaryTooltip={secondaryTooltip} /> - }> + } + > {badge} ); diff --git a/packages/mantine/src/comments/Card.tsx b/packages/mantine/src/comments/Card.tsx index 7c5d1b3341..544aed1135 100644 --- a/packages/mantine/src/comments/Card.tsx +++ b/packages/mantine/src/comments/Card.tsx @@ -41,7 +41,8 @@ export const Card = forwardRef< onFocus={onFocus} onBlur={onBlur} tabIndex={tabIndex} - ref={mergeRefs([ref, scrollRef])}> + ref={mergeRefs([ref, scrollRef])} + > {headerText && ( {headerText} )} diff --git a/packages/mantine/src/comments/Comment.tsx b/packages/mantine/src/comments/Comment.tsx index 3f0708ca16..2d337ec952 100644 --- a/packages/mantine/src/comments/Comment.tsx +++ b/packages/mantine/src/comments/Comment.tsx @@ -84,7 +84,8 @@ export const Comment = forwardRef< right: 0, top: 0, zIndex: 10, - }}> + }} + > {actions} ) : null} diff --git a/packages/mantine/src/comments/Editor.tsx b/packages/mantine/src/comments/Editor.tsx index a288b25398..14e79851e6 100644 --- a/packages/mantine/src/comments/Editor.tsx +++ b/packages/mantine/src/comments/Editor.tsx @@ -30,7 +30,8 @@ export const Editor = forwardRef< editable={editable} ref={ref} onFocus={onFocus} - onBlur={onBlur}> + onBlur={onBlur} + > @@ -40,7 +41,7 @@ export const Editor = forwardRef< const CustomFormattingToolbar = () => { const items = getFormattingToolbarItems([]).filter( - (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton" + (el) => el.key !== "nestBlockButton" && el.key !== "unnestBlockButton", ); return ( {items} diff --git a/packages/mantine/src/mantineStyles.css b/packages/mantine/src/mantineStyles.css index c3a8420cf0..a976a47c1e 100644 --- a/packages/mantine/src/mantineStyles.css +++ b/packages/mantine/src/mantineStyles.css @@ -89,50 +89,55 @@ (src: https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/global.css) but with styles set on `body` and `html` instead set on `bn-container`, as well as other minor changes. */ -.bn-mantine *, .bn-mantine :after, .bn-mantine :before { - box-sizing: border-box +.bn-mantine *, +.bn-mantine :after, +.bn-mantine :before { + box-sizing: border-box; } .bn-mantine button, .bn-mantine select { - text-transform: none + text-transform: none; } @media screen and (max-device-width: 500px) { - .bn-mantine { - -webkit-text-size-adjust: 100% - } + .bn-mantine { + -webkit-text-size-adjust: 100%; + } } @media (prefers-reduced-motion: reduce) { - .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] { - animation: none; - transition: none - } + .bn-mantine [data-respect-reduced-motion] [data-reduce-motion] { + animation: none; + transition: none; + } } -.bn-mantine [data-mantine-color-scheme=dark] .mantine-dark-hidden, .bn-mantine [data-mantine-color-scheme=light] .mantine-light-hidden { - display: none +.bn-mantine [data-mantine-color-scheme="dark"] .mantine-dark-hidden, +.bn-mantine [data-mantine-color-scheme="light"] .mantine-light-hidden { + display: none; } .bn-mantine .mantine-focus-auto:focus-visible { - outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled); - outline-offset: calc(.125rem * var(--mantine-scale)) + outline: calc(0.125rem * var(--mantine-scale)) solid + var(--mantine-primary-color-filled); + outline-offset: calc(0.125rem * var(--mantine-scale)); } .bn-mantine .mantine-focus-always:focus { - outline: calc(.125rem * var(--mantine-scale)) solid var(--mantine-primary-color-filled); - outline-offset: calc(.125rem * var(--mantine-scale)) + outline: calc(0.125rem * var(--mantine-scale)) solid + var(--mantine-primary-color-filled); + outline-offset: calc(0.125rem * var(--mantine-scale)); } .bn-mantine .mantine-focus-never:focus { - outline: none + outline: none; } .bn-mantine .mantine-active:active { - transform: translateY(calc(.0625rem * var(--mantine-scale))) + transform: translateY(calc(0.0625rem * var(--mantine-scale))); } -.bn-mantine[dir=rtl] .mantine-rotate-rtl { - transform: rotate(180deg) -} \ No newline at end of file +.bn-mantine[dir="rtl"] .mantine-rotate-rtl { + transform: rotate(180deg); +} diff --git a/packages/mantine/src/menu/Button.tsx b/packages/mantine/src/menu/Button.tsx index 9c431557b2..681103053e 100644 --- a/packages/mantine/src/menu/Button.tsx +++ b/packages/mantine/src/menu/Button.tsx @@ -38,7 +38,8 @@ export const Button = forwardRef< onDragStart={onDragStart} draggable={draggable} aria-label={label} - {...rest}> + {...rest} + > {icon} ); @@ -53,7 +54,8 @@ export const Button = forwardRef< onDragStart={onDragStart} draggable={draggable} aria-label={label} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/menu/Menu.tsx b/packages/mantine/src/menu/Menu.tsx index 0ac54ff949..eff683262d 100644 --- a/packages/mantine/src/menu/Menu.tsx +++ b/packages/mantine/src/menu/Menu.tsx @@ -110,12 +110,14 @@ const SubMenu = forwardRef< value={{ onMenuMouseOver: mouseOver, onMenuMouseLeave: mouseLeave, - }}> + }} + > + onMouseLeave={mouseLeave} + > + position={position} + > {children} @@ -148,7 +151,8 @@ export const Menu = (props: ComponentProps["Generic"]["Menu"]["Root"]) => { withinPortal={false} middlewares={{ flip: true, shift: true, inline: false, size: true }} onChange={onOpenChange} - position={position}> + position={position} + > {children} ); @@ -173,7 +177,8 @@ export const MenuItem = forwardRef< e.stopPropagation(); }} ref={ref} - {...rest}> + {...rest} + > {children}
@@ -193,14 +198,15 @@ export const MenuItem = forwardRef< ) : null } onClick={onClick} - {...rest}> + {...rest} + > {children} ); }); export const MenuTrigger = ( - props: ComponentProps["Generic"]["Menu"]["Trigger"] + props: ComponentProps["Generic"]["Menu"]["Trigger"], ) => { const { children, @@ -233,7 +239,8 @@ export const MenuDropdown = forwardRef< className={className} ref={ref} onMouseOver={ctx?.onMenuMouseOver} - onMouseLeave={ctx?.onMenuMouseLeave}> + onMouseLeave={ctx?.onMenuMouseLeave} + > {children} ); diff --git a/packages/mantine/src/panel/Panel.tsx b/packages/mantine/src/panel/Panel.tsx index c3a4107794..58158295a4 100644 --- a/packages/mantine/src/panel/Panel.tsx +++ b/packages/mantine/src/panel/Panel.tsx @@ -29,7 +29,8 @@ export const Panel = forwardRef< + onChange={setOpenTab as any} + > {loading && } @@ -37,7 +38,8 @@ export const Panel = forwardRef< + key={tab.name} + > {tab.name} ))} diff --git a/packages/mantine/src/panel/PanelButton.tsx b/packages/mantine/src/panel/PanelButton.tsx index ed58e83ed0..73336a5375 100644 --- a/packages/mantine/src/panel/PanelButton.tsx +++ b/packages/mantine/src/panel/PanelButton.tsx @@ -19,7 +19,8 @@ export const PanelButton = forwardRef< className={className} ref={ref} onClick={onClick} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/popover/Popover.tsx b/packages/mantine/src/popover/Popover.tsx index cd020ca93b..d6c1f96c68 100644 --- a/packages/mantine/src/popover/Popover.tsx +++ b/packages/mantine/src/popover/Popover.tsx @@ -9,7 +9,7 @@ import { ComponentProps } from "@blocknote/react"; import { forwardRef } from "react"; export const Popover = ( - props: ComponentProps["Generic"]["Popover"]["Root"] + props: ComponentProps["Generic"]["Popover"]["Root"], ) => { const { opened, position, children, ...rest } = props; @@ -23,7 +23,7 @@ export const Popover = ( }; export const PopoverTrigger = ( - props: ComponentProps["Generic"]["Popover"]["Trigger"] + props: ComponentProps["Generic"]["Popover"]["Trigger"], ) => { const { children, ...rest } = props; diff --git a/packages/mantine/src/sideMenu/SideMenu.tsx b/packages/mantine/src/sideMenu/SideMenu.tsx index 1fa8c2d831..524c575dcd 100644 --- a/packages/mantine/src/sideMenu/SideMenu.tsx +++ b/packages/mantine/src/sideMenu/SideMenu.tsx @@ -18,7 +18,8 @@ export const SideMenu = forwardRef< gap={0} className={className} ref={ref} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/sideMenu/SideMenuButton.tsx b/packages/mantine/src/sideMenu/SideMenuButton.tsx index a800cd1c7f..75f90fc486 100644 --- a/packages/mantine/src/sideMenu/SideMenuButton.tsx +++ b/packages/mantine/src/sideMenu/SideMenuButton.tsx @@ -38,7 +38,8 @@ export const SideMenuButton = forwardRef< onDragStart={onDragStart} draggable={draggable} aria-label={label} - {...rest}> + {...rest} + > {icon} ); @@ -53,7 +54,8 @@ export const SideMenuButton = forwardRef< onDragStart={onDragStart} draggable={draggable} aria-label={label} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css index 7077fd87b4..6db6a31d4e 100644 --- a/packages/mantine/src/style.css +++ b/packages/mantine/src/style.css @@ -256,7 +256,8 @@ max-height: 100%; position: relative; box-shadow: var(--mantine-shadow-md); - border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2); + border: calc(0.0625rem * var(--mantine-scale)) solid + var(--mantine-color-gray-2); border-radius: var(--mantine-radius-default); padding: 4px; } @@ -576,8 +577,8 @@ } .bn-mt-sub-menu-item -> .mantine-Menu-itemLabel -> div:not(.mantine-Menu-dropdown) { + > .mantine-Menu-itemLabel + > div:not(.mantine-Menu-dropdown) { align-items: center; display: flex; justify-content: space-between; @@ -714,18 +715,18 @@ } .bn-mantine -.bn-badge -.mantine-Chip-label -> span:not(.mantine-Chip-iconWrapper) { + .bn-badge + .mantine-Chip-label + > span:not(.mantine-Chip-iconWrapper) { display: inline-flex; gap: 4px; } .bn-mantine -.bn-badge -.mantine-Chip-label -> span:not(.mantine-Chip-iconWrapper) -> span { + .bn-badge + .mantine-Chip-label + > span:not(.mantine-Chip-iconWrapper) + > span { align-items: center; display: inline-flex; justify-content: center; diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx index a22d71f8f2..b157117172 100644 --- a/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx +++ b/packages/mantine/src/suggestionMenu/SuggestionMenu.tsx @@ -18,7 +18,8 @@ export const SuggestionMenu = forwardRef< className={className} ref={ref} id={id} - role="listbox"> + role="listbox" + > {children} ); diff --git a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx index c7db27e386..4b776d8ac9 100644 --- a/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx +++ b/packages/mantine/src/suggestionMenu/SuggestionMenuItem.tsx @@ -27,7 +27,7 @@ export const SuggestionMenuItem = forwardRef< const overflow = elementOverflow( itemRef.current, - document.querySelector(".bn-suggestion-menu")! + document.querySelector(".bn-suggestion-menu")!, ); if (overflow === "top") { @@ -45,11 +45,13 @@ export const SuggestionMenuItem = forwardRef< id={id} role="option" onClick={onClick} - aria-selected={isSelected || undefined}> + aria-selected={isSelected || undefined} + > {item.icon && ( + data-position="left" + > {item.icon} )} @@ -64,7 +66,8 @@ export const SuggestionMenuItem = forwardRef< {item.badge && ( + className="bn-mt-suggestion-menu-item-section" + > {item.badge} )} diff --git a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index b61454efe3..5bfa4e0141 100644 --- a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,8 @@ export const GridSuggestionMenu = forwardRef< style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` } as any} ref={ref} id={id} - role="grid"> + role="grid" + > {children}
); diff --git a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx index fafb9fa1d0..43ec88511b 100644 --- a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx +++ b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuEmptyItem.tsx @@ -16,7 +16,8 @@ export const GridSuggestionMenuEmptyItem = forwardRef< + ref={ref} + > {children} diff --git a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx index a03edfd6ba..da86deb932 100644 --- a/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx +++ b/packages/mantine/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenuItem.tsx @@ -21,7 +21,7 @@ export const GridSuggestionMenuItem = forwardRef< const overflow = elementOverflow( itemRef.current, - document.querySelector(".bn-grid-suggestion-menu")! + document.querySelector(".bn-grid-suggestion-menu")!, ); if (overflow === "top") { @@ -38,7 +38,8 @@ export const GridSuggestionMenuItem = forwardRef< id={id} role="option" onClick={onClick} - aria-selected={isSelected || undefined}> + aria-selected={isSelected || undefined} + > {item.icon}
); diff --git a/packages/mantine/src/tableHandle/ExtendButton.tsx b/packages/mantine/src/tableHandle/ExtendButton.tsx index a145106ae6..5946aaa270 100644 --- a/packages/mantine/src/tableHandle/ExtendButton.tsx +++ b/packages/mantine/src/tableHandle/ExtendButton.tsx @@ -20,7 +20,8 @@ export const ExtendButton = forwardRef< ref={ref} onMouseDown={onMouseDown} onClick={onClick} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/tableHandle/TableHandle.tsx b/packages/mantine/src/tableHandle/TableHandle.tsx index 57096d8df2..e271bda154 100644 --- a/packages/mantine/src/tableHandle/TableHandle.tsx +++ b/packages/mantine/src/tableHandle/TableHandle.tsx @@ -32,7 +32,8 @@ export const TableHandle = forwardRef< onDragStart={onDragStart} onDragEnd={onDragEnd} style={style} - {...rest}> + {...rest} + > {children} ); diff --git a/packages/mantine/src/toolbar/Toolbar.tsx b/packages/mantine/src/toolbar/Toolbar.tsx index 60e12a6dbe..66a4c032a3 100644 --- a/packages/mantine/src/toolbar/Toolbar.tsx +++ b/packages/mantine/src/toolbar/Toolbar.tsx @@ -36,9 +36,10 @@ export const Toolbar = forwardRef( // TODO: aria-label onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} - gap={variant === "action-toolbar" ? 2 : undefined}> + gap={variant === "action-toolbar" ? 2 : undefined} + > {children} ); - } + }, ); diff --git a/packages/mantine/src/toolbar/ToolbarButton.tsx b/packages/mantine/src/toolbar/ToolbarButton.tsx index 5f88256796..5c1475b2cc 100644 --- a/packages/mantine/src/toolbar/ToolbarButton.tsx +++ b/packages/mantine/src/toolbar/ToolbarButton.tsx @@ -83,7 +83,8 @@ export const ToolbarButton = forwardRef( size={variant === "compact" ? "compact-xs" : "xs"} disabled={isDisabled || false} ref={ref} - {...rest}> + {...rest} + > {children} ) : ( @@ -118,7 +119,8 @@ export const ToolbarButton = forwardRef( size={variant === "compact" ? 20 : 30} disabled={isDisabled || false} ref={ref} - {...rest}> + {...rest} + > {icon} ); @@ -136,9 +138,10 @@ export const ToolbarButton = forwardRef( mainTooltip={mainTooltip} secondaryTooltip={secondaryTooltip} /> - }> + } + > {button} ); - } + }, ); diff --git a/packages/mantine/src/toolbar/ToolbarSelect.tsx b/packages/mantine/src/toolbar/ToolbarSelect.tsx index 32638ca5ae..21cee2a1fd 100644 --- a/packages/mantine/src/toolbar/ToolbarSelect.tsx +++ b/packages/mantine/src/toolbar/ToolbarSelect.tsx @@ -31,7 +31,8 @@ export const ToolbarSelect = forwardRef< exitDuration: 0, }} disabled={isDisabled} - middlewares={{ flip: true, shift: true, inline: false, size: true }}> + middlewares={{ flip: true, shift: true, inline: false, size: true }} + > } size={"xs"} variant={"subtle"} - disabled={isDisabled}> + disabled={isDisabled} + > {selectedItem.text} @@ -63,7 +65,8 @@ export const ToolbarSelect = forwardRef<
) } - disabled={item.isDisabled}> + disabled={item.isDisabled} + > {item.text} ))} diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx index 9b19781714..b602aaa971 100644 --- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx +++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx @@ -15,7 +15,7 @@ export const AudioPreview = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { const resolved = useResolveUrl(props.block.props.url!); @@ -38,7 +38,7 @@ export const AudioToExternalHTML = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { if (!props.block.props.url) { return

Add audio

; @@ -68,13 +68,14 @@ export const AudioToExternalHTML = ( }; export const AudioBlock = ( - props: ReactCustomBlockRenderProps + props: ReactCustomBlockRenderProps, ) => { return ( }> + buttonIcon={} + > ); diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx index 0b42f2b13f..78bac8230b 100644 --- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx +++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx @@ -11,7 +11,7 @@ export const FileToExternalHTML = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { if (!props.block.props.url) { return

Add file

; @@ -35,7 +35,7 @@ export const FileToExternalHTML = ( }; export const FileBlock = ( - props: ReactCustomBlockRenderProps + props: ReactCustomBlockRenderProps, ) => { return ; }; diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx index 56b14c3739..cdc1a3bf17 100644 --- a/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx +++ b/packages/react/src/blocks/FileBlockContent/helpers/render/AddFileButton.tsx @@ -12,7 +12,7 @@ export const AddFileButton = ( > & { buttonText?: string; buttonIcon?: ReactNode; - } + }, ) => { const dict = useDictionary(); @@ -21,14 +21,14 @@ export const AddFileButton = ( (event: React.MouseEvent) => { event.preventDefault(); }, - [] + [], ); // Opens the file toolbar. const addFileButtonClickHandler = useCallback(() => { props.editor.transact((tr) => tr.setMeta(props.editor.filePanel!.plugin, { block: props.block, - }) + }), ); }, [props.block, props.editor]); @@ -36,7 +36,8 @@ export const AddFileButton = (
+ onClick={addFileButtonClickHandler} + >
{props.buttonIcon || }
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx index 6593c9b6db..dc47c288b4 100644 --- a/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx +++ b/packages/react/src/blocks/FileBlockContent/helpers/render/FileBlockWrapper.tsx @@ -20,7 +20,7 @@ export const FileBlockWrapper = ( onMouseEnter?: () => void; onMouseLeave?: () => void; style?: CSSProperties; - } + }, ) => { const showLoader = useUploadLoading(props.block.id); @@ -29,7 +29,8 @@ export const FileBlockWrapper = ( className={"bn-file-block-content-wrapper"} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} - style={props.style}> + style={props.style} + > {showLoader ? ( // Show loader while a file is being uploaded.
Loading...
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx index 145e91d8eb..0c5ad37d90 100644 --- a/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx +++ b/packages/react/src/blocks/FileBlockContent/helpers/render/FileNameWithIcon.tsx @@ -7,12 +7,13 @@ export const FileNameWithIcon = ( props: Omit< ReactCustomBlockRenderProps, "editor" | "contentRef" - > + >, ) => (
+ draggable={false} + >
diff --git a/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx index 73992798a0..c5631dac5f 100644 --- a/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx +++ b/packages/react/src/blocks/FileBlockContent/helpers/render/ResizableFileBlockWrapper.tsx @@ -13,7 +13,7 @@ export const ResizableFileBlockWrapper = ( buttonText: string; buttonIcon: ReactNode; children: ReactNode; - } + }, ) => { // Temporary parameters set when the user begins resizing the element, used to // calculate the new width of the element. @@ -27,7 +27,7 @@ export const ResizableFileBlockWrapper = ( >(undefined); const [width, setWidth] = useState( - props.block.props.previewWidth + props.block.props.previewWidth, ); const [hovered, setHovered] = useState(false); @@ -72,8 +72,8 @@ export const ResizableFileBlockWrapper = ( Math.min( Math.max(newWidth, minWidth), props.editor.domElement?.firstElementChild?.clientWidth || - Number.MAX_VALUE - ) + Number.MAX_VALUE, + ), ); }; // Stops mouse movements from resizing the child and updates the block's @@ -124,7 +124,7 @@ export const ResizableFileBlockWrapper = ( initialClientX: event.clientX, }); }, - [] + [], ); const rightResizeHandleMouseDownHandler = useCallback( (event: React.MouseEvent) => { @@ -136,7 +136,7 @@ export const ResizableFileBlockWrapper = ( initialClientX: event.clientX, }); }, - [] + [], ); const showLoader = useUploadLoading(props.block.id); @@ -152,7 +152,8 @@ export const ResizableFileBlockWrapper = ( width: width ? `${width}px` : "fit-content", } : undefined - }> + } + >
{props.children} {(hovered || resizeParams) && ( diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx index e459477e07..3e7d6e7a67 100644 --- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx +++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx @@ -14,7 +14,7 @@ export const ImagePreview = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { const resolved = useResolveUrl(props.block.props.url!); @@ -37,7 +37,7 @@ export const ImageToExternalHTML = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { if (!props.block.props.url) { return

Add image

; @@ -73,13 +73,14 @@ export const ImageToExternalHTML = ( }; export const ImageBlock = ( - props: ReactCustomBlockRenderProps + props: ReactCustomBlockRenderProps, ) => { return ( }> + buttonIcon={} + > ); diff --git a/packages/react/src/blocks/PageBreakBlockContent/getPageBreakReactSlashMenuItems.tsx b/packages/react/src/blocks/PageBreakBlockContent/getPageBreakReactSlashMenuItems.tsx index 00fc1c274a..0629139de4 100644 --- a/packages/react/src/blocks/PageBreakBlockContent/getPageBreakReactSlashMenuItems.tsx +++ b/packages/react/src/blocks/PageBreakBlockContent/getPageBreakReactSlashMenuItems.tsx @@ -15,9 +15,9 @@ const icons = { export function getPageBreakReactSlashMenuItems< BSchema extends BlockSchema, I extends InlineContentSchema, - S extends StyleSchema + S extends StyleSchema, >( - editor: BlockNoteEditor + editor: BlockNoteEditor, ): (Omit & { key: "page_break" })[] { return getPageBreakSlashMenuItems(editor).map((item) => { const Icon = icons[item.key]; diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx index aa84c52e8d..8ad81f11e6 100644 --- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx +++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx @@ -14,7 +14,7 @@ export const VideoPreview = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { const resolved = useResolveUrl(props.block.props.url!); @@ -37,7 +37,7 @@ export const VideoToExternalHTML = ( props: Omit< ReactCustomBlockRenderProps, "contentRef" - > + >, ) => { if (!props.block.props.url) { return

Add video

; @@ -67,13 +67,14 @@ export const VideoToExternalHTML = ( }; export const VideoBlock = ( - props: ReactCustomBlockRenderProps + props: ReactCustomBlockRenderProps, ) => { return ( }> + buttonIcon={} + > ); diff --git a/packages/react/src/components/ColorPicker/ColorIcon.tsx b/packages/react/src/components/ColorPicker/ColorIcon.tsx index 05eaaf7616..e53826548f 100644 --- a/packages/react/src/components/ColorPicker/ColorIcon.tsx +++ b/packages/react/src/components/ColorPicker/ColorIcon.tsx @@ -5,7 +5,7 @@ export const ColorIcon = ( textColor: string | undefined; backgroundColor: string | undefined; size: number | undefined; - }> + }>, ) => { const textColor = props.textColor || "default"; const backgroundColor = props.backgroundColor || "default"; @@ -20,8 +20,8 @@ export const ColorIcon = ( lineHeight: size.toString() + "px", textAlign: "center", width: size.toString() + "px", - } as const), - [size] + }) as const, + [size], ); return ( @@ -29,7 +29,8 @@ export const ColorIcon = ( className={"bn-color-icon"} data-background-color={backgroundColor} data-text-color={textColor} - style={style}> + style={style} + > A
); diff --git a/packages/react/src/components/ColorPicker/ColorPicker.tsx b/packages/react/src/components/ColorPicker/ColorPicker.tsx index 320188a450..8344c76e48 100644 --- a/packages/react/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/react/src/components/ColorPicker/ColorPicker.tsx @@ -44,7 +44,8 @@ export const ColorPicker = (props: { data-test={"text-color-" + color} icon={} checked={props.text!.color === color} - key={"text-color-" + color}> + key={"text-color-" + color} + > {dict.color_picker.colors[color]} ))} @@ -66,7 +67,8 @@ export const ColorPicker = (props: { data-test={"background-color-" + color} icon={} key={"background-color-" + color} - checked={props.background!.color === color}> + checked={props.background!.color === color} + > {dict.color_picker.colors[color]} ))} diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx index 571ae72d47..173fcaf5b8 100644 --- a/packages/react/src/components/Comments/Comment.tsx +++ b/packages/react/src/components/Comments/Comment.tsx @@ -58,7 +58,7 @@ export const Comment = ({ schema, sideMenuDetection: "editor", }, - [comment.body] + [comment.body], ); const Components = useComponentsContext()!; @@ -94,7 +94,7 @@ export const Comment = ({ setEditing(false); }, - [comment, thread.id, commentEditor, threadStore] + [comment, thread.id, commentEditor, threadStore], ); const onDelete = useCallback(async () => { @@ -120,7 +120,7 @@ export const Comment = ({ }); } }, - [threadStore, comment, thread.id] + [threadStore, comment, thread.id], ); const onResolve = useCallback(async () => { @@ -156,16 +156,19 @@ export const Comment = ({ actions = ( + variant={"action-toolbar"} + > {canAddReaction && ( onReactionSelect(emoji.native) - }> + } + > + variant="compact" + > @@ -176,7 +179,8 @@ export const Comment = ({ key={"reopen"} mainTooltip="Re-open" variant="compact" - onClick={onReopen}> + onClick={onReopen} + > ) : ( @@ -184,7 +188,8 @@ export const Comment = ({ key={"resolve"} mainTooltip={dict.comments.actions.resolve} variant="compact" - onClick={onResolve}> + onClick={onResolve} + > ))} @@ -194,7 +199,8 @@ export const Comment = ({ + variant="compact" + > @@ -203,7 +209,8 @@ export const Comment = ({ } - onClick={handleEdit}> + onClick={handleEdit} + > {dict.comments.actions.edit_comment} )} @@ -211,7 +218,8 @@ export const Comment = ({ } - onClick={onDelete}> + onClick={onDelete} + > {dict.comments.actions.delete_comment} )} @@ -238,7 +246,8 @@ export const Comment = ({ edited={comment.updatedAt.getTime() !== comment.createdAt.getTime()} showActions={"hover"} actions={actions} - className={"bn-thread-comment"}> + className={"bn-thread-comment"} + > + "bn-comment-reactions", + )} + > {comment.reactions.map((reaction) => ( onReactionSelect(emoji.native) - }> + } + > } @@ -282,20 +293,23 @@ export const Comment = ({ variant="action-toolbar" className={mergeCSSClasses( "bn-action-toolbar", - "bn-comment-actions" - )}> + "bn-comment-actions", + )} + > + isDisabled={isEmpty} + > Save + onClick={onEditCancel} + > Cancel diff --git a/packages/react/src/components/Comments/Comments.tsx b/packages/react/src/components/Comments/Comments.tsx index 5a61cc2f30..b48796a205 100644 --- a/packages/react/src/components/Comments/Comments.tsx +++ b/packages/react/src/components/Comments/Comments.tsx @@ -35,14 +35,14 @@ export const Comments = ({ const resolvedByUser = users.get(thread.resolvedBy); if (!resolvedByUser) { throw new Error( - `User ${thread.resolvedBy} resolved thread ${thread.id}, but their data could not be found.` + `User ${thread.resolvedBy} resolved thread ${thread.id}, but their data could not be found.`, ); } const resolvedCommentIndex = thread.comments.findLastIndex( (comment) => - thread.resolvedUpdatedAt!.getTime() > comment.createdAt.getTime() + thread.resolvedUpdatedAt!.getTime() > comment.createdAt.getTime(), ) + 1; comments.splice( @@ -59,11 +59,12 @@ export const Comments = ({ day: "numeric", })} edited={false} - showActions={false}> + showActions={false} + >
{dict.comments.sidebar.marked_as_resolved}
- + , ); } @@ -77,9 +78,10 @@ export const Comments = ({ comments.length - 2, + className={"bn-thread-expand-prompt"} + > {dict.comments.sidebar.more_replies(thread.comments.length - 2)} - + , ); } diff --git a/packages/react/src/components/Comments/EmojiPicker.tsx b/packages/react/src/components/Comments/EmojiPicker.tsx index 2693ee956f..def1693ec7 100644 --- a/packages/react/src/components/Comments/EmojiPicker.tsx +++ b/packages/react/src/components/Comments/EmojiPicker.tsx @@ -29,7 +29,8 @@ export const EmojiPicker = (props: { display: "flex", justifyContent: "center", alignItems: "center", - }}> + }} + > {props.children}
diff --git a/packages/react/src/components/Comments/FloatingComposer.tsx b/packages/react/src/components/Comments/FloatingComposer.tsx index 347575e606..c5cae70462 100644 --- a/packages/react/src/components/Comments/FloatingComposer.tsx +++ b/packages/react/src/components/Comments/FloatingComposer.tsx @@ -46,9 +46,10 @@ export function FloatingComposer() { + variant="action-toolbar" + > + }} + > Save diff --git a/packages/react/src/components/Comments/FloatingComposerController.tsx b/packages/react/src/components/Comments/FloatingComposerController.tsx index 307218ab6d..aa50f5b684 100644 --- a/packages/react/src/components/Comments/FloatingComposerController.tsx +++ b/packages/react/src/components/Comments/FloatingComposerController.tsx @@ -18,7 +18,7 @@ import { FloatingComposer } from "./FloatingComposer.js"; export const FloatingComposerController = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >(props: { floatingComposer?: FC>; floatingOptions?: Partial; @@ -27,14 +27,14 @@ export const FloatingComposerController = < if (!editor.comments) { throw new Error( - "FloatingComposerController can only be used when BlockNote editor has enabled comments" + "FloatingComposerController can only be used when BlockNote editor has enabled comments", ); } const comments = editor.comments; useEffect(() => { const offUpdate = comments.onUpdate((state) => - editor.setForceSelectionVisible(state.pendingComment) + editor.setForceSelectionVisible(state.pendingComment), ); return () => offUpdate(); @@ -60,7 +60,7 @@ export const FloatingComposerController = < } }, ...props.floatingOptions, - } + }, ); if (!isMounted || !state) { diff --git a/packages/react/src/components/Comments/FloatingThreadController.tsx b/packages/react/src/components/Comments/FloatingThreadController.tsx index 9902722d21..fc2bed356f 100644 --- a/packages/react/src/components/Comments/FloatingThreadController.tsx +++ b/packages/react/src/components/Comments/FloatingThreadController.tsx @@ -28,7 +28,7 @@ import { useThreads } from "./useThreads.js"; export const FloatingThreadController = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >(props: { floatingThread?: FC>; floatingOptions?: Partial; @@ -37,12 +37,12 @@ export const FloatingThreadController = < if (!editor.comments) { throw new Error( - "FloatingComposerController can only be used when BlockNote editor has enabled comments" + "FloatingComposerController can only be used when BlockNote editor has enabled comments", ); } const state = useUIPluginState( - editor.comments.onUpdate.bind(editor.comments) + editor.comments.onUpdate.bind(editor.comments), ); const { isMounted, ref, style, getFloatingProps, setReference } = @@ -67,7 +67,7 @@ export const FloatingThreadController = < } const el = editor.domElement?.querySelector( - `[data-bn-thread-id="${state?.selectedThreadId}"]` + `[data-bn-thread-id="${state?.selectedThreadId}"]`, ); if (el) { setReference(el); diff --git a/packages/react/src/components/Comments/ReactionBadge.tsx b/packages/react/src/components/Comments/ReactionBadge.tsx index c68993ea03..0a70b4283e 100644 --- a/packages/react/src/components/Comments/ReactionBadge.tsx +++ b/packages/react/src/components/Comments/ReactionBadge.tsx @@ -18,16 +18,16 @@ export const ReactionBadge = (props: { const editor = useBlockNoteEditor(); if (!editor.comments) { throw new Error( - "ReactionBadge must be used inside a BlockNote editor with comments enabled" + "ReactionBadge must be used inside a BlockNote editor with comments enabled", ); } const reaction = props.comment.reactions.find( - (reaction) => reaction.emoji === props.emoji + (reaction) => reaction.emoji === props.emoji, ); if (!reaction) { throw new Error( - "Trying to render reaction badge for non-existing reaction" + "Trying to render reaction badge for non-existing reaction", ); } @@ -42,7 +42,7 @@ export const ReactionBadge = (props: { icon={reaction.emoji} isSelected={editor.comments.threadStore.auth.canDeleteReaction( props.comment, - reaction.emoji + reaction.emoji, )} onClick={() => props.onReactionSelect(reaction.emoji)} onMouseEnter={() => setUserIds(reaction.userIds)} diff --git a/packages/react/src/components/Comments/Thread.tsx b/packages/react/src/components/Comments/Thread.tsx index b6d4ff26d6..beb69d0c80 100644 --- a/packages/react/src/components/Comments/Thread.tsx +++ b/packages/react/src/components/Comments/Thread.tsx @@ -104,7 +104,8 @@ export const Thread = ({ onFocus={onFocus} onBlur={onBlur} selected={selected} - tabIndex={tabIndex}> + tabIndex={tabIndex} + > + "bn-comment-actions", + )} + > + onClick={onNewCommentSave} + > Save diff --git a/packages/react/src/components/Comments/ThreadsSidebar.tsx b/packages/react/src/components/Comments/ThreadsSidebar.tsx index 38a4e805a6..5afd7a7e04 100644 --- a/packages/react/src/components/Comments/ThreadsSidebar.tsx +++ b/packages/react/src/components/Comments/ThreadsSidebar.tsx @@ -36,7 +36,7 @@ const ThreadItem = React.memo( editor.comments?.selectThread(thread.id); }, - [editor.comments, thread.id] + [editor.comments, thread.id], ); const onBlur = useCallback( @@ -67,7 +67,7 @@ const ThreadItem = React.memo( editor.comments?.selectThread(undefined); } }, - [editor.comments] + [editor.comments], ); return ( @@ -81,27 +81,27 @@ const ThreadItem = React.memo( tabIndex={0} /> ); - } + }, ); function sortThreads( threads: ThreadData[], sort: "position" | "recent-activity" | "oldest", - threadPositions?: Map + threadPositions?: Map, ) { if (sort === "recent-activity") { // sort by latest comment in thread first return threads.sort( (a, b) => b.comments[b.comments.length - 1].createdAt.getTime() - - a.comments[a.comments.length - 1].createdAt.getTime() + a.comments[a.comments.length - 1].createdAt.getTime(), ); } if (sort === "oldest") { // sort by oldest thread first return threads.sort( - (a, b) => a.createdAt.getTime() - b.createdAt.getTime() + (a, b) => a.createdAt.getTime() - b.createdAt.getTime(), ); } @@ -129,7 +129,7 @@ export function getReferenceText( threadPosition?: { from: number; to: number; - } + }, ) { return editor.transact((tr) => { if (!threadPosition) { @@ -146,7 +146,7 @@ export function getReferenceText( const referenceText = tr.doc.textBetween( threadPosition.from, - threadPosition.to + threadPosition.to, ); if (referenceText.length > 15) { @@ -198,7 +198,7 @@ export function ThreadsSidebar(props: { // this will potentially trigger a re-render on every document update // this means we need to be mindful of children memoization const state = useUIPluginState( - editor.comments.onUpdate.bind(editor.comments) + editor.comments.onUpdate.bind(editor.comments), ); const selectedThreadId = state?.selectedThreadId; @@ -211,7 +211,7 @@ export function ThreadsSidebar(props: { const sortedThreads = sortThreads( threadsArray, props.sort || "position", - state?.threadPositions + state?.threadPositions, ); const ret: Array<{ thread: ThreadData; referenceText: string }> = []; @@ -223,7 +223,7 @@ export function ThreadsSidebar(props: { thread, referenceText: getReferenceText( editor, - state?.threadPositions.get(thread.id) + state?.threadPositions.get(thread.id), ), }); } @@ -233,7 +233,7 @@ export function ThreadsSidebar(props: { thread, referenceText: getReferenceText( editor, - state?.threadPositions.get(thread.id) + state?.threadPositions.get(thread.id), ), }); } diff --git a/packages/react/src/components/Comments/schema.ts b/packages/react/src/components/Comments/schema.ts index 7389f35793..576aa2c3ef 100644 --- a/packages/react/src/components/Comments/schema.ts +++ b/packages/react/src/components/Comments/schema.ts @@ -10,10 +10,10 @@ import { // it easier to extend / customize the default blocks const paragraph = createBlockSpecFromStronglyTypedTiptapNode( createStronglyTypedTiptapNode<"paragraph", "inline*">( - defaultBlockSpecs.paragraph.implementation.node.config as any + defaultBlockSpecs.paragraph.implementation.node.config as any, ), // disable default props on paragraph (such as textalignment and colors) - {} + {}, ); // remove textColor, backgroundColor from styleSpecs diff --git a/packages/react/src/components/Comments/useThreads.ts b/packages/react/src/components/Comments/useThreads.ts index a08467528c..5edbf3c347 100644 --- a/packages/react/src/components/Comments/useThreads.ts +++ b/packages/react/src/components/Comments/useThreads.ts @@ -30,7 +30,7 @@ export function useThreads(editor: BlockNoteEditor) { cb(); }); }, - [store] + [store], ); return useSyncExternalStore(subscribe, () => threadsRef.current!); diff --git a/packages/react/src/components/Comments/useUsers.ts b/packages/react/src/components/Comments/useUsers.ts index c68320952b..13d9568e03 100644 --- a/packages/react/src/components/Comments/useUsers.ts +++ b/packages/react/src/components/Comments/useUsers.ts @@ -4,7 +4,7 @@ import { useCallback, useMemo, useSyncExternalStore } from "react"; export function useUser( editor: BlockNoteEditor, - userId: string + userId: string, ) { return useUsers(editor, [userId]).get(userId); } @@ -14,7 +14,7 @@ export function useUser( */ export function useUsers( editor: BlockNoteEditor, - userIds: string[] + userIds: string[], ) { const comments = editor.comments; if (!comments) { @@ -58,7 +58,7 @@ export function useUsers( store.loadUsers(userIds); return ret; }, - [store, getUpdatedSnapshot, userIds, ref] + [store, getUpdatedSnapshot, userIds, ref], ); return useSyncExternalStore(subscribe, () => ref.current!); diff --git a/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx b/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx index 4ac9aec507..db07823b75 100644 --- a/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx +++ b/packages/react/src/components/FilePanel/DefaultTabs/EmbedTab.tsx @@ -17,9 +17,9 @@ import { FilePanelProps } from "../FilePanelProps.js"; export const EmbedTab = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >( - props: FilePanelProps + props: FilePanelProps, ) => { const Components = useComponentsContext()!; const dict = useDictionary(); @@ -34,7 +34,7 @@ export const EmbedTab = < (event: ChangeEvent) => { setCurrentURL(event.currentTarget.value); }, - [] + [], ); const handleURLEnter = useCallback( @@ -49,7 +49,7 @@ export const EmbedTab = < }); } }, - [editor, block, currentURL] + [editor, block, currentURL], ); const handleURLClick = useCallback(() => { @@ -74,7 +74,8 @@ export const EmbedTab = < + data-test="embed-input-button" + > {dict.file_panel.embed.embed_button[block.type] || dict.file_panel.embed.embed_button["file"]} diff --git a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx index b56867b44a..e650875720 100644 --- a/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx +++ b/packages/react/src/components/FilePanel/DefaultTabs/UploadTab.tsx @@ -16,11 +16,11 @@ import { FilePanelProps } from "../FilePanelProps.js"; export const UploadTab = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >( props: FilePanelProps & { setLoading: (loading: boolean) => void; - } + }, ) => { const Components = useComponentsContext()!; const dict = useDictionary(); @@ -71,7 +71,7 @@ export const UploadTab = < upload(file); }, - [block, editor, setLoading] + [block, editor, setLoading], ); const config = editor.schema.blockSchema[block.type]; diff --git a/packages/react/src/components/FilePanel/FilePanel.tsx b/packages/react/src/components/FilePanel/FilePanel.tsx index 95466afd45..270e749dcd 100644 --- a/packages/react/src/components/FilePanel/FilePanel.tsx +++ b/packages/react/src/components/FilePanel/FilePanel.tsx @@ -29,10 +29,10 @@ type PanelProps = ComponentProps["FilePanel"]["Root"]; export const FilePanel = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >( props: FilePanelProps & - Partial> + Partial>, ) => { const Components = useComponentsContext()!; const dict = useDictionary(); @@ -57,7 +57,7 @@ export const FilePanel = < ]; const [openTab, setOpenTab] = useState( - props.defaultOpenTab || tabs[0].name + props.defaultOpenTab || tabs[0].name, ); return ( diff --git a/packages/react/src/components/FilePanel/FilePanelController.tsx b/packages/react/src/components/FilePanel/FilePanelController.tsx index bf83cb108c..7fb98b2bab 100644 --- a/packages/react/src/components/FilePanel/FilePanelController.tsx +++ b/packages/react/src/components/FilePanel/FilePanelController.tsx @@ -18,7 +18,7 @@ import { FilePanelProps } from "./FilePanelProps.js"; export const FilePanelController = < B extends BlockSchema = DefaultBlockSchema, I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, >(props: { filePanel?: FC>; floatingOptions?: Partial; @@ -27,12 +27,12 @@ export const FilePanelController = < if (!editor.filePanel) { throw new Error( - "FileToolbarController can only be used when BlockNote editor schema contains file block" + "FileToolbarController can only be used when BlockNote editor schema contains file block", ); } const state = useUIPluginState( - editor.filePanel.onUpdate.bind(editor.filePanel) + editor.filePanel.onUpdate.bind(editor.filePanel), ); const { isMounted, ref, style, getFloatingProps } = useUIElementPositioning( @@ -49,7 +49,7 @@ export const FilePanelController = < } }, ...props.floatingOptions, - } + }, ); if (!isMounted || !state) { diff --git a/packages/react/src/components/FilePanel/FilePanelProps.ts b/packages/react/src/components/FilePanel/FilePanelProps.ts index 31683c042e..ac1420e011 100644 --- a/packages/react/src/components/FilePanel/FilePanelProps.ts +++ b/packages/react/src/components/FilePanel/FilePanelProps.ts @@ -9,5 +9,5 @@ import { export type FilePanelProps< I extends InlineContentSchema = DefaultInlineContentSchema, - S extends StyleSchema = DefaultStyleSchema + S extends StyleSchema = DefaultStyleSchema, > = Omit, keyof UiElementPosition>; diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx index a2334ac946..8311c79ce0 100644 --- a/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx +++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx @@ -33,7 +33,7 @@ const icons = { function checkBasicTextStyleInSchema