@pushwoosh/dumb-components 1.1.10 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/EmailTemplatePreview/EmailTemplatePreview.js +5 -1
  2. package/EmailTemplatePreview/helpers.d.ts +1 -1
  3. package/EmailTemplatePreview/helpers.js +4 -7
  4. package/{RichMessageEditor → EmojiPicker}/EmojiPicker.d.ts +1 -4
  5. package/EmojiPicker/EmojiPicker.js +29 -0
  6. package/EmojiPicker/index.d.ts +1 -0
  7. package/EmojiPicker/index.js +1 -0
  8. package/EmojiPicker/types.d.ts +7 -0
  9. package/EmojiPicker/types.js +1 -0
  10. package/RichMessageEditor/EditorEmojiPicker.d.ts +6 -0
  11. package/RichMessageEditor/EditorEmojiPicker.js +13 -0
  12. package/RichMessageEditor/EditorEmojiPicker.styled.d.ts +1 -0
  13. package/RichMessageEditor/{EmojiPicker.styled.js → EditorEmojiPicker.styled.js} +3 -3
  14. package/RichMessageEditor/RichMessageEditor.js +2 -2
  15. package/package.json +2 -2
  16. package/RichMessageEditor/EmojiPicker.js +0 -39
  17. package/RichMessageEditor/EmojiPicker.styled.d.ts +0 -1
package/EmailTemplatePreview/EmailTemplatePreview.js CHANGED
@@ -29,7 +29,11 @@ export function EmailTemplatePreview(props) {
29
29
  const [liquidInstance] = useState(createLiquidInstance);
30
30
  const src = useMemo(() => {
31
31
  try {
32
- return liquidInstance.parseAndRenderSync(replacePlaceholders(template, localization), values);
32
+ const realValues = {
33
+ ...localization,
34
+ ...values
35
+ };
36
+ return liquidInstance.parseAndRenderSync(replacePlaceholders(template, realValues), realValues);
33
37
  } catch (e) {
34
38
  console.error('Error in PreviewIframe', e);
35
39
  return `<body style="font-size: 24px; color: darkred">${e.message}</body>`;
package/EmailTemplatePreview/helpers.d.ts CHANGED
@@ -1 +1 @@
1
- export declare function replacePlaceholders(str: string, placeholders: Record<string, string>): string;
1
+ export declare function replacePlaceholders(str: string, values: Record<string, string>): string;
package/EmailTemplatePreview/helpers.js CHANGED
@@ -1,8 +1,5 @@
1
- export function replacePlaceholders(str, placeholders) {
2
- const keys = Object.keys(placeholders);
3
- return keys.reduce((acc, key) => {
4
- const escaped = key.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
5
- const pattern = new RegExp(`{{${escaped}\\|[^}]+}}`, 'g');
6
- return acc.replace(pattern, placeholders[key]);
7
- }, str);
1
+ export function replacePlaceholders(str, values) {
2
+ return str.replace(/\{([^|}]+)\|([^|}]+)(?:\|([^}]*))?}/g, (_, varName, _modifier, defaultValue) => {
3
+ return (varName in values ? values[varName] : defaultValue) || '';
4
+ });
8
5
  }
package/{RichMessageEditor → EmojiPicker}/EmojiPicker.d.ts RENAMED
@@ -1,6 +1,3 @@
1
1
  import { type FC } from 'react';
2
- type EmojiPickerProps = {
3
- onEmojiSelect: (emoji: string) => void;
4
- };
2
+ import { type EmojiPickerProps } from './types';
5
3
  export declare const EmojiPicker: FC<EmojiPickerProps>;
6
- export {};
package/EmojiPicker/EmojiPicker.js ADDED
@@ -0,0 +1,29 @@
1
+ import { Picker } from 'emoji-mart';
2
+ import { createElement, useEffect, useRef } from 'react';
3
+ async function data() {
4
+ const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
5
+ return response.json();
6
+ }
7
+ export const EmojiPicker = props => {
8
+ const ref = useRef(null);
9
+ const instance = useRef(null);
10
+ useEffect(() => {
11
+ if (instance.current) {
12
+ instance.current.update({
13
+ data,
14
+ ...props
15
+ });
16
+ } else {
17
+ var _window;
18
+ const PickerElement = (_window = window) === null || _window === void 0 ? void 0 : _window.customElements.get('em-emoji-picker');
19
+ instance.current = new (PickerElement || Picker)({
20
+ data,
21
+ ...props,
22
+ ref
23
+ });
24
+ }
25
+ }, [props]);
26
+ return createElement('div', {
27
+ ref
28
+ });
29
+ };
package/EmojiPicker/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { EmojiPicker } from './EmojiPicker';
package/EmojiPicker/index.js ADDED
@@ -0,0 +1 @@
1
+ export { EmojiPicker } from './EmojiPicker';
package/EmojiPicker/types.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export type EmojiPickerProps = {
2
+ data?: () => Promise<any>;
3
+ onEmojiSelect: (emoji: {
4
+ native: string;
5
+ }) => void;
6
+ theme?: 'light' | 'dark';
7
+ };
package/EmojiPicker/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/RichMessageEditor/EditorEmojiPicker.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type FC } from 'react';
2
+ type EditorEmojiPickerProps = {
3
+ onEmojiSelect: (emoji: string) => void;
4
+ };
5
+ export declare const EditorEmojiPicker: FC<EditorEmojiPickerProps>;
6
+ export {};
package/RichMessageEditor/EditorEmojiPicker.js ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styled';
3
+ import { EmojiPicker } from '../EmojiPicker';
4
+ export const EditorEmojiPicker = ({
5
+ onEmojiSelect
6
+ }) => {
7
+ return React.createElement(EditorEmojiPickerStyled, null, React.createElement(EmojiPicker, {
8
+ onEmojiSelect: emoji => {
9
+ onEmojiSelect(emoji.native);
10
+ },
11
+ theme: "light"
12
+ }));
13
+ };
package/RichMessageEditor/EditorEmojiPicker.styled.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const EditorEmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
package/RichMessageEditor/{EmojiPicker.styled.js → EditorEmojiPicker.styled.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  import styled from 'styled-components';
2
2
  import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
3
- export const EmojiPickerStyled = styled.div.withConfig({
4
- displayName: "EmojiPickerStyled",
5
- componentId: "sc-1bxjwgk-0"
3
+ export const EditorEmojiPickerStyled = styled.div.withConfig({
4
+ displayName: "EditorEmojiPickerStyled",
5
+ componentId: "sc-sdjrip-0"
6
6
  })(["min-width:352px;em-emoji-picker{border:1px solid ", ";--border-radius:", ";--shadow:", ";background-color:", ";--rgb-background:", ";}"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN, Color.FROZEN);
package/RichMessageEditor/RichMessageEditor.js CHANGED
@@ -7,7 +7,7 @@ import { FieldBox } from '../FieldBox';
7
7
  import ArrowIcon from './assets/arrow.svg';
8
8
  import EmojiIcon from './assets/EmojiIcon.svg';
9
9
  import PersonalizationIcon from './assets/PersonalizationIcon.svg';
10
- import { EmojiPicker } from './EmojiPicker';
10
+ import { EditorEmojiPicker } from './EditorEmojiPicker';
11
11
  import { placementToDirection } from './RichMessageEditor.helpers';
12
12
  import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styled';
13
13
  import { getDcByPath } from './slate/helpers';
@@ -143,7 +143,7 @@ export const RichMessageEditor = ({
143
143
  },
144
144
  onClose,
145
145
  update
146
- })), showDrop.type === 'emoji' && React.createElement(EmojiPicker, {
146
+ })), showDrop.type === 'emoji' && React.createElement(EditorEmojiPicker, {
147
147
  onEmojiSelect: s => editor.insertText(s)
148
148
  }), React.createElement(Arrow, {
149
149
  "$direction": placementToDirection(placement),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.10",
3
+ "version": "1.1.12",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -36,7 +36,6 @@
36
36
  "@codemirror/lang-html": "^6.4.9",
37
37
  "@codemirror/lang-json": "^6.0.1",
38
38
  "@codemirror/lang-liquid": "^6.2.2",
39
- "@emoji-mart/react": "^1.1.1",
40
39
  "@floating-ui/react-dom": "^2.1.2",
41
40
  "@lezer/highlight": "^1.2.1",
42
41
  "@pushwoosh/kit-constants": "^1.6.9",
@@ -46,6 +45,7 @@
46
45
  "@tippyjs/react": "^4.2.6",
47
46
  "@uiw/codemirror-themes": "^4.23.8",
48
47
  "@uiw/react-codemirror": "^4.23.8",
48
+ "emoji-mart": "^5.6.0",
49
49
  "liquidjs": "^10.18.0",
50
50
  "lodash": "^4.17.21",
51
51
  "polished": "^4.3.1",
package/RichMessageEditor/EmojiPicker.js DELETED
@@ -1,39 +0,0 @@
1
- import { Picker } from 'emoji-mart';
2
- import React, { useEffect, useRef } from 'react';
3
- import { EmojiPickerStyled } from './EmojiPicker.styled';
4
- async function data() {
5
- const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
6
- return response.json();
7
- }
8
- function PickerBase(props) {
9
- const ref = useRef(null);
10
- const instance = useRef(null);
11
- if (instance.current) {
12
- instance.current.update(props);
13
- }
14
- useEffect(() => {
15
- var _window;
16
- const PickerElement = (_window = window) === null || _window === void 0 ? void 0 : _window.customElements.get('em-emoji-picker');
17
- instance.current = new (PickerElement || Picker)({
18
- ...props,
19
- ref
20
- });
21
- return () => {
22
- instance.current = null;
23
- };
24
- }, [props]);
25
- return React.createElement('div', {
26
- ref
27
- });
28
- }
29
- export const EmojiPicker = ({
30
- onEmojiSelect
31
- }) => {
32
- return React.createElement(EmojiPickerStyled, null, React.createElement(PickerBase, {
33
- data: data,
34
- onEmojiSelect: emoji => {
35
- onEmojiSelect(emoji.native);
36
- },
37
- theme: "light"
38
- }));
39
- };
package/RichMessageEditor/EmojiPicker.styled.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const EmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;