@emailmaker/emailmaker 1.1.64 → 1.1.69

package/singlepage_headless_plugin.html

@@ -1,592 +0,0 @@
-<!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?ac3e9ba7"></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>