fix: don't wrap images in a p tag

Author: nicholasgriffintn

apps/web/components/Image/index.tsx

@@ -86,7 +86,7 @@ export function Image({
 					height={imageDimensions?.height}
 					className="image__img"
 					placeholder="blur"
-					blurDataURL="data:image/..."
+					blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R/W5P8AkX9P3/tImuLdVkULl3ybS4U7RK32LGTWjB5qbY8+IKqXqX1rp5nvLr1l4dTrg=="
 					onError={() => {
 						setImageError(true);
 						setLoadingComplete(true);

apps/web/components/MDX/index.tsx

@@ -104,9 +104,9 @@ function createHeading(level) {
         return '';
       })
       .join('');
-    
+
     const slug = slugify(text);
-    
+
     return createElement(`h${level}`, { id: slug }, [
       createElement(
         'a',
@@ -143,13 +143,33 @@ function createHeading(level) {
 }
 
 function Wrapper({ children }) {
-  if (
-    children &&
-    typeof children === 'object' &&
-    (children.type === RoundedImage || children.type === Image)
-  ) {
-    return children;
+
+  const hasImageComponent = (child) => {
+    if (!child || typeof child !== 'object') return false;
+
+    if (child.type === RoundedImage || child.type === Image) return true;
+
+    if (child.type?.displayName === 'RoundedImage' || child.type?.name === 'RoundedImage') return true;
+    if (child.type?.displayName === 'Image' || child.type?.name === 'Image') return true;
+
+    if (child.type === 'img') return true;
+
+    return false;
+  };
+
+  if (children && typeof children === 'object' && !Array.isArray(children)) {
+    if (hasImageComponent(children)) {
+      return children;
+    }
   }
+
+  if (Array.isArray(children)) {
+    const hasImages = children.some(hasImageComponent);
+    if (hasImages) {
+      return <>{children}</>;
+    }
+  }
+
   return <p>{children}</p>;
 }