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

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
@@ -691,30 +695,31 @@ function DotCMSEditableText({
   const [scriptSrc, setScriptSrc] = useState('');
   const [initEditor, setInitEditor] = useState(false);
   const [content, setContent] = useState((contentlet == null ? void 0 : contentlet[fieldName]) || '');
+  useEffect(() => {
+    setContent((contentlet == null ? void 0 : contentlet[fieldName]) || '');
+  }, [fieldName, contentlet]);
   useEffect(() => {
     var _state$dotCMSHost, _editorRef$current;
     const state = getUVEState();
     setInitEditor((state == null ? void 0 : state.mode) === UVE_MODE.EDIT && !!(state != null && (_state$dotCMSHost = state.dotCMSHost) != null && _state$dotCMSHost.length));
     if (!contentlet || !fieldName) {
-      console.error('DotCMSEditableText: contentlet or fieldName is missing', 'Ensure that all needed props are passed to view and edit the content');
+      console.error('[DotCMSEditableText]: contentlet or fieldName is missing', 'Ensure that all needed props are passed to view and edit the content');
       return;
     }
     if (state && state.mode !== UVE_MODE.EDIT) {
-      console.warn('DotCMSEditableText: TinyMCE is not available in the current mode');
+      console.warn('[DotCMSEditableText]: TinyMCE is not available in the current mode');
       return;
     }
     if (!(state != null && state.dotCMSHost)) {
-      console.warn('The `dotCMSHost` parameter is not defined. Check that the UVE is sending the correct parameters.');
+      console.warn('[DotCMSEditableText]: The `dotCMSHost` parameter is not defined. Check that the UVE is sending the correct parameters.');
       return;
     }
     const createURL = new URL(__TINYMCE_PATH_ON_DOTCMS__, state.dotCMSHost);
     setScriptSrc(createURL.toString());
-    const content = (contentlet == null ? void 0 : contentlet[fieldName]) || '';
     (_editorRef$current = editorRef.current) == null || _editorRef$current.setContent(content, {
       format
     });
-    setContent(content);
-  }, [format, fieldName, contentlet]);
+  }, [format, fieldName, contentlet, content]);
   useEffect(() => {
     var _getUVEState;
     if (((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) !== UVE_MODE.EDIT) {
@@ -851,6 +856,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 +906,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 +1253,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 +1261,7 @@ const BlockEditorBlock = ({
           content: node.content,
           customRenderers: customRenderers
         })
-      }, `${node.type}-${index}`);
+      }, key);
     }
     switch (node.type) {
       case BlockEditorDefaultBlocks.PARAGRAPH:
@@ -1220,7 +1271,7 @@ const BlockEditorBlock = ({
             content: node.content,
             customRenderers: customRenderers
           })
-        }, `${node.type}-${index}`);
+        }, key);
       case BlockEditorDefaultBlocks.HEADING:
         return jsx(Heading, {
           node: node,
@@ -1228,37 +1279,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 +1317,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.32",
   "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.32",
+    "@dotcms/uve": "0.0.1-beta.32",
     "@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;