@pushwoosh/smart-components-kit 1.0.5 → 1.0.7

package/RichMessageEditor/DynamicContentForm.d.ts

@@ -0,0 +1,7 @@
+import { type FC } from 'react';
+import { type DynamicContent } from './types';
+type NewDynamicContentFormProps = {
+    onSubmit: (dc: DynamicContent) => void;
+};
+export declare const NewDynamicContentForm: FC<NewDynamicContentFormProps>;
+export {};

package/RichMessageEditor/DynamicContentForm.js

@@ -0,0 +1,17 @@
+import React, { useState } from 'react';
+import { Button } from '@pushwoosh/dumb-components';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { DynamicContentPicker } from '../DynamicContentPicker';
+export const NewDynamicContentForm = props => {
+  const [dc, setDc] = useState();
+  return React.createElement(DynamicContentPicker, {
+    dc: dc,
+    onChange: setDc
+  }, React.createElement(Horizontal, {
+    "$justifyContent": "end"
+  }, React.createElement(Button, {
+    color: "secondary",
+    onClick: () => props.onSubmit(dc),
+    isDisabled: !dc
+  }, "Insert")));
+};

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,11 @@
+import { type FC, type ReactNode } from 'react';
+type RichMessageEditorProps = {
+    title: ReactNode;
+    initialValue: string;
+    onChange: (value: string) => void;
+    minHeight?: string;
+    canUsePersonalization?: boolean;
+    canUseEmoji?: boolean;
+};
+export declare const RichMessageEditor: FC<RichMessageEditorProps>;
+export {};

package/RichMessageEditor/RichMessageEditor.js

@@ -0,0 +1,133 @@
+import { isEqual } from 'es-toolkit';
+import React, { useRef, useState } from 'react';
+import { Transforms } from 'slate';
+import { Slate, useSlate } from 'slate-react';
+import { FieldBox } from '@pushwoosh/dumb-components';
+import { Collapse, Horizontal, useClickAway } from '@pushwoosh/kit-helpers';
+import { DynamicContentPicker } from '../DynamicContentPicker';
+import { NewDynamicContentForm } from './DynamicContentForm';
+import { EmojiPicker } from './EmojiPicker';
+import { getDcByPath, content2string, string2content } from './helpers';
+import { EmojiIcon } from './images/EmojiIcon';
+import { PersonalizationIcon } from './images/PersonalizationIcon';
+import { DropContentStyled, ImSpan, EditableStyled } from './RichMessageEditor.styled';
+import { createMKEditor, renderElement, insertDynamicContent } from './SlateEditor.utils';
+const DropContent = ({
+  top,
+  left,
+  children
+}) => {
+  return React.createElement(DropContentStyled, {
+    style: {
+      top,
+      left
+    }
+  }, children);
+};
+const ExistsDynamicContent = ({
+  path
+}) => {
+  const editor = useSlate();
+  const el = getDcByPath(editor.children, path);
+  if (!el) {
+    return null;
+  }
+  return React.createElement(DynamicContentPicker, {
+    dc: el.dc,
+    onChange: dc => {
+      Transforms.setNodes(editor, {
+        dc
+      }, {
+        at: path
+      });
+    }
+  });
+};
+export const RichMessageEditor = ({
+  title,
+  initialValue: initialValueString,
+  minHeight,
+  canUsePersonalization,
+  canUseEmoji,
+  onChange
+}) => {
+  const rootRef = useRef(null);
+  const [initialValue] = useState(() => string2content(initialValueString));
+  const [editor] = useState(createMKEditor);
+  const [showDrop, setShowDrop] = useState();
+  const [isFocused, setIsFocused] = useState(false);
+  const onClickDrop = 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) {
+        onClickDrop({
+          type: 'personalization',
+          path: path.slice(0, -1)
+        });
+      } else {
+        setShowDrop(undefined);
+      }
+    }
+  };
+  const onFocus = () => {
+    setIsFocused(true);
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      onSelectionChange(selection);
+    }
+  };
+  useClickAway(true, rootRef, () => {
+    setShowDrop(undefined);
+    setIsFocused(false);
+  });
+  return React.createElement(Slate, {
+    editor: editor,
+    initialValue: initialValue,
+    onValueChange: value => onChange(content2string(value)),
+    onSelectionChange: onSelectionChange
+  }, React.createElement(FieldBox, {
+    title: title,
+    boxRef: rootRef,
+    actions: React.createElement(Collapse, {
+      expanded: isFocused
+    }, React.createElement(Horizontal, {
+      "$gap": 8
+    }, canUsePersonalization && React.createElement(ImSpan, {
+      onClick: () => onClickDrop({
+        type: 'personalization'
+      })
+    }, React.createElement(PersonalizationIcon, null), "Personalization"), canUseEmoji && React.createElement(ImSpan, {
+      onClick: () => onClickDrop({
+        type: 'emoji'
+      })
+    }, React.createElement(EmojiIcon, null), "Emoji")))
+  }, React.createElement(EditableStyled, {
+    "$minHeight": minHeight,
+    renderElement: renderElement,
+    onFocus: onFocus
+  }), showDrop && React.createElement(DropContent, {
+    top: showDrop.yValue,
+    left: showDrop.xValue
+  }, showDrop.type === 'personalization' && (showDrop.path ? React.createElement(ExistsDynamicContent, {
+    path: showDrop.path
+  }) : React.createElement(NewDynamicContentForm, {
+    onSubmit: dc => {
+      insertDynamicContent(editor, dc);
+      setShowDrop(undefined);
+    }
+  })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
+    onEmojiSelect: s => editor.insertText(s)
+  }))));
+};

