Eddyter documentation

import { useRef, useState } from 'react';
import {
  ConfigurableEditorWithAuth,
  EditorProvider,
  type EddyterEditorHandle,
} from 'eddyter';
import 'eddyter/style.css';

export default function NoteEditor({ note }) {
  const editorRef = useRef<EddyterEditorHandle>(null);
  const [content, setContent] = useState(note?.content ?? '');

  const handleSave = async () => {
    // 1) Persist content to YOUR backend first — returns the saved record { id }.
    const saved = await saveToYourBackend({ id: note?.id, content });

    // 2) Snapshot a version BEFORE unmounting the editor. saveVersion() reads
    //    the live editor state and no-ops once the editor unmounts.
    try {
      await editorRef.current?.saveVersion({ documentId: saved.id });
    } catch (err) {
      console.error('Version save failed:', err); // non-fatal
    }
  };

  return (
    <>
      <button onClick={handleSave}>Save</button>
      <EditorProvider>
        <ConfigurableEditorWithAuth
          // Remount when switching documents so initialContent reloads cleanly.
          key={note?.id ?? 'new-note'}
          ref={editorRef}
          apiKey="your-api-key"
          documentId={note?.id}
          initialContent={content}
          onChange={setContent}
        />
      </EditorProvider>
    </>
  );
}

import { useState } from 'react';
import { ConfigurableEditorWithAuth, EditorProvider } from 'eddyter';
import 'eddyter/style.css';

export default function EmailComposer() {
  const [documentHtml, setDocumentHtml] = useState('');
  const [emailHtml, setEmailHtml] = useState('');

  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey="your-api-key"
        onChange={(html, meta) => {
          // meta.mode is "email" while the email builder is open.
          if (meta?.mode === 'email') setEmailHtml(html);
          else setDocumentHtml(html);
        }}
      />

      <button onClick={() => sendCampaign(emailHtml)}>Send</button>
    </EditorProvider>
  );
}

// The field list is data, not configuration — so it usually comes from
// wherever you already keep it, and can differ per account.
export async function getMergeFields(accountId: string) {
  const columns = await db
    .select()
    .from(contactFields)
    .where(eq(contactFields.accountId, accountId));

  return [
    ...columns.map((c) => ({
      // REQUIRED. The name YOU use — inner name only, no braces.
      value: c.key,
      // Optional. The picker's label; falls back to the value above.
      name: c.label,
      // Optional. A heading in the picker.
      group: c.category,
    })),
    // Nothing stops you hard-coding entries alongside the fetched ones.
    // "sample" is optional and feeds Preview only — it never reaches a
    // real email, so there is no need for a column to hold it.
    { value: 'order_total', name: 'Order total', sample: '$48.00', group: 'Order' },
    // The link every marketing email needs. Usable as a whole button href.
    { value: 'unsubscribe_url', name: 'Unsubscribe URL', group: 'System' },
  ];
}

import { useEffect, useState } from 'react';
import { ConfigurableEditorWithAuth, substituteMergeTags } from 'eddyter';
import type { EmailMergeTag } from 'eddyter';

function PersonalizedEmail({ accountId }: { accountId: string }) {
  const [mergeTags, setMergeTags] = useState<EmailMergeTag[]>([]);
  const [emailHtml, setEmailHtml] = useState('');

  useEffect(() => {
    fetch(`/api/accounts/${accountId}/merge-fields`)
      .then((r) => r.json())
      .then(setMergeTags);
  }, [accountId]);

  // What onChange gives you keeps the raw placeholders — your email
  // platform substitutes them at send time:
  //   <p>Hi <strong>{{first_name}}</strong>, your order has shipped.</p>
  //
  // ...and if you want a filled-in preview yourself:
  const preview = substituteMergeTags(emailHtml, {
    first_name: 'Alex',
    company: 'Acme',
  });

  return (
    <>
      <ConfigurableEditorWithAuth
        apiKey="your-api-key"
        emailMergeTags={mergeTags}
        // Mailchimp syntax instead? These two lines are the whole change:
        // emailMergeTagPrefix="*|"
        // emailMergeTagSuffix="|*"
        onChange={(html, meta) => {
          if (meta?.mode === 'email') setEmailHtml(html);
        }}
      />
      <iframe srcDoc={preview} title="Preview" />
    </>
  );
}

import sgMail from '@sendgrid/mail';

sgMail.setApiKey(process.env.SENDGRID_API_KEY!);

export async function sendCampaign(
  emailHtml: string,
  subject: string,
  accountId: string,
  recipientIds: string[],
) {
  // Never trust the client for addresses. It sends IDs; you resolve them,
  // scoped to the caller's account, and you re-check consent here.
  const recipients = await db
    .select()
    .from(contacts)
    .where(and(
      eq(contacts.accountId, accountId),
      inArray(contacts.id, recipientIds),
      eq(contacts.unsubscribed, false),
    ));

  const html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  <title>${subject}</title>
  <!--[if mso]>
  <noscript><xml><o:OfficeDocumentSettings>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings></xml></noscript>
  <![endif]-->
</head>
<body style="margin:0;padding:0;">${emailHtml}</body>
</html>`;

  const BATCH = 1000; // SendGrid's cap on personalizations per request

  for (let i = 0; i < recipients.length; i += BATCH) {
    await sgMail.send({
      from: 'you@yourdomain.com',
      subject,
      html,
      isMultiple: true,
      personalizations: recipients.slice(i, i + BATCH).map((r) => ({
        to: [{ email: r.email }],
        // Keyed by the tag's INNER value — the same names you declared in
        // getMergeFields, with no braces.
        dynamicTemplateData: {
          first_name: r.firstName,
          company: r.company,
          // Per recipient, always. One shared unsubscribe link means the
          // first person to click it unsubscribes your entire list.
          unsubscribe_url: `https://app.example.com/u/${r.unsubscribeToken}`,
        },
      })),
    });
  }
}