@dotcms/react 26.8.3-1-next.2478 → 26.8.3-1-next.2490

package/lib/next/components/Container/Container.esm.js

@@ -33,8 +33,11 @@ function Container({
     pageAsset
   } = useContext(DotCMSPageContext);
   const isDevMode = useIsDevMode();
-  const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
-  const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
+  // pageAsset is undefined while useEditableDotCMSPage is still waiting on the UVE editor to
+  // resolve a draft/non-live page - Container never actually renders in that state (its parent
+  // DotCMSLayoutBody shows ErrorMessage instead), but the guard keeps this honest either way.
+  const containerData = useMemo(() => pageAsset ? getContainersData(pageAsset, container) : null, [pageAsset, container]);
+  const contentlets = useMemo(() => pageAsset ? getContentletsInContainer(pageAsset, container) : [], [pageAsset, container]);
   if (!containerData) {
     return jsx(ContainerNotFound, {
       identifier: container.identifier

package/lib/next/contexts/DotCMSPageContext.esm.js

@@ -7,7 +7,7 @@ import { createContext } from 'react';
  * @category Contexts
  */
 const DotCMSPageContext = /*#__PURE__*/createContext({
-  pageAsset: {},
+  pageAsset: undefined,
   mode: 'production',
   userComponents: {},
   slots: {}

package/lib/next/hooks/useEditableDotCMSPage.esm.js

@@ -86,28 +86,34 @@ import { registerStyleEditorSchemas } from '@dotcms/uve/internal';
  *   </div>
  * );
  * ```
- * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
+ * @param {DotCMSPageResponse | Pick<DotCMSPageResponse, 'graphql'>} [pageResponse] - The page data
+ * from client.page.get(). If that call threw (draft/non-live page, permissions), pass
+ * `{ graphql: error.graphql }` instead — `DotErrorPage` always carries the GraphQL query it
+ * attempted, even on failure. Forwarding it here lets the editor retry the fetch with edit-mode
+ * permissions and deliver the real content via `postMessage`; pass `undefined` and there's nothing
+ * for the editor to retry.
  *
  * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
  * The structure includes page data and any GraphQL content that was requested.
  */
 const useEditableDotCMSPage = pageResponse => {
-  const [updatedPageResponse, setUpdatedPageResponse] = useState(pageResponse);
+  const pageData = pageResponse && 'pageAsset' in pageResponse ? pageResponse : undefined;
+  const [updatedPageResponse, setUpdatedPageResponse] = useState(pageData);
   useEffect(() => {
-    var _pageResponse$pageAss, _pageResponse$styleEd;
+    var _pageData$pageAsset, _pageData$styleEditor;
     if (!getUVEState()) {
       // Outside UVE, state only ever comes from props - keep it in sync with
       // whatever pageResponse the parent re-renders with (e.g. after a client-side
       // navigation refetches page data), since the initial useState value above is
       // otherwise frozen after the first render.
-      setUpdatedPageResponse(pageResponse);
+      setUpdatedPageResponse(pageData);
       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;
+    // Inside UVE, pageResponse can be undefined, or just `{ graphql }` (e.g. a draft/non-live
+    // page the customer's own fetch treated as a 404, but still knows the GraphQL query it
+    // attempted) - forward it to initUVE either way so the editor has something to retry with
+    // edit-mode permissions. Without a query to retry, CONTENT_CHANGES never arrives.
+    const pageURI = pageData == null || (_pageData$pageAsset = pageData.pageAsset) == null || (_pageData$pageAsset = _pageData$pageAsset.page) == null ? void 0 : _pageData$pageAsset.pageURI;
     const {
       destroyUVESubscriptions
     } = initUVE(pageResponse);
@@ -117,13 +123,13 @@ const useEditableDotCMSPage = pageResponse => {
     if (pageURI) {
       updateNavigation(pageURI);
     }
-    if ((_pageResponse$styleEd = pageResponse.styleEditorSchemas) != null && _pageResponse$styleEd.length) {
-      registerStyleEditorSchemas(pageResponse.styleEditorSchemas);
+    if (pageData != null && (_pageData$styleEditor = pageData.styleEditorSchemas) != null && _pageData$styleEditor.length) {
+      registerStyleEditorSchemas(pageData.styleEditorSchemas);
     }
     return () => {
       destroyUVESubscriptions();
     };
-  }, [pageResponse]);
+  }, [pageResponse, pageData]);
   useEffect(() => {
     const {
       unsubscribe

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dotcms/react",
-  "version": "26.8.3-1-next.2478",
+  "version": "26.8.3-1-next.2490",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@dotcms/uve": "26.8.3-1-next.2478",
-    "@dotcms/client": "26.8.3-1-next.2478",
+    "@dotcms/uve": "26.8.3-1-next.2490",
+    "@dotcms/client": "26.8.3-1-next.2490",
     "@tinymce/tinymce-react": "6.2.1"
   },
   "devDependencies": {

package/src/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.d.ts

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
 import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
 export interface DotCMSLayoutBodyProps<TContentlet extends DotCMSBasicContentlet = DotCMSBasicContentlet> {
-    page: DotCMSPageAsset;
+    /**
+     * The DotCMS page asset. Can be `undefined` while `useEditableDotCMSPage` is still waiting
+     * on the UVE editor to resolve a draft/non-live page — the component renders `ErrorMessage`
+     * until it arrives.
+     */
+    page: DotCMSPageAsset | undefined;
     components: {
         [key: string]: React.ComponentType<TContentlet> | React.ComponentType<any>;
     };

package/src/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { DotCMSPageAsset, DotCMSPageRendererMode } from '@dotcms/types';
 interface DotCMSPageProviderProps {
-    page: DotCMSPageAsset;
+    page: DotCMSPageAsset | undefined;
     components: Record<string, React.ComponentType<any>>;
     mode: DotCMSPageRendererMode;
     slots?: Record<string, ReactNode>;

package/src/lib/next/contexts/DotCMSPageContext.d.ts

@@ -11,7 +11,11 @@ import { DotCMSBasicContentlet, DotCMSPageAsset, DotCMSPageRendererMode } from '
  * @property {Record<string, ReactNode>} [slots] - Pre-rendered server component nodes keyed by contentlet identifier
  */
 export interface DotCMSPageContextProps {
-    pageAsset: DotCMSPageAsset;
+    /**
+     * Can be `undefined` while `useEditableDotCMSPage` is still waiting on the UVE editor to
+     * resolve a draft/non-live page, or when permissions leave it unset outside the editor.
+     */
+    pageAsset: DotCMSPageAsset | undefined;
     mode: DotCMSPageRendererMode;
     userComponents: Record<string, React.ComponentType<DotCMSBasicContentlet>>;
     slots?: Record<string, ReactNode>;

package/src/lib/next/hooks/useEditableDotCMSPage.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSComposedPageResponse, DotCMSExtendedPageResponse } from '@dotcms/types';
+import { DotCMSComposedPageResponse, DotCMSPageResponse, DotCMSExtendedPageResponse } from '@dotcms/types';
 /**
  * Custom hook to manage the editable state of a DotCMS page.
  *
@@ -82,9 +82,14 @@ import { DotCMSComposedPageResponse, DotCMSExtendedPageResponse } from '@dotcms/
  *   </div>
  * );
  * ```
- * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
+ * @param {DotCMSPageResponse | Pick<DotCMSPageResponse, 'graphql'>} [pageResponse] - The page data
+ * from client.page.get(). If that call threw (draft/non-live page, permissions), pass
+ * `{ graphql: error.graphql }` instead — `DotErrorPage` always carries the GraphQL query it
+ * attempted, even on failure. Forwarding it here lets the editor retry the fetch with edit-mode
+ * permissions and deliver the real content via `postMessage`; pass `undefined` and there's nothing
+ * for the editor to retry.
  *
  * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
  * The structure includes page data and any GraphQL content that was requested.
  */
-export declare const useEditableDotCMSPage: <T extends DotCMSExtendedPageResponse>(pageResponse: DotCMSComposedPageResponse<T>) => DotCMSComposedPageResponse<T>;
+export declare const useEditableDotCMSPage: <T extends DotCMSExtendedPageResponse>(pageResponse: DotCMSComposedPageResponse<T> | Pick<DotCMSPageResponse, "graphql"> | undefined) => DotCMSComposedPageResponse<T> | undefined;