@dotcms/react 0.0.1-beta.4 → 0.0.1-beta.5

package/index.esm.js

@@ -1,7 +1,8 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { s as styleInject, f as functionUncurryThis, t as toString$4, r as requireObjectCoercible$1, a as toIntegerOrInfinity$1, i as iteratorDefine, b as internalState, c as createIterResultObject$2, d as fails$2, w as wellKnownSymbol$4, e as descriptors, g as classofRaw$1, h as aCallable$2, j as functionBindNative, m as makeBuiltInExports, o as objectDefineProperty, k as objectIsPrototypeOf, l as functionCall, n as anObject$4, p as getMethod$2, q as iterators, u as getBuiltIn$1, v as isCallable$2, x as classof$3, y as inspectSource$1, z as createPropertyDescriptor$2, A as isNullOrUndefined$1, B as tryToString$1, C as toObject$1, D as lengthOfArrayLike$1, E as global$3, F as defineBuiltIn$5, G as arraySlice$2, _ as _export, H as setToStringTag$2, I as iteratorCreateConstructor, J as isObject$1, K as objectCreate, L as hasOwnProperty_1, M as objectAssign } from './es.regexp.to-string.esm.js';
 import { useState, useEffect, createContext, useRef, useContext, createElement, forwardRef } from 'react';
