feat(notes): cluster images

Fix #237

src/components/Notes/NoteRender.tsx

@@ -1,7 +1,7 @@
 import { NDKKind } from '@nostr-dev-kit/ndk'
 import { ProfileLink } from 'components/ProfileSection'
 import { nip19 } from 'nostr-tools'
-import { useCallback, useContext, useMemo, useState } from 'react'
+import React, { useCallback, useContext, useMemo, useState } from 'react'
 import { Fragment } from 'react/jsx-runtime'
 import { BlogPreview } from './internal/BlogPreview'
 import { ModPreview } from './internal/ModPreview'
@@ -220,7 +220,66 @@ export const NoteRender = ({ content }: NoteRenderProps) => {
           return <Fragment key={key}>{part}</Fragment>
         }
       })
-    return _parts
+
+    const groupedParts = []
+    let imgGroup: JSX.Element[] = []
+
+    _parts.forEach((part, index) => {
+      const nextPart = _parts[index + 1]
+      const isNextPartImage =
+        nextPart && React.isValidElement(nextPart) && nextPart.type === 'img'
+      // Skip empty spaces only if previous one is image and the next one is image
+      if (
+        React.isValidElement(part) &&
+        part.props &&
+        typeof part.props === 'object' &&
+        'children' in part.props &&
+        typeof part.props.children === 'string' &&
+        part.props.children.trim() === '' &&
+        imgGroup.length > 0 &&
+        isNextPartImage
+      ) {
+        return
+      }
+      if (React.isValidElement(part) && part.type === 'img') {
+        imgGroup.push(part)
+      } else {
+        if (imgGroup.length > 0) {
+          groupedParts.push(
+            <div
+              key={`group-${index}-${groupedParts.length}`}
+              className='IBMSMSMBSSCL_CBImgGroup'
+              style={{
+                gridTemplateColumns: `repeat(${Math.min(
+                  imgGroup.length,
+                  3
+                )}, 1fr)`
+              }}
+            >
+              {imgGroup}
+            </div>
+          )
+          imgGroup = []
+        }
+        groupedParts.push(part)
+      }
+    })
+
+    if (imgGroup.length > 0) {
+      groupedParts.push(
+        <div
+          key={`group-last-${groupedParts.length}`}
+          className='IBMSMSMBSSCL_CBImgGroup'
+          style={{
+            gridTemplateColumns: `repeat(${imgGroup.length}, 1fr)`
+          }}
+        >
+          {imgGroup}
+        </div>
+      )
+    }
+
+    return groupedParts
   }, [content, depth, openLightBoxOnSlide])
 
   return (