From 349f313c867da066a8f8eab21c9c634ebaa7fdd3 Mon Sep 17 00:00:00 2001
From: Jalinson Diaz <zjaaaldev@gmail.com>
Date: Thu, 14 Nov 2024 13:09:07 -0300
Subject: [PATCH] Update contentlets.js

---
 .../src/components/shared/contentlets.js      | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/examples/nextjs/src/components/shared/contentlets.js b/examples/nextjs/src/components/shared/contentlets.js
index 1ea66565e9fa..55e057fc6871 100644
--- a/examples/nextjs/src/components/shared/contentlets.js
+++ b/examples/nextjs/src/components/shared/contentlets.js
@@ -1,7 +1,7 @@
 'use client';
-import React from 'react';
+import { useMemo } from 'react';
 import Image from 'next/image';
-import { editContentlet } from '@dotcms/client';
+import { editContentlet, isInsideEditor } from '@dotcms/client';
 
 const dateFormatOptions = {
     year: 'numeric',
@@ -10,27 +10,31 @@ const dateFormatOptions = {
 };
 
 function Contentlets({ contentlets }) {
+    const insideEditor = useMemo(isInsideEditor, []);
+
     return (
         <ul className="flex flex-col gap-7">
             {contentlets.map((contentlet) => (
                 <li className="flex gap-7 min-h-16 relative" key={contentlet.identifier}>
-                    <button
-                        onClick={() => editContentlet(contentlet)}
-                        style={{
-                            color: 'black',
-                            border: '1px solid black',
-                            position: 'absolute',
-                            bottom: 0,
-                            right: 0,
-                            width: '40px',
-                            height: '20px',
-                            zIndex: 1000,
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center'
-                        }}>
-                        Edit
-                    </button>
+                    {insideEditor && (
+                        <button
+                            onClick={() => editContentlet(contentlet)}
+                            style={{
+                                color: 'black',
+                                border: '1px solid black',
+                                position: 'absolute',
+                                bottom: 0,
+                                right: 0,
+                                width: '40px',
+                                height: '20px',
+                                zIndex: 1000,
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center'
+                            }}>
+                            Edit
+                        </button>
+                    )}
                     <a className="relative min-w-32" href={contentlet.urlMap || contentlet.url}>
                         {contentlet.image && (
                             <Image