@dotcms/react - npm Package Compare versions

Comparing version 0.0.1-beta.30 to 0.0.1-beta.31

next.esm.js

@@ -621,2 +621,6 @@ import { s as styleInject } from './web.url-search-params.size.esm.js';
     }
+    if (!pageResponse) {
+      console.warn('[useEditableDotCMSPage]: No DotCMSPageResponse provided');
+      return;
+    }
     const pageURI = pageResponse == null || (_pageResponse$pageAss = pageResponse.pageAsset) == null || (_pageResponse$pageAss = _pageResponse$pageAss.page) == null ? void 0 : _pageResponse$pageAss.pageURI;
@@ -855,2 +859,41 @@ const {
 
+const NoComponentProvided = ({
+  contentType
+}) => {
+  const style = {
+    backgroundColor: '#fffaf0',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #ed8936'
+  };
+  return jsxs("div", {
+    "data-testid": "no-component-provided",
+    style: style,
+    children: [jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: "Dev Warning"
+    }), ": No component or custom renderer provided for content type", jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: contentType || 'Unknown'
+    }), ".", jsx("br", {}), "Please refer to the", jsx("a", {
+      href: "https://dev.dotcms.com/docs/block-editor",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        color: '#c05621'
+      },
+      children: "Block Editor Custom Renderers Documentation"
+    }), ' ', "for guidance."]
+  });
+};
+
+const DOT_CONTENT_NO_DATA_MESSAGE = '[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.';
+const DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE = contentType => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${contentType}. Provide a custom renderer for this content type to fix this error.`;
 /**
@@ -867,19 +910,25 @@ * Renders a DotContent component.
   const isDevMode = useIsDevMode();
-  const attrs = (node == null ? void 0 : node.attrs) || {};
-  const data = attrs.data;
+  const {
+    attrs = {}
+  } = node;
+  const {
+    data
+  } = attrs;
   if (!data) {
-    console.error('DotContent: No data provided');
+    console.error(DOT_CONTENT_NO_DATA_MESSAGE);
     return null;
   }
-  const contentType = data.contentType || 'Unknown Content Type';
+  const {
+    contentType = 'Unknown Content Type'
+  } = data;
   const Component = customRenderers[contentType];
-  // In dev mode, show a helpful message for unknown content types
+  /* In dev mode, show a helpful message for unknown content types */
   if (isDevMode && !Component) {
-    return jsxs("div", {
-      children: ["Unknown ContentType: ", contentType]
+    return jsx(NoComponentProvided, {
+      contentType: contentType
     });
   }
-  // In production, use default component if no matching component found
+  /* In production, use default component if no matching component found */
   if (!Component) {
-    console.error('DotContent: No matching component found for content type', contentType);
+    console.warn(DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
     return null;
@@ -1209,2 +1258,3 @@ }
     const CustomRendererComponent = customRenderers == null ? void 0 : customRenderers[node.type];
+    const key = `${node.type}-${index}`;
     if (CustomRendererComponent) {
@@ -1217,3 +1267,3 @@ return jsx(CustomRendererComponent, {
         })
-      }, `${node.type}-${index}`);
+      }, key);
     }
@@ -1228,3 +1278,3 @@ switch (node.type) {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.HEADING:
@@ -1237,5 +1287,5 @@ return jsx(Heading, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.TEXT:
-        return jsx(TextBlock, Object.assign({}, node), `${node.type}-${index}`);
+        return jsx(TextBlock, Object.assign({}, node), key);
       case BlockEditorDefaultBlocks.BULLET_LIST:
@@ -1247,3 +1297,3 @@ return jsx(BulletList, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.ORDERED_LIST:
@@ -1255,3 +1305,3 @@ return jsx(OrderedList, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.LIST_ITEM:
@@ -1263,3 +1313,3 @@ return jsx(ListItem, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.BLOCK_QUOTE:
@@ -1271,3 +1321,3 @@ return jsx(BlockQuote, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.CODE_BLOCK:
@@ -1280,15 +1330,15 @@ return jsx(CodeBlock, {
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.HARDBREAK:
-        return jsx("br", {}, `${node.type}-${index}`);
+        return jsx("br", {}, key);
       case BlockEditorDefaultBlocks.HORIZONTAL_RULE:
-        return jsx("hr", {}, `${node.type}-${index}`);
+        return jsx("hr", {}, key);
       case BlockEditorDefaultBlocks.DOT_IMAGE:
         return jsx(DotCMSImage, {
           node: node
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.DOT_VIDEO:
         return jsx(DotCMSVideo, {
           node: node
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.TABLE:
@@ -1298,3 +1348,3 @@ return jsx(TableRenderer, {
           blockEditorItem: BlockEditorBlock
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.DOT_CONTENT:
@@ -1304,10 +1354,48 @@ return jsx(DotContent, {
           node: node
-        }, `${node.type}-${index}`);
+        }, key);
       default:
-        return jsxs("div", {
-          children: ["Unknown Block Type ", node.type]
-        }, `${node.type}-${index}`);
+        return jsx(UnknownBlock, {
+          node: node
+        }, key);
     }
   });
 };
+/**
+ * Renders an unknown block type with a warning message in development mode.
+ *
+ * @param node - The block editor node to render.
+ * @returns The rendered block or null if in production mode.
+ */
+const UnknownBlock = ({
+  node
+}) => {
+  const style = {
+    backgroundColor: '#fff5f5',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #fc8181'
+  };
+  if (getUVEState()) {
+    return jsxs("div", {
+      style: style,
+      children: [jsx("strong", {
+        style: {
+          color: '#c53030'
+        },
+        children: "Warning:"
+      }), " The block type", ' ', jsx("strong", {
+        children: node.type
+      }), " is not recognized. Please check your", ' ', jsx("a", {
+        href: "https://dev.dotcms.com/docs/block-editor",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "configuration"
+      }), ' ', "or contact support for assistance."]
+    });
+  }
+  return null;
+};
 
@@ -1314,0 +1402,0 @@ /**

package.json

 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.30",
+  "version": "0.0.1-beta.31",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.30",
-    "@dotcms/uve": "0.0.1-beta.30",
+    "@dotcms/client": "0.0.1-beta.31",
+    "@dotcms/uve": "0.0.1-beta.31",
     "@tinymce/tinymce-react": "^6.0.0"
@@ -10,0 +10,0 @@ },

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

296191

0.79%

Number of package files

63

1.61%

Lines of code

8034

1.13%

Worsened metrics

Number of low supply chain risk alerts

3

50%

No dependency changes