@pushwoosh/dumb-components 1.0.42 → 1.0.44

package/Chip/Chip.constants.d.ts

@@ -0,0 +1,5 @@
+import { type ChipVariant } from './Chip.types';
+export declare const variants: Record<ChipVariant, {
+    color: string;
+    background: string;
+}>;

package/Chip/Chip.constants.js

@@ -0,0 +1,15 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const variants = {
+  primary: {
+    color: Color.PRIMARY,
+    background: Color.BRIGHT_LIGHT
+  },
+  danger: {
+    color: Color.DANGER,
+    background: Color.DANGER_LIGHT
+  },
+  warning: {
+    color: Color.WARNING,
+    background: Color.WARNING_LIGHT
+  }
+};

package/Chip/Chip.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Chip: React.ForwardRefExoticComponent<{
+    $variant?: import("./Chip.types").ChipVariant;
+    $selected?: boolean;
+    $onClose?: React.HTMLAttributes<HTMLDivElement>["onClick"];
+} & {
+    children?: React.ReactNode | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;

package/Chip/Chip.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { ChipStyled } from './styles';
+export const Chip = forwardRef(({
+  $variant = 'primary',
+  $selected,
+  $onClose,
+  children,
+  ...rest
+}, ref) => {
+  return React.createElement(ChipStyled, {
+    ref: ref,
+    "$variant": $variant,
+    "$selected": $selected,
+    "$closeable": !!$onClose,
+    ...rest
+  }, children, $onClose && React.createElement(CloseIcon, {
+    size: "small",
+    onClick: $onClose,
+    as: "span",
+    className: "closeIcon"
+  }));
+});

package/Chip/Chip.types.d.ts

@@ -0,0 +1,7 @@
+import { type HTMLAttributes, type PropsWithChildren } from 'react';
+export type ChipVariant = 'primary' | 'danger' | 'warning';
+export type ChipProps = PropsWithChildren<{
+    $variant?: ChipVariant;
+    $selected?: boolean;
+    $onClose?: HTMLAttributes<HTMLDivElement>['onClick'];
+}> & HTMLAttributes<HTMLDivElement>;

package/Chip/Chip.types.js

@@ -0,0 +1 @@
+export {};

package/Chip/index.d.ts

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/Chip/index.js

@@ -0,0 +1 @@
+export { Chip } from './Chip';

package/Chip/styles.d.ts

@@ -0,0 +1,6 @@
+import type { ChipVariant } from './Chip.types';
+export declare const ChipStyled: import("styled-components").StyledComponent<"div", any, {
+    $variant: ChipVariant;
+    $selected?: boolean;
+    $closeable?: boolean;
+}, never>;

package/Chip/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { variants } from './Chip.constants';
+export const ChipStyled = styled.div.withConfig({
+  displayName: "ChipStyled",
+  componentId: "sc-e2g39l-0"
+})(["display:inline-flex;min-height:24px;padding:0 ", " 0 8px;align-items:center;gap:4px;cursor:default;border-radius:4px;color:", ";background:", ";font-weight:400;line-height:140%;& > .closeIcon{cursor:pointer;transition:transform 0.2s;&:hover{transform:scale(1.3);}}"], ({
+  $closeable
+}) => $closeable ? '4px' : '8px', ({
+  $variant,
+  $selected
+}) => $selected ? Color.CLEAR : variants[$variant].color, ({
+  $variant,
+  $selected
+}) => $selected ? Color.MAIN : variants[$variant].background);

package/PushPreview/PushPreview.js

@@ -15,8 +15,8 @@ export function PushPreview(props) {
     isLoading = false,
     width
   } = props;
-  const title = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title, language) || appTitle;
-  const content = getLocalizedContent(pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content, language);
+  const title = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.title) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedTitle), language) || appTitle;
+  const content = getLocalizedContent((pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.content) || (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.localizedContent), language);
   const icon = content ? (pushPreset === null || pushPreset === void 0 ? void 0 : pushPreset.icon) || appIcon : PREVIEW_ICON_URL;
   const isLocked = !pushPreset || !content || view === 'silent';
   if (isLoading) {

package/PushPreview/types.d.ts

@@ -1,8 +1,9 @@
 export type PushPreviewView = 'compact' | 'extended' | 'silent';
 export interface PushBasicData {
     title?: Record<string, string>;
-    subTitle?: Record<string, string>;
     content?: Record<string, string>;
+    localizedTitle?: Record<string, string>;
+    localizedContent?: Record<string, string>;
     icon?: string;
 }
 export interface PushPreviewProps<T> {

package/RichMessageEditor/DropContent.d.ts

@@ -0,0 +1,5 @@
+import { type FC, type PropsWithChildren } from 'react';
+export declare const DropContent: FC<PropsWithChildren<{
+    top: number;
+    left: number;
+}>>;

package/RichMessageEditor/DropContent.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { DropContentStyled } from './RichMessageEditor.styled';
+export const DropContent = ({
+  top,
+  left,
+  children
+}) => {
+  return React.createElement(DropContentStyled, {
+    style: {
+      top,
+      left
+    }
+  }, children);
+};

package/RichMessageEditor/EmojiPicker.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+type EmojiPickerProps = {
+    onEmojiSelect: (emoji: string) => void;
+};
+export declare const EmojiPicker: FC<EmojiPickerProps>;
+export {};

package/RichMessageEditor/EmojiPicker.js

@@ -0,0 +1,17 @@
+import Picker from '@emoji-mart/react';
+import React from 'react';
+async function data() {
+  const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
+  return response.json();
+}
+export const EmojiPicker = ({
+  onEmojiSelect
+}) => {
+  return React.createElement(Picker, {
+    data: data,
+    onEmojiSelect: emoji => {
+      onEmojiSelect(emoji.native);
+    },
+    theme: "light"
+  });
+};

package/RichMessageEditor/RichMessageEditor.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { type RichMessageEditorProps } from './RichMessageEditor.types';
+export declare const RichMessageEditor: FC<RichMessageEditorProps>;

package/RichMessageEditor/RichMessageEditor.js

@@ -0,0 +1,114 @@
+import { isEqual } from 'es-toolkit';
+import React, { useRef, useState } from 'react';
+import { Transforms } from 'slate';
+import { Collapse, Horizontal, useClickAway } from '@pushwoosh/kit-helpers';
+import { FieldBox } from '../FieldBox';
+import EmojiIcon from './assets/EmojiIcon.svg';
+import PersonalizationIcon from './assets/PersonalizationIcon.svg';
+import { DropContent } from './DropContent';
+import { EmojiPicker } from './EmojiPicker';
+import { ImSpan } from './RichMessageEditor.styled';
+import { getDcByPath } from './slate/helpers';
+import { SlateEditable, SlateEditor } from './slate/SlateEditor';
+export const RichMessageEditor = ({
+  title,
+  initialValue,
+  minHeight,
+  canUsePersonalization,
+  canUseEmoji,
+  onChange,
+  renderDynamicContent
+}) => {
+  const rootRef = useRef(null);
+  const [showDrop, setShowDrop] = useState();
+  const [isFocused, setIsFocused] = useState(false);
+  const showDropArea = val => {
+    const rect = rootRef.current.getBoundingClientRect();
+    setShowDrop({
+      ...val,
+      xValue: rect.right + 8,
+      yValue: rect.top
+    });
+  };
+  const onSelectionChange = selection => {
+    if (isEqual(selection.anchor, selection.focus)) {
+      const {
+        path
+      } = selection.anchor;
+      if (path.length > 2) {
+        showDropArea({
+          type: 'personalization',
+          path: path.slice(0, -1)
+        });
+      } else {
+        setShowDrop(undefined);
+      }
+    }
+  };
+  const insertDynamicContent = editor => {
+    const newDC = {
+      type: 'dc',
+      dc: {
+        tagName: '',
+        modifier: 'regular',
+        defaultValue: ''
+      },
+      children: [{
+        text: ''
+      }]
+    };
+    Transforms.insertNodes(editor, newDC);
+    Transforms.select(editor, editor.selection);
+    onSelectionChange(editor.selection);
+  };
+  useClickAway(true, rootRef, () => {
+    setShowDrop(undefined);
+    setIsFocused(false);
+  });
+  return React.createElement(SlateEditor, {
+    initialValue: initialValue,
+    onChange: onChange,
+    onSelectionChange: onSelectionChange
+  }, ({
+    editor
+  }) => React.createElement(FieldBox, {
+    title: title,
+    boxRef: rootRef,
+    actions: React.createElement(Collapse, {
+      expanded: isFocused
+    }, React.createElement(Horizontal, {
+      "$gap": 8
+    }, canUsePersonalization && React.createElement(ImSpan, {
+      onClick: () => insertDynamicContent(editor)
+    }, React.createElement(PersonalizationIcon, null), "Personalization"), canUseEmoji && React.createElement(ImSpan, {
+      onClick: () => showDropArea({
+        type: 'emoji'
+      })
+    }, React.createElement(EmojiIcon, null), "Emoji")))
+  }, React.createElement(SlateEditable, {
+    minHeight: minHeight,
+    onFocus: () => {
+      setIsFocused(true);
+      const {
+        selection
+      } = editor;
+      if (selection) {
+        onSelectionChange(selection);
+      }
+    }
+  }), showDrop && React.createElement(DropContent, {
+    top: showDrop.yValue,
+    left: showDrop.xValue
+  }, showDrop.type === 'personalization' && (renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
+    dc: getDcByPath(editor.children, showDrop.path).dc,
+    onChange: newDC => {
+      Transforms.setNodes(editor, {
+        dc: newDC
+      }, {
+        at: showDrop.path
+      });
+    }
+  })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
+    onEmojiSelect: s => editor.insertText(s)
+  }))));
+};

