Email-maker-dev NPM

Это Dev версия плагина редаткора писем EmailMaker.В Prod версии, которая будет выпущена в ближайшем будущем будут незначительные отличия: в ней не будет эксперементальных функций, а весь имеющийся функциоенал будет более глубоко протестирован перед релизами.

Установка

Выполните этот код в командной строке:

$ npm i email-maker-dev@0.75.0 -save

Добавьте EmailMaker plugin в ваш App config.

Для сборщика Webpack

Импорт пакета:

const emailMakerPlugin = require('email-maker-dev/webpack')

Определение пакета в приложении:

module.exports = {
	plugins: [
		new EmailmakerWebpackPlugin(),
	]
}

Для сборщика Vite

Импорт пакета:

import emailMakerPlugin from 'email-maker-dev/vite'

Определение пакета в приложении:

export default defineConfig({
	plugins: [emailMakerPlugin()],
})

Инициализация

Импортируйте EmailMaker plugin в вашем компоненте:

import * as emailmaker from "email-maker-dev"

Параметры инициализации плагина содержат параметр getAuthToken. В него должна быть передана функция, которая запрашивает авторизационный OAuth токен по Client ID и Client Secret.

Полчение OAuth токена на бэкенде

curl --location 'https://api.emailmaker.ru/oauth/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=*******' \
--data-urlencode 'client_secret=*******' \
--data-urlencode 'grant_type=client_credentials'

Созадние сущсности EmailMaker plugin

emailmaker.init({
	getAuthToken: getAuthToken,
	element: "#test",
	content: {
		title: "Email subject",
		html: "<html><body>Email HTML code</body></html>",
	},
	config: { }
}).then(instance => {  })

Конфигурация

Конфигурация плагина представляет собой JSON с несколькими уровнями вложенности. В конфигурации вы можете настроить внешний вид, содержимое, с которым будет работать плагин и логику.

element

Вы можете передать строку element в конфигурацию плагина. Это селектор DOM-элемента, внутри которого нужно инициализировать плагин. Если элемент не определен, приложение будет запущено в фоновом режиме.

content

Секцйия content содержит параметры письма, которое нужно отобразить в редакторе. В этот параметр может быть передано:

{string}

HTML верстка письма.

{object} email options

{
	id?: string; // Уникальный ID проекта в вашей системе.
	html?: string; // HTML верстка письма.
	subject?: string; // Тема письма
	preheader?: string; // Прехедер письма.
}

{object} full description

{
	temlateId?: string; // ID шаблона внутри EmailMaker.
	email?: object; // email options.
	blocks?: []; // Дополнительные блоки.
	comments?: []; // Комментарии в письме.
}

Можно изменить содержимое в любой момент после инициализации с помощью метода instance.show(content).

config

Раздел для настройки внешнего вида и настроек редактора. Вы можете изменить конфигурацию этого раздела после инициализации, используя emailmaker.setConfig или emailmaker.updateConfig.

Список параметров секции config

Parameter	Description	Default
theme	Plugin theme: light, dark.	light
headerArrowBackVisible	Displaying the "Back" arrow.	true
headerTitleVisible	Displaying the "Title" field.	true
headerPreheaderVisible	Displaying the "Preheader" field.	true
pathEnabled	Bread crumbs	true
...	...	...

Обработка событий

События могут быть переданы в конфигурации или добавлены после при работе с экземпляром плагина. Все подписчики событий могут быть асинхронными функциями.

Пример

emailmaker.init({
	....,
	// Подписка на события в инициализации.
	handleReadEmail: (e) => {},
	handleSaveEmail: async (e) => {}
}).then((instance) => {
	// Подписка на события после инициализации.
	const dispose = instance.handleReadEmail(e => {});
	const dispose = instance.handleSaveEmail(async (e) => {});
});

Передавая асинхронную функцию, вы можете реализовать асинхронную загрузку данных.

Пример

emailmaker.init({
	element: "#test",
	content: {
		id: "1"
	}
	handleReadEmail: async (id) => {
		return await  fetchData(id); // Ваша функция получения данных.
	}
}).then((instance) => { 
	setTimeout(() => instance.show({ id: "2" }), 1000)
});

События

Обработчик события	Описание
handleReadEmail	Чтение письма
handleSaveEmail	Сохранение / обновление письма
handleReadEmailRevisions	Чтение списка автосохранений
handleEmailAutosave	Автосохранение
handleReadBlocks	Чтение списка блоков проекта
handleSaveBlock	Сохранение / обновление блока проекта
handleRemoveBlock	Удаление блока проекта
handleReadComments	Чтение списка комментариев письма
handleSaveComment	Сохранение / обновление комментария
handleRemoveComment	Удаление комментария письма
handleSaveButtonClick	Нажатие кнопки сохранения письма
handleNextButtonClick	Нажатие кнопки Далее
handlePreviousButtonClick	Нажатие кнопки Назад
handleEmailChanged	Изменение любого параметра письма
handleHtmlChanged	Изменение кода письма
handleDestroy	Деструкция плагина
handleLoad	Окончание инициализации экземпляра плагина
handleLoadImage	Загрузка изображений
handleNotify	Уведомление
handleError	Уведомление типа Ошибка
handleSuccess	Уведомление типа Успех
handleTestEmailSend	Отправка тестового письма
handleTestEmailModal	Открытие модального окна тестового письма

Методы

Метод	Описание
init	Инициализация (async)
show	Изменение содержимого после инициализации
destroy	Деструкция экземпляра
reset	Сброс всей конфигурации
getEmail	Получение текущего письма
getConfig	Получение конфигурации
getBlocks	Получение блоков проекта
getComments	Получение комментариев письма
getEmailRevisions	Получение списка контроля версий
setConfig	Установка новых парамеров config
updateConfig	Добавление к параметрам config
notify	Показ уведомлений
getElement	Получение элемента инициализации
save	Сохраенние письма.