npm - @emailmaker/emailmaker - Versions diffs - 1.1.7 → 1.1.8 - Mend

@emailmaker/emailmaker 1.1.7 → 1.1.8

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

package/{emailmaker-core.0f53b24b.js → emailmaker-core.2a78033e.js} +1 -1
package/emailmaker-esm.js +2 -2
package/emailmaker.js +2 -2
package/iframe/js/amp.CdTI2-VC.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.tGUeRBWs.js +1 -0
package/package.json +1 -1
package/static/core/{f67b8fa2.js → 136331f7.js} +2 -2
package/static/core/{5f66a133.js → 1f9fcb39.js} +3 -3
package/static/core/{b330862b.js → 31f5d274.js} +2 -2
package/static/core/{542c10a0.js → 461a4018.js} +1 -1
package/static/core/{37323be2.js → 65824986.js} +10 -10
package/static/core/{54c69205.js → 6eb88f06.js} +1 -1
package/static/core/{e5c35767.js → 8147252b.js} +1 -1
package/static/core/879b6072.js +1 -0
package/static/core/{425f6198.js → 97e1264b.js} +2 -2
package/static/core/9ef47c7c.js +1 -0
package/static/core/{6f1c8ca5.js → a56dd82d.js} +2 -2
package/static/core/{eb4e7505.js → ae2bef91.js} +1 -1
package/static/core/{c7f99585.js → bfd98708.js} +1 -1
package/static/core/{e1ac64f3.js → d3d60ed0.js} +4 -4
package/static/core/fdb48e3f.js +78 -0
package/two_step_headless_plugin.html +558 -0
package/iframe/js/amp.BtGt-xkd.js +0 -1
package/iframe/js/sanitize-html.BzjMWt1k.js +0 -1
package/static/core/99f965a4.js +0 -1
package/static/core/c19a7448.js +0 -78
package/static/core/de149603.js +0 -1
/package/iframe/{iframe-eblock.0f53b24b.html → iframe-eblock.2a78033e.html} +0 -0
/package/iframe/{iframe.0f53b24b.html → iframe.2a78033e.html} +0 -0

package/two_step_headless_plugin.html ADDED Viewed