package/RichMessageEditor/RichMessageEditor.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const ImSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DropContentStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/RichMessageEditor/RichMessageEditor.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+export const ImSpan = styled.span.withConfig({
+  displayName: "ImSpan",
+  componentId: "sc-kdvgj9-0"
+})(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);
+export const DropContentStyled = styled.div.withConfig({
+  displayName: "DropContentStyled",
+  componentId: "sc-kdvgj9-1"
+})(["position:fixed;z-index:10;"]);

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import type { DynamicContent } from './slate/types';
+type DropValueCommon = {
+    xValue: number;
+    yValue: number;
+};
+export type DropValuePersonalization = {
+    type: 'personalization';
+    path: number[];
+};
+export type DropValueEmoji = {
+    type: 'emoji';
+};
+export type DropValue = DropValueCommon & DropValueEmoji | DropValueCommon & DropValuePersonalization;
+export type RichMessageEditorProps = {
+    title: ReactNode;
+    initialValue: string;
+    onChange: (value: string) => void;
+    minHeight?: string;
+    canUsePersonalization?: boolean;
+    canUseEmoji?: boolean;
+    renderDynamicContent?: (props: {
+        dc: DynamicContent;
+        onChange: (newDC: DynamicContent) => void;
+    }) => ReactNode;
+};
+export {};

