@dotcms/react 0.0.1-beta.20 → 0.0.1-beta.22

package/README.md

@@ -3,7 +3,7 @@
 `@dotcms/react` is the official set of React components and hooks designed to work seamlessly with dotCMS, making it easy to render dotCMS pages and use the page builder.
 
 > **Note:** This SDK is currently in **beta** (v0.0.1-beta.13 or newest).
-> 
+>
 > For comprehensive documentation, visit our [developer portal](https://dev.dotcms.com/docs/javascript-sdk-react-library).
 
 > **⚠️ IMPORTANT:** Versions published under the `next` tag (`npm install @dotcms/react@next`) are experimental, in beta, and not code complete. For the current stable and functional version, please use `latest` (`npm install @dotcms/react@latest`). Once we release the stable version, we will provide a migration guide from the alpha to stable version. The current alpha version (under `latest`) will continue to work, allowing you to migrate progressively at your own pace.
@@ -108,7 +108,7 @@ The `DotCMSLayoutBody` component renders the layout body for a DotCMS page.
 #### Usage
 
 ```javascript
-import { DotCMSLayoutBody } from '@dotcms/react';
+import { DotCMSLayoutBody } from '@dotcms/react/next';
 
 const MyPage = ({ page }) => {
     return <DotCMSLayoutBody page={page} components={components} />;
@@ -129,7 +129,7 @@ The `DotCMSShow` component conditionally renders content based on dotCMS conditi
 #### Usage
 
 ```javascript
-import { DotCMSShow } from '@dotcms/react';
+import { DotCMSShow } from '@dotcms/react/next';
 import { UVE_MODE } from '@dotcms/uve';
 
 const MyComponent = () => {
@@ -171,12 +171,12 @@ A custom hook that provides the same functionality as the `DotCMSShow` component
 #### Usage
 
 ```javascript
-import { useDotCMSShowWhen } from '@dotcms/react';
+import { useDotCMSShowWhen } from '@dotcms/react/next';
 import { UVE_MODE } from '@dotcms/uve';
 
 const MyComponent = () => {
     const isVisible = useDotCMSShowWhen(UVE_MODE.EDIT);
-    
+
     return isVisible ? <div>Visible content</div> : null;
 };
 ```
@@ -211,7 +211,7 @@ export const usePageAsset = (currentPageAsset) => {
         }
 
         // Note: If using plain JavaScript instead of TypeScript, you can use the string literals directly
-        sendMessageToEditor({ action: DotCMSUVEAction.CLIENT_READY || "client-ready" }); 
+        sendMessageToEditor({ action: DotCMSUVEAction.CLIENT_READY || "client-ready" });
         const subscription = createUVESubscription(UVEEventType.CONTENT_CHANGES || "changes", (pageAsset) => setPageAsset(pageAsset));
 
         return () => {
@@ -231,7 +231,7 @@ import { usePageAsset } from './hooks/usePageAsset';
 
 const MyPage = ({ initialPageAsset }) => {
     const pageAsset = usePageAsset(initialPageAsset);
-    
+
     return <DotCMSLayoutBody page={pageAsset} components={components} />;
 };
 ```

package/next.esm.js

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
 import { s as styleInject } from './es.json.stringify.esm.js';
-import { getUVEState } from '@dotcms/uve';
+import { getUVEState, initUVE, createUVESubscription } from '@dotcms/uve';
 import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
-import { UVE_MODE } from '@dotcms/uve/types';
+import { UVE_MODE, UVEEventType } from '@dotcms/uve/types';
+import { updateNavigation } from '@dotcms/client';
 
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.
@@ -521,4 +522,122 @@ const DotCMSShow = ({
   return children;
 };
 
-export { DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen };
+/**
+ * Custom hook to manage the editable state of a DotCMS page.
+ *
+ * This hook initializes the Universal Visual Editor (UVE) and subscribes to content changes.
+ * It updates the editable page state when content changes are detected in the UVE,
+ * ensuring your React components always display the latest content when editing in DotCMS.
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ * });
+ *
+ * // Use the hook to get an editable version of the page
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Then use the page data in your component
+ * return (
+ *   <div>
+ *     <h1>{editablePage.page.title}</h1>
+ *     <div dangerouslySetInnerHTML={{ __html: editablePage.page.body }} />
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page with GraphQL content
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ *   graphql: {
+ *     content: {
+ *       products: `ProductCollection(query: "+title:snow", limit: 10, offset: 0, sortBy: "score") {
+ *         title
+ *         urlMap
+ *         category {
+ *           name
+ *           inode
+ *         }
+ *         retailPrice
+ *         image {
+ *           versionPath
+ *         }
+ *       }`
+ *     }
+ *   }
+ * });
+ *
+ * // Use the hook to get an editable version of the page and its content
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Access both page data and GraphQL content
+ * const { page: pageData, content } = editablePage;
+ *
+ * // Use the products from GraphQL content
+ * return (
+ *   <div>
+ *     <h1>{pageData.title}</h1>
+ *     <ProductList products={content.products} />
+ *   </div>
+ * );
+ * ```
+ * @param {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSEditablePage} 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 = editablePage => {
+  const [updatedEditablePage, setUpdatedEditablePage] = useState(editablePage);
+  useEffect(() => {
+    var _editablePage$page$pa, _editablePage$page;
+    if (!getUVEState()) {
+      return;
+    }
+    const pageURI = (_editablePage$page$pa = editablePage == null || (_editablePage$page = editablePage.page) == null ? void 0 : _editablePage$page.pageURI) != null ? _editablePage$page$pa : '/';
+    const {
+      destroyUVESubscriptions
+    } = initUVE(editablePage);
+    // Update the navigation to the pageURI
+    updateNavigation(pageURI);
+    return () => {
+      destroyUVESubscriptions();
+    };
+  }, [editablePage]);
+  useEffect(() => {
+    const {
+      unsubscribe
+    } = createUVESubscription(UVEEventType.CONTENT_CHANGES, payload => {
+      setUpdatedEditablePage(payload);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return updatedEditablePage;
+};
+
+export { DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.20",
+  "version": "0.0.1-beta.22",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.20",
-    "@dotcms/uve": "0.0.1-beta.20",
+    "@dotcms/client": "0.0.1-beta.22",
+    "@dotcms/uve": "0.0.1-beta.22",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",

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

@@ -0,0 +1,90 @@
+import { DotCMSEditablePage } from '@dotcms/uve/types';
+/**
+ * Custom hook to manage the editable state of a DotCMS page.
+ *
+ * This hook initializes the Universal Visual Editor (UVE) and subscribes to content changes.
+ * It updates the editable page state when content changes are detected in the UVE,
+ * ensuring your React components always display the latest content when editing in DotCMS.
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ * });
+ *
+ * // Use the hook to get an editable version of the page
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Then use the page data in your component
+ * return (
+ *   <div>
+ *     <h1>{editablePage.page.title}</h1>
+ *     <div dangerouslySetInnerHTML={{ __html: editablePage.page.body }} />
+ *   </div>
+ * );
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Import the hook and the client
+ * import { useEditableDotCMSPage } from '@dotcms/react';
+ * import { createDotCMSClient } from '@dotcms/client';
+ *
+ * // Create the client
+ * const client = createDotCMSClient({
+ *   dotcmsURL: 'https://your-dotcms-instance.com',
+ *   authToken: 'your-auth-token'
+ * });
+ *
+ * // Get the page with GraphQL content
+ * const page = await client.page.get('/', {
+ *   languageId: '1',
+ *   graphql: {
+ *     content: {
+ *       products: `ProductCollection(query: "+title:snow", limit: 10, offset: 0, sortBy: "score") {
+ *         title
+ *         urlMap
+ *         category {
+ *           name
+ *           inode
+ *         }
+ *         retailPrice
+ *         image {
+ *           versionPath
+ *         }
+ *       }`
+ *     }
+ *   }
+ * });
+ *
+ * // Use the hook to get an editable version of the page and its content
+ * const editablePage = useEditableDotCMSPage(page);
+ *
+ * // Access both page data and GraphQL content
+ * const { page: pageData, content } = editablePage;
+ *
+ * // Use the products from GraphQL content
+ * return (
+ *   <div>
+ *     <h1>{pageData.title}</h1>
+ *     <ProductList products={content.products} />
+ *   </div>
+ * );
+ * ```
+ * @param {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ *
+ * @returns {DotCMSEditablePage} 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: (editablePage: DotCMSEditablePage) => DotCMSEditablePage;

package/src/next.d.ts

@@ -1,3 +1,4 @@
 export { DotCMSLayoutBody } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';
 export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
 export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';
+export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage';