Support image block in shared richtext

[mathiazom]

Images in rich text from shared are not rendered. This is becuase the image assets are fetched with the studio client, not the shared client.

[mathiazom]

A simple solution would be to attempt to fetch with both studio and shared client, and pick whichever resolves to an actual image. This assumes that the asset ids are globally unique. A solution would look something like this:

const useNextSanityGlobalImage = (image: IImage) => {
  const studioImage = useNextSanityImage(client, image);
  const sharedImage = useNextSanityImage(sharedClient, image);

  const [globalImage, setGlobalImage] =
    useState<UseNextSanityImageProps | null>(null);

  useEffect(() => {
    fetch(studioImage.src).then((r) => r.ok && setGlobalImage(studioImage));
    fetch(sharedImage.src).then((r) => r.ok && setGlobalImage(sharedImage));
  }, [studioImage, sharedImage]);

  return globalImage;
};

A more involved, but possibly safer, approach is to pass either a client identifier or the client config itself through the RichText hierarchy. This would require some prop drilling though 👷

[christinaroise]

How many layers of prop drilling are we looking at? 🫠

[mathiazom]

How many layers of prop drilling are we looking at? 🫠

• RichText
  • GroupedBlogText
    • myPortableTextComponents (convert to function)
      • SanityImage
        • useConvertSanityImageToNextImage
          • SanityImage

This assumes that all images within the blocks given to RichText come from the same known project (e.g. no mixing of shared and studio content).

[christinaroise]

Hm, could perhpas the RichText component in and of itself be optimized? 🤔 there are also cases where we have myPortableTextComponents because RichText doesnt support normal as any other styles than body, so for cases where we want portable text but with normal as say bodySuperLarge or bodyLarge.. 🤔

[mathiazom]

Closed by #702