package/RichMessageEditor/RichMessageEditor.styled.d.ts

@@ -0,0 +1,22 @@
+export declare const ImSpan: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const DropContentStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+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>;
+export declare const DynamicContentStyled: import("styled-components").StyledComponent<"span", any, {
+    $selected?: boolean;
+}, never>;
+export declare const TimesSpan: import("styled-components").StyledComponent<"span", any, {}, never>;

package/RichMessageEditor/RichMessageEditor.styled.js

@@ -0,0 +1,25 @@
+import { Editable } from 'slate-react';
+import styled from 'styled-components';
+import { Color, FontSize, FontWeight, LineHeight, ShapeRadius } from '@pushwoosh/kit-constants';
+export const ImSpan = styled.span.withConfig({
+  displayName: "ImSpan",
+  componentId: "sc-1pyacsp-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-1pyacsp-1"
+})(["position:fixed;z-index:10;"]);
+export const EditableStyled = styled(Editable).withConfig({
+  displayName: "EditableStyled",
+  componentId: "sc-1pyacsp-2"
+})(["font-weight:", ";font-size:", ";line-height:", ";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, LineHeight.REGULAR, Color.MAIN, Color.BRIGHT, Color.FORM, ShapeRadius.CONTROL, ({
+  $minHeight
+}) => $minHeight && `min-height: ${$minHeight};`, Color.BRIGHT);
+export const DynamicContentStyled = styled.span.withConfig({
+  displayName: "DynamicContentStyled",
+  componentId: "sc-1pyacsp-3"
+})(["display:inline-block;position:relative;color:white;background-color:", ";border-radius:4px;padding-left:4px;padding-right:18px;margin-left:2px;margin-right:2px;box-shadow:0 0 0 1px ", ";cursor:pointer;"], Color.MAIN, props => props.$selected ? '#114B5057' : Color.MAIN);
+export const TimesSpan = styled.span.withConfig({
+  displayName: "TimesSpan",
+  componentId: "sc-1pyacsp-4"
+})(["position:absolute;display:inline-block;top:0;right:0;width:20px;height:20px;cursor:pointer;transition:transform 0.2s;&:before,&:after{content:'';position:absolute;background-color:white;top:10px;right:4px;width:9px;height:1px;rotate:45deg;}&:after{rotate:-45deg;}&:hover{&:before,&:after{transform:scale(1.2);}}"]);

package/RichMessageEditor/RichMessageViewerContent.d.ts

@@ -0,0 +1,6 @@
+import { type FC } from 'react';
+import type { RichMessageContent } from './types';
+export declare const RichMessageViewerContent: FC<{
+    content: RichMessageContent;
+    lineBreaks?: boolean;
+}>;

package/RichMessageEditor/RichMessageViewerContent.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/no-array-index-key */
+import React, { Fragment } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { isElement } from './helpers';
+export const RichMessageViewerContent = ({
+  content,
+  lineBreaks
+}) => {
+  return content.map((node, index) => {
+    let children = node.children.map((child, idx) => {
+      if (isElement(child) && child.type === 'dc') {
+        return React.createElement("span", {
+          key: idx,
+          style: {
+            backgroundColor: Color.WARNING_LIGHT_HOVER,
+            outline: `2px solid ${Color.WARNING_LIGHT_HOVER}`,
+            borderRadius: 4
+          }
+        }, child.dc.tagName);
+      }
+      return child.text;
+    }).join('');
+    if (index) {
+      children = React.createElement(Fragment, {
+        key: index
+      }, lineBreaks ? React.createElement("br", null) : ' ', children);
+    }
+    return children;
+  });
+};

package/RichMessageEditor/RichMessageViewerString.d.ts

@@ -0,0 +1,5 @@
+import { type FC } from 'react';
+export declare const RichMessageViewerString: FC<{
+    text: string;
+    lineBreaks?: boolean;
+}>;

package/RichMessageEditor/RichMessageViewerString.js

@@ -0,0 +1,13 @@
+import React, { useMemo } from 'react';
+import { string2content } from './helpers';
+import { RichMessageViewerContent } from './RichMessageViewerContent';
+export const RichMessageViewerString = ({
+  text,
+  lineBreaks
+}) => {
+  const content = useMemo(() => string2content(text), [text]);
+  return React.createElement(RichMessageViewerContent, {
+    content: content,
+    lineBreaks: lineBreaks
+  });
+};