package/RichMessageEditor/RichMessageEditor.types.js

@@ -0,0 +1 @@
+export {};

package/RichMessageEditor/RichMessageViewer.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+import { type RichMessageEditorContent } from './types';
+export declare const RichMessageViewer: FC<{
+    value: RichMessageEditorContent | string;
+    lineBreaks?: boolean;
+}>;

package/RichMessageEditor/RichMessageViewer.js

@@ -0,0 +1,28 @@
+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
+}) => {
+  const content = useMemo(() => {
+    return Array.isArray(value) ? value : string2content(value);
+  }, [value]);
+  return arrayJoinReact(content.map((node, index) => {
+    const children = node.children.map((child, idx) => {
+      if (isElement(child) && child.type === 'dc') {
+        return (
+          // eslint-disable-next-line react/no-array-index-key
+          React.createElement(DynamicContentRoot, {
+            key: idx
+          }, React.createElement(DynamicContentBracket, null, '{'), "\u00A0", child.dc.tagName, "\u00A0", React.createElement(DynamicContentBracket, null, '}'))
+        );
+      }
+      return child.text;
+    });
+    return React.createElement(Fragment, {
+      key: index
+    }, children); // eslint-disable-line react/no-array-index-key
+  }), lineBreaks ? React.createElement("br", null) : ' ');
+};

package/RichMessageEditor/RichMessageViewer.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const DynamicContentRoot: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DynamicContentBracket: import("styled-components").StyledComponent<"span", any, {}, never>;

