fix(sdk-react): Contentlets with empty HTML content needs to have min…

…-height to edit it in UVE (#30122)

### Proposed Changes



https://github.com/user-attachments/assets/0873e554-def3-41fb-aafd-42510a2ab236

---------

Co-authored-by: Kevin Davila <[email protected]>

core-web/libs/sdk/react/src/lib/components/Container/Container.tsx

@@ -1,6 +1,7 @@
 import { useContext } from 'react';
 
 import { PageContext } from '../../contexts/PageContext';
+import { useCheckHaveContent } from '../../hooks/useCheckHaveContent';
 import { DotCMSPageContext } from '../../models';
 import { getContainersData } from '../../utils/utils';
 
@@ -46,6 +47,8 @@ export function Container({ containerRef }: ContainerProps) {
 
     const { identifier, uuid } = containerRef;
 
+    const { haveContent, contentletDivRef } = useCheckHaveContent();
+
     // Get the containers from the global context
     const {
         pageAsset: { containers },
@@ -96,7 +99,9 @@ export function Container({ containerRef }: ContainerProps) {
                 data-dot-type={contentlet.contentType}
                 data-dot-container={JSON.stringify(container)}
                 data-dot-on-number-of-pages={contentlet.onNumberOfPages}
-                key={contentlet.identifier}>
+                key={contentlet.identifier}
+                ref={contentletDivRef}
+                style={{ minHeight: haveContent ? undefined : '4rem' }}>
                 <Component {...contentlet} />
             </div>
         ) : (

core-web/libs/sdk/react/src/lib/hooks/useCheckHaveContent.spec.ts

@@ -0,0 +1,48 @@
+import { renderHook } from '@testing-library/react';
+import React from 'react';
+
+import { useCheckHaveContent } from './useCheckHaveContent';
+
+describe('useCheckHaveContent', () => {
+    it('should return true when there is content', () => {
+        const div = document.createElement('div');
+        const child = document.createElement('div');
+        div.appendChild(child);
+
+        jest.spyOn(child, 'getBoundingClientRect').mockImplementation(() => {
+            return {
+                bottom: 0,
+                height: 100,
+                left: 0,
+                right: 0,
+                top: 0,
+                width: 0,
+                x: 0,
+                y: 0,
+                toJSON: () => ({})
+            };
+        });
+
+        jest.spyOn(React, 'useRef').mockReturnValue({
+            current: div
+        });
+
+        const { result } = renderHook(() => useCheckHaveContent());
+
+        expect(result.current.haveContent).toBe(true);
+    });
+
+    it('should return false when there is no content', () => {
+        const div = document.createElement('div');
+        const child = document.createElement('div');
+        div.appendChild(child);
+
+        jest.spyOn(React, 'useRef').mockReturnValue({
+            current: div
+        });
+
+        const { result } = renderHook(() => useCheckHaveContent());
+
+        expect(result.current.haveContent).toBe(false);
+    });
+});

core-web/libs/sdk/react/src/lib/hooks/useCheckHaveContent.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useCheckHaveContent = () => {
+    const contentletDivRef = useRef<HTMLDivElement | null>(null);
+    const [haveContent, setHaveContent] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (!contentletDivRef.current) {
+            return;
+        }
+
+        const childElement = contentletDivRef.current.firstElementChild;
+
+        if (!childElement) {
+            return;
+        }
+
+        const height = childElement.getBoundingClientRect().height;
+
+        if (height > 0) {
+            setHaveContent(true);
+
+            return;
+        }
+
+        setHaveContent(false);
+    }, [contentletDivRef]);
+
+    return { contentletDivRef, haveContent };
+};