@@ -0,0 +1,558 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <title>Two-step flow: design → subject/preheader (headless)</title>
+    <script id="plugin-script" type="text/javascript" src="emailmaker.js?2a78033e"></script>
+    <style>
+      body {
+        margin: 0;
+        font-family: system-ui, sans-serif;
+        font-size: 14px;
+      }
+      .toolbar {
+        display: flex;
+        gap: 8px;
+        padding: 8px;
+        border-bottom: 1px solid #ddd;
+        align-items: center;
+        flex-wrap: wrap;
+      }
+      .step-btn.active {
+        font-weight: 600;
+        outline: 2px solid #852876;
+      }
+      #flow_log {
+        margin: 0;
+        padding: 8px;
+        background: #f5f5f5;
+        border-bottom: 1px solid #ddd;
+        max-height: 180px;
+        overflow: auto;
+        white-space: pre-wrap;
+        font-size: 12px;
+      }
+      .page {
+        display: none;
+        height: calc(100vh - 260px);
+      }
+      .page.active {
+        display: block;
+      }
+      #blocks-editor {
+        padding: 0;
+        background: #fff;
+        height: 100%;
+        min-height: 400px;
+        box-sizing: border-box;
+      }
+      .subject-page {
+        padding: 16px;
+        max-width: 640px;
+      }
+      .subject-page label {
+        display: block;
+        margin-top: 12px;
+        font-weight: 500;
+      }
+      .subject-page input,
+      .subject-page textarea {
+        width: 100%;
+        margin-top: 4px;
+        padding: 8px;
+        box-sizing: border-box;
+      }
+      .letter-state {
+        font-size: 12px;
+        color: #555;
+        margin-top: 8px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="toolbar">
+      <strong>Two-step editor flow</strong>
+      <button type="button" id="step_design" class="step-btn active">1. Design (full editor)</button>
+      <button type="button" id="step_subject" class="step-btn">2. Subject &amp; preheader (headless)</button>
+      <button type="button" id="btn_clear_log">Очистить log</button>
+    </div>
+    <pre id="flow_log"></pre>
+    <div id="page_design" class="page active">
+      <div id="blocks-editor"></div>
+    </div>
+    <div id="page_subject" class="page subject-page">
+      <p>
+        Шаг 2: редактор без <code>element</code> (headless), UI — свои поля хоста.
+        Синхронизация: <code>show()</code> → <code>getEmail()</code> →
+        <code>updateJsonAndEmail</code> (subject — entity, preheader — json). Persist при каждом переходе шага.
+      </p>
+      <label for="field_subject">Subject</label>
+      <input id="field_subject" type="text" autocomplete="off" />
+      <label for="field_preheader">Preheader</label>
+      <textarea id="field_preheader" rows="3"></textarea>
+      <p class="letter-state" id="headless_status">Headless: не инициализирован</p>
+      <button type="button" id="btn_subject_next">Next (завершить шаг 2)</button>
+    </div>
+    <script async defer>
+      /**
+       * Двухшаговый флоу встраивания редактора:
+       * - Шаг 1 (design): editor.init({ element }) — полный редактор, save через updateHtmlAndEmail
+       * - Шаг 2 (headless): editor.init({ content }) без element — UI полей хоста
+       * - subject — поле сущности (letterStore.subject), preheader — в json
+       * - Шаг 2 sync: show() → getEmail() → updateJsonAndEmail
+       * - Между шагами: persist текущего шага → destroy() → новый init
+       */
+      /** Как plugin.html: id письма и шаблон с API (без inline code при старте). */
+      const DEMO_LETTER_ID = 'test_test_test_test';
+      const INITIAL_TEMPLATE_ID = 321739;
+      /** Debounce 400ms для subject/preheader на шаге 2. */
+      const FIELD_DEBOUNCE_MS = 400;
+      const COMMON_STYLES =
+        '{"block":{"darkBgColor":"#1c52dc"},"text":{"fontFamily":["Safe Fonts","-apple-system, \'Segoe UI\', \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif"],"fontSize":16,"fontSizeDim":"px","lineHeight":21,"lineHeightDim":"px","color":"#5a5a5a","textAlign":"left","paddingBottom":10,"paddingBottomDim":"px"},"headings":{"fontFamily":["Safe Fonts","-apple-system, \'Segoe UI\', \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif"],"fontSize":24,"fontSizeDim":"px","lineHeight":32,"lineHeightDim":"px","color":"#333333","textAlign":"left","paddingTop":20,"paddingTopDim":"px","paddingBottom":10,"paddingBottomDim":"px","letterSpacing":0,"letterSpacingDim":"px","bold":true,"italic":false},"links":{"color":"#1C52DC","underline":true},"buttons":{"fontFamily":["Safe Fonts","-apple-system, \'Segoe UI\', \'Helvetica Neue\', Helvetica, Roboto, Arial, sans-serif"],"fontSize":16,"fontSizeDim":"px","letterSpacing":0,"letterSpacingDim":"px","color":"#FFFFFF","bold":false,"italic":false,"backgroundColor":"#1C52DC","marginTop":10,"marginTopDim":"px","marginBottom":10,"marginBottomDim":"px","border":{"all":null,"top":null,"right":null,"bottom":null,"left":null},"borderRadius":{"all":5,"topLeft":null,"topRight":null,"bottomRight":null,"bottomLeft":null},"textAlign":"center","padding":{"all":null,"top":null,"right":null,"bottom":null,"left":null}},"block":{"backgroundColor":""}}';
+      /** Начальный email — как в plugin.html (тот же templateId + поля). */
+      const createInitialEmail = () => ({
+        id: DEMO_LETTER_ID,
+        author: 123,
+        isNew: false,
+        subject: 'topic',
+        preheader: '',
+        description: '',
+        project: 'undefined',
+        parent_email: '309707',
+        common_styles: COMMON_STYLES,
+        title: '',
+        date: '2024-01-12T08:42:09',
+        modified: '2024-02-16T17:21:01',
+        group: [],
+        lock: false,
+        utm_parameters: {
+          utm_content: 'ssssssss',
+        },
+      });
+      const buildDesignContent = () => {
+        const email = parseLetterJson();
+        // subject — entity field, preheader — из json.
+        if (letterStore.subject) {
+          email.subject = letterStore.subject;
+        }
+        delete email.code;
+        if (letterStore.html) {
+          return {
+            email: {
+              ...email,
+              id: DEMO_LETTER_ID,
+              code: letterStore.html,
+            },
+          };
+        }
+        return {
+          templateId: INITIAL_TEMPLATE_ID,
+          email: {
+            ...email,
+            id: DEMO_LETTER_ID,
+          },
+        };
+      };
+      const buildBaseConfig = () => ({
+        locale: 'en_US',
+        mode: 'pro',
+        theme: 'light',
+        previewIconEnabled: true,
+        livePreviewEnabled: true,
+        nextButtonEnabled: true,
+        mergeTags: {
+          syntax: ['{{%value%}}'],
+          items: [
+            { label: 'System', value: 'System', children: systemfields },
+            { label: 'User', value: 'User', children: systemfields },
+          ],
+        },
+      });
+      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', '****');
+        return fetch('/api?oauth=token', { method: 'POST', body: formdata })
+          .then((r) => r.json())
+          .then((r) => r.access_token)
+          .catch(() => '');
+      };
+      /** In-memory store: subject + html + json (preheader в json). */
+      const letterStore = {
+        id: DEMO_LETTER_ID,
+        subject: 'topic',
+        html: '',
+        json: JSON.stringify(createInitialEmail()),
+      };
+      let editorInstance = null;
+      let currentStep = 'design';
+      let isEmailInitialized = false;
+      let isNotSaved = false;
+      let preheaderDebounceTimer = null;
+      let subjectDebounceTimer = null;
+      const flowLog = document.getElementById('flow_log');
+      const headlessStatus = document.getElementById('headless_status');
+      const appendLog = (msg) => {
+        const line = `[${new Date().toLocaleTimeString()}] ${msg}`;
+        console.log(line);
+        flowLog.textContent = `${flowLog.textContent}${flowLog.textContent ? '\n' : ''}${line}`;
+        flowLog.scrollTop = flowLog.scrollHeight;
+      };
+      const parseLetterJson = () => {
+        try {
+          return JSON.parse(letterStore.json || '{}');
+        } catch {
+          return {};
+        }
+      };
+      const getHeadlessFieldValues = () => ({
+        subject: document.getElementById('field_subject').value,
+        preheader: document.getElementById('field_preheader').value,
+      });
+      /** Заполнить поля шага 2: subject из entity, preheader из json. */
+      const syncHeadlessFieldsFromStore = () => {
+        const email = parseLetterJson();
+        document.getElementById('field_subject').value = letterStore.subject ?? email.subject ?? '';
+        document.getElementById('field_preheader').value = email.preheader ?? '';
+      };
+      const clearFieldDebounce = () => {
+        if (preheaderDebounceTimer) {
+          clearTimeout(preheaderDebounceTimer);
+          preheaderDebounceTimer = null;
+        }
+        if (subjectDebounceTimer) {
+          clearTimeout(subjectDebounceTimer);
+          subjectDebounceTimer = null;
+        }
+      };
+      /**
+       * Merge getEmail() в json + compile html.
+       * letterPatch — доп. поля entity (subject и т.д.).
+       */
+      const updateJsonAndEmail = async (data, letterPatch = {}) => {
+        const email = parseLetterJson();
+        const safeSubject = (data.subject || letterStore.subject || '').trim() || letterStore.subject;
+        const safeData = { ...data, subject: safeSubject, id: DEMO_LETTER_ID };
+        letterStore.subject = safeSubject;
+        letterStore.json = JSON.stringify({ ...email, ...safeData, ...letterPatch });
+        if (editorInstance) {
+          const compiled = await editorInstance.compileEmail();
+          if (compiled?.compiled?.html) {
+            letterStore.html = compiled.compiled.html;
+          }
+        }
+        isNotSaved = false;
+      };
+      /** Шаг 1: save после правок в design-редакторе. */
+      const updateHtmlAndEmail = async (data, instance = editorInstance) => {
+        if (!instance) {
+          throw new Error('editor instance missing');
+        }
+        await updateJsonAndEmail(data);
+        appendLog(
+          `updateHtmlAndEmail: html=${letterStore.html?.length ?? 0}b subject="${letterStore.subject}" preheader="${parseLetterJson().preheader ?? ''}"`,
+        );
+      };
+      /**
+       * Шаг 2: show() → getEmail() → updateJsonAndEmail.
+       * Всегда передаём subject и preheader вместе.
+       */
+      const updateLetterAndJson = async ({ preheader, newData = {} } = {}) => {
+        if (!editorInstance) {
+          appendLog('updateLetterAndJson: skip — no editor instance');
+          return;
+        }
+        const email = parseLetterJson();
+        const nextPreheader = preheader !== undefined ? preheader : email.preheader;
+        const nextSubject = newData.subject ?? letterStore.subject ?? email.subject;
+        appendLog(
+          `updateLetterAndJson: show() subject="${nextSubject}" preheader="${nextPreheader ?? ''}"`,
+        );
+        await editorInstance.show({
+          ...email,
+          id: DEMO_LETTER_ID,
+          subject: nextSubject,
+          preheader: nextPreheader,
+          code: letterStore.html,
+        });
+        const data = await editorInstance.getEmail();
+        await updateJsonAndEmail({ ...data, id: DEMO_LETTER_ID }, newData);
+        appendLog(
+          `updateLetterAndJson: persisted subject="${letterStore.subject}" preheader="${parseLetterJson().preheader ?? ''}" html=${letterStore.html?.length ?? 0}b`,
+        );
+      };
+      const destroyEditor = async () => {
+        if (editorInstance) {
+          appendLog('destroyEditor: instance.destroy()');
+          await editorInstance.destroy();
+          editorInstance = null;
+        }
+        isEmailInitialized = false;
+      };
+      /** Новый DOM-узел — иначе shadow root / ELEMENT_MAP ломают повторный init на том же #blocks-editor. */
+      const replaceDesignEditorMount = () => {
+        const page = document.getElementById('page_design');
+        const old = document.getElementById('blocks-editor');
+        if (!page || !old) {
+          return;
+        }
+        const fresh = document.createElement('div');
+        fresh.id = 'blocks-editor';
+        page.replaceChild(fresh, old);
+      };
+      const persistDesignBeforeLeave = async () => {
+        if (!editorInstance) {
+          return;
+        }
+        try {
+          const data = await editorInstance.getEmail();
+          await updateHtmlAndEmail(data);
+          appendLog(
+            `persistDesignBeforeLeave: subject="${letterStore.subject}" preheader="${parseLetterJson().preheader ?? ''}"`,
+          );
+        } catch (error) {
+          const message = error && error.message ? error.message : String(error);
+          appendLog(`persistDesignBeforeLeave failed: ${message}`);
+        }
+      };
+      /** Перед уходом с шага 2: flush debounce + updateLetterAndJson с полями формы. */
+      const persistHeadlessBeforeLeave = async () => {
+        clearFieldDebounce();
+        if (!editorInstance) {
+          return;
+        }
+        try {
+          const { subject, preheader } = getHeadlessFieldValues();
+          await updateLetterAndJson({ preheader, newData: { subject } });
+          appendLog(
+            `persistHeadlessBeforeLeave: subject="${letterStore.subject}" preheader="${parseLetterJson().preheader ?? ''}"`,
+          );
+        } catch (error) {
+          const message = error && error.message ? error.message : String(error);
+          appendLog(`persistHeadlessBeforeLeave failed: ${message}`);
+        }
+      };
+      const initDesignEditor = async () => {
+        await destroyEditor();
+        replaceDesignEditorMount();
+        appendLog('initDesignEditor: editor.init({ element: #blocks-editor })');
+        editorInstance = await emailmaker.init({
+          getAuthToken,
+          element: '#blocks-editor',
+          project: undefined,
+          previewIconEnabled: true,
+          livePreviewEnabled: true,
+          nextButtonEnabled: true,
+          content: buildDesignContent(),
+          config: buildBaseConfig(),
+          handleReadEmailRevisions: () => [],
+          handleEmailInit: async (data) => {
+            appendLog(`ON_EMAIL_INIT (design) preheader=${data?.preheader ?? ''} html=${data?.html?.length ?? 0}b`);
+            isEmailInitialized = true;
+          },
+          handleEmailChanged: () => {
+            isNotSaved = true;
+          },
+          handleSaveButtonClick: async () => {
+            appendLog('handleSaveButtonClick: analytics hook');
+          },
+          handleNextButtonClick: async (data) => {
+            appendLog('handleNextButtonClick: save design → go to step 2');
+            await updateHtmlAndEmail(data);
+            await goToStep('subject');
+          },
+          handleEmailAutosave: async ({ value }) => {
+            if (!isEmailInitialized) {
+              return value;
+            }
+            const compiled = await editorInstance?.compileEmail();
+            if (!compiled?.compiled?.html) {
+              return value;
+            }
+            appendLog('handleEmailAutosave (design)');
+            await updateHtmlAndEmail(value);
+            return value;
+          },
+          handleSaveEmail: async ({ value }) => {
+            appendLog('handleSaveEmail (design)');
+            await updateHtmlAndEmail(value);
+            return value;
+          },
+        });
+        try {
+          const compiled = await editorInstance.compileEmail();
+          appendLog(
+            `initDesignEditor done: compile html=${compiled?.compiled?.html?.length ?? 0}b`,
+          );
+        } catch (error) {
+          const message = error && error.message ? error.message : String(error);
+          appendLog(`initDesignEditor compile check failed: ${message}`);
+        }
+      };
+      const initHeadlessEditor = async () => {
+        await destroyEditor();
+        appendLog('initHeadlessEditor: editor.init({ NO element }) — headless');
+        // Headless init: subject из store, preheader из json, code из html.
+        const email = parseLetterJson();
+        const subject = letterStore.subject;
+        const preheader = email.preheader ?? '';
+        const code = letterStore.html;
+        editorInstance = await emailmaker.init({
+          getAuthToken,
+          config: { locale: 'en_US' },
+          content: {
+            email: {
+              ...email,
+              id: DEMO_LETTER_ID,
+              subject,
+              code,
+              preheader,
+            },
+          },
+          handleReadEmailRevisions: () => [],
+          handleEmailInit: async () => {
+            appendLog('handleEmailInit (headless): emailInitialized');
+            isEmailInitialized = true;
+            headlessStatus.textContent = 'Headless: initialized';
+          },
+        });
+        syncHeadlessFieldsFromStore();
+        appendLog(
+          `initHeadlessEditor: fields subject="${letterStore.subject}" preheader="${parseLetterJson().preheader ?? ''}"`,
+        );
+        headlessStatus.textContent = isEmailInitialized ? 'Headless: initialized' : 'Headless: waiting init…';
+      };
+      const goToStep = async (step) => {
+        if (step === currentStep) {
+          return;
+        }
+        // Persist текущего шага перед destroy (оба направления).
+        if (currentStep === 'design') {
+          await persistDesignBeforeLeave();
+        } else if (currentStep === 'subject') {
+          await persistHeadlessBeforeLeave();
+        }
+        currentStep = step;
+        document.getElementById('page_design').classList.toggle('active', step === 'design');
+        document.getElementById('page_subject').classList.toggle('active', step === 'subject');
+        document.getElementById('step_design').classList.toggle('active', step === 'design');
+        document.getElementById('step_subject').classList.toggle('active', step === 'subject');
+        if (step === 'design') {
+          await initDesignEditor();
+        } else {
+          await initHeadlessEditor();
+        }
+      };
+      /** Preheader input → debounce → { preheader, newData: { subject } }. */
+      const schedulePreheaderSync = () => {
+        if (preheaderDebounceTimer) {
+          clearTimeout(preheaderDebounceTimer);
+        }
+        preheaderDebounceTimer = setTimeout(() => {
+          const { subject, preheader } = getHeadlessFieldValues();
+          appendLog(`debounce ${FIELD_DEBOUNCE_MS}ms → updateLetterAndJson (preheader+subject)`);
+          void updateLetterAndJson({ preheader, newData: { subject } });
+        }, FIELD_DEBOUNCE_MS);
+      };
+      /** Subject input → debounce → updateLetterAndJson с актуальным preheader. */
+      const scheduleSubjectSync = () => {
+        if (subjectDebounceTimer) {
+          clearTimeout(subjectDebounceTimer);
+        }
+        subjectDebounceTimer = setTimeout(() => {
+          const { subject, preheader } = getHeadlessFieldValues();
+          appendLog(`debounce ${FIELD_DEBOUNCE_MS}ms → updateLetterAndJson (subject+preheader)`);
+          void updateLetterAndJson({ preheader, newData: { subject } });
+        }, FIELD_DEBOUNCE_MS);
+      };
+      const onSubjectFieldBlur = () => {
+        clearFieldDebounce();
+        const { subject, preheader } = getHeadlessFieldValues();
+        appendLog('subject blur → updateLetterAndJson (subject+preheader)');
+        void updateLetterAndJson({ preheader, newData: { subject } });
+      };
+      document.getElementById('step_design').addEventListener('click', () => {
+        void goToStep('design');
+      });
+      document.getElementById('step_subject').addEventListener('click', () => {
+        void goToStep('subject');
+      });
+      document.getElementById('btn_clear_log').addEventListener('click', () => {
+        flowLog.textContent = '';
+      });
+      document.getElementById('field_preheader').addEventListener('input', schedulePreheaderSync);
+      document.getElementById('field_subject').addEventListener('input', scheduleSubjectSync);
+      document.getElementById('field_subject').addEventListener('blur', onSubjectFieldBlur);
+      document.getElementById('btn_subject_next').addEventListener('click', async () => {
+        clearFieldDebounce();
+        const { subject, preheader } = getHeadlessFieldValues();
+        appendLog('step 2 Next: updateLetterAndJson + finish');
+        await updateLetterAndJson({ preheader, newData: { subject } });
+        appendLog(
+          `DONE letter: subject="${letterStore.subject}", preheader="${parseLetterJson().preheader ?? ''}", html=${letterStore.html?.length}b`,
+        );
+      });
+      (async () => {
+        try {
+          appendLog('=== two-step flow demo START (step 1: design) ===');
+          appendLog(`letter id=${DEMO_LETTER_ID}, templateId=${INITIAL_TEMPLATE_ID} (no inline code)`);
+          await initDesignEditor();
+        } catch (error) {
+          const message = error && error.message ? error.message : String(error);
+          appendLog(`FATAL: ${message}`);
+          console.error(error);
+        }
+      })();
+    </script>
+  </body>
+</html>