package/RichMessageEditor/RichMessageViewer.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { Color, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+export const DynamicContentRoot = styled.span.withConfig({
+  displayName: "DynamicContentRoot",
+  componentId: "sc-f10jz5-0"
+})(["background-color:", ";border-radius:", ";white-space:nowrap;font-weight:", ";padding:0 2px;"], Color.EXCEPTIONAL_LIGHT, ShapeRadius.CONTROL, FontWeight.MEDIUM);
+export const DynamicContentBracket = styled.span.withConfig({
+  displayName: "DynamicContentBracket",
+  componentId: "sc-f10jz5-1"
+})(["color:", ";"], Color.EXCEPTIONAL);

package/RichMessageEditor/assets/EmojiIcon.svg

@@ -0,0 +1,14 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M2.75 8C2.75 5.10051 5.10051 2.75 8 2.75C10.8995 2.75 13.25 5.10051 13.25 8C13.25 10.8995 10.8995 13.25 8 13.25C5.10051 13.25 2.75 10.8995 2.75 8ZM8 1.25C4.27208 1.25 1.25 4.27208 1.25 8C1.25 11.7279 4.27208 14.75 8 14.75C11.7279 14.75 14.75 11.7279 14.75 8C14.75 4.27208 11.7279 1.25 8 1.25ZM5.66669 7.33334C6.21897 7.33334 6.66669 6.88563 6.66669 6.33334C6.66669 5.78106 6.21897 5.33334 5.66669 5.33334C5.1144 5.33334 4.66669 5.78106 4.66669 6.33334C4.66669 6.88563 5.1144 7.33334 5.66669 7.33334ZM11.3333 6.33334C11.3333 6.88563 10.8856 7.33334 10.3333 7.33334C9.78103 7.33334 9.33331 6.88563 9.33331 6.33334C9.33331 5.78106 9.78103 5.33334 10.3333 5.33334C10.8856 5.33334 11.3333 5.78106 11.3333 6.33334ZM11.4225 9.94557C11.6215 9.58228 11.4883 9.12647 11.125 8.9275C10.7617 8.72852 10.3059 8.86173 10.1069 9.22502C9.81509 9.75789 9.03837 10.2439 8.00002 10.2439C6.96166 10.2439 6.18494 9.75789 5.89309 9.22502C5.69412 8.86173 5.23831 8.72852 4.87501 8.9275C4.51172 9.12647 4.37852 9.58228 4.57749 9.94557C5.19205 11.0676 6.54974 11.7439 8.00002 11.7439C9.45029 11.7439 10.808 11.0676 11.4225 9.94557Z"
+    fill="currentColor"
+  />
+</svg>

package/RichMessageEditor/assets/PersonalizationIcon.svg

@@ -0,0 +1,14 @@
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5 1.25C5.41421 1.25 5.75 1.58579 5.75 2C5.75 2.41421 5.41421 2.75 5 2.75C3.75736 2.75 2.75 3.75736 2.75 5V6.75C2.75 7.13672 2.64024 7.49781 2.45017 7.80381C2.37602 7.92319 2.37602 8.07682 2.45017 8.1962C2.64024 8.50219 2.75 8.86328 2.75 9.25V11C2.75 12.2426 3.75736 13.25 5 13.25C5.41421 13.25 5.75 13.5858 5.75 14C5.75 14.4142 5.41421 14.75 5 14.75C2.92893 14.75 1.25 13.0711 1.25 11V9.25C1.25 8.97386 1.02614 8.75 0.75 8.75C0.335786 8.75 0 8.41421 0 8C0 7.58579 0.335786 7.25 0.75 7.25C1.02614 7.25 1.25 7.02614 1.25 6.75V5C1.25 2.92893 2.92893 1.25 5 1.25ZM11 1.25C10.5858 1.25 10.25 1.58579 10.25 2C10.25 2.41421 10.5858 2.75 11 2.75C12.2426 2.75 13.25 3.75736 13.25 5V6.75C13.25 7.13672 13.3598 7.49781 13.5498 7.80381C13.624 7.92319 13.624 8.07682 13.5498 8.1962C13.3598 8.50219 13.25 8.86328 13.25 9.25V11C13.25 12.2426 12.2426 13.25 11 13.25C10.5858 13.25 10.25 13.5858 10.25 14C10.25 14.4142 10.5858 14.75 11 14.75C13.0711 14.75 14.75 13.0711 14.75 11V9.25C14.75 8.97386 14.9739 8.75 15.25 8.75C15.6642 8.75 16 8.41421 16 8C16 7.58579 15.6642 7.25 15.25 7.25C14.9739 7.25 14.75 7.02614 14.75 6.75V5C14.75 2.92893 13.0711 1.25 11 1.25ZM4.00438 7.98268C4.00677 7.4304 4.45643 6.98464 5.00871 6.98703C5.56099 6.98943 6.00675 7.43909 6.00436 7.99137C6.00196 8.54365 5.5523 8.98941 5.00002 8.98702C4.44774 8.98462 4.00198 8.53496 4.00438 7.98268ZM8.00434 7.00001C7.45206 6.99761 7.00241 7.44338 7.00001 7.99566C6.99761 8.54794 7.44338 8.99759 7.99566 8.99999C8.54794 9.00239 8.99759 8.55662 8.99999 8.00434C9.00239 7.45206 8.55662 7.00241 8.00434 7.00001ZM11.0087 7.01304C10.4564 7.01064 10.0068 7.4564 10.0044 8.00868C10.002 8.56096 10.4477 9.01062 11 9.01302C11.5523 9.01541 12.002 8.56965 12.0044 8.01737C12.0068 7.46509 11.561 7.01543 11.0087 7.01304Z"
+    fill="currentColor"
+  />
+</svg>

package/RichMessageEditor/index.d.ts

@@ -0,0 +1,3 @@
+export { type RichMessageEditorContent } from './types';
+export { RichMessageEditor } from './RichMessageEditor';
+export { RichMessageViewer } from './RichMessageViewer';

package/RichMessageEditor/index.js

@@ -0,0 +1,2 @@
+export { RichMessageEditor } from './RichMessageEditor';
+export { RichMessageViewer } from './RichMessageViewer';

package/RichMessageEditor/slate/DynamicContentElement.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function renderElement(props: any): React.JSX.Element;

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Transforms } from 'slate';
+import { useSelected, useSlateStatic } from 'slate-react';
+import { findPath } from './helpers';
+import { Chip } from '../../Chip';
+const DynamicContentElementComponent = ({
+  attributes,
+  element,
+  children
+}) => {
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const {
+    tagName
+  } = element.dc;
+  return React.createElement(Chip, {
+    ...attributes,
+    as: "span",
+    contentEditable: false,
+    "$variant": tagName ? 'primary' : 'danger',
+    "$selected": selected,
+    "$onClose": event => {
+      event.preventDefault();
+      event.stopPropagation();
+      const path = findPath(editor.children, element);
+      Transforms.delete(editor, {
+        at: path
+      });
+    }
+  }, React.createElement("span", null, tagName || 'Not set'), children);
+};
+const Element = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  switch (element.type) {
+    case 'dc':
+      return React.createElement(DynamicContentElementComponent, {
+        ...props
+      });
+    default:
+      return React.createElement("p", {
+        ...attributes
+      }, children);
+  }
+};
+export function renderElement(props) {
+  return React.createElement(Element, {
+    ...props
+  });
+}

