@merkle-open/magnolia-headless-frontend-nextjs 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkle-open/magnolia-headless-frontend-nextjs",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Magnolia headless frontend nextJs",
   "license": "MIT",
   "author": "Merkle Inc.",

package/src/templates/areas/__magnolia-editable-area/EditableArea.tsx

@@ -1,9 +1,18 @@
-import { EditableArea as MagnoliaEditableArea } from '@magnolia/react-editor';
+import { EditableArea as MagnoliaEditableArea, RefService } from '@magnolia/react-editor';
 import React, { ReactNode } from 'react';
 import EditableAreaProps from './EditableAreaProps.ts';
-import { ContentRendererService, MgnlContent } from '@magnolia/frontend-helpers-base';
+import { ContentRendererService, IMagnoliaContext, MgnlContent } from '@magnolia/frontend-helpers-base';
 import { EditableComponent } from '../../components/__magnolia-editable-component/EditableComponent.tsx';
 
+function shouldRender(hasChildren: boolean, renderEmpty?: boolean) {
+	if (renderEmpty) {
+		return true;
+	}
+	const magnoliaContext = RefService.getMagnoliaContextRef<IMagnoliaContext>();
+	const isEditMode = magnoliaContext?.isMagnoliaEdit;
+	return isEditMode || hasChildren;
+}
+
 export function EditableArea(props: EditableAreaProps): ReactNode {
 	const { content, additionalContent, additionalComponentContent } = props;
 	const componentNodeMapping = content['@nodes'].map((nodeName: any) => [nodeName, merge(content[nodeName], additionalComponentContent)]);
@@ -13,9 +22,11 @@ export function EditableArea(props: EditableAreaProps): ReactNode {
 	const children = componentContents?.map((item, index) => <EditableComponent key={ContentRendererService.buildKey(item)} content={item} index={index} />);
 
 	return (
-		<MagnoliaEditableArea {...props} content={mergedContent}>
-			{children}
-		</MagnoliaEditableArea>
+		shouldRender(children.length > 0, props.renderEmpty) && (
+			<MagnoliaEditableArea {...props} content={mergedContent}>
+				{children}
+			</MagnoliaEditableArea>
+		)
 	);
 }
 

package/src/templates/areas/__magnolia-editable-area/EditableAreaProps.ts

@@ -9,4 +9,5 @@ export default interface EditableAreaProps {
 	children?: ReactNodeLike;
 	additionalContent?: any;
 	additionalComponentContent?: any;
+	renderEmpty?: boolean;
 }

package/src/templates/elements/_error/ErrorBoundary.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import React, { ReactNode } from 'react';
-import Error from './ErrorElement.tsx';
+import React, { ReactNode, Suspense } from 'react';
+import ErrorElement from './ErrorElement.tsx';
 
 interface ErrorState {
-	error: Error;
+	error: Error | null;
 }
 
 interface ErrorProps {
@@ -26,8 +26,8 @@ export default class ErrorBoundary extends React.Component<ErrorProps, ErrorStat
 
 	render() {
 		if (this.state.error) {
-			return <Error editMode={this.props.isEditMode} throwNotEditMode={this.props.throwNotEditMode} path={this.props.path} msg={this.state.error.message} />;
+			return <ErrorElement editMode={this.props.isEditMode} throwNotEditMode={this.props.throwNotEditMode} path={this.props.path} msg={this.state.error.message} />;
 		}
-		return this.props.children;
+		return <Suspense fallback={null}>{this.props.children}</Suspense>;
 	}
 }