@pushwoosh/dumb-components 1.0.48 → 1.0.50

package/RichMessageEditor/RichMessageEditor.js

@@ -14,6 +14,7 @@ export const RichMessageEditor = ({
   title,
   initialValue,
   minHeight,
+  error,
   canUsePersonalization,
   canUseEmoji,
   onChange,
@@ -74,6 +75,7 @@ export const RichMessageEditor = ({
   }) => React.createElement(FieldBox, {
     title: title,
     boxRef: rootRef,
+    error: error,
     actions: React.createElement(Collapse, {
       expanded: isFocused
     }, React.createElement(Horizontal, {

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -17,6 +17,7 @@ export type RichMessageEditorProps = {
     initialValue: string;
     onChange: (value: string) => void;
     minHeight?: string;
+    error?: ReactNode;
     canUsePersonalization?: boolean;
     canUseEmoji?: boolean;
     renderDynamicContent?: (props: {

package/RichMessageEditor/RichMessageViewer.js

@@ -1,7 +1,6 @@
 import React, { Fragment, useMemo } from 'react';
 import { DynamicContentBracket, DynamicContentRoot } from './RichMessageViewer.styled';
 import { isElement, string2content } from './slate/helpers';
-const arrayJoinReact = (arr, separator) => arr.flatMap((item, index) => index ? [separator, item] : [item]);
 export const RichMessageViewer = ({
   value,
   lineBreaks
@@ -9,7 +8,8 @@ export const RichMessageViewer = ({
   const content = useMemo(() => {
     return Array.isArray(value) ? value : string2content(value);
   }, [value]);
-  return arrayJoinReact(content.map((node, index) => {
+  const separator = lineBreaks ? React.createElement("br", null) : ' ';
+  return content.map((node, index) => {
     const children = node.children.map((child, idx) => {
       if (isElement(child) && child.type === 'dc') {
         return (
@@ -21,8 +21,11 @@ export const RichMessageViewer = ({
       }
       return child.text;
     });
-    return React.createElement(Fragment, {
-      key: index
-    }, children); // eslint-disable-line react/no-array-index-key
-  }), lineBreaks ? React.createElement("br", null) : ' ');
+    return (
+      // eslint-disable-next-line react/no-array-index-key
+      React.createElement(Fragment, {
+        key: index
+      }, index > 0 && separator, children)
+    );
+  });
 };

package/RichMessageEditor/slate/helpers.d.ts

@@ -1,10 +1,64 @@
 import type { Descendant } from 'slate';
 import { type CustomElement, type DynamicContent, type DynamicContentElement, type SlateEditorContent } from './types';
+/**
+ * Checks if a Slate node is a custom element
+ * @param x - The node to check
+ * @returns True if the node is a custom element
+ */
 export declare function isElement(x: Descendant): x is CustomElement;
+/**
+ * Retrieves a dynamic content element by its path in the Slate document
+ * @param value - The Slate editor content
+ * @param path - Array of indices representing the path to the element
+ * @returns The dynamic content element if found, undefined otherwise
+ */
 export declare function getDcByPath(value: SlateEditorContent, path: number[]): DynamicContentElement | undefined;
+/**
+ * Finds all dynamic content elements in the editor content
+ * @param value - The Slate editor content
+ * @returns Array of all dynamic content elements
+ */
 export declare function findAllDc(value: SlateEditorContent): DynamicContentElement[];
+/**
+ * Finds the path to a specific element in the Slate document
+ * @param value - The Slate editor content
+ * @param elToFind - The element to find
+ * @returns Array of indices representing the path to the element, empty if not found
+ */
 export declare function findPath(value: SlateEditorContent, elToFind: Descendant): number[];
+/**
+ * Parses a dynamic content string into a DynamicContent object
+ * @param value - String in format "{tagName|modifier|defaultValue}"
+ * @returns DynamicContent object with parsed components
+ */
 export declare function parseDc(value: string): DynamicContent;
+/**
+ * Converts a DynamicContent object to its string representation
+ * @param dc - The DynamicContent object
+ * @returns String representation in format "{tagName|modifier|defaultValue}"
+ */
 export declare function stringifyDc(dc: DynamicContent): string;
+/**
+ * Converts a string to Slate editor content, parsing dynamic content tags
+ * @param value - The input string to convert
+ * @returns SlateEditorContent with properly structured paragraphs and dynamic content
+ */
 export declare function string2content(value: string): SlateEditorContent;
+/**
+ * Converts Slate editor content to a string, including dynamic content tags
+ * @param state - The Slate editor content to convert
+ * @returns String representation of the content with dynamic content tags
+ */
 export declare function content2string(state: SlateEditorContent): string;
+/**
+ * Validates if the content has valid dynamic content elements
+ * @param value - The Slate editor content to validate
+ * @returns True if all dynamic content elements are valid, false otherwise
+ */
+export declare function validateContent(value: SlateEditorContent): boolean;
+/**
+ * Validates if the string has valid dynamic content elements
+ * @param value - The input string to validate
+ * @returns True if all dynamic content elements are valid, false otherwise
+ */
+export declare function validateContentSting(value: string): boolean;

package/RichMessageEditor/slate/helpers.js

@@ -1,6 +1,17 @@
+/**
+ * Checks if a Slate node is a custom element
+ * @param x - The node to check
+ * @returns True if the node is a custom element
+ */
 export function isElement(x) {
   return !!x.type;
 }
+/**
+ * Retrieves a dynamic content element by its path in the Slate document
+ * @param value - The Slate editor content
+ * @param path - Array of indices representing the path to the element
+ * @returns The dynamic content element if found, undefined otherwise
+ */
 export function getDcByPath(value, path) {
   let current = value;
   for (let i = 0; i < path.length; i += 1) {
@@ -16,6 +27,11 @@ export function getDcByPath(value, path) {
   }
   return undefined;
 }
+/**
+ * Finds all dynamic content elements in the editor content
+ * @param value - The Slate editor content
+ * @returns Array of all dynamic content elements
+ */
 export function findAllDc(value) {
   const dces = [];
   function walkDeep(children) {
@@ -31,6 +47,12 @@ export function findAllDc(value) {
   walkDeep(value);
   return dces;
 }
+/**
+ * Finds the path to a specific element in the Slate document
+ * @param value - The Slate editor content
+ * @param elToFind - The element to find
+ * @returns Array of indices representing the path to the element, empty if not found
+ */
 export function findPath(value, elToFind) {
   for (let i = 0; i < value.length; i++) {
     const el = value[i];
@@ -46,6 +68,11 @@ export function findPath(value, elToFind) {
   }
   return [];
 }
+/**
+ * Parses a dynamic content string into a DynamicContent object
+ * @param value - String in format "{tagName|modifier|defaultValue}"
+ * @returns DynamicContent object with parsed components
+ */
 export function parseDc(value) {
   const [tagName, modifier, defaultValue = ''] = value.slice(1, -1).split('|');
   return {
@@ -54,6 +81,11 @@ export function parseDc(value) {
     defaultValue
   };
 }
+/**
+ * Converts a DynamicContent object to its string representation
+ * @param dc - The DynamicContent object
+ * @returns String representation in format "{tagName|modifier|defaultValue}"
+ */
 export function stringifyDc(dc) {
   const {
     tagName,
@@ -70,6 +102,11 @@ export function stringifyDc(dc) {
 // It will not match strings like '{tag|modifier|default}' if there is no '}' after the last '|'.
 // This regex is used to split the string into parts, where the parts are either text or dynamic content.
 const DynamicContentRegex = /(\{(?=[^}]*\|)[^}]*?})/;
+/**
+ * Converts a string to Slate editor content, parsing dynamic content tags
+ * @param value - The input string to convert
+ * @returns SlateEditorContent with properly structured paragraphs and dynamic content
+ */
 export function string2content(value) {
   return value.split('\n').map(line => ({
     type: 'paragraph',
@@ -89,6 +126,11 @@ export function string2content(value) {
     })
   }));
 }
+/**
+ * Converts Slate editor content to a string, including dynamic content tags
+ * @param state - The Slate editor content to convert
+ * @returns String representation of the content with dynamic content tags
+ */
 export function content2string(state) {
   return state.map(el => {
     const {
@@ -101,4 +143,31 @@ export function content2string(state) {
       return el.text;
     }).join('');
   }).join('\n');
+}
+/**
+ * Validates if the content has valid dynamic content elements
+ * @param value - The Slate editor content to validate
+ * @returns True if all dynamic content elements are valid, false otherwise
+ */
+export function validateContent(value) {
+  for (const el of value) {
+    if (isElement(el)) {
+      if (el.type === 'dc') {
+        return !!el.dc.tagName;
+      }
+      if (!validateContent(el.children)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
+/**
+ * Validates if the string has valid dynamic content elements
+ * @param value - The input string to validate
+ * @returns True if all dynamic content elements are valid, false otherwise
+ */
+export function validateContentSting(value) {
+  const content = string2content(value);
+  return validateContent(content);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",