@dotcms/react 0.0.1-beta.31 → 0.0.1-beta.33

package/next.esm.js

@@ -689,26 +689,29 @@ function DotCMSEditableText({
   mode = 'plain',
   format = 'text',
   contentlet,
-  fieldName = ''
+  fieldName
 }) {
   const editorRef = useRef(null);
   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);
@@ -717,8 +720,7 @@ function DotCMSEditableText({
     (_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) {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.31",
+  "version": "0.0.1-beta.33",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.31",
-    "@dotcms/uve": "0.0.1-beta.31",
+    "@dotcms/client": "0.0.1-beta.33",
+    "@dotcms/uve": "0.0.1-beta.33",
     "@tinymce/tinymce-react": "^6.0.0"
   },
   "devDependencies": {

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DotCMSBasicContentlet } from '@dotcms/types';
 import { DotCMSEditableTextProps } from './utils';
 /**
  * Allows inline edit content pulled from dotCMS API using TinyMCE editor
@@ -27,5 +28,5 @@ import { DotCMSEditableTextProps } from './utils';
  * ```
  * @returns {JSX.Element} A component to edit content inline
  */
-export declare function DotCMSEditableText({ mode, format, contentlet, fieldName }: Readonly<DotCMSEditableTextProps>): JSX.Element;
+export declare function DotCMSEditableText<T extends DotCMSBasicContentlet>({ mode, format, contentlet, fieldName }: Readonly<DotCMSEditableTextProps<T>>): JSX.Element;
 export default DotCMSEditableText;

package/src/lib/next/components/DotCMSEditableText/utils.d.ts

@@ -2,13 +2,13 @@ import { IAllProps } from '@tinymce/tinymce-react';
 import { DotCMSBasicContentlet } from '@dotcms/types';
 export type DOT_EDITABLE_TEXT_FORMAT = 'html' | 'text';
 export type DOT_EDITABLE_TEXT_MODE = 'minimal' | 'full' | 'plain';
-export interface DotCMSEditableTextProps {
+export interface DotCMSEditableTextProps<T extends DotCMSBasicContentlet> {
     /**
      * Represents the field name of the `contentlet` that can be edited
      *
      * @memberof DotCMSEditableTextProps
      */
-    fieldName: string;
+    fieldName: keyof T;
     /**
      * Represents the format of the editor which can be `text` or `html`
      *
@@ -29,7 +29,7 @@ export interface DotCMSEditableTextProps {
      * @type {DotCMSBasicContentlet}
      * @memberof DotCMSEditableTextProps
      */
-    contentlet: DotCMSBasicContentlet;
+    contentlet: T;
 }
 export declare const TINYMCE_CONFIG: {
     [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];

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

@@ -1,4 +1,4 @@
-import { DotCMSPageResponse } from '@dotcms/types';
+import { DotCMSComposedPageResponse } from '@dotcms/types';
 /**
  * Custom hook to manage the editable state of a DotCMS page.
  *
@@ -87,4 +87,4 @@ import { DotCMSPageResponse } from '@dotcms/types';
  * @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: (pageResponse: DotCMSPageResponse) => DotCMSPageResponse;
+export declare const useEditableDotCMSPage: <T extends Partial<Pick<import("@dotcms/types").DotCMSPageResponse, "pageAsset" | "content">>>(pageResponse: DotCMSComposedPageResponse<T>) => DotCMSComposedPageResponse<T>;