package/RichMessageEditor/slate/SlateEditor.d.ts

@@ -0,0 +1,18 @@
+import { type FC, type ReactNode } from 'react';
+import { type Selection } from 'slate';
+import { type CustomEditor } from './custom-types';
+type SlateEditor = {
+    initialValue: string;
+    onChange: (value: string) => void;
+    onSelectionChange: (selection: Selection) => void;
+    children: (props: {
+        editor: CustomEditor;
+    }) => ReactNode;
+};
+export declare const SlateEditor: FC<SlateEditor>;
+type SlateEditableProps = {
+    minHeight?: string;
+    onFocus?: () => void;
+};
+export declare const SlateEditable: FC<SlateEditableProps>;
+export {};

package/RichMessageEditor/slate/SlateEditor.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { Slate } from 'slate-react';
+import { renderElement } from './DynamicContentElement';
+import { content2string, string2content } from './helpers';
+import { EditableStyled } from './SlateEditor.styled';
+import { createMKEditor } from './SlateEditor.utils';
+export const SlateEditor = ({
+  initialValue: initialValueString,
+  onChange,
+  onSelectionChange,
+  children
+}) => {
+  const [initialValue] = useState(() => string2content(initialValueString));
+  const [editor] = useState(createMKEditor);
+  return React.createElement(Slate, {
+    editor: editor,
+    initialValue: initialValue,
+    onValueChange: value => onChange(content2string(value)),
+    onSelectionChange: onSelectionChange
+  }, children({
+    editor
+  }));
+};
+export const SlateEditable = ({
+  minHeight,
+  onFocus
+}) => {
+  return React.createElement(EditableStyled, {
+    "$minHeight": minHeight,
+    renderElement: renderElement,
+    onFocus: onFocus
+  });
+};

