@dotcms/react 0.0.1-beta.25 → 0.0.1-beta.26

package/next.esm.js

@@ -1,10 +1,12 @@
 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 { UVE_MODE, UVEEventType } from '@dotcms/types';
-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 { s as styleInject } from './web.url-search-params.size.esm.js';
+import { UVE_MODE, UVEEventType, DotCMSUVEAction } from '@dotcms/types';
+import { getUVEState, initUVE, createUVESubscription, sendMessageToUVE } from '@dotcms/uve';
+import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses, __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__ } from '@dotcms/uve/internal';
 import { updateNavigation } from '@dotcms/client';
+import { Editor } from '@tinymce/tinymce-react';
+import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
 
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.
@@ -640,4 +642,176 @@ const useEditableDotCMSPage = editablePage => {
   return updatedEditablePage;
 };
 
-export { DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };
+const DEFAULT_TINYMCE_CONFIG = Object.assign({}, __DEFAULT_TINYMCE_CONFIG__, {
+  licenseKey: 'gpl' // Using self-hosted license key
+});
+const TINYMCE_CONFIG = {
+  full: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.full),
+  plain: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.plain),
+  minimal: Object.assign({}, DEFAULT_TINYMCE_CONFIG, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__.minimal)
+};
+
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotCMSEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotCMSEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotCMSEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+function DotCMSEditableText({
+  mode = 'plain',
+  format = 'text',
+  contentlet,
+  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(() => {
+    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');
+      return;
+    }
+    if (state && state.mode !== UVE_MODE.EDIT) {
+      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.');
+      return;
+    }
+    const createURL = new URL(__TINYMCE_PATH_ON_DOTCMS__, state.dotCMSHost);
+    setScriptSrc(createURL.toString());
+    const content = (contentlet == null ? void 0 : contentlet[fieldName]) || '';
+    (_editorRef$current = editorRef.current) == null || _editorRef$current.setContent(content, {
+      format
+    });
+    setContent(content);
+  }, [format, fieldName, contentlet]);
+  useEffect(() => {
+    var _getUVEState;
+    if (((_getUVEState = getUVEState()) == null ? void 0 : _getUVEState.mode) !== UVE_MODE.EDIT) {
+      return;
+    }
+    const onMessage = ({
+      data
+    }) => {
+      const {
+        name,
+        payload
+      } = data;
+      if (name !== __DOTCMS_UVE_EVENT__.UVE_COPY_CONTENTLET_INLINE_EDITING_SUCCESS) {
+        return;
+      }
+      const {
+        oldInode,
+        inode
+      } = payload;
+      const currentInode = contentlet.inode;
+      const shouldFocus = currentInode === oldInode || currentInode === inode;
+      if (shouldFocus) {
+        var _editorRef$current2;
+        (_editorRef$current2 = editorRef.current) == null || _editorRef$current2.focus();
+      }
+    };
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [contentlet == null ? void 0 : contentlet.inode]);
+  const onMouseDown = event => {
+    var _editorRef$current3;
+    const {
+      onNumberOfPages = 1
+    } = contentlet;
+    const {
+      inode,
+      languageId: language
+    } = contentlet;
+    if (Number(onNumberOfPages) <= 1 || (_editorRef$current3 = editorRef.current) != null && _editorRef$current3.hasFocus()) {
+      return;
+    }
+    event.stopPropagation();
+    event.preventDefault();
+    sendMessageToUVE({
+      action: DotCMSUVEAction.COPY_CONTENTLET_INLINE_EDITING,
+      payload: {
+        dataset: {
+          inode,
+          language,
+          fieldName
+        }
+      }
+    });
+  };
+  const onFocusOut = () => {
+    var _editorRef$current4, _editorRef$current5;
+    const editedContent = ((_editorRef$current4 = editorRef.current) == null ? void 0 : _editorRef$current4.getContent({
+      format: format
+    })) || '';
+    const {
+      inode,
+      languageId: langId
+    } = contentlet;
+    if (!((_editorRef$current5 = editorRef.current) != null && _editorRef$current5.isDirty()) || !didContentChange(editedContent)) {
+      return;
+    }
+    sendMessageToUVE({
+      action: DotCMSUVEAction.UPDATE_CONTENTLET_INLINE_EDITING,
+      payload: {
+        content: editedContent,
+        dataset: {
+          inode,
+          langId,
+          fieldName
+        }
+      }
+    });
+  };
+  const didContentChange = editedContent => {
+    return content !== editedContent;
+  };
+  if (!initEditor) {
+    // We can let the user pass the Child Component and create a root to get the HTML for the editor
+    return jsx("span", {
+      dangerouslySetInnerHTML: {
+        __html: content
+      }
+    });
+  }
+  return jsx(Editor, {
+    tinymceScriptSrc: scriptSrc,
+    inline: true,
+    onInit: (_, editor) => editorRef.current = editor,
+    init: TINYMCE_CONFIG[mode],
+    initialValue: content,
+    onMouseDown: onMouseDown,
+    onFocusOut: onFocusOut
+  });
+}
+
+export { DotCMSEditableText, DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };

package/package.json

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

package/src/lib/next/__test__/mock.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn } from '@dotcms/types';
+import { DotCMSColumnContainer, DotCMSPageAsset, DotPageAssetLayoutColumn, DotCMSBasicContentlet } from '@dotcms/types';
 export declare const MOCK_COLUMN: DotPageAssetLayoutColumn;
 export declare const MOCK_CONTAINER: DotCMSColumnContainer;
 export declare const MOCK_PAGE_ASSET: DotCMSPageAsset;
