npm - @emailmaker/emailmaker - Versions diffs - 1.1.12 → 1.1.18 - Mend

@emailmaker/emailmaker 1.1.12 → 1.1.18

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 (45) hide show

package/emailmaker-core.18e2e08a.js +1 -0
package/emailmaker-esm.js +109 -19
package/emailmaker.d.ts +44 -0
package/emailmaker.js +593 -3
package/iframe/js/amp.C-2gKk7c.js +1 -0
package/iframe/js/iframe-eblock.js +1 -1
package/iframe/js/iframe.js +1 -1
package/iframe/js/rules.CNqvmp_P.js +1 -1
package/iframe/js/sanitize-html/sanitize-html.js +21756 -0
package/iframe/js/sanitize-html/sanitize-html.min.js +16923 -0
package/package.json +1 -1
package/singlepage_headless_plugin.html +592 -0
package/static/core/{fe996f08.js → 1c0e987c.js} +1 -1
package/static/core/{c7edc4c6.js → 22a59378.js} +2 -2
package/static/core/2545db9f.js +1 -0
package/static/core/4829f3dc.js +51 -0
package/static/core/{8df8364d.js → 82a963a8.js} +2 -2
package/static/core/{bb64d285.js → 83f8d1a4.js} +1 -1
package/static/core/84263298.js +20 -0
package/static/core/97c7d145.js +471 -0
package/static/core/{81f3e3c0.js → 9a11e317.js} +1 -1
package/static/core/{d97c92e6.js → a899caaf.js} +2 -2
package/static/core/b7cabc9c.js +78 -0
package/static/core/cd98a657.js +834 -0
package/static/core/{eb32c1fb.js → da8f68e0.js} +2 -2
package/static/core/{ad026780.js → e865979e.js} +1 -1
package/static/esm/104e77cb.js +1 -0
package/static/esm/193ef89c.js +7 -0
package/static/esm/{27964dfe.js → b9d66884.js} +1 -1
package/static/esm/c4069a00.js +1 -0
package/two_step_headless_plugin.html +1 -1
package/emailmaker-core.f22adcc6.js +0 -1
package/iframe/js/amp.CUKrusRy.js +0 -1
package/iframe/js/sanitize-html.BWcyAj0s.js +0 -1
package/static/core/4f5fa8f8.js +0 -1
package/static/core/73fecffa.js +0 -1
package/static/core/795854f6.js +0 -1
package/static/core/a8a4b287.js +0 -853
package/static/core/b0b98d59.js +0 -490
package/static/core/db57afb1.js +0 -78
package/static/core/f95aa023.js +0 -51
package/static/esm/b86c52d7.js +0 -1
package/static/esm/cadc597d.js +0 -1
/package/iframe/{iframe-eblock.f22adcc6.html → iframe-eblock.18e2e08a.html} +0 -0
/package/iframe/{iframe.f22adcc6.html → iframe.18e2e08a.html} +0 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@emailmaker/emailmaker",
-  "version": "1.1.12",
+  "version": "1.1.18",
   "private": false,
   "main": "emailmaker.js",
   "module": "emailmaker-esm.js",

package/singlepage_headless_plugin.html ADDED Viewed

@@ -0,0 +1,592 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <title>Single-page host demo</title>
+    <script id="plugin-script" type="text/javascript" src="emailmaker.js?18e2e08a"></script>
+    <style>
+      :root {
+        --bg: #eef1f8;
+        --card: #ffffff;
+        --text: #1a1d2e;
+        --muted: #6b7289;
+        --border: #dde1ec;
+        --border-focus: #5b5cf6;
+        --primary: #5b5cf6;
+        --primary-hover: #4a4be8;
+        --secondary-bg: #f3f4f8;
+        --secondary-hover: #e8eaf2;
+        --shadow: 0 12px 40px rgba(26, 29, 46, 0.08);
+        --radius: 16px;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        min-height: 100%;
+      }
+      body {
+        font-family:
+          'Segoe UI',
+          system-ui,
+          -apple-system,
+          sans-serif;
+        font-size: 15px;
+        line-height: 1.5;
+        color: var(--text);
+        background: radial-gradient(circle at 20% 0%, #e8eaff 0%, transparent 45%), var(--bg);
+      }
+      body.editor-open {
+        overflow: hidden;
+      }
+      .page {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 32px 20px;
+      }
+      .card {
+        width: 100%;
+        max-width: 520px;
+        background: var(--card);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        padding: 32px;
+      }
+      .card h1 {
+        margin: 0 0 8px;
+        font-size: 22px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+      }
+      .card__hint {
+        margin: 0 0 28px;
+        color: var(--muted);
+        font-size: 14px;
+      }
+      .field {
+        margin-bottom: 20px;
+      }
+      .field__label {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 13px;
+        font-weight: 600;
+        color: var(--muted);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .field__input {
+        width: 100%;
+        padding: 14px 16px;
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        background: #fafbfe;
+        color: var(--text);
+        font: inherit;
+        font-size: 16px;
+        transition:
+          border-color 0.15s,
+          box-shadow 0.15s,
+          background 0.15s;
+      }
+      .field__input::placeholder {
+        color: #a0a6b8;
+      }
+      .field__input:hover {
+        border-color: #c5cad8;
+        background: #fff;
+      }
+      .field__input:focus {
+        outline: none;
+        border-color: var(--border-focus);
+        background: #fff;
+        box-shadow: 0 0 0 4px rgba(91, 92, 246, 0.12);
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 12px;
+        margin-top: 28px;
+      }
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 48px;
+        padding: 0 24px;
+        border: none;
+        border-radius: 12px;
+        font: inherit;
+        font-size: 15px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          background 0.15s,
+          transform 0.1s,
+          opacity 0.15s;
+      }
+      .btn:active:not(:disabled) {
+        transform: scale(0.98);
+      }
+      .btn:disabled {
+        opacity: 0.55;
+        cursor: not-allowed;
+      }
+      .btn--primary {
+        flex: 1;
+        min-width: 140px;
+        background: var(--primary);
+        color: #fff;
+      }
+      .btn--primary:hover:not(:disabled) {
+        background: var(--primary-hover);
+      }
+      .btn--secondary {
+        flex: 1;
+        min-width: 140px;
+        background: var(--secondary-bg);
+        color: var(--text);
+      }
+      .btn--secondary:hover:not(:disabled) {
+        background: var(--secondary-hover);
+      }
+      .status {
+        margin-top: 16px;
+        min-height: 20px;
+        font-size: 13px;
+        color: var(--muted);
+      }
+      .status--busy {
+        color: #b45309;
+      }
+      .status--ok {
+        color: #059669;
+      }
+      #view_host.is-hidden {
+        display: none !important;
+      }
+      #view_editor {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100vw;
+        height: 100vh;
+        height: 100dvh;
+        margin: 0;
+        padding: 0;
+        z-index: 2147483647;
+        background: #fff;
+        overflow: hidden;
+      }
+      #view_editor.is-open {
+        display: block;
+      }
+      #plugin-editor-mount {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="view_host">
+      <div class="page">
+        <div class="card">
+          <h1>Письмо</h1>
+          <p class="card__hint">Тема и прехедер на стороне хоста, дизайн — в редакторе.</p>
+          <div class="field">
+            <label class="field__label" for="field_subject">Тема</label>
+            <input
+              id="field_subject"
+              class="field__input"
+              type="text"
+              autocomplete="off"
+              placeholder="Например: Скидка 20% только до пятницы"
+            />
+          </div>
+          <div class="field">
+            <label class="field__label" for="field_preheader">Прехедер</label>
+            <input
+              id="field_preheader"
+              class="field__input"
+              type="text"
+              autocomplete="off"
+              placeholder="Короткий текст, видимый в списке писем"
+            />
+          </div>
+          <div class="actions">
+            <button type="button" class="btn btn--primary" id="btn_save">Сохранить</button>
+            <button type="button" class="btn btn--secondary design-nav" id="btn_edit_design">Редактировать дизайн</button>
+          </div>
+          <p class="status" id="status_line" aria-live="polite"></p>
+        </div>
+      </div>
+    </div>
+    <div id="view_editor">
+      <div id="plugin-editor-mount"></div>
+    </div>
+    <script async defer>
+      const APP_NAME = "emailmaker";
+      const getEditorSdk = () => window[APP_NAME];
+      const STORAGE_KEY = 'plugin_demo_singlepage_letter_v4';
+      const DEMO_LETTER_ID = 'test_test_test_test';
+      const INITIAL_TEMPLATE_ID = 321739;
+      const SAMPLE_AUTOSAVE_HTML =
+        '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin:0;padding:24px;font-family:Arial,sans-serif;"><h1>Черновик письма</h1><p>Контент из редактора.</p></body></html>';
+      const COMMON_STYLES =
+        '{"text":{"fontFamily":["Arial,sans-serif"],"fontSize":16,"color":"#333"},"headings":{"fontSize":24,"bold":true}}';
+      const systemfields = [
+        { label: 'Имя получателя', value: 'ToName' },
+        { label: 'Имя', value: 'Name' },
+      ];
+      const getAuthToken = async () => {
+        const formdata = new FormData();
+        formdata.append('grant_type', 'client_credentials');
+        formdata.append('client_id', '****');
+        formdata.append('client_secret', '****');
+        formdata.append('user_id', 'test_test_test');
+        return fetch('/api?oauth=token', { method: 'POST', body: formdata })
+          .then((r) => r.json())
+          .then((r) => r.access_token)
+          .catch(() => '');
+      };
+      const defaultLetterStore = () => ({
+        id: DEMO_LETTER_ID,
+        subject: 'Тема письма',
+        html: SAMPLE_AUTOSAVE_HTML,
+        json: JSON.stringify({
+          id: DEMO_LETTER_ID,
+          subject: 'Тема письма',
+          preheader: 'Текст прехедера для инбокса',
+          common_styles: COMMON_STYLES,
+        }),
+        revisions: [],
+      });
+      let letterStore = loadLetterFromStorage();
+      let editorInstance = null;
+      let isEmailInitialized = false;
+      let updateLoading = false;
+      const statusLine = document.getElementById('status_line');
+      const btnSave = document.getElementById('btn_save');
+      const btnEditDesign = document.getElementById('btn_edit_design');
+      const setStatus = (text, kind = '') => {
+        statusLine.textContent = text;
+        statusLine.className = 'status' + (kind ? ` status--${kind}` : '');
+      };
+      const setBusy = (busy) => {
+        updateLoading = busy;
+        btnSave.disabled = busy;
+        btnEditDesign.disabled = busy;
+        if (busy) {
+          setStatus('Сохранение…', 'busy');
+        }
+      };
+      function loadLetterFromStorage() {
+        try {
+          const raw = localStorage.getItem(STORAGE_KEY);
+          if (!raw) return defaultLetterStore();
+          return { ...defaultLetterStore(), ...JSON.parse(raw), id: DEMO_LETTER_ID };
+        } catch {
+          return defaultLetterStore();
+        }
+      }
+      function saveLetterToStorage() {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(letterStore));
+      }
+      const parseLetterJson = () => {
+        try {
+          return JSON.parse(letterStore.json || '{}');
+        } catch {
+          return {};
+        }
+      };
+      const getFieldValues = () => ({
+        subject: document.getElementById('field_subject').value,
+        preheader: document.getElementById('field_preheader').value,
+      });
+      const persistHostMetadataFromInputs = () => {
+        const { subject, preheader } = getFieldValues();
+        letterStore.subject = subject;
+        letterStore.json = JSON.stringify({ ...parseLetterJson(), subject, preheader });
+        saveLetterToStorage();
+      };
+      const applySubjectFromEditor = (subject) => {
+        const value = String(subject ?? '');
+        letterStore.subject = value;
+        letterStore.json = JSON.stringify({ ...parseLetterJson(), subject: value });
+        document.getElementById('field_subject').value = value;
+        saveLetterToStorage();
+      };
+      const applyPreheaderFromEditor = (preheader) => {
+        const value = String(preheader ?? '');
+        letterStore.json = JSON.stringify({ ...parseLetterJson(), preheader: value });
+        document.getElementById('field_preheader').value = value;
+        saveLetterToStorage();
+      };
+      const resolveMetadata = (data, patch = {}) => {
+        const host = getFieldValues();
+        const email = parseLetterJson();
+        const subject = (
+          patch.subject ??
+          data?.subject ??
+          host.subject ??
+          letterStore.subject ??
+          email.subject ??
+          ''
+        ).trim();
+        const preheader =
+          patch.preheader ??
+          (data?.preheader !== undefined ? data.preheader : undefined) ??
+          host.preheader ??
+          email.preheader ??
+          '';
+        return { subject, preheader: String(preheader) };
+      };
+      const syncFieldsFromStore = () => {
+        const email = parseLetterJson();
+        document.getElementById('field_subject').value = letterStore.subject ?? email.subject ?? '';
+        document.getElementById('field_preheader').value = email.preheader ?? '';
+      };
+      const updateEditButtonLabel = () => {
+        btnEditDesign.textContent = letterStore.html?.trim()
+          ? 'Редактировать дизайн'
+          : 'Добавить дизайн';
+      };
+      const getRevisionsForPlugin = () =>
+        (letterStore.revisions || []).map((r) => ({ ...r, parent: DEMO_LETTER_ID }));
+      const handleReadEmailRevisions = async () => getRevisionsForPlugin();
+      const buildPluginHandlers = () => ({
+        handleReadEmailRevisions,
+        handleEmailInit: async () => {
+          isEmailInitialized = true;
+        },
+        handleSubjectChanged: (subject) => {
+          applySubjectFromEditor(subject);
+        },
+        handlePreheaderChanged: (preheader) => {
+          applyPreheaderFromEditor(preheader);
+        },
+      });
+      const buildEditorConfig = () => ({
+        locale: 'ru_RU',
+        mode: 'pro',
+        theme: 'light',
+        revisionService: true,
+        previewIconEnabled: true,
+        livePreviewEnabled: true,
+        nextButtonEnabled: true,
+        mergeTags: {
+          syntax: ['{{%value%}}'],
+          items: [{ label: 'System', value: 'System', children: systemfields }],
+        },
+      });
+      const updateJsonAndEmail = async (data, patch = {}) => {
+        const email = parseLetterJson();
+        const { subject, preheader } = resolveMetadata(data, patch);
+        letterStore.subject = subject;
+        letterStore.json = JSON.stringify({
+          ...email,
+          ...data,
+          ...patch,
+          subject,
+          preheader,
+        });
+        if (editorInstance) {
+          const compiled = await editorInstance.compileEmail();
+          if (compiled?.compiled?.html) letterStore.html = compiled.compiled.html;
+        }
+        saveLetterToStorage();
+        syncFieldsFromStore();
+        updateEditButtonLabel();
+      };
+      const updateLetterAndJson = async ({ subject, preheader }) => {
+        if (!editorInstance) {
+          letterStore.subject = subject;
+          letterStore.json = JSON.stringify({ ...parseLetterJson(), subject, preheader });
+          saveLetterToStorage();
+          syncFieldsFromStore();
+          return;
+        }
+        setBusy(true);
+        try {
+          const email = parseLetterJson();
+          await editorInstance.show({
+            ...email,
+            id: DEMO_LETTER_ID,
+            subject,
+            preheader,
+            code: letterStore.html,
+          });
+          const data = await editorInstance.getEmail();
+          await updateJsonAndEmail({ ...data, id: DEMO_LETTER_ID }, { subject, preheader });
+        } finally {
+          setBusy(false);
+        }
+      };
+      const destroyEditor = async () => {
+        if (editorInstance) {
+          await editorInstance.destroy();
+          editorInstance = null;
+        }
+        isEmailInitialized = false;
+      };
+      const replaceEditorMount = () => {
+        const parent = document.getElementById('view_editor');
+        const old = document.getElementById('plugin-editor-mount');
+        const fresh = document.createElement('div');
+        fresh.id = 'plugin-editor-mount';
+        parent.replaceChild(fresh, old);
+      };
+      const buildDesignContent = ({ useTemplate = false } = {}) => {
+        const { subject, preheader } = getFieldValues();
+        const email = { ...parseLetterJson(), subject, preheader };
+        delete email.code;
+        const autosaves = getRevisionsForPlugin();
+        if (!useTemplate && letterStore.html?.trim()) {
+          return { email: { ...email, id: DEMO_LETTER_ID, code: letterStore.html }, autosaves };
+        }
+        return { templateId: INITIAL_TEMPLATE_ID, email: { ...email, id: DEMO_LETTER_ID }, autosaves };
+      };
+      const initHeadlessEditor = async () => {
+        if (!letterStore.html?.trim()) return;
+        await destroyEditor();
+        const email = parseLetterJson();
+        editorInstance = await getEditorSdk().init({
+          getAuthToken,
+          config: buildEditorConfig(),
+          content: {
+            email: {
+              ...email,
+              id: DEMO_LETTER_ID,
+              subject: letterStore.subject,
+              preheader: email.preheader,
+              code: letterStore.html,
+            },
+            autosaves: getRevisionsForPlugin(),
+          },
+          ...buildPluginHandlers(),
+        });
+      };
+      const initFullEditor = async ({ useTemplate = false } = {}) => {
+        await destroyEditor();
+        editorInstance = await getEditorSdk().init({
+          getAuthToken,
+          element: '#plugin-editor-mount',
+          content: buildDesignContent({ useTemplate }),
+          config: buildEditorConfig(),
+          ...buildPluginHandlers(),
+          handleNextButtonClick: async (data) => {
+            await updateJsonAndEmail(data);
+            await showHostView();
+            setStatus('Дизайн сохранён', 'ok');
+          },
+          handleEmailAutosave: async ({ value }) => {
+            if (!isEmailInitialized) return value;
+            await updateJsonAndEmail(value);
+            return value;
+          },
+          handleSaveEmail: async ({ value }) => {
+            await updateJsonAndEmail(value);
+            return value;
+          },
+        });
+      };
+      const showHostView = async () => {
+        document.body.classList.remove('editor-open');
+        document.getElementById('view_editor').classList.remove('is-open');
+        document.getElementById('view_host').classList.remove('is-hidden');
+        await initHeadlessEditor();
+        syncFieldsFromStore();
+        updateEditButtonLabel();
+      };
+      const showEditorView = async ({ useTemplate = false } = {}) => {
+        if (updateLoading) return;
+        document.getElementById('view_host').classList.add('is-hidden');
+        document.getElementById('view_editor').classList.add('is-open');
+        document.body.classList.add('editor-open');
+        window.scrollTo(0, 0);
+        replaceEditorMount();
+        await initFullEditor({ useTemplate });
+      };
+      const goToDesign = async () => {
+        if (updateLoading) return;
+        persistHostMetadataFromInputs();
+        await showEditorView({ useTemplate: !letterStore.html?.trim() });
+      };
+      const onSave = async () => {
+        const { subject, preheader } = getFieldValues();
+        setBusy(true);
+        try {
+          await updateLetterAndJson({ subject, preheader });
+          setStatus('Сохранено', 'ok');
+        } catch (e) {
+          setStatus('Ошибка сохранения', 'busy');
+          console.error(e);
+        } finally {
+          setBusy(false);
+        }
+      };
+      btnSave.addEventListener('click', () => void onSave());
+      btnEditDesign.addEventListener('click', () => void goToDesign());
+      (async () => {
+        syncFieldsFromStore();
+        updateEditButtonLabel();
+        await showHostView();
+      })();
+    </script>
+  </body>
+</html>