fix: improve support for next/image component

[brince0304]

Description

This pull request addresses several issues and enhances the functionality of our image component:

1. Bug Fix and Component Refactoring: Previously, when passing the next/image Image component to our nextImage component, false values were inserted for height and width, resulting in NaN inputs. This caused images to fail to render properly. To resolve this, we created a separate image component that selectively passes specific props to the Image component, excluding problematic ones. This approach proved successful in rendering images correctly. We then refactored the code in a similar manner to ensure proper image output and resolve rendering issues.

example

  const components = {
    Code,
    Equation,
    Pdf,
    Modal,
    nextImage: Image,
    nextLink: Link,
    Collection: () => null,
  };

  return (
    <NotionRenderer
      recordMap={recordMap}
      fullPage={true}
      darkMode={theme === 'dark'}
      disableHeader={true}
      hideBlockId={true}
      isShowingSearch={false}
      pageTitle={false}
      showTableOfContents={true}
      showCollectionViewDropdown={false}
      components={components}
      previewImages={true}
      forceCustomImages={true}
    />
  );

This is default image props.

3. Sizing Solution: For users who only use simple images without preview images, there was no reliable way to pass accurate dimensions to next/image. We've implemented a default size of '100vw' for the 'sizes' prop, which has proven effective in correctly rendering images without predefined dimensions.

function NextImageComponent(props: ImageProps) {
  return (
      <Image
        src={props.src}
      alt={props.alt}
      title={props.alt}
      sizes="100vw"
      width={0}
      height={0}
      style={{ width: '100%', height: 'auto' }}
      loading="lazy"
    />
  );
}

It is working !

5. Accessibility Improvement: We've added the 'title' attribute to images to enhance accessibility, providing additional context for screen readers and improving the overall user experience.

Additionally, during the development process, we identified the following issues:

6. Component Usage Inconsistency: While the project code suggested that nextImage could be used independently of forceCustomImages, in practice, both needed to be passed together for proper functionality.

7. Rendering Logic Ambiguity: Although components.Image is imported and props are passed to it, when nextImage is provided, the component actually imports Image from nextImage for rendering. This inconsistency in logic exists.

These changes allow for more flexible usage of next/image without requiring predefined dimensions, solve compatibility issues between our custom Image component and next/image, and improve image tooltips and accessibility. We are also aware of the additional issues discovered, which may require further improvements in the future.

Notion Test Page ID

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
react-notion-x	❌ Failed (Inspect)		Oct 4, 2024 3:20pm
react-notion-x-minimal-demo	❌ Failed (Inspect)		Oct 4, 2024 3:20pm