-import { isInsideEditor, initEditor, updateNavigation, destroyEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
+import { isInsideEditor, initEditor, updateNavigation, destroyEditor, postMessageToEditor, CLIENT_ACTIONS, DotCmsClient, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
+import { createUVESubscription } from '@dotcms/uve';
 import { Editor } from '@tinymce/tinymce-react';
 
 var isPure = false;
@@ -49,12 +50,13 @@ const useDotcmsEditor = ({
    */
   useEffect(() => {
     const insideEditor = isInsideEditor();
-    const client = DotCmsClient.instance;
     if (!insideEditor || !onReload) {
       return;
     }
-    client.editor.on('changes', () => onReload == null ? void 0 : onReload());
-    return () => client.editor.off('changes');
+    const {
+      unsubscribe
+    } = createUVESubscription('changes', () => onReload());
+    return () => unsubscribe();
   }, [onReload]);
   /**
    * Sends a message to the editor when the client is ready.
@@ -69,20 +71,21 @@ const useDotcmsEditor = ({
     });
   }, [pathname, editor]);
   /**
-   * Updates the page asset when changes are made in the editor.
+   * Old
    */
   useEffect(() => {
     if (!isInsideEditor()) {
       return;
     }
-    const client = DotCmsClient.instance;
-    client.editor.on('changes', data => {
+    const {
+      unsubscribe
+    } = createUVESubscription('changes', data => {
       const pageAsset = data;
       setState(state => Object.assign({}, state, {
         pageAsset
       }));
     });
-    return () => client.editor.off('changes');
+    return () => unsubscribe();
   }, []);
   return state;
 };

package/next.esm.js

@@ -652,4 +652,87 @@ const DotCMSLayoutBody = ({
   });
 };
 
-export { DotCMSLayoutBody };
+/**
+ * Custom hook to determine if the current UVE (Universal Visual Editor) mode
+ * matches the specified mode. This hook is useful for conditionally rendering
+ * components based on the UVE mode.
+ *
+ * @param {UVE_MODE} when - The UVE mode to check against.
+ * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
+ *
+ * @example
+ * // Basic usage: Check if the UVE is in edit mode
+ * const showInEditMode = useShowInUVE(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useShowInUVE(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useShowInUVE(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+const useShowInUVE = when => {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    var _getUVEState;
+    setShow(((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) === when);
+  }, [when]);
+  return show;
+};
+
+/**
+ * DotCMSShow component is used to conditionally render its children
+ * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
+ * is in a specified mode and only renders its children in that case.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
+ * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
+ *
+ * @example
+ * // Basic usage: Render content only in edit mode
+ * <DotCMSShow when={UVE_MODE.EDIT}>
+ *     <div>Edit Mode Content</div>
+ * </DotCMSShow>
+ *
+ * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
+ *
+ * @example
+ * // Render content in preview mode
+ * <DotCMSShow when={UVE_MODE.PREVIEW}>
+ *     <MyCustomPreviewComponent />
+ * </DotCMSShow>
+ *
+ * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
+ *
+ * @example
+ * // Render content in live mode
+ * <DotCMSShow when={UVE_MODE.LIVE}>
+ *     <LiveContentComponent />
+ * </DotCMSShow>
+ *
+ * // LiveContentComponent will only be rendered if the UVE is in live mode.
+ */
+const DotCMSShow = ({
+  children,
+  when: _when = UVE_MODE.EDIT
+}) => {
+  const show = useShowInUVE(_when);
+  if (!show) {
+    return null;
+  }
+  return children;
+};
+
+export { DotCMSLayoutBody, DotCMSShow, useShowInUVE };

package/package.json

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

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

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { UVE_MODE } from '@dotcms/uve/types';
+/**
+ * Props for the DotCMSShow component.
+ *
+ * @typedef {Object} DotCMSShowProps
+ * @property {React.ReactNode} children - The children to be rendered when the condition is met.
+ * @property {UVE_MODE} [when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ */
+type DotCMSShowProps = {
+    children: React.ReactNode;
+    when?: UVE_MODE;
+};
+/**
+ * DotCMSShow component is used to conditionally render its children
+ * based on the Universal Visual Editor (UVE) mode. It checks if the UVE
+ * is in a specified mode and only renders its children in that case.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The children to be rendered when the condition is met.
+ * @param {UVE_MODE} [props.when=UVE_MODE.EDIT] - The UVE mode in which the children should be rendered.
+ * @returns {React.ReactNode | null} The children if the current UVE mode matches the `when` prop, otherwise null.
+ *
+ * @example
+ * // Basic usage: Render content only in edit mode
+ * <DotCMSShow when={UVE_MODE.EDIT}>
+ *     <div>Edit Mode Content</div>
+ * </DotCMSShow>
+ *
+ * // This will render <div>Edit Mode Content</div> only if the UVE is in edit mode.
+ *
+ * @example
+ * // Render content in preview mode
+ * <DotCMSShow when={UVE_MODE.PREVIEW}>
+ *     <MyCustomPreviewComponent />
+ * </DotCMSShow>
+ *
+ * // MyCustomPreviewComponent will only be rendered if the UVE is in preview mode.
+ *
+ * @example
+ * // Render content in live mode
+ * <DotCMSShow when={UVE_MODE.LIVE}>
+ *     <LiveContentComponent />
+ * </DotCMSShow>
+ *
+ * // LiveContentComponent will only be rendered if the UVE is in live mode.
+ */
+export declare const DotCMSShow: ({ children, when }: DotCMSShowProps) => import("react").ReactNode;
+export {};

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

@@ -0,0 +1,31 @@
+import { UVE_MODE } from '@dotcms/uve/types';
+/**
+ * Custom hook to determine if the current UVE (Universal Visual Editor) mode
+ * matches the specified mode. This hook is useful for conditionally rendering
+ * components based on the UVE mode.
+ *
+ * @param {UVE_MODE} when - The UVE mode to check against.
+ * @returns {boolean} True if the current UVE mode matches the specified mode, otherwise false.
+ *
+ * @example
+ * // Basic usage: Check if the UVE is in edit mode
+ * const showInEditMode = useShowInUVE(UVE_MODE.EDIT);
+ * if (showInEditMode) {
+ *     // Render edit-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in preview mode
+ * const showInPreviewMode = useShowInUVE(UVE_MODE.PREVIEW);
+ * if (showInPreviewMode) {
+ *     // Render preview-specific components
+ * }
+ *
+ * @example
+ * // Check if the UVE is in live mode
+ * const showInLiveMode = useShowInUVE(UVE_MODE.LIVE);
+ * if (showInLiveMode) {
+ *     // Render live-specific components
+ * }
+ */
+export declare const useShowInUVE: (when: UVE_MODE) => boolean;

package/src/next.d.ts

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