package/RichMessageEditor/slate/SlateEditor.styled.d.ts

@@ -0,0 +1,16 @@
+export declare const EditableStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    decorate?: ((entry: import("slate").NodeEntry) => import("slate").DecoratedRange[]) | undefined;
+    onDOMBeforeInput?: ((event: InputEvent) => void) | undefined;
+    placeholder?: string | undefined;
+    readOnly?: boolean | undefined;
+    role?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    renderElement?: ((props: import("slate-react").RenderElementProps) => import("react").JSX.Element) | undefined;
+    renderLeaf?: ((props: import("slate-react").RenderLeafProps) => import("react").JSX.Element) | undefined;
+    renderPlaceholder?: ((props: import("slate-react").RenderPlaceholderProps) => import("react").JSX.Element) | undefined;
+    scrollSelectionIntoView?: ((editor: import("slate-react").ReactEditor, domRange: Range) => void) | undefined;
+    as?: React.ElementType<any> | undefined;
+    disableDefaultStyles?: boolean | undefined;
+} & import("react").TextareaHTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
+    $minHeight?: string;
+}, never>;

package/RichMessageEditor/slate/SlateEditor.styled.js

@@ -0,0 +1,9 @@
+import { Editable } from 'slate-react';
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+export const EditableStyled = styled(Editable).withConfig({
+  displayName: "EditableStyled",
+  componentId: "sc-1frhl1f-0"
+})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " &:focus{border-color:", ";outline:none;}& > p{margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.BRIGHT, Color.FORM, ShapeRadius.CONTROL, ({
+  $minHeight
+}) => $minHeight && `min-height: ${$minHeight};`, Color.BRIGHT);

package/RichMessageEditor/slate/SlateEditor.utils.d.ts

@@ -0,0 +1,5 @@
+import { type CustomTypes, type Editor } from 'slate';
+import { type DynamicContent } from './types';
+export declare const withDynamicContent: (editor: Editor) => import("./custom-types").CustomEditor;
+export declare const createMKEditor: () => import("./custom-types").CustomEditor;
+export declare const insertDynamicContent: (editor: CustomTypes["Editor"], dc: DynamicContent) => void;

package/RichMessageEditor/slate/SlateEditor.utils.js

@@ -0,0 +1,28 @@
+import { Transforms, createEditor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact } from 'slate-react';
+export const withDynamicContent = editor => {
+  const {
+    isInline,
+    isVoid
+  } = editor;
+  editor.isInline = element => {
+    return element.type === 'dc' ? true : isInline(element);
+  };
+  editor.isVoid = element => {
+    return element.type === 'dc' ? true : isVoid(element);
+  };
+  return editor;
+};
+export const createMKEditor = () => withDynamicContent(withReact(withHistory(createEditor())));
+export const insertDynamicContent = (editor, dc) => {
+  const newDC = {
+    type: 'dc',
+    dc,
+    children: [{
+      text: ''
+    }]
+  };
+  Transforms.insertNodes(editor, newDC);
+  Transforms.move(editor);
+};

package/RichMessageEditor/slate/helpers.d.ts

@@ -0,0 +1,10 @@
+import type { Descendant } from 'slate';
+import { type CustomElement, type DynamicContent, type DynamicContentElement, type SlateEditorContent } from './types';
+export declare function isElement(x: Descendant): x is CustomElement;
+export declare function getDcByPath(value: SlateEditorContent, path: number[]): DynamicContentElement | undefined;
+export declare function findAllDc(value: SlateEditorContent): DynamicContentElement[];
+export declare function findPath(value: SlateEditorContent, elToFind: Descendant): number[];
+export declare function parseDc(value: string): DynamicContent;
+export declare function stringifyDc(dc: DynamicContent): string;
+export declare function string2content(value: string): SlateEditorContent;
+export declare function content2string(state: SlateEditorContent): string;

package/RichMessageEditor/slate/helpers.js

