@pushwoosh/dumb-components 1.1.229 → 1.1.230

package/RichMessageEditor/RichMessageEditor.js

@@ -25,7 +25,9 @@ export const RichMessageEditor = ({
   title,
   initialValue,
   minHeight,
+  placeholder,
   error,
+  isErrored,
   canUsePersonalization,
   canUseEmoji,
   onChange,
@@ -123,6 +125,8 @@ export const RichMessageEditor = ({
       }),
       children: [_jsx(SlateEditable, {
         minHeight: minHeight,
+        placeholder: placeholder,
+        isErrored: isErrored || !!error,
         onFocus: () => {
           setIsFocused(true);
           const {

package/RichMessageEditor/RichMessageEditor.types.d.ts

@@ -24,8 +24,12 @@ export type RichMessageEditorProps = {
     onChange: (value: string) => void;
     /** Minimum editor height (CSS value). */
     minHeight?: string;
+    /** Hint shown while the editor is empty. */
+    placeholder?: string;
     /** Error message; switches the field to the error state. */
     error?: ReactNode;
+    /** Draw the error border without an error message. */
+    isErrored?: boolean;
     /** Enable inserting personalization (dynamic-content) tokens. */
     canUsePersonalization?: boolean;
     /** Enable the emoji picker. */

package/RichMessageEditor/slate/SlateEditor.d.ts

@@ -12,6 +12,8 @@ type SlateEditor = {
 export declare const SlateEditor: FC<SlateEditor>;
 type SlateEditableProps = {
     minHeight?: string;
+    placeholder?: string;
+    isErrored?: boolean;
     onFocus?: () => void;
     onDelete: () => void;
 };

package/RichMessageEditor/slate/SlateEditor.js

@@ -26,6 +26,8 @@ export const SlateEditor = ({
 };
 export const SlateEditable = ({
   minHeight,
+  placeholder,
+  isErrored,
   onFocus,
   onDelete
 }) => {
@@ -34,6 +36,8 @@ export const SlateEditable = ({
   });
   return _jsx(EditableStyled, {
     "$minHeight": minHeight,
+    "$isErrored": isErrored,
+    placeholder: placeholder,
     renderElement: renderElementPersistent,
     onFocus: onFocus
   });

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

@@ -15,4 +15,5 @@ export declare const EditableStyled: import("styled-components").StyledComponent
     disableDefaultStyles?: boolean | undefined;
 } & import("react").TextareaHTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
     $minHeight?: string;
+    $isErrored?: boolean;
 }, never>;

package/RichMessageEditor/slate/SlateEditor.styled.js

@@ -4,6 +4,8 @@ import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constan
 export const EditableStyled = styled(Editable).withConfig({
   displayName: "EditableStyled",
   componentId: "sc-1frhl1f-0"
-})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";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.CLEAR, Color.BRIGHT, Color.FORM, ShapeRadius.CONTROL, ({
+})(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;", " & [data-slate-placeholder='true']{color:", ";opacity:1 !important;}&:focus{border-color:", ";outline:none;}& > p{position:relative;margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, ({
+  $isErrored
+}) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, ({
   $minHeight
-}) => $minHeight && `min-height: ${$minHeight};`, Color.BRIGHT);
+}) => $minHeight && `min-height: ${$minHeight};`, Color.PHANTOM, Color.BRIGHT);

package/package.json

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