diff --git a/examples/full/next-env.d.ts b/examples/full/next-env.d.ts
index a4a7b3f5c..52e831b43 100644
--- a/examples/full/next-env.d.ts
+++ b/examples/full/next-env.d.ts
@@ -2,4 +2,4 @@
///
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/examples/minimal/next-env.d.ts b/examples/minimal/next-env.d.ts
index a4a7b3f5c..52e831b43 100644
--- a/examples/minimal/next-env.d.ts
+++ b/examples/minimal/next-env.d.ts
@@ -2,4 +2,4 @@
///
// NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
diff --git a/package.json b/package.json
index 076b6514f..4955e3570 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
"del-cli": "^6.0.0",
"eslint": "^8.57.1",
"npm-run-all2": "^7.0.1",
- "prettier": "^3.3.3",
+ "prettier": "^3.4.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"tsup": "^8.3.5",
@@ -38,5 +38,8 @@
"turbo": "^2.3.0",
"typescript": "^5.6.3",
"vitest": "^2.1.5"
+ },
+ "dependencies": {
+ "@types/react": "^18.3.12"
}
}
diff --git a/packages/notion-client/src/notion-api.ts b/packages/notion-client/src/notion-api.ts
index e42bee9e9..250c55c7d 100644
--- a/packages/notion-client/src/notion-api.ts
+++ b/packages/notion-client/src/notion-api.ts
@@ -237,14 +237,17 @@ export class NotionAPI {
// console.log(block, source)
if (source) {
- if (source.includes('secure.notion-static.com') || source.includes('prod-files-secure')) {
+ if (
+ source.includes('secure.notion-static.com') ||
+ source.includes('prod-files-secure')
+ ) {
return {
permissionRecord: {
table: 'block',
id: block.id
},
url: source
- };
+ }
}
return []
diff --git a/packages/react-notion-x/package.json b/packages/react-notion-x/package.json
index 0cc7859c5..2138df117 100644
--- a/packages/react-notion-x/package.json
+++ b/packages/react-notion-x/package.json
@@ -64,7 +64,6 @@
"react-fast-compare": "^3.2.0",
"react-hotkeys-hook": "^4.5.1",
"react-image": "^4.0.3",
- "react-lazy-images": "^1.1.0",
"react-modal": "^3.14.3"
},
"devDependencies": {
diff --git a/packages/react-notion-x/src/components/lazy-image.tsx b/packages/react-notion-x/src/components/lazy-image.tsx
index 3e45cdad9..dff4ae9f9 100644
--- a/packages/react-notion-x/src/components/lazy-image.tsx
+++ b/packages/react-notion-x/src/components/lazy-image.tsx
@@ -1,182 +1,27 @@
-import { normalizeUrl } from 'notion-utils'
-import * as React from 'react'
-import { ImageState, LazyImageFull } from 'react-lazy-images'
-
-import { useNotionContext } from '../context'
-import { cs } from '../utils'
-
-/**
- * Progressive, lazy images modeled after Medium's LQIP technique.
- */
export function LazyImage({
src,
alt,
className,
style,
- zoomable = false,
- priority = false,
height,
- ...rest
+ priority = false
}: {
src?: string
alt?: string
className?: string
style?: React.CSSProperties
height?: number
- zoomable?: boolean
priority?: boolean
}) {
- const { recordMap, zoom, previewImages, forceCustomImages, components } =
- useNotionContext()
- const zoomRef = React.useRef(zoom ? zoom.clone() : null)
- const previewImage = previewImages
- ? (recordMap?.preview_images?.[src!] ??
- recordMap?.preview_images?.[normalizeUrl(src)])
- : null
-
- const onLoad = React.useCallback(
- (e: any) => {
- if (zoomable && (e.target.src || e.target.srcset)) {
- if (zoomRef.current) {
- ;(zoomRef.current as any).attach(e.target)
- }
- }
- },
- [zoomRef, zoomable]
+ return (
+ 
)
-
- const attachZoom = React.useCallback(
- (image: any) => {
- if (zoomRef.current && image) {
- ;(zoomRef.current as any).attach(image)
- }
- },
- [zoomRef]
- )
-
- const attachZoomRef = React.useMemo(
- () => (zoomable ? attachZoom : undefined),
- [zoomable, attachZoom]
- )
-
- if (previewImage) {
- const aspectRatio = previewImage.originalHeight / previewImage.originalWidth
-
- if (components.Image) {
- // TODO: could try using next/image onLoadComplete to replace LazyImageFull
- // while retaining our blur implementation
- return (
-
- )
- }
-
- return (
- // @ts-expect-error LazyImage types are out-of-date.
-
- {({ imageState, ref }) => {
- const isLoaded = imageState === ImageState.LoadSuccess
- const wrapperStyle: React.CSSProperties = {
- width: '100%'
- }
- const imgStyle: React.CSSProperties = {}
-
- if (height) {
- wrapperStyle.height = height
- } else {
- imgStyle.position = 'absolute'
- wrapperStyle.paddingBottom = `${aspectRatio * 100}%`
- }
-
- return (
-
-
-
-
-