@@ -9,3 +9,4 @@ export declare const MOCK_CONTAINER_DATA: {
     acceptTypes: string;
     maxContentlets: number;
 };
+export declare const MOCK_CONTENTLET: DotCMSBasicContentlet;

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

@@ -0,0 +1,30 @@
+import { DotCMSEditableTextProps } from './utils';
+/**
+ * Allows inline edit content pulled from dotCMS API using TinyMCE editor
+ *
+ * @export
+ * @component
+ * @param {Readonly<DotCMSEditableTextProps>} props {
+ *     mode = 'plain',
+ *     format = 'text',
+ *     contentlet,
+ *     fieldName = ''
+ * }
+ * @example
+ * ```javascript
+ * import { DotCMSEditableText } from '@dotcms/react';
+ *
+ * const MyContentletWithTitle = ({ contentlet }) => (
+ *     <h2>
+ *         <DotCMSEditableText
+ *             contentlet={contentlet}
+ *             fieldName="title"
+ *             mode='full'
+ *             format='text'/>
+ *     </h2>
+ * );
+ * ```
+ * @returns {JSX.Element} A component to edit content inline
+ */
+export declare function DotCMSEditableText({ mode, format, contentlet, fieldName }: Readonly<DotCMSEditableTextProps>): JSX.Element;
+export default DotCMSEditableText;

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

@@ -0,0 +1,36 @@
+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 {
+    /**
+     * Represents the field name of the `contentlet` that can be edited
+     *
+     * @memberof DotCMSEditableTextProps
+     */
+    fieldName: string;
+    /**
+     * Represents the format of the editor which can be `text` or `html`
+     *
+     * @type {DOT_EDITABLE_TEXT_FORMAT}
+     * @memberof DotCMSEditableTextProps
+     */
+    format?: DOT_EDITABLE_TEXT_FORMAT;
+    /**
+     * Represents the mode of the editor which can be `plain`, `minimal`, or `full`
+     *
+     * @type {DOT_EDITABLE_TEXT_MODE}
+     * @memberof DotCMSEditableTextProps
+     */
+    mode?: DOT_EDITABLE_TEXT_MODE;
+    /**
+     * Represents the `contentlet` that can be inline edited
+     *
+     * @type {DotCMSBasicContentlet}
+     * @memberof DotCMSEditableTextProps
+     */
+    contentlet: DotCMSBasicContentlet;
+}
+export declare const TINYMCE_CONFIG: {
+    [key in DOT_EDITABLE_TEXT_MODE]: IAllProps['init'];
+};

package/src/next.d.ts

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