@dotcms/react 0.0.1-beta.30 → 0.0.1-beta.31

package/next.esm.js

@@ -618,6 +618,10 @@ const useEditableDotCMSPage = pageResponse => {
     if (!getUVEState()) {
       return;
     }
+    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;
     const {
       destroyUVESubscriptions
@@ -851,6 +855,45 @@ const BlockQuote = ({
   });
 };
 
+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.`;
 /**
  * Renders a DotContent component.
  *
@@ -862,23 +905,29 @@ const DotContent = ({
   node
 }) => {
   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;
   }
   return jsx(Component, Object.assign({}, node));
@@ -1203,6 +1252,7 @@ const BlockEditorBlock = ({
   return content == null ? void 0 : content.map((node, index) => {
     var _node$content;
     const CustomRendererComponent = customRenderers == null ? void 0 : customRenderers[node.type];
+    const key = `${node.type}-${index}`;
     if (CustomRendererComponent) {
       return jsx(CustomRendererComponent, {
         content: node.content,
@@ -1210,7 +1260,7 @@ const BlockEditorBlock = ({
           content: node.content,
           customRenderers: customRenderers
         })
-      }, `${node.type}-${index}`);
+      }, key);
     }
     switch (node.type) {
       case BlockEditorDefaultBlocks.PARAGRAPH:
@@ -1220,7 +1270,7 @@ const BlockEditorBlock = ({
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.HEADING:
         return jsx(Heading, {
           node: node,
@@ -1228,37 +1278,37 @@ const BlockEditorBlock = ({
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${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:
         return jsx(BulletList, {
           children: jsx(BlockEditorBlock, {
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.ORDERED_LIST:
         return jsx(OrderedList, {
           children: jsx(BlockEditorBlock, {
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.LIST_ITEM:
         return jsx(ListItem, {
           children: jsx(BlockEditorBlock, {
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.BLOCK_QUOTE:
         return jsx(BlockQuote, {
           children: jsx(BlockEditorBlock, {
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.CODE_BLOCK:
         return jsx(CodeBlock, {
           node: node,
@@ -1266,36 +1316,74 @@ const BlockEditorBlock = ({
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${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:
         return jsx(TableRenderer, {
           content: (_node$content = node.content) != null ? _node$content : [],
           blockEditorItem: BlockEditorBlock
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.DOT_CONTENT:
         return jsx(DotContent, {
           customRenderers: customRenderers,
           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;
+};
 
 /**
  * BlockEditorRenderer component for rendering block editor field.

package/package.json

@@ -1,11 +1,11 @@
 {
   "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"
   },
   "devDependencies": {

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/NoComponentProvided.d.ts

@@ -0,0 +1,3 @@
+export declare const NoComponentProvided: ({ contentType }: {
+    contentType: string;
+}) => import("react/jsx-runtime").JSX.Element;