@dotcms/react 0.0.1-beta.9 → 1.0.0

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

@@ -0,0 +1,90 @@
+import { DotCMSComposedPageResponse } from '@dotcms/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 {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
+ *
+ * @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 Partial<Pick<import("@dotcms/types").DotCMSPageResponse, "pageAsset" | "content">>>(pageResponse: DotCMSComposedPageResponse<T>) => DotCMSComposedPageResponse<T>;

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

@@ -1,13 +1,10 @@
-import { DotCMSPageRendererMode } from '../contexts/DotCMSPageContext';
 /**
  * @internal
  * A React hook that determines if the current environment is in development mode.
  *
  * The hook returns `true` if either:
- *   - The context mode (or the optional `renderMode` argument) is set to 'development', or
- *   - The application is running inside the DotCMS editor (as determined by `isInsideEditor()`).
+ *   - The application is running inside the DotCMS editor (as determined by `getUVEState()`).
  *
- * @param {DotCMSPageRendererMode} [renderMode] - Optional override for the render mode.
  * @returns {boolean} - `true` if in development mode or inside the editor; otherwise, `false`.
  */
-export declare const useIsDevMode: (renderMode?: DotCMSPageRendererMode) => boolean;
+export declare const useIsDevMode: () => boolean;