@pushwoosh/dumb-components 1.0.53 → 1.0.55

package/RichMessageEditor/RichMessageEditor.js

@@ -47,21 +47,16 @@ export const RichMessageEditor = ({
       }
     }
   };
-  const insertDynamicContent = editor => {
+  const insertDynamicContent = (editor, dc) => {
     const newDC = {
       type: 'dc',
-      dc: {
-        tagName: '',
-        modifier: 'regular',
-        defaultValue: ''
-      },
+      dc,
       children: [{
         text: ''
       }]
     };
     Transforms.insertNodes(editor, newDC);
     Transforms.select(editor, editor.selection);
-    onSelectionChange(editor.selection);
   };
   const clickAwayHandler = usePersistentFunction(() => {
     setShowDrop(undefined);
@@ -84,45 +79,54 @@ export const RichMessageEditor = ({
     onSelectionChange: onSelectionChange
   }, ({
     editor
-  }) => React.createElement(FieldBox, {
-    title: title,
-    boxRef: rootRef,
-    error: error,
-    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);
+  }) => {
+    var _getDcByPath;
+    return React.createElement(FieldBox, {
+      title: title,
+      boxRef: rootRef,
+      error: error,
+      actions: React.createElement(Collapse, {
+        expanded: isFocused
+      }, React.createElement(Horizontal, {
+        "$gap": 8
+      }, canUsePersonalization && React.createElement(ImSpan, {
+        onClick: () => showDropArea({
+          type: 'personalization'
+        })
+      }, 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' && getDcByPath(editor.children, showDrop.path) && (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)
-  }))));
+    }), showDrop && React.createElement(DropContent, {
+      top: showDrop.yValue,
+      left: showDrop.xValue
+    }, showDrop.type === 'personalization' && (renderDynamicContent === null || renderDynamicContent === void 0 ? void 0 : renderDynamicContent({
+      dc: showDrop.path ? (_getDcByPath = getDcByPath(editor.children, showDrop.path)) === null || _getDcByPath === void 0 ? void 0 : _getDcByPath.dc : undefined,
+      onChange: newDC => {
+        if (showDrop.path) {
+          Transforms.setNodes(editor, {
+            dc: newDC
+          }, {
+            at: showDrop.path
+          });
+        } else {
+          insertDynamicContent(editor, newDC);
+        }
+      }
+    })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
+      onEmojiSelect: s => editor.insertText(s)
+    })));
+  });
 };

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -6,7 +6,7 @@ type DropValueCommon = {
 };
 export type DropValuePersonalization = {
     type: 'personalization';
-    path: number[];
+    path?: number[];
 };
 export type DropValueEmoji = {
     type: 'emoji';
@@ -22,7 +22,7 @@ export type RichMessageEditorProps = {
     canUseEmoji?: boolean;
     onBlur?: () => void;
     renderDynamicContent?: (props: {
-        dc: DynamicContent;
+        dc?: DynamicContent;
         onChange: (newDC: DynamicContent) => void;
     }) => ReactNode;
 };

package/RichMessageEditor/slate/helpers.js

@@ -149,8 +149,8 @@ export function content2string(state) {
 export function validateContent(value) {
   for (const el of value) {
     if (isElement(el)) {
-      if (el.type === 'dc') {
-        return !!el.dc.tagName;
+      if (el.type === 'dc' && !el.dc.tagName) {
+        return false;
       }
       if (!validateContent(el.children)) {
         return false;

package/package.json

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