Rich Text Email Composer

import { Scribe } from 'scribejs-editor';
import 'scribejs-editor/dist/scribe.css';

// A compose window: a fixed toolbar reads well for email bodies
const editor = Scribe.init('#email-body', {
  toolbar:     'fixed',
  autofocus:   true,
  placeholder: 'Write your message...',
});

// Apply inline formatting from your own toolbar buttons
document.querySelector('#bold').addEventListener('click',   () => editor.bold());
document.querySelector('#italic').addEventListener('click', () => editor.italic());
document.querySelector('#link').addEventListener('click',   () => {
  const url = prompt('Link URL:');
  if (url) editor.link(url);
});

// Send: grab clean HTML for the email body
document.querySelector('#send-btn').addEventListener('click', async () => {
  const bodyHtml = editor.getHTML();   // sanitized, clean semantic HTML
  await fetch('/api/email/send', {
    method:  'POST',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({
      to:      document.querySelector('#to').value,
      subject: document.querySelector('#subject').value,
      html:    bodyHtml,
    }),
  });
});

import { Scribe } from 'scribejs-editor';

// Separate editor instance for the user's saved signature
const signature = Scribe.init('#signature-editor', {
  toolbar:     'floating',
  placeholder: 'Add your email signature...',
});

// Load an existing signature from the server
const saved = await fetch('/api/settings/signature').then(r => r.json());
if (saved.html) signature.setHTML(saved.html);

// Persist signature HTML on save
document.querySelector('#save-sig').addEventListener('click', async () => {
  const html = signature.getHTML();
  await fetch('/api/settings/signature', {
    method:  'PUT',
    headers: { 'Content-Type': 'application/json' },
    body:    JSON.stringify({ html }),
  });
});

// When composing, append the signature to the body HTML before sending
function composeWithSignature(bodyHtml, signatureHtml) {
  return `${bodyHtml}<br><br>--<br>${signatureHtml}`;
}

import { useRef, useEffect, useState } from 'react';
import { Scribe } from 'scribejs-editor';

export function EmailComposer({ onSend, signatureHtml }) {
  const containerRef = useRef(null);
  const editorRef    = useRef(null);
  const [sending, setSending] = useState(false);

  useEffect(() => {
    editorRef.current = Scribe.init(containerRef.current, {
      toolbar:     'fixed',
      autofocus:   true,
      placeholder: 'Write your message...',
    });
    return () => editorRef.current?.destroy();
  }, []);

  const send = async (to, subject) => {
    const editor = editorRef.current;
    if (!editor || editor.isEmpty()) return;
    setSending(true);
    // getHTML() returns sanitized HTML, safe to store and resend
    const body = editor.getHTML();
    const html = signatureHtml
      ? `${body}<br><br>--<br>${signatureHtml}`
      : body;
    try {
      await onSend({ to, subject, html });
      editor.setHTML('');   // clear the compose window after sending
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="email-composer">
      <div ref={containerRef} className="prose max-w-none" />
      <button disabled={sending} onClick={() => send(/* to, subject */)}>
        {sending ? 'Sending...' : 'Send'}
      </button>
    </div>
  );
}