ivanovzhan

Email Template Editor - Feature Documentation

A. High-Level Overview

The Email Template Editor is a comprehensive drag-and-drop email template creation system that allows users to design, edit, and manage email templates for review requests. Built around the Stripo email editor API, this feature provides a WYSIWYG interface where users can create personalized email templates with merge tags, validate content structure, import designs from other stores, and support multilingual content. The editor integrates with Yotpo's review request system, enabling users to craft engaging emails that drive customer engagement and review collection across different email types including reminders, targeted product requests, and site review requests.

B. Visual Diagrams (Using Mermaid.js)

1. Component Interaction Diagram

ivanovzhan

📌 Overview

Feature	Tiptap	Quill
Core Library	Built on top of ProseMirror	Custom-built editor engine
Language	TypeScript-first	JavaScript
Customizability	Highly customizable (nodes, marks, extensions)	Moderate (themes, modules, formats)
Framework Support	Vue, React, plain JS, etc.	Plain JS, React (via wrappers), Vue
Collaborative Editing	Supported via extensions (e.g. Yjs)	Not natively supported

ivanovzhan

Overview

Goal: Transform EmailEditor into a well-tested, easily maintainable library, enabling other teams to integrate it with minimal support overhead.

• Current Pain Points:
  • Inconsistent testing approaches
  • Frequent support requests from other teams
  • Lack of standardized E2E testing and documentation

ivanovzhan

{
   "pagination":{
      "total":15000,
      "size":20
   },
   "products":[
      {
         "id":"152428860",
         "created_at":"2019-12-18T22:37:48.000Z",
         "product_name":"Branded Shirt 16853",

ivanovzhan

import '@yotpo-common/ui-components/components/list';
import '@yotpo-common/ui-components/components/list-item';
import '@yotpo-common/ui-components/components/list-label';
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('test-dropdown')
export class TestDropdown extends LitElement {
    @state()
    private checked: boolean = false;

ivanovzhan

import '@yotpo-common/ui-components/components/list';
import '@yotpo-common/ui-components/components/list-item';
import '@yotpo-common/ui-components/components/list-label';
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('test-dropdown')
export class TestDropdown extends LitElement {
    @state()
    private checked: boolean = false;

ivanovzhan

@font-face {
      font-family: 'monospace, monospace';
    }

ivanovzhan

pre {
   font-family: Times New Roman;
}