package/RichMessageEditor/SlateEditor.utils.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type CustomTypes } from 'slate';
+import { type DynamicContent } from '../DynamicContentPicker';
+export declare const insertDynamicContent: (editor: CustomTypes["Editor"], dc: DynamicContent) => void;
+export declare const createMKEditor: () => import("./custom-types").CustomEditor;
+export declare function renderElement(props: any): React.JSX.Element;

package/RichMessageEditor/SlateEditor.utils.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Transforms, createEditor } from 'slate';
+import { withHistory } from 'slate-history';
+import { withReact, useSelected, useSlateStatic } from 'slate-react';
+import { findPath } from './helpers';
+import { DynamicContentStyled, TimesSpan } from './RichMessageEditor.styled';
+import { withDynamicContent } from './withDynamicContent';
+export const insertDynamicContent = (editor, dc) => {
+  const newDC = {
+    type: 'dc',
+    dc,
+    children: [{
+      text: ''
+    }]
+  };
+  Transforms.insertNodes(editor, newDC);
+  Transforms.move(editor);
+};
+export const createMKEditor = () => withDynamicContent(withReact(withHistory(createEditor())));
+const DynamicContentElementComponent = ({
+  attributes,
+  element,
+  children
+}) => {
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  return React.createElement(DynamicContentStyled, {
+    ...attributes,
+    "$selected": selected,
+    contentEditable: false
+  }, React.createElement("span", null, element.dc.tagName), children, React.createElement(TimesSpan, {
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      const path = findPath(editor.children, element);
+      Transforms.delete(editor, {
+        at: path
+      });
+    }
+  }));
+};
+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/helpers.d.ts

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

package/RichMessageEditor/helpers.js

@@ -0,0 +1,96 @@
+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 string2content(value) {
+  return value.split('\n').map(line => ({
+    type: 'paragraph',
+    children: line.split(/({\w+\|[^}]+})/).map((text, index) => {
+      if (index % 2 === 1) {
+        return {
+          type: 'dc',
+          dc: parseDc(text),
+          children: [{
+            text: ''
+          }]
+        };
+      }
+      return {
+        text
+      };
+    })
+  }));
+}
+export function stringifyDc(dc) {
+  const {
+    tagName,
+    modifier,
+    defaultValue
+  } = dc;
+  return `{${tagName}|${modifier}${defaultValue ? `|${defaultValue}` : ''}}`;
+}
+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/images/EmojiIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EmojiIcon: () => React.JSX.Element;

package/RichMessageEditor/images/EmojiIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const EmojiIcon = () => React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "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"
+}));

package/RichMessageEditor/images/PersonalizationIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PersonalizationIcon: () => React.JSX.Element;

package/RichMessageEditor/images/PersonalizationIcon.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export const PersonalizationIcon = () => React.createElement("svg", {
+  width: "16",
+  height: "16",
+  viewBox: "0 0 16 16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "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"
+}));

package/RichMessageEditor/index.d.ts

@@ -0,0 +1,3 @@
+export { RichMessageEditor } from './RichMessageEditor';
+export { RichMessageViewerContent } from './RichMessageViewerContent';
+export { RichMessageViewerString } from './RichMessageViewerString';

package/RichMessageEditor/index.js

@@ -0,0 +1,3 @@
+export { RichMessageEditor } from './RichMessageEditor';
+export { RichMessageViewerContent } from './RichMessageViewerContent';
+export { RichMessageViewerString } from './RichMessageViewerString';

package/RichMessageEditor/types.d.ts

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

package/RichMessageEditor/types.js

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

package/RichMessageEditor/withDynamicContent.d.ts

@@ -0,0 +1,2 @@
+import { type Editor } from 'slate';
+export declare const withDynamicContent: (editor: Editor) => import("./custom-types").CustomEditor;

package/RichMessageEditor/withDynamicContent.js

@@ -0,0 +1,13 @@
+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;
+};

package/index.d.ts

@@ -3,3 +3,4 @@ export * from './context';
 export * from './DynamicContentPicker';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
+export * from './RichMessageEditor';

package/index.js

@@ -2,4 +2,5 @@ export * from './EmailTemplatePreview';
 export * from './context';
 export * from './DynamicContentPicker';
 export * from './PlatformsConfigurationDrawer';
-export * from './LanguagesSelector';
+export * from './LanguagesSelector';
+export * from './RichMessageEditor';

package/package.json

@@ -15,11 +15,15 @@
   },
   "pre-commit": "check",
   "dependencies": {
+    "@emoji-mart/react": "^1.1.1",
     "@pushwoosh/dumb-components": "^1.0.39",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.1",
     "@pushwoosh/kit-icons": "^2.1.1",
-    "@pushwoosh/kit-typography": "^1.7.3"
+    "@pushwoosh/kit-typography": "^1.7.3",
+    "slate": "^0.112.0",
+    "slate-history": "^0.110.3",
+    "slate-react": "^0.112.1"
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^1.0.17",
@@ -47,5 +51,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.5"
+  "version": "1.0.7"
 }