@@ -0,0 +1,104 @@
+export function isElement(x) {
+  return !!x.type;
+}
+export function getDcByPath(value, path) {
+  let current = value;
+  for (let i = 0; i < path.length; i += 1) {
+    const el = current[path[i]];
+    if (el) {
+      if (isElement(el) && el.type === 'dc') {
+        return el;
+      }
+    } else {
+      return undefined;
+    }
+    current = el.children;
+  }
+  return undefined;
+}
+export function findAllDc(value) {
+  const dces = [];
+  function walkDeep(children) {
+    for (const el of children) {
+      if (isElement(el)) {
+        if (el.type === 'dc') {
+          dces.push(el);
+        }
+        walkDeep(el.children);
+      }
+    }
+  }
+  walkDeep(value);
+  return dces;
+}
+export function findPath(value, elToFind) {
+  for (let i = 0; i < value.length; i++) {
+    const el = value[i];
+    if (el === elToFind) {
+      return [i];
+    }
+    if (isElement(el)) {
+      const path = findPath(el.children, elToFind);
+      if (path.length > 0) {
+        return [i, ...path];
+      }
+    }
+  }
+  return [];
+}
+export function parseDc(value) {
+  const [tagName, modifier, defaultValue = ''] = value.slice(1, -1).split('|');
+  return {
+    tagName,
+    modifier,
+    defaultValue
+  };
+}
+export function stringifyDc(dc) {
+  const {
+    tagName,
+    modifier,
+    defaultValue
+  } = dc;
+  return `{${tagName}|${modifier}${defaultValue ? `|${defaultValue}` : ''}}`;
+}
+// This regex matches a string that starts with '{', contains at least one '|', and ends with '}'.
+// It captures the entire string, including the '{' and '}'.
+// The lookahead (?=[^}]*\|) ensures that there is at least one '|' before the closing '}'.
+// The regex is not greedy, so it will stop at the first '}' after the last '|'.
+// This means it will match strings like '{tag|modifier|default}', '{tag|modifier}', and '{tag|modifier|}'.
+// 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 = /(\{(?=[^}]*\|)[^}]*?})/;
+export function string2content(value) {
+  return value.split('\n').map(line => ({
+    type: 'paragraph',
+    children: line.split(DynamicContentRegex).map((text, index) => {
+      if (index % 2 === 1) {
+        return {
+          type: 'dc',
+          dc: parseDc(text),
+          children: [{
+            text: ''
+          }]
+        };
+      }
+      return {
+        text
+      };
+    })
+  }));
+}
+export function content2string(state) {
+  return state.map(el => {
+    const {
+      children
+    } = el;
+    return children.map(el => {
+      if (isElement(el) && el.type === 'dc') {
+        return stringifyDc(el.dc);
+      }
+      return el.text;
+    }).join('');
+  }).join('\n');
+}

package/RichMessageEditor/slate/types.d.ts

@@ -0,0 +1,26 @@
+import type { Descendant } from 'slate';
+export type SlateEditorContent = Descendant[];
+export type DynamicContent = {
+    tagName: string;
+    modifier: string;
+    defaultValue: string;
+};
+export type ParagraphElement = {
+    type: 'paragraph';
+    children: SlateEditorContent;
+};
+export type CustomElement = DynamicContentElement | ParagraphElement;
+export type CustomText = {
+    bold?: boolean;
+    italic?: boolean;
+    code?: boolean;
+    text: string;
+};
+export type EmptyText = {
+    text: string;
+};
+export type DynamicContentElement = {
+    type: 'dc';
+    dc: DynamicContent;
+    children: EmptyText[];
+};

package/RichMessageEditor/slate/types.js

@@ -0,0 +1 @@
+export {};

package/RichMessageEditor/types.d.ts

@@ -0,0 +1,2 @@
+import { type SlateEditorContent as RichMessageEditorContent } from './slate/types';
+export { type RichMessageEditorContent };

package/RichMessageEditor/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -37,11 +37,12 @@
     "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/lang-liquid": "^6.2.2",
+    "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react-dom": "^2.1.2",
     "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.2",
-    "@pushwoosh/kit-icons": "^2.1.1",
+    "@pushwoosh/kit-icons": "^2.1.2",
     "@pushwoosh/kit-typography": "^1.7.3",
     "@tippyjs/react": "^4.2.6",
     "@uiw/codemirror-themes": "^4.23.8",
@@ -50,7 +51,10 @@
     "lodash": "^4.17.21",
     "polished": "^4.3.1",
     "react-select": "^5.10.0",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "slate": "^0.112.0",
+    "slate-history": "^0.110.3",
+    "slate-react": "^0.112.1"
   },
   "peerDependencies": {
     "react": ">= 16.14.0",