@dotcms/react 1.2.5 → 1.2.6-next.2

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Lists.esm.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+const ListItem = ({
+  children
+}) => {
+  return jsx("li", {
+    children: children
+  });
+};
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+const OrderedList = ({
+  children
+}) => {
+  return jsx("ol", {
+    children: children
+  });
+};
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+const BulletList = ({
+  children
+}) => {
+  return jsx("ul", {
+    children: children
+  });
+};
+
+export { BulletList, ListItem, OrderedList };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/NoComponentProvided.esm.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const NoComponentProvided = ({
+  contentType
+}) => {
+  const style = {
+    backgroundColor: '#fffaf0',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #ed8936'
+  };
+  return jsxs("div", {
+    "data-testid": "no-component-provided",
+    style: style,
+    children: [jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: "Dev Warning"
+    }), ": No component or custom renderer provided for content type", jsx("strong", {
+      style: {
+        color: '#c05621'
+      },
+      children: contentType || 'Unknown'
+    }), ".", jsx("br", {}), "Please refer to the", jsx("a", {
+      href: "https://dev.dotcms.com/docs/block-editor",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      style: {
+        color: '#c05621'
+      },
+      children: "Block Editor Custom Renderers Documentation"
+    }), ' ', "for guidance."]
+  });
+};
+
+export { NoComponentProvided };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.esm.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+const TableRenderer = ({
+  content,
+  blockEditorItem
+}) => {
+  const BlockEditorItemComponent = blockEditorItem;
+  const renderTableContent = node => {
+    var _node$content;
+    return jsx(BlockEditorItemComponent, {
+      content: (_node$content = node.content) != null ? _node$content : []
+    });
+  };
+  return jsxs("table", {
+    children: [jsx("thead", {
+      children: content.slice(0, 1).map((rowNode, rowIndex) => {
+        var _rowNode$content;
+        return jsx("tr", {
+          children: (_rowNode$content = rowNode.content) == null ? void 0 : _rowNode$content.map((cellNode, cellIndex) => {
+            var _cellNode$attrs, _cellNode$attrs2;
+            return jsx("th", {
+              colSpan: Number(((_cellNode$attrs = cellNode.attrs) == null ? void 0 : _cellNode$attrs.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs2 = cellNode.attrs) == null ? void 0 : _cellNode$attrs2.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    }), jsx("tbody", {
+      children: content.slice(1).map((rowNode, rowIndex) => {
+        var _rowNode$content2;
+        return jsx("tr", {
+          children: (_rowNode$content2 = rowNode.content) == null ? void 0 : _rowNode$content2.map((cellNode, cellIndex) => {
+            var _cellNode$attrs3, _cellNode$attrs4;
+            return jsx("td", {
+              colSpan: Number(((_cellNode$attrs3 = cellNode.attrs) == null ? void 0 : _cellNode$attrs3.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs4 = cellNode.attrs) == null ? void 0 : _cellNode$attrs4.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    })]
+  });
+};
+
+export { TableRenderer };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Texts.esm.js

@@ -0,0 +1,157 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+const Bold = ({
+  children
+}) => jsx("strong", {
+  children: children
+});
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+const Italic = ({
+  children
+}) => jsx("em", {
+  children: children
+});
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+const Strike = ({
+  children
+}) => jsx("s", {
+  children: children
+});
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+const Underline = ({
+  children
+}) => jsx("u", {
+  children: children
+});
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+const Paragraph = ({
+  children,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  return jsx("p", {
+    style: attrs,
+    children: children
+  });
+};
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+const Link = ({
+  children,
+  attrs
+}) => {
+  return jsx("a", Object.assign({}, attrs, {
+    children: children
+  }));
+};
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+const Heading = ({
+  children,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  const level = attrs.level || 1;
+  const Tag = `h${level}`;
+  return jsx(Tag, {
+    children: children
+  });
+};
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+const Superscript = ({
+  children
+}) => jsx("sup", {
+  children: children
+});
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+const Subscript = ({
+  children
+}) => jsx("sub", {
+  children: children
+});
+const nodeMarks = {
+  bold: Bold,
+  link: Link,
+  italic: Italic,
+  strike: Strike,
+  subscript: Subscript,
+  underline: Underline,
+  superscript: Superscript
+};
+const defaultMark = {
+  type: '',
+  attrs: {}
+};
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+const TextBlock = (props = {}) => {
+  const {
+    marks = [],
+    text
+  } = props;
+  const mark = marks[0] || defaultMark;
+  const textProps = Object.assign({}, props, {
+    marks: marks.slice(1)
+  });
+  const Component = nodeMarks[mark == null ? void 0 : mark.type];
+  // In React, class is not a valid attribute name, so we need to rename it to className
+  if (mark.attrs) {
+    mark.attrs.className = mark.attrs.class;
+    delete mark.attrs.class;
+  }
+  if (!Component) {
+    return text;
+  }
+  return jsx(Component, {
+    type: mark.type,
+    attrs: mark.attrs,
+    children: jsx(TextBlock, Object.assign({}, textProps))
+  });
+};
+
+export { Bold, Heading, Italic, Link, Paragraph, Strike, Subscript, Superscript, TextBlock, Underline };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Video.esm.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+const DotCMSVideo = ({
+  node
+}) => {
+  const {
+    data,
+    src,
+    mimeType,
+    width,
+    height
+  } = node.attrs;
+  const poster = data == null ? void 0 : data.thumbnail;
+  const posterAttribute = poster ? {
+    poster
+  } : {};
+  return jsxs("video", Object.assign({
+    controls: true,
+    preload: "metadata",
+    width: width,
+    height: height
+  }, posterAttribute, {
+    children: [jsx("track", {
+      default: true,
+      kind: "captions",
+      srcLang: "en"
+    }), jsx("source", {
+      src: src,
+      type: mimeType
+    }), "Your browser does not support the ", jsx("code", {
+      children: "video"
+    }), " element."]
+  }));
+};
+
+export { DotCMSVideo };

package/lib/next/components/DotCMSEditableText/DotCMSEditableText.esm.js

@@ -0,0 +1,181 @@
+import { jsx } from 'react/jsx-runtime';
+import { Editor } from '@tinymce/tinymce-react';
+import { useRef, useState, useEffect } from 'react';
+import { UVE_MODE, DotCMSUVEAction } from '@dotcms/types';
+import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
+import { getUVEState, sendMessageToUVE } from '@dotcms/uve';
+import { __TINYMCE_PATH_ON_DOTCMS__ } from '@dotcms/uve/internal';
+import { TINYMCE_CONFIG } from './utils.esm.js';
+
+/**
+ * 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(() => {
+    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');
+      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('[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);
+    setScriptSrc(createURL.toString());
+    const content = (contentlet == null ? void 0 : contentlet[fieldName]) || '';
+    (_editorRef$current = editorRef.current) == null || _editorRef$current.setContent(content, {
+      format
+    });
+  }, [format, fieldName, contentlet, content]);
+  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("div", {
+    style: {
+      outline: '2px solid #006ce7',
+      borderRadius: '4px'
+    },
+    children: jsx(Editor, {
+      tinymceScriptSrc: scriptSrc,
+      inline: true,
+      onInit: (_, editor) => editorRef.current = editor,
+      init: TINYMCE_CONFIG[mode],
+      initialValue: content,
+      onMouseDown: onMouseDown,
+      onFocusOut: onFocusOut
+    })
+  });
+}
+
+export { DotCMSEditableText };

package/lib/next/components/DotCMSEditableText/utils.esm.js

@@ -0,0 +1,12 @@
+import { __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__ } from '@dotcms/uve/internal';
+
+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)
+};
+
+export { TINYMCE_CONFIG };

package/lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.esm.js

@@ -0,0 +1,42 @@
+import { jsx } from 'react/jsx-runtime';
+import { ErrorMessage } from './components/ErrorMessage.esm.js';
+import { DotCMSPageProvider } from './DotCMSPageProvider.esm.js';
+import { Row } from '../Row/Row.esm.js';
+
+/**
+ * DotCMSLayoutBody component renders the layout body for a DotCMS page.
+ *
+ * It utilizes the dotCMS page asset's layout body to render the page body.
+ * If the layout body does not exist, it renders an error message in the mode is `development`.
+ *
+ * @public
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {DotCMSPageAsset} props.page - The DotCMS page asset containing the layout information.
+ * @param {Record<string, React.ComponentType<DotCMSContentlet>>} [props.components] - mapping of custom components for content rendering.
+ * @param {DotCMSPageRendererMode} [props.mode='production'] - The renderer mode; defaults to 'production'. Alternate modes might trigger different behaviors.
+ * @param {Record<string, ReactNode>} [props.slots] - Pre-rendered server component nodes keyed by contentlet identifier.
+ *
+ * @returns {JSX.Element} The rendered DotCMS page body or an error message if the layout body is missing.
+ *
+ */
+const DotCMSLayoutBody = ({
+  page,
+  components: _components = {},
+  mode: _mode = 'production',
+  slots: _slots = {}
+}) => {
+  var _page$layout;
+  const dotCMSPageBody = page == null || (_page$layout = page.layout) == null ? void 0 : _page$layout.body;
+  return jsx(DotCMSPageProvider, {
+    page: page,
+    components: _components,
+    mode: _mode,
+    slots: _slots,
+    children: dotCMSPageBody ? dotCMSPageBody.rows.map((row, index) => jsx(Row, {
+      row: row
+    }, index)) : jsx(ErrorMessage, {})
+  });
+};
+
+export { DotCMSLayoutBody };

package/lib/next/components/DotCMSLayoutBody/DotCMSPageProvider.esm.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
+
+/**
+ * @internal
+ *
+ * Client boundary that provides the DotCMS page context to the layout tree.
+ * Keeping this separate from DotCMSLayoutBody allows the layout to remain
+ * a server component while only the context provider runs on the client.
+ */
+function DotCMSPageProvider({
+  page,
+  components,
+  mode,
+  slots,
+  children
+}) {
+  return jsx(DotCMSPageContext.Provider, {
+    value: {
+      pageAsset: page,
+      userComponents: components,
+      mode,
+      slots
+    },
+    children: children
+  });
+}
+
+export { DotCMSPageProvider };

package/lib/next/components/DotCMSLayoutBody/components/ErrorMessage.esm.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useIsDevMode } from '../../../hooks/useIsDevMode.esm.js';
+
+/**
+ * Error message component for when the page body is missing
+ *
+ * @return {JSX.Element} Error message component
+ */
+const ErrorMessage = () => {
+  const isDevMode = useIsDevMode();
+  useEffect(() => {
+    console.warn('Missing required layout.body property in page');
+  }, []);
+  return isDevMode && jsxs("div", {
+    "data-testid": "error-message",
+    style: {
+      padding: '1rem',
+      border: '1px solid #e0e0e0',
+      borderRadius: '4px'
+    },
+    children: [jsxs("p", {
+      style: {
+        margin: '0 0 0.5rem',
+        color: '#666'
+      },
+      children: ["The ", jsx("code", {
+        children: "page"
+      }), " is missing the required ", jsx("code", {
+        children: "layout.body"
+      }), " property."]
+    }), jsx("p", {
+      style: {
+        margin: 0,
+        color: '#666'
+      },
+      children: "Make sure the page asset is properly loaded and includes a layout configuration."
+    })]
+  });
+};
+
+export { ErrorMessage };

package/lib/next/components/DotCMSShow/DotCMSShow.esm.js

@@ -0,0 +1,49 @@
+import { UVE_MODE } from '@dotcms/types';
+import { useDotCMSShowWhen } from '../../hooks/useDotCMSShowWhen.esm.js';
+
+/**
+ * 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 = useDotCMSShowWhen(_when);
+  if (!show) {
+    return null;
+  }
+  return children;
+};
+
+export { DotCMSShow };