;\n changeOnBlur?: boolean;\n formItem?: FormItemProps;\n label?: FormItemProps['label'];\n inline?: boolean;\n equalSpacing?: boolean;\n required?: boolean;\n autoComplete?: 'on' | 'off';\n style?: React.CSSProperties;\n helpText?: React.ReactNode;\n debounceTime?: number;\n labelHidden?: boolean;\n}\n\nconst parse = (v: any) => v;\nexport default function enhancer any }>(\n Component: React.FC,\n changeAdapter: (args: Parameters>) => any,\n option?: { debounceTime: number },\n) {\n return (props: EnhancerProps & Omit) => {\n const {\n name,\n validate,\n onChangeAdapter,\n changeOnBlur,\n inline,\n equalSpacing,\n formItem,\n label,\n required,\n style,\n helpText,\n autoComplete,\n labelHidden,\n ...rest\n } = props;\n\n const debounceTime = props.debounceTime || option?.debounceTime || 300;\n\n const config = useMemo(() => {\n return {\n ...props.config,\n validate: validate,\n parse: props.config?.parse || parse,\n };\n }, [props.config, validate]);\n\n const [currentValue, setCurrentValue] = useState('');\n const currentValueRef = useRefState(currentValue);\n\n const layoutStyle = useMemo((): FormItemProps => {\n if (equalSpacing) {\n return {\n labelCol: {\n span: 11,\n style: {\n textAlign: 'left',\n paddingRight: 0,\n },\n },\n wrapperCol: {\n span: 11,\n offset: 1,\n style: {\n textAlign: 'right',\n },\n },\n };\n }\n if (inline) {\n return {\n labelCol: {\n span: 7,\n style: {\n textAlign: 'right',\n paddingRight: 0,\n },\n },\n wrapperCol: {\n span: 16,\n offset: 1,\n style: {},\n },\n };\n }\n\n return {\n labelCol: {\n span: 24,\n style: {\n paddingRight: 0,\n },\n },\n wrapperCol: {\n span: 24,\n },\n };\n }, [equalSpacing, inline]);\n\n return useMemo(() => {\n return (\n \n {({ input: { onBlur, onChange, value }, meta }) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n\n const debounceCallbackChange = useCallback(\n debounce(\n val => {\n onChange(val);\n onBlur();\n },\n debounceTime,\n {\n // maxWait: 500,\n },\n ),\n [onChange, onBlur],\n );\n\n const onFieldChange: P['onChange'] = useCallback(\n (e: any) => {\n const newVal = onChangeAdapter\n ? onChangeAdapter(changeAdapter(e))\n : changeAdapter(e);\n\n setCurrentValue(newVal);\n if (!changeOnBlur) {\n debounceCallbackChange(newVal);\n }\n },\n [debounceCallbackChange],\n );\n\n const onFieldBlur = useCallback(() => {\n if (changeOnBlur) {\n onChange(currentValueRef.current);\n onBlur();\n }\n }, [onBlur, onChange]);\n\n useEffect(() => {\n setCurrentValue(value);\n }, [value]);\n\n return (\n \n \n \n );\n }}\n \n );\n }, [\n autoComplete,\n changeOnBlur,\n config,\n currentValue,\n currentValueRef,\n debounceTime,\n formItem,\n helpText,\n label,\n labelHidden,\n layoutStyle,\n name,\n onChangeAdapter,\n required,\n rest,\n style,\n ]);\n };\n}\n","import { Input as ArcoInput, InputProps as ArcoInputProps } from '@arco-design/web-react';\nimport React, { useCallback } from 'react';\n\nexport interface InputProps extends Omit {\n quickchange?: boolean;\n value: string;\n onChange: (val: string) => void;\n}\n\nexport function Input(props: InputProps) {\n const {\n quickchange,\n value = '',\n onKeyDown: onPropsKeyDown,\n onChange: propsOnChange,\n } = props;\n\n const onChange = useCallback(\n (val: string) => {\n propsOnChange(val);\n },\n [propsOnChange]\n );\n\n const onKeyDown = useCallback(\n (ev: React.KeyboardEvent) => {\n if (onPropsKeyDown) {\n onPropsKeyDown?.(ev);\n }\n\n if (quickchange) {\n let step = 0;\n if (ev.key === 'ArrowUp') {\n step = 1;\n }\n if (ev.key === 'ArrowDown') {\n step = -1;\n }\n\n if (step) {\n if (/^\\d+/.test(value)) {\n ev.preventDefault();\n onChange(\n String(value).replace(/^(\\d+)/, (_, match) => {\n return (Number(match) + step).toString();\n })\n );\n }\n }\n }\n },\n [onPropsKeyDown, quickchange, value, onChange]\n );\n\n return (\n onChange(value)}\n onKeyDown={onKeyDown}\n />\n );\n}\n","import { InputProps as ArcoInputProps } from '@arco-design/web-react';\r\nimport React from 'react';\r\nimport { Input } from './Input';\r\n\r\nexport interface InputWithUnitProps extends Omit {\r\n value: string;\r\n onChange: (val: string) => void;\r\n unitOptions?: Array<{ value: string; label: string }> | 'default' | 'percent';\r\n quickchange?: boolean;\r\n}\r\n\r\nconst defaultUnitOptions = [\r\n {\r\n value: 'px',\r\n label: 'px',\r\n },\r\n];\r\n\r\nconst percentUnitOptions = [\r\n {\r\n value: 'px',\r\n label: 'px',\r\n },\r\n {\r\n value: '%',\r\n label: '%',\r\n },\r\n];\r\n\r\nexport function InputWithUnit(props: InputWithUnitProps) {\r\n const {\r\n value = '',\r\n onKeyDown: onPropsKeyDown,\r\n unitOptions: propsUnitOptions,\r\n ...restProps\r\n } = props;\r\n\r\n return (\r\n \r\n );\r\n}\r\n","import { merge } from 'lodash';\nimport React from 'react';\nimport { Stack } from '@puralex/easy-email-editor';\nimport { Checkbox, CheckboxGroupProps as ArcoCheckboxGroupProps } from '@arco-design/web-react';\n\nexport interface CheckboxGroupProps extends ArcoCheckboxGroupProps {\n options: Array<{ value: string; label: React.ReactNode; }>;\n onChange?: (e: any[]) => void;\n value?: ArcoCheckboxGroupProps['value'];\n style?: Partial;\n checkboxStyle?: Partial;\n vertical?: boolean;\n}\n\nexport function CheckBoxGroup(props: CheckboxGroupProps) {\n const { vertical = false, ...rest } = props;\n return (\n \n \n {rest.options.map((item, index) => (\n \n {item.label}\n \n ))}\n \n \n );\n}\n","export function classnames(...rest: any[]) {\n return rest.filter((item) => typeof item === 'string').join(' ');\n}\n","import { Tabs, TabsProps } from '@arco-design/web-react';\nimport { classnames } from '@extensions/utils/classnames';\nimport React, { useState } from 'react';\nimport styles from './index.module.scss';\n\nconst { TabPane } = Tabs;\n\nexport interface EditTabProps\n extends Omit {\n value: Array;\n renderItem: (item: T, index: number) => React.ReactNode;\n onChange: (vals: Array) => any;\n additionItem: T;\n label: string;\n}\nexport function EditTab(props: EditTabProps) {\n const { value, additionItem } = props;\n const [activeTab, setActiveTab] = useState('0');\n\n const onAddTab = () => {\n setActiveTab((value.length).toString());\n props.onChange([...value, additionItem]);\n };\n\n const onDeleteTab = (index: string) => {\n if (index < activeTab) {\n setActiveTab((Number(activeTab) - 1).toString());\n }\n if (index === activeTab) {\n setActiveTab(Number(index) > 0 ? `${Number(index) - 1}` : '0');\n }\n props.onChange(value.filter((_, vIndex) => Number(index) !== vIndex));\n };\n\n return (\n \n {(Array.isArray(value) ? value : []).map((item, index) => (\n \n {props.renderItem(item, index)}\n \n ))}\n \n );\n}\n","import { Card, Space, TabsProps, Typography } from '@arco-design/web-react';\nimport { IconClose, IconPlus } from '@arco-design/web-react/icon';\nimport { cloneDeep } from 'lodash';\nimport React from 'react';\n\nexport interface EditGridTabProps\n extends Omit {\n value: Array;\n renderItem: (item: T, index: number) => React.ReactNode;\n onChange: (vals: Array) => any;\n additionItem?: T;\n label: string;\n}\nexport function EditGridTab(props: EditGridTabProps) {\n const { value, additionItem } = props;\n\n const onAdd = (index: number) => {\n let newItem = additionItem || cloneDeep(value[index]);\n value.splice(index + 1, 0, newItem);\n props.onChange([...value]);\n };\n\n const onDelete = (index: number) => {\n props.onChange(value.filter((_, vIndex) => Number(index) !== vIndex));\n };\n return (\n \n {(Array.isArray(value) ? value : []).map((item, index) => (\n \n \n \n {t('Item')} {index + 1}\n \n\n \n )} extra={(\n \n onAdd(index)} />\n onDelete(index)} />\n \n )}\n >\n {props.renderItem(item, index)}\n \n \n ))}\n \n );\n\n}\n","import React, { useEffect } from 'react';\nimport { ContentEditableType, DATA_CONTENT_EDITABLE_TYPE, getShadowRoot } from '@puralex/easy-email-editor';\nimport { useField, useForm } from 'react-final-form';\n\nexport interface InlineTextProps {\n idx: string;\n children?: React.ReactNode;\n onChange: (content: string) => void;\n}\n\nexport function InlineText({ idx, onChange, children }: InlineTextProps) {\n const {\n mutators: { setFieldTouched },\n } = useForm();\n\n useField(idx); // setFieldTouched will be work while register field,\n\n useEffect(() => {\n const shadowRoot = getShadowRoot();\n\n const onPaste = (e: ClipboardEvent) => {\n if (!(e.target instanceof Element) || !e.target.getAttribute('contenteditable')) return;\n e.preventDefault();\n\n const text = e.clipboardData?.getData('text/plain') || '';\n document.execCommand('insertHTML', false, text);\n const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);\n if (contentEditableType === ContentEditableType.RichText) {\n onChange(e.target.innerHTML || '');\n } else if (contentEditableType === ContentEditableType.Text) {\n onChange(e.target.textContent?.trim() || '');\n }\n };\n\n const onInput = (e: Event) => {\n if (e.target instanceof Element && e.target.getAttribute('contenteditable')) {\n\n const contentEditableType = e.target.getAttribute(DATA_CONTENT_EDITABLE_TYPE);\n if (contentEditableType === ContentEditableType.RichText) {\n onChange(e.target.innerHTML || '');\n } else if (contentEditableType === ContentEditableType.Text) {\n onChange(e.target.textContent?.trim() || '');\n }\n }\n };\n\n shadowRoot.addEventListener('paste', onPaste as any, true);\n shadowRoot.addEventListener('input', onInput);\n\n return () => {\n shadowRoot.removeEventListener('paste', onPaste as any, true);\n shadowRoot.removeEventListener('input', onInput);\n };\n }, [onChange, setFieldTouched]);\n\n return <>{children};\n}\n","import React, { useMemo } from 'react';\r\nimport { AutoComplete as ArcoAutoComplete, AutoCompleteProps as ArcoAutoCompleteProps } from '@arco-design/web-react';\r\nimport { isString } from 'lodash';\r\n\r\nexport interface AutoCompleteProps\r\n extends Omit {\r\n quickchange?: boolean;\r\n value: string;\r\n options: Array<{ value: any; label: any }>;\r\n onChange: (val: string) => void;\r\n showSearch?: boolean;\r\n}\r\n\r\nexport function AutoComplete(props: AutoCompleteProps) {\r\n const options = useMemo(() => {\r\n const selectedValue = (props.value || '').toLowerCase();\r\n return props.options\r\n .filter(item => {\r\n return (\r\n (isString(item.value) && item.value.toLowerCase().startsWith(selectedValue)) ||\r\n (isString(item.label) && item.label.toLowerCase().startsWith(selectedValue))\r\n );\r\n })\r\n .map(item => ({ ...item, name: item.label }));\r\n }, [props.options, props.value]);\r\n\r\n return (\r\n \r\n );\r\n}\r\n","export function isNumber(num: any): num is number {\n if (typeof num !== 'string' && typeof num !== 'number') return false;\n return new RegExp('^(\\\\-|\\\\+)?\\\\d+(\\\\.\\\\d+)?$').test(num.toString());\n}\n\nexport function InputNumberAdapter(val: string | number) {\n return isNumber(Number(val)) ? Number(val) : val;\n}\n","import { isNumber } from '@extensions/AttributePanel/utils/InputNumberAdapter';\nimport { isString } from 'lodash';\n\nexport const pixelAdapter = {\n format(val: string) {\n if (!isString(val) && !val) return '';\n val = val.toString();\n if (/^\\d+px$/.test(val.trim())) return val.trim().replace('px', '');\n return val.trim();\n },\n parse(val: string | number) {\n if (!isString(val) && !isNumber(val)) return undefined;\n val = val.toString().trim();\n if (!val) return undefined;\n if (/^\\d+$/.test(val)) return val + 'px';\n return val;\n },\n};\n","import { isString } from 'lodash';\nimport Color from 'color';\n\nexport const colorAdapter = {\n format(val: string) {\n if (!isString(val) && !val) return '';\n val = val.toString();\n if (val.length === 7 && val.startsWith('#')) return val.replace('#', '');\n return val;\n },\n parse(val: string) {\n if (!isString(val)) return undefined;\n val = val.toString().trim();\n if (!val) return undefined;\n try {\n if (val.length === 6 && Color(`#${val}`).hex()) return `#${val}`;\n } catch (error) {\n console.log('err', val);\n }\n return val;\n },\n};\n","import { isNumber } from '@extensions/AttributePanel/utils/InputNumberAdapter';\nimport { isString } from 'lodash';\n\nexport const imageHeightAdapter = {\n format(val: string) {\n if (!isString(val) && !val) return '';\n val = val.toString();\n if (val === 'auto') return undefined;\n\n if (/^\\d+px$/.test(val.trim())) return val.trim().replace('px', '');\n return val.trim();\n },\n parse(val: string | number) {\n if (!isString(val) && !isNumber(val)) return undefined;\n val = val.toString().trim();\n if (!val) return undefined;\n if (/^\\d+$/.test(val)) return val + 'px';\n return val;\n },\n};\n","import { ImageManager } from '@puralex/easy-email-core';\n\nconst defaultImagesMap = {\n IMAGE_59:\n 'https://easy-email-m-ryan.vercel.app/images/06ca521d-9728-4de6-a709-1b75a828bfc3-2a9b1224-3d71-43b8-b52f-e7cdcdc9107b.png',\n AttributePanel_01:\n 'https://easy-email-m-ryan.vercel.app/images/e22f78f2-aa76-408d-ba94-c95c7abe1908-image.png',\n AttributePanel_02:\n 'https://easy-email-m-ryan.vercel.app/images/3e952a6e-2506-470e-b395-3e0d995157c5.png',\n AttributePanel_03:\n 'https://easy-email-m-ryan.vercel.app/images/Fi_vI4vyLhTM-Tp6ivq4dR_ieGHk.png',\n};\n\nImageManager.add(defaultImagesMap);\n\nexport function getImg(name: keyof typeof defaultImagesMap) {\n return ImageManager.get(name);\n}\n","import React, { useCallback, useMemo, useRef } from 'react';\nimport { useLocalStorage } from 'react-use';\nimport { debounce } from 'lodash';\nimport { useRefState } from '@puralex/easy-email-editor';\n\nconst defaultPresetColor: string[] = [\n '#000000',\n '#FFFFFF',\n '#9b9b9b',\n '#d0021b',\n '#4a90e2',\n '#7ed321',\n '#bd10e0',\n '#f8e71c',\n];\n\nconst CURRENT_COLORS_KEY = 'CURRENT_COLORS_KEY';\nconst MAX_RECORD_SIZE = 20;\n\nexport const PresetColorsContext = React.createContext<{\n colors: string[];\n addCurrentColor: (color: string) => void;\n}>({\n colors: [],\n addCurrentColor: () => {},\n});\n\nexport const PresetColorsProvider: React.FC<{\n children: React.ReactNode | React.ReactElement;\n}> = props => {\n const [currentColors, setCurrentColors] = useLocalStorage(\n CURRENT_COLORS_KEY,\n defaultPresetColor,\n );\n const currentColorsRef = useRefState(currentColors);\n\n const colorDivRef = useRef(document.createElement('div'));\n\n const addCurrentColor = useCallback(\n debounce((newColor: string) => {\n colorDivRef.current.style.color = '';\n colorDivRef.current.style.color = newColor;\n if (colorDivRef.current.style.color) {\n if (currentColorsRef.current!.includes(newColor)) return;\n const newColors = [...new Set([...currentColorsRef.current!, newColor])]\n .filter(Boolean)\n .slice(-MAX_RECORD_SIZE);\n\n setCurrentColors(newColors);\n }\n }, 500),\n [currentColorsRef, setCurrentColors],\n );\n\n const value = useMemo(() => {\n return {\n colors: currentColors!,\n addCurrentColor,\n };\n }, [addCurrentColor, currentColors]);\n\n return useMemo(() => {\n return (\n \n {props.children}\n \n );\n }, [props.children, value]);\n};\n","import { Button, Space } from '@arco-design/web-react';\r\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\r\n\r\nimport styles from '../index.module.scss';\r\n\r\nimport Color from 'color';\r\n\r\nimport { PresetColorsContext } from '@extensions/AttributePanel/components/provider/PresetColorsProvider';\r\n\r\nexport interface ColorPickerContentProps {\r\n onChange: (val: string) => void;\r\n value: string;\r\n}\r\n\r\nconst transparentColor = 'rgba(0,0,0,0)';\r\n\r\nexport function ColorPickerContent(props: ColorPickerContentProps) {\r\n const { colors: presetColors } = useContext(PresetColorsContext);\r\n\r\n const { onChange } = props;\r\n const [color, setColor] = useState(props.value);\r\n\r\n useEffect(() => {\r\n setColor(props.value);\r\n }, [props.value]);\r\n\r\n const presetColorList = useMemo(() => {\r\n return [...presetColors.filter(item => item !== transparentColor).slice(-14)];\r\n }, [presetColors]);\r\n\r\n let adapterColor = color;\r\n\r\n try {\r\n if (Color(color).hex()) {\r\n adapterColor = Color(color).hex();\r\n }\r\n } catch (error) {}\r\n\r\n return (\r\n \r\n \r\n
\r\n {presetColorList.map(item => {\r\n return (\r\n onChange(item)}\r\n key={item}\r\n style={{\r\n border: '1px solid var(--color-neutral-3, rgb(229, 230, 235))',\r\n display: 'inline-block',\r\n height: 20,\r\n width: 20,\r\n boxSizing: 'border-box',\r\n padding: 4,\r\n borderRadius: 3,\r\n backgroundColor: item,\r\n position: 'relative',\r\n cursor: 'pointer',\r\n }}\r\n />\r\n );\r\n })}\r\n \r\n \r\n
\n )}\r\n getPopupContainer={getPopupContainer}\r\n {...props}\r\n >\r\n {children || (\r\n
\r\n {props.value ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \n
\n \n \n {t('Import font')} \n \n \n }\n onClick={() => arrayHelpers.fields.push({ name: '', href: '' })}\n />\n \n \n\n \n {value.fonts?.map((item, index) => {\n return (\n \n \n \n \n \n \n \n \n \n \n }\n onClick={() => arrayHelpers.fields.remove(index)}\n />\n \n \n
\n );\n })}\n \n \n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n {`${block.name} `} {t('attributes')}\r\n \r\n \r\n {props.extra}\r\n \r\n \r\n \r\n {props.children}
\r\n \r\n );\r\n};\r\n\r\nfunction EyeIcon() {\r\n const { setFocusBlock, focusBlock } = useBlock();\r\n\r\n const onToggleVisible = useCallback(\r\n (e: React.MouseEvent) => {\r\n if (!focusBlock) return null;\r\n e.stopPropagation();\r\n setFocusBlock({\r\n ...focusBlock,\r\n data: {\r\n ...focusBlock.data,\r\n hidden: !focusBlock.data.hidden,\r\n },\r\n });\r\n },\r\n [focusBlock, setFocusBlock],\r\n );\r\n\r\n if (!focusBlock) return null;\r\n\r\n if (focusBlock.type === BasicType.PAGE) return null;\r\n\r\n return focusBlock.data.hidden ? (\r\n \r\n ) : (\r\n \r\n );\r\n}\r\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { AutoCompleteField } from '../../../components/Form';\nimport { useFontFamily } from '@extensions/hooks/useFontFamily';\n\nexport function FontFamily({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n const { fontList } = useFontFamily();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx, fontList, name]);\n}\n","import React from 'react';\nimport {\n ColorPickerField,\n InputWithUnitField,\n NumberField,\n TextAreaField,\n TextField,\n} from '@extensions/components/Form';\nimport { AddFont } from '@extensions/components/Form/AddFont';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { Stack, useFocusIdx } from '@puralex/easy-email-editor';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { FontFamily } from '../../attributes/FontFamily';\nimport { pixelAdapter } from '../../adapter';\n\ninterface PageProps { hideSubTitle?: boolean; hideSubject?: boolean}\nexport function Page({ hideSubTitle, hideSubject }: PageProps) {\n const { focusIdx } = useFocusIdx();\n\n if (!focusIdx) return null;\n\n return (\n \n \n \n \n \n {!hideSubject && (\n \n )}\n {!hideSubTitle && (\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React, { useCallback, useEffect, useMemo } from 'react';\nimport { InputWithUnitField } from '../../../components/Form';\nimport { useFocusIdx, Stack, useBlock, TextStyle, IconFont } from '@puralex/easy-email-editor';\nimport { createBlockDataByType } from '@puralex/easy-email-core';\nimport { Form, useFormState } from 'react-final-form';\nimport { Button, Grid, Space, Tooltip } from '@arco-design/web-react';\nimport { get } from 'lodash';\nimport { pixelAdapter } from '../adapter';\n\nexport interface PaddingProps {\n title?: string;\n attributeName?: 'padding' | 'inner-padding' | 'text-padding';\n name?: string;\n showResetAll?: boolean;\n}\nexport function Padding(props: PaddingProps = {}) {\n const { title = t('Padding'), attributeName = 'padding', name, showResetAll } = props;\n const { focusBlock, change, values } = useBlock();\n const { focusIdx } = useFocusIdx();\n\n const type = focusBlock && focusBlock.type;\n\n const defaultConfig = useMemo(\n () => (type ? createBlockDataByType(type) : undefined),\n [type],\n );\n\n const paddingValue: string | undefined = useMemo(() => {\n if (name) {\n return get(values, name);\n }\n return focusBlock?.attributes[attributeName];\n }, [attributeName, focusBlock?.attributes, name, values]);\n\n const defaultPaddingValue: string | undefined = useMemo(() => {\n if (name) {\n return null;\n }\n return defaultConfig?.attributes[attributeName];\n }, [attributeName, defaultConfig?.attributes, name]);\n\n const paddingFormValues = useMemo(() => {\n const paddingList = paddingValue?.split(' ');\n const defaultPaddingList = defaultPaddingValue?.split(' ');\n\n const top = paddingList ? paddingList[0] : defaultPaddingList?.[0] || '';\n const right = paddingList ? paddingList[1] : defaultPaddingList?.[1] || '';\n const bottom = paddingList ? paddingList[2] : defaultPaddingList?.[2] || '';\n const left = paddingList ? paddingList[3] : defaultPaddingList?.[3] || '';\n\n return {\n top,\n left,\n bottom,\n right,\n };\n }, [defaultPaddingValue, paddingValue]);\n\n const onChancePadding = useCallback(\n (val: string) => {\n if (name) {\n change(name, val);\n } else {\n change(focusIdx + `.attributes[${attributeName}]`, val);\n }\n },\n [name, change, focusIdx, attributeName],\n );\n const onResetPadding = useCallback(() => {\n if (name) {\n change(name, '0px 0px 0px 0px');\n } else {\n change(focusIdx + `.attributes[${attributeName}]`, '0px 0px 0px 0px');\n }\n }, [name, change, focusIdx, attributeName]);\n\n return (\n \n initialValues={paddingFormValues}\n subscription={{ submitting: true, pristine: true }}\n enableReinitialize\n onSubmit={() => {}}\n >\n {() => {\n return (\n <>\n \n \n {title}\n {showResetAll && (\n \n \n )}\n />\n \n )}\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n );\n }}\n \n );\n}\n\nconst PaddingChangeWrapper: React.FC<{ onChange: (val: string) => void }> = props => {\n const {\n values: { top, right, bottom, left },\n } = useFormState();\n const { onChange } = props;\n\n useEffect(() => {\n onChange([top, right, bottom, left].join(' '));\n }, [top, right, bottom, left, onChange]);\n\n return <>;\n};\n","import React, { useMemo } from 'react';\r\nimport { ColorPickerField } from '../../../components/Form';\r\nimport { useFocusIdx } from '@puralex/easy-email-editor';\r\n\r\nexport function BackgroundColor({ title = t('Background color') }: { title?: string }) {\r\n const { focusIdx } = useFocusIdx();\r\n\r\n return useMemo(() => {\r\n return (\r\n \r\n );\r\n }, [focusIdx, title]);\r\n}\r\n","import React, { useMemo } from 'react';\nimport { ImageUploaderField, SelectField, TextField } from '../../../components/Form';\nimport { useFocusIdx, useEditorProps } from '@puralex/easy-email-editor';\nimport { BackgroundColor } from './BackgroundColor';\nimport { Grid, Space } from '@arco-design/web-react';\n\nconst backgroundRepeatOptions = [\n {\n value: 'no-repeat',\n get label() {\n return t('No repeat');\n },\n },\n {\n value: 'repeat',\n get label() {\n return t('Repeat');\n },\n },\n {\n value: 'repeat-x',\n get label() {\n return t('Repeat X');\n },\n },\n {\n value: 'repeat-y',\n get label() {\n return t('Repeat Y');\n },\n },\n];\n\nexport function Background() {\n const { focusIdx } = useFocusIdx();\n const { onUploadImage } = useEditorProps();\n return useMemo(() => {\n return (\n \n \n\n \n \n \n \n \n \n \n \n \n \n );\n }, [focusIdx, onUploadImage]);\n}\n","import React, { useMemo } from 'react';\nimport { InputWithUnitField, TextField } from '../../../components/Form';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { Grid } from '@arco-design/web-react';\n\nexport function Border() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n \n \n \n \n \n \n \n );\n }, [focusIdx]);\n}\n","import React, { useMemo } from 'react';\r\nimport { useFocusIdx } from '@puralex/easy-email-editor';\r\nimport { TextField } from '../../../components/Form';\r\n\r\nexport function ClassName() {\r\n const { focusIdx } = useFocusIdx();\r\n\r\n return useMemo(() => {\r\n return (\r\n \r\n );\r\n }, [focusIdx]);\r\n}\r\n","import { useBlock, useFocusIdx } from '@puralex/easy-email-editor';\r\nimport { Collapse, Grid, Switch } from '@arco-design/web-react';\r\nimport { AdvancedBlock, AdvancedType } from '@puralex/easy-email-core';\r\nimport { TextField } from '@extensions/components/Form';\r\nimport React, { useCallback } from 'react';\r\n\r\nexport function Iteration() {\r\n const { focusIdx } = useFocusIdx();\r\n const { focusBlock, change } = useBlock();\r\n const iteration = focusBlock?.data.value?.iteration as\r\n | undefined\r\n | AdvancedBlock['data']['value']['iteration'];\r\n\r\n const enabled = Boolean(iteration && iteration.enabled);\r\n\r\n const onIterationToggle = useCallback(\r\n (enabled: boolean) => {\r\n if (enabled) {\r\n if (!iteration) {\r\n change(`${focusIdx}.data.value.iteration`, {\r\n enabled: true,\r\n dataSource: '',\r\n itemName: 'item',\r\n limit: 9999,\r\n mockQuantity: 1,\r\n } as AdvancedBlock['data']['value']['iteration']);\r\n }\r\n }\r\n change(`${focusIdx}.data.value.iteration.enabled`, enabled);\r\n },\r\n [change, focusIdx, iteration]\r\n );\r\n\r\n if (\r\n !focusBlock?.type ||\r\n !Object.values(AdvancedType).includes(focusBlock?.type as any)\r\n ) {\r\n return null;\r\n }\r\n\r\n return (\r\n \r\n \r\n \r\n )}\r\n >\r\n {iteration?.enabled && (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Number(v)}\r\n />\r\n \r\n \r\n Number(v)}\r\n quickchange\r\n />\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n}\r\n","import { useBlock, useFocusIdx } from '@puralex/easy-email-editor';\r\nimport { AdvancedBlock, OperatorSymbol, AdvancedType, Operator, ICondition, IConditionGroup } from '@puralex/easy-email-core';\r\nimport { Collapse, Grid, Switch, Button, Space, List, Message } from '@arco-design/web-react';\r\nimport { SelectField, TextField } from '@extensions/components/Form';\r\nimport React, { useCallback } from 'react';\r\nimport { cloneDeep, get, upperFirst } from 'lodash';\r\nimport { IconDelete, IconPlus } from '@arco-design/web-react/icon';\r\nimport { useField } from 'react-final-form';\r\n\r\nexport function Condition() {\r\n const { focusIdx } = useFocusIdx();\r\n const { focusBlock, change, values } = useBlock();\r\n const condition = focusBlock?.data.value?.condition as\r\n | undefined\r\n | AdvancedBlock['data']['value']['condition'];\r\n\r\n const enabled = Boolean(condition && condition.enabled);\r\n\r\n const onConditionToggle = useCallback(\r\n (enabled: boolean) => {\r\n if (enabled) {\r\n if (!condition) {\r\n change(`${focusIdx}.data.value.condition`, {\r\n enabled: true,\r\n symbol: OperatorSymbol.AND,\r\n groups: [\r\n {\r\n symbol: OperatorSymbol.AND,\r\n groups: [\r\n {\r\n left: '',\r\n operator: Operator.TRUTHY,\r\n right: ''\r\n }\r\n ],\r\n }\r\n ] as unknown[],\r\n } as ICondition);\r\n }\r\n }\r\n change(`${focusIdx}.data.value.condition.enabled`, enabled);\r\n },\r\n [change, condition, focusIdx]\r\n );\r\n\r\n const onAddCondition = useCallback((path: string) => {\r\n const groups = get(values, path) as IConditionGroup[];\r\n\r\n groups.push({\r\n symbol: OperatorSymbol.AND,\r\n groups: [\r\n {\r\n left: '',\r\n operator: Operator.TRUTHY,\r\n right: ''\r\n }\r\n ],\r\n });\r\n change(path, [...groups]);\r\n }, [change, values]);\r\n\r\n const onAddSubCondition = useCallback((path: string) => {\r\n const groups = get(values, path) as IConditionGroup['groups'];\r\n\r\n groups.push({\r\n left: '',\r\n operator: Operator.TRUTHY,\r\n right: ''\r\n\r\n });\r\n change(path, [...groups]);\r\n }, [change, values]);\r\n\r\n // content.children.[0].children.[0].data.value.condition.groups.1.groups\r\n const onDelete = useCallback((path: string, gIndex: number, ggIndex: number) => {\r\n if (!condition) return;\r\n const subPath = `${path}.${gIndex}.groups`;\r\n const groups = cloneDeep(get(values, path)) as any[];\r\n const subGroups = cloneDeep(get(values, subPath)) as any[];\r\n\r\n subGroups.splice(ggIndex, 1);\r\n if (subGroups.length === 0) {\r\n if (groups.length === 1) {\r\n Message.warning(t('At least one condition'));\r\n return;\r\n }\r\n // remove empty array\r\n groups.splice(gIndex, 1);\r\n change(path, [...groups]);\r\n } else {\r\n change(subPath, [...subGroups]);\r\n }\r\n\r\n }, [change, condition, values]);\r\n\r\n if (\r\n !focusBlock?.type ||\r\n !Object.values(AdvancedType).includes(focusBlock?.type as any)\r\n ) {\r\n return null;\r\n }\r\n\r\n const isEmpty = !condition?.groups.length;\r\n\r\n return (\r\n \r\n \r\n \r\n )}\r\n >\r\n\r\n {condition?.enabled && (\r\n \r\n\r\n \r\n \r\n {condition.groups.length > 1 && (\r\n \r\n )}\r\n \r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nconst options = Object.values(Operator).map(item => ({ label: upperFirst(item), value: item }));\r\n\r\nfunction ConditionItem({ path, onDelete, gIndex, ggIndex }: { path: string; gIndex: number; ggIndex: number; onDelete: (path: string, gIndex: number, ggIndex: number,) => void; }) {\r\n\r\n const name = `${path}.${gIndex}.groups.${ggIndex}`;\r\n const { input: { value } } = useField(name);\r\n\r\n const hideRight = value.operator === Operator.TRUTHY || value.operator === Operator.FALSY;\r\n\r\n return (\r\n \r\n \r\n \r\n {!hideRight && }\r\n \r\n \r\n\r\n \r\n );\r\n}","import React, { useCallback, useEffect, useState } from 'react';\r\nimport { Collapse, Space } from '@arco-design/web-react';\r\nimport { useBlock, useEditorProps } from '@puralex/easy-email-editor';\r\nimport { isAdvancedBlock } from '@puralex/easy-email-core';\r\nimport { Iteration } from '../Iteration';\r\nimport { Condition } from '../Condition';\r\n\r\nexport interface CollapseWrapperProps {\r\n defaultActiveKey: string[];\r\n children: React.ReactNode | React.ReactElement;\r\n}\r\n\r\nexport const CollapseWrapper: React.FC = props => {\r\n const { enabledLogic } = useEditorProps();\r\n const [activeKeys, setActiveKeys] = useState(props.defaultActiveKey);\r\n\r\n const { focusBlock } = useBlock();\r\n const value = focusBlock?.data.value;\r\n\r\n const isAdvancedBlockType = isAdvancedBlock(focusBlock?.type);\r\n\r\n const iterationEnabled =\r\n isAdvancedBlockType && Boolean(value?.iteration && value?.iteration?.enabled);\r\n\r\n const conditionEnabled =\r\n isAdvancedBlockType && Boolean(value?.condition && value?.condition?.enabled);\r\n\r\n const onChange = useCallback((key: string, keys: string[]) => {\r\n setActiveKeys(keys);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!isAdvancedBlockType) return;\r\n\r\n if (iterationEnabled) {\r\n setActiveKeys(keys => [...keys, 'Iteration']);\r\n } else {\r\n setActiveKeys(keys => keys.filter(k => k !== 'Iteration'));\r\n }\r\n }, [iterationEnabled, isAdvancedBlockType]);\r\n\r\n useEffect(() => {\r\n if (!isAdvancedBlockType) return;\r\n\r\n if (conditionEnabled) {\r\n setActiveKeys(keys => [...keys, 'Condition']);\r\n } else {\r\n setActiveKeys(keys => keys.filter(k => k !== 'Condition'));\r\n }\r\n }, [conditionEnabled, isAdvancedBlockType]);\r\n\r\n return (\r\n \r\n \r\n {props.children}\r\n {enabledLogic && (\r\n <>\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n","import React, { useCallback } from 'react';\nimport { Padding } from '@extensions/AttributePanel/components/attributes/Padding';\nimport { Background } from '@extensions/AttributePanel/components/attributes/Background';\nimport { Border } from '@extensions/AttributePanel/components/attributes/Border';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Collapse, Grid, Space, Switch } from '@arco-design/web-react';\nimport { Stack, useBlock, useFocusIdx } from '@puralex/easy-email-editor';\nimport { BasicType, BlockManager } from '@puralex/easy-email-core';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\nimport { TextField } from '@extensions/components/Form';\n\nexport function Section() {\n const { focusBlock, setFocusBlock } = useBlock();\n const { focusIdx } = useFocusIdx();\n const noWrap = focusBlock?.data.value.noWrap;\n\n const onChange = useCallback(\n checked => {\n if (!focusBlock) return;\n focusBlock.data.value.noWrap = checked;\n if (checked) {\n const children = [...focusBlock.children];\n for (let i = 0; i < children.length; i++) {\n const child = children[i];\n if (!child) continue;\n if (child.type === BasicType.GROUP) {\n children.splice(i, 1, ...child.children);\n }\n }\n focusBlock.children = [\n BlockManager.getBlockByType(BasicType.GROUP)!.create({\n children: children,\n }),\n ];\n } else {\n if (\n focusBlock.children.length === 1 &&\n focusBlock.children[0].type === BasicType.GROUP\n ) {\n focusBlock.children = focusBlock.children[0]?.children || [];\n }\n }\n setFocusBlock({ ...focusBlock });\n },\n [focusBlock, setFocusBlock],\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React, { useCallback } from 'react';\nimport { InputWithUnitField } from '../../../components/Form';\nimport { useFocusIdx, useBlock } from '@puralex/easy-email-editor';\nimport { BasicType, getParentByIdx } from '@puralex/easy-email-core';\nimport { InputWithUnitProps } from '@extensions/components/Form/InputWithUnit';\nimport { UseFieldConfig } from 'react-final-form';\n\nexport function Width({\n inline = false,\n unitOptions,\n config,\n}: {\n inline?: boolean;\n unitOptions?: InputWithUnitProps['unitOptions'];\n config?: UseFieldConfig;\n}) {\n const { focusIdx } = useFocusIdx();\n const { focusBlock, values } = useBlock();\n const parentType = getParentByIdx(values, focusIdx)?.type;\n\n const validate = useCallback(\n (val: string): string | undefined => {\n if (focusBlock?.type === BasicType.COLUMN && parentType === BasicType.GROUP) {\n return /(\\d)*%/.test(val)\n ? undefined\n : t('Column inside a group must have a width in percentage, not in pixel');\n }\n return undefined;\n },\n [focusBlock?.type, parentType],\n );\n\n return (\n \n );\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx, Stack } from '@puralex/easy-email-editor';\nimport { SelectField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'top',\n get label() {\n return t('top');\n },\n },\n {\n value: 'middle',\n get label() {\n return t('middle');\n },\n },\n {\n value: 'bottom',\n get label() {\n return t('bottom');\n },\n },\n];\n\nexport function VerticalAlign({\n attributeName = 'vertical-align',\n}: {\n attributeName?: string;\n}) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n \n \n );\n }, [attributeName, focusIdx]);\n}\n","import React from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { RadioGroupField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'left',\n get label() {\n return t('left');\n },\n },\n {\n value: 'center',\n get label() {\n return t('center');\n },\n },\n {\n value: 'right',\n get label() {\n return t('right');\n },\n },\n];\n\nexport function Align({ inline }: { inline?: boolean }) {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n );\n}\n","import React from 'react';\r\nimport { ColorPickerField } from '../../../components/Form';\r\nimport { useFocusIdx } from '@puralex/easy-email-editor';\r\n\r\nexport function Color({ title = t('Color') }: { title?: string; inline?: boolean }) {\r\n const { focusIdx } = useFocusIdx();\r\n\r\n return (\r\n \r\n );\r\n}\r\n","import React, { useMemo } from 'react';\nimport { TextField } from '../../../components/Form';\nimport { useFocusIdx, Stack } from '@puralex/easy-email-editor';\nimport { UseFieldConfig } from 'react-final-form';\n\nexport function Height({\n inline,\n config,\n}: {\n inline?: boolean;\n config?: UseFieldConfig;\n}) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n \n \n \n \n );\n }, [focusIdx, inline]);\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx, Stack } from '@puralex/easy-email-editor';\nimport { RadioGroupField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'left',\n get label() {\n return t('Left');\n },\n },\n {\n value: 'center',\n get label() {\n return t('Center');\n },\n },\n {\n value: 'right',\n get label() {\n return t('Right');\n },\n },\n];\n\nexport function TextAlign({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n \n \n );\n }, [focusIdx, name]);\n}\n","import React, { useMemo } from 'react';\r\nimport { ColorPickerField } from '../../../components/Form';\r\nimport { useFocusIdx } from '@puralex/easy-email-editor';\r\n\r\nexport function ContainerBackgroundColor({\r\n title = t('Container background color'),\r\n}: {\r\n title?: string;\r\n}) {\r\n const { focusIdx } = useFocusIdx();\r\n\r\n return useMemo(() => {\r\n return (\r\n \r\n );\r\n }, [focusIdx, title]);\r\n}\r\n","import React from 'react';\nimport { InputWithUnitField } from '../../../components/Form';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\n\nexport function LetterSpacing({ name }: { name?: string; }) {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n );\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { SelectField } from '../../../components/Form';\n\nconst options = [\n {\n value: '',\n get label() {\n return t('None');\n },\n },\n {\n value: 'underline',\n get label() {\n return t('Underline');\n },\n },\n {\n value: 'overline',\n get label() {\n return t('Overline');\n },\n },\n {\n value: 'line-through',\n get label() {\n return t('Line through');\n },\n },\n {\n value: 'blink',\n get label() {\n return t('Blink');\n },\n },\n {\n value: 'inherit',\n get label() {\n return t('Inherit');\n },\n },\n];\n\nexport function TextDecoration({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx, name]);\n}\n","import React, { useMemo } from 'react';\r\nimport { NumberField, TextField } from '../../../components/Form';\r\nimport { useFocusIdx, Stack, TextStyle } from '@puralex/easy-email-editor';\r\n\r\nexport function Decoration() {\r\n const { focusIdx } = useFocusIdx();\r\n\r\n return useMemo(() => {\r\n return (\r\n \r\n \r\n Decoration\r\n \r\n \r\n \r\n \r\n \r\n );\r\n }, [focusIdx]);\r\n}\r\n","import React from 'react';\nimport { InputWithUnitField } from '../../../components/Form';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\n\nexport function LineHeight({ name }: { name?: string; }) {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n );\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { SelectField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'initial',\n get label() {\n return t('None');\n },\n },\n {\n value: 'uppercase',\n get label() {\n return t('uppercase');\n },\n },\n {\n value: 'lowercase',\n get label() {\n return t('lowercase');\n },\n },\n {\n value: 'capitalize',\n get label() {\n return t('capitalize');\n },\n },\n];\n\nexport function TextTransform({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx, name]);\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx, Stack } from '@puralex/easy-email-editor';\nimport { RadioGroupField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'ltr',\n get label() {\n return t('ltr');\n },\n },\n {\n value: 'rtl',\n get label() {\n return t('rtl');\n },\n },\n];\n\nexport function Direction() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n \n \n );\n }, [focusIdx]);\n}\n","import { IBlockData, BlockManager, getParentIdx } from '@puralex/easy-email-core';\nimport { get, cloneDeep } from 'lodash';\n\nexport function getContextMergeTags(\n mergeTags: { [key: string]: any },\n context: { [key: string]: any },\n idx: string,\n) {\n const loop = (\n currentIdx: string,\n combineMergeTags: { [key: string]: any },\n ): { [key: string]: any } => {\n const parentBlockData = get(context, currentIdx) as IBlockData | undefined;\n if (!parentBlockData) return combineMergeTags;\n\n const dataSource = parentBlockData.data?.value?.dataSource;\n if (!dataSource) return combineMergeTags;\n\n Object.keys(dataSource).forEach(key => {\n let formatKey: string = dataSource[key];\n\n const loopFormatKey = (currentLoopKeyIdx: string) => {\n const currentParentIdx = getParentIdx(currentLoopKeyIdx);\n if (currentParentIdx) {\n const currentBlockData = get(context, currentParentIdx) as IBlockData;\n\n if (!currentBlockData) return formatKey;\n currentBlockData.data.value.dataSource &&\n Object.keys(currentBlockData.data.value.dataSource).forEach(item => {\n formatKey = formatKey.replace(\n item,\n currentBlockData.data.value.dataSource[item].replace(\n /{{([^}}]+)}}/g,\n '$1',\n ),\n );\n });\n\n loopFormatKey(currentParentIdx);\n }\n };\n loopFormatKey(currentIdx);\n\n const dataSourcePath = formatKey.replace(/{{([^}}]+)}}/g, '$1');\n combineMergeTags = {\n [key]: get(combineMergeTags, dataSourcePath),\n ...combineMergeTags,\n };\n });\n\n const parentIdx = getParentIdx(currentIdx);\n if (!parentIdx) return combineMergeTags;\n return loop(parentIdx, combineMergeTags);\n };\n\n return loop(idx, cloneDeep(mergeTags));\n}\n","import React, { useCallback, useMemo, useState } from 'react';\nimport { Tree, TreeSelect } from '@arco-design/web-react';\nimport { get, isObject } from 'lodash';\nimport { useBlock, useEditorProps, useFocusIdx } from '@puralex/easy-email-editor';\nimport { getContextMergeTags } from '@extensions/utils/getContextMergeTags';\n\nexport const MergeTags: React.FC<{\n onChange: (v: string) => void;\n value: string;\n isSelect?: boolean;\n}> = React.memo((props) => {\n const [expandedKeys, setExpandedKeys] = useState([]);\n const { focusIdx } = useFocusIdx();\n const {\n mergeTags = {},\n mergeTagGenerate,\n renderMergeTagContent,\n } = useEditorProps();\n const { values } = useBlock();\n\n const contextMergeTags = useMemo(\n () => getContextMergeTags(mergeTags, values, focusIdx),\n [mergeTags, values, focusIdx]\n );\n\n const treeOptions = useMemo(() => {\n const treeData: Array<{\n key: any;\n value: any;\n title: string;\n children: never[];\n }> = [];\n const deep = (\n key: string,\n title: string,\n parent: { [key: string]: any; children?: any[] },\n mapData: Array = []\n ) => {\n const currentMapData = {\n key: key,\n value: key,\n title: title,\n children: [],\n };\n\n mapData.push(currentMapData);\n const current = parent[title];\n if (current && typeof current === 'object') {\n Object.keys(current).map((childKey) =>\n deep(key + '.' + childKey, childKey, current, currentMapData.children)\n );\n }\n };\n\n Object.keys(contextMergeTags).map((key) =>\n deep(key, key, contextMergeTags, treeData)\n );\n return treeData;\n }, [contextMergeTags]);\n\n const onSelect = useCallback(\n (key: string) => {\n const value = get(contextMergeTags, key);\n if (isObject(value)) {\n setExpandedKeys((keys) => {\n if (keys.includes(key)) {\n return keys.filter((k) => k !== key);\n } else {\n return [...keys, key];\n }\n });\n return;\n }\n return props.onChange(mergeTagGenerate(key));\n },\n [contextMergeTags, props, mergeTagGenerate]\n );\n\n const mergeTagContent = useMemo(\n () =>\n renderMergeTagContent ? (\n renderMergeTagContent({\n onChange: props.onChange,\n isSelect: Boolean(props.isSelect),\n value: props.value,\n })\n ) : (\n <>\n ),\n [renderMergeTagContent, props.onChange, props.isSelect, props.value]\n );\n\n if (renderMergeTagContent) {\n return <>{mergeTagContent};\n }\n\n return (\n \n {props.isSelect ? (\n onSelect(val)}\n />\n ) : (\n onSelect(vals[0])}\n style={{\n maxHeight: 400,\n overflow: 'auto',\n }}\n />\n )}\n
\n );\n});\n","import React, { useMemo } from 'react';\nimport { useFocusIdx, IconFont } from '@puralex/easy-email-editor';\nimport { IconLink } from '@arco-design/web-react/icon';\nimport { SelectField, TextField } from '../../../components/Form';\nimport { Grid, Popover, Space, Button as ArcoButton } from '@arco-design/web-react';\nimport { MergeTags } from './MergeTags';\nimport { useField } from 'react-final-form';\n\nexport function Link() {\n const { focusIdx } = useFocusIdx();\n const { input } = useField(`${focusIdx}.attributes.href`, {\n parse: v => v,\n });\n\n return useMemo(() => {\n return (\n \n \n }\n label={(\n \n {t('Href')} \n \n )}\n >\n }\n />\n \n \n )}\n name={`${focusIdx}.attributes.href`}\n />\n \n \n \n \n \n );\n }, [focusIdx]);\n}\n","import React, { useMemo } from 'react';\nimport { TextField } from '../../../components/Form';\nimport { useFocusIdx, Stack, TextStyle } from '@puralex/easy-email-editor';\n\nexport function Margin() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n {t('Margin')}\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n );\n }, [focusIdx]);\n}\n","import React, { useMemo } from 'react';\nimport { ColorPickerField } from '../../../components/Form';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\n\nexport function BorderColor() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx]);\n}\n","import React from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { InputWithUnitField } from '../../../components/Form';\nimport { pixelAdapter } from '../adapter';\n\nexport function FontSize() {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n );\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { SelectField } from '../../../components/Form';\n\nexport const borderStyleOptions = [\n {\n value: 'dashed',\n get label() {\n return t('Dashed');\n },\n },\n {\n value: 'dotted',\n get label() {\n return t('Dotted');\n },\n },\n {\n value: 'solid',\n get label() {\n return t('Solid');\n },\n },\n {\n value: 'double',\n get label() {\n return t('double');\n },\n },\n {\n value: 'ridge',\n get label() {\n return t('ridge');\n },\n },\n {\n value: 'groove',\n get label() {\n return t('groove');\n },\n },\n {\n value: 'inset',\n get label() {\n return t('inset');\n },\n },\n {\n value: 'outset',\n get label() {\n return t('outset');\n },\n },\n];\n\nexport function BorderStyle() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx]);\n}\n","import React from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { RadioGroupField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'normal',\n get label() {\n return t('Normal');\n },\n },\n {\n value: 'italic',\n get label() {\n return t('Italic');\n },\n },\n];\n\nexport function FontStyle({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n );\n}\n","/* eslint-disable @typescript-eslint/no-unsafe-call */\nimport React, { useMemo } from 'react';\nimport { Stack } from '@puralex/easy-email-editor';\nimport { Padding } from './Padding';\n\nexport function NavbarLinkPadding({ name }: { name: string; }) {\n return useMemo(() => {\n return (\n \n \n \n );\n }, [name]);\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { TextField } from '../../../components/Form';\n\nexport function BorderWidth() {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx]);\n}\n","import React, { useMemo } from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { SelectField } from '../../../components/Form';\n\nconst options = [\n {\n value: 'normal',\n get label() {\n return t('Normal');\n },\n },\n {\n value: 'bold',\n get label() {\n return t('Bold');\n },\n },\n {\n value: '100',\n label: '100',\n },\n {\n value: '200',\n label: '200',\n },\n {\n value: '300',\n label: '300',\n },\n {\n value: '400',\n label: '400',\n },\n {\n value: '500',\n label: '500',\n },\n {\n value: '600',\n label: '600',\n },\n {\n value: '700',\n label: '700',\n },\n {\n value: '800',\n label: '800',\n },\n {\n value: '900',\n label: '900',\n },\n];\n\nexport function FontWeight({ name }: { name?: string }) {\n const { focusIdx } = useFocusIdx();\n\n return useMemo(() => {\n return (\n \n );\n }, [focusIdx, name]);\n}\n","import React from 'react';\n\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Padding } from '@extensions/AttributePanel/components/attributes/Padding';\nimport { Width } from '@extensions/AttributePanel/components/attributes/Width';\nimport { VerticalAlign } from '@extensions/AttributePanel/components/attributes/VerticalAlign';\nimport { Background } from '@extensions/AttributePanel/components/attributes/Background';\nimport { Border } from '@extensions/AttributePanel/components/attributes/Border';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\nimport { BackgroundColor } from '../../attributes';\n\nexport function Column() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React, { useState, useEffect } from 'react';\nimport ReactDOM from 'react-dom';\n\nexport const ShadowDom: React.FC> = (props) => {\n const [root, setRoot] = useState(null);\n const [ref, setRef] = useState(null);\n\n useEffect(() => {\n if (ref) {\n const root = ref.attachShadow({ mode: 'open' });\n setRoot(root);\n }\n }, [ref]);\n\n return (\n <>\n \n {root && ReactDOM.createPortal(props.children, root as any)}\n
\n \n );\n};\n","import { Button, Drawer } from '@arco-design/web-react';\nimport React, { Suspense, useEffect, useMemo, useState } from 'react';\nimport { BasicType, IText } from '@puralex/easy-email-core';\nimport { Stack, TextStyle, useBlock, useEditorContext, useFocusIdx } from '@puralex/easy-email-editor';\nimport { ShadowDom } from '@extensions/components/ShadowDom';\n\nconst CodeMirrorEditorPromise = import(\n '../../../components/Form/CodemirrorEditor'\n);\nconst CodeMirrorEditor = React.lazy(() => CodeMirrorEditorPromise);\n\nexport const HtmlEditor: React.FC<{\n visible: boolean;\n setVisible: (v: boolean) => void;\n}> = (props) => {\n const { visible, setVisible } = props;\n\n const { focusBlock, setValueByIdx } = useBlock();\n const { pageData } = useEditorContext();\n const { focusIdx } = useFocusIdx();\n const [content, setContent] = useState(focusBlock?.data.value.content);\n\n const isTable = focusBlock?.type === BasicType.TABLE;\n\n useEffect(() => {\n setContent(focusBlock?.data.value.content);\n }, [focusBlock?.data.value.content]);\n\n const onClose = () => {\n setVisible(false);\n };\n\n const onSave = () => {\n if (!focusBlock) return;\n focusBlock.data.value.content = content;\n setValueByIdx(focusIdx, { ...focusBlock });\n onClose();\n };\n\n const styles = useMemo(() => {\n if (!focusBlock) return {};\n\n const attributes = focusBlock.attributes as IText['attributes'];\n return {\n color: attributes.color || pageData.data.value['text-color'],\n fontSize: attributes['font-size'] || pageData.data.value['font-size'],\n fontFamily:\n attributes['font-family'] || pageData.data.value['font-family'],\n fontWeight:\n attributes['font-weight'] || pageData.data.value['font-weight'],\n backgroundColor: attributes['container-background-color'],\n padding: attributes.padding,\n };\n }, [focusBlock, pageData.data.value]);\n\n return (\n \n \n {t('Html')}\n \n \n \n \n \n )}\n closable={false}\n escToExit={false}\n width='100vw'\n visible={visible}\n footer={null}\n bodyStyle={{ padding: 0, overflow: 'hidden' }}\n >\n \n
\n
\n {t('Editor Loading...')}\n \n )}\n >\n
\n \n
\n \n
\n \n \n
\n \n \n
\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Padding } from '@extensions/AttributePanel/components/attributes//Padding';\nimport { Background } from '@extensions/AttributePanel/components/attributes//Background';\nimport { TextField } from '@extensions/components/Form';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Collapse, Grid } from '@arco-design/web-react';\nimport { Stack, useFocusIdx } from '@puralex/easy-email-editor';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\n\nexport function Wrapper() {\n const { focusIdx } = useFocusIdx();\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Height } from '@extensions/AttributePanel/components/attributes/Height';\nimport { ContainerBackgroundColor } from '@extensions/AttributePanel/components/attributes/ContainerBackgroundColor';\nimport { Padding } from '@extensions/AttributePanel/components/attributes/Padding';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\n\nexport function Spacer() {\n return (\n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n );\n}\n","import React, { useState } from 'react';\r\nimport { IconFont, useFocusIdx } from '@puralex/easy-email-editor';\r\nimport { TextAreaField } from '@extensions/components/Form';\r\nimport { AttributesPanelWrapper } from '../../attributes';\r\nimport { Button, Tooltip } from '@arco-design/web-react';\r\nimport { HtmlEditor } from '../../UI/HtmlEditor';\r\n\r\nexport function Raw() {\r\n const { focusIdx } = useFocusIdx();\r\n const [visible, setVisible] = useState(false);\r\n return (\r\n \r\n setVisible(true)}\r\n icon={}\r\n />\r\n \n )}\r\n >\r\n \r\n \r\n \r\n );\r\n}\r\n","import React from 'react';\nimport { useEditorProps, useFocusIdx } from '@puralex/easy-email-editor';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { BackgroundColor } from '@extensions/AttributePanel/components/attributes/BackgroundColor';\nimport { FontFamily } from '@extensions/AttributePanel/components/attributes/FontFamily';\nimport { Padding } from '@extensions/AttributePanel/components/attributes/Padding';\nimport {\n ImageUploaderField,\n InputWithUnitField,\n RadioGroupField,\n SelectField,\n TextField,\n} from '@extensions/components/Form';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\n\nconst positionOptions = [\n {\n value: 'left',\n get label() {\n return t('Left');\n },\n },\n {\n value: 'right',\n get label() {\n return t('Right');\n },\n },\n];\n\nconst alignOptions = [\n {\n value: 'top',\n get label() {\n return t('top');\n },\n },\n {\n value: 'middle',\n get label() {\n return t('middle');\n },\n },\n {\n value: 'bottom',\n get label() {\n return t('bottom');\n },\n },\n];\n\nexport function Accordion() {\n const { focusIdx } = useFocusIdx();\n const { onUploadImage } = useEditorProps();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Border } from '../../attributes/Border';\nimport { BackgroundColor } from '../../attributes/BackgroundColor';\nimport { FontFamily } from '../../attributes/FontFamily';\nimport { AttributesPanelWrapper } from '../../attributes/AttributesPanelWrapper';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { Collapse, Space } from '@arco-design/web-react';\n\nexport function AccordionElement() {\n const { focusIdx } = useFocusIdx();\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { Padding } from '../../attributes/Padding';\n\nimport { BackgroundColor } from '../../attributes/BackgroundColor';\nimport { Color } from '../../attributes/Color';\nimport { TextAreaField } from '../../../../components/Form';\nimport { FontSize } from '../../attributes/FontSize';\nimport { FontWeight } from '../../attributes/FontWeight';\nimport { FontFamily } from '../../attributes/FontFamily';\nimport { AttributesPanelWrapper } from '../../attributes/AttributesPanelWrapper';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\n\nexport function AccordionTitle() {\n const { focusIdx } = useFocusIdx();\n return (\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { useFocusIdx } from '@puralex/easy-email-editor';\n\nimport { Padding } from '../../attributes/Padding';\nimport { BackgroundColor } from '../../attributes/BackgroundColor';\nimport { Color } from '../../attributes/Color';\nimport { TextAreaField } from '../../../../components/Form';\nimport { FontSize } from '../../attributes/FontSize';\nimport { FontWeight } from '../../attributes/FontWeight';\nimport { FontFamily } from '../../attributes/FontFamily';\nimport { LineHeight } from '../../attributes/LineHeight';\nimport { AttributesPanelWrapper } from '../../attributes/AttributesPanelWrapper';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\n\nexport function AccordionText() {\n const { focusIdx } = useFocusIdx();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n );\n}\n","import React from 'react';\nimport {\n ColorPickerField,\n EditTabField,\n ImageUploaderField,\n InputWithUnitField,\n RadioGroupField,\n SelectField,\n TextField,\n} from '@extensions/components/Form';\nimport { IconLink } from '@arco-design/web-react/icon';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { Stack, useEditorProps, useFocusIdx } from '@puralex/easy-email-editor';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Align } from '@extensions/AttributePanel/components/attributes/Align';\nimport { ICarousel } from '@puralex/easy-email-core';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\n\nconst options = [\n {\n value: 'hidden',\n get label() {\n return t('hidden');\n },\n },\n {\n value: 'visible',\n get label() {\n return t('visible');\n },\n },\n];\n\nexport function Carousel() {\n const { focusIdx } = useFocusIdx();\n return (\n \n \n \n \n \n\n \n \n \n \n \n \n (\n \n )}\n additionItem={{\n src: 'https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg',\n target: '_blank',\n }}\n />\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction CarouselImage({\n item,\n index,\n}: {\n item: ICarousel['data']['value']['images'];\n index: number;\n}) {\n const { focusIdx } = useFocusIdx();\n const { onUploadImage } = useEditorProps();\n return (\n \n \n \n \n }\n label={t('Url')}\n name={`${focusIdx}.data.value.images.[${index}].href`}\n />\n \n \n \n \n \n\n \n \n );\n}\n","import React from 'react';\nimport { BackgroundColor } from '@extensions/AttributePanel/components/attributes/BackgroundColor';\nimport { ImageUploaderField, InputWithUnitField, RadioGroupField, TextField } from '@extensions/components/Form';\nimport { Width } from '@extensions/AttributePanel/components/attributes/Width';\nimport { Height } from '@extensions/AttributePanel/components/attributes/Height';\nimport { VerticalAlign } from '@extensions/AttributePanel/components/attributes/VerticalAlign';\nimport { Padding } from '@extensions/AttributePanel/components/attributes/Padding';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { useEditorProps, useFocusIdx } from '@puralex/easy-email-editor';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\n\nconst options = [\n {\n value: 'fluid-height',\n get label() {\n return t('Fluid height');\n },\n },\n {\n value: 'fixed-height',\n get label() {\n return t('Fixed height');\n },\n },\n];\n\nexport function Hero() {\n const { focusIdx } = useFocusIdx();\n const { onUploadImage } = useEditorProps();\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n","import React from 'react';\nimport { ColorPickerField, EditTabField, SelectField, TextField } from '@extensions/components/Form';\nimport { Align } from '@extensions/AttributePanel/components/attributes/Align';\nimport { AttributesPanelWrapper } from '@extensions/AttributePanel/components/attributes/AttributesPanelWrapper';\nimport { Collapse, Grid, Space } from '@arco-design/web-react';\nimport { IconLink } from '@arco-design/web-react/icon';\nimport { NavbarLinkPadding } from '@extensions/AttributePanel/components/attributes/NavbarLinkPadding';\nimport { useFocusIdx, Stack } from '@puralex/easy-email-editor';\nimport { INavbar } from '@puralex/easy-email-core';\nimport { ClassName } from '../../attributes/ClassName';\nimport { CollapseWrapper } from '../../attributes/CollapseWrapper';\nimport {\n FontFamily,\n FontStyle,\n FontWeight,\n LetterSpacing,\n LineHeight,\n TextDecoration,\n TextTransform,\n} from '../../attributes';\nimport { pixelAdapter } from '../../adapter';\n\nexport function Navbar() {\n const { focusIdx } = useFocusIdx();\n return (\n \n \n \n \n \n \n \n\n \n \n (\n \n )}\n additionItem={{\n src: 'https://www.mailjet.com/wp-content/uploads/2016/11/ecommerce-guide.jpg',\n target: '_blank',\n content: 'New link',\n color: '#1890ff',\n 'font-size': '13px',\n }}\n />\n \n \n \n \n \n \n \n \n \n \n );\n}\n\nfunction NavbarLink({\n item,\n index,\n}: {\n item: INavbar['data']['value']['links'];\n index: number;\n}) {\n const { focusIdx } = useFocusIdx();\n return (\n \n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n }\n label={{t('Url')}}\n name={`${focusIdx}.data.value.links.[${index}].href`}\n />\n \n \n \n \n \n \n \n \n