/** * The unique identifier used to register the email editor data store. * This store manages the email editor's state and settings. */ export { storeName, createStore, TemplatePreview, EmailBuiltStyles, } from './store'; /** * React hooks for email editor functionality. * * These hooks provide access to email editor state, template previews, and styling * capabilities within React components. * * @example * ```jsx * import { useIsEmailEditor, usePreviewTemplates, useEmailCss } from '@woocommerce/email-editor'; * * function EmailComponent() { * // Check if we're in the email editor context * const isEmailEditor = useIsEmailEditor(); * * // Get template previews * const [templates, recentPosts, hasRecentPosts] = usePreviewTemplates(); * * // Get CSS styles for the email * const [styles] = useEmailCss(); * * // Use the data... * } * ``` * * @since 1.0.0 */ export { /** * Hook to detect if the current context is the email editor. * * Performs contextual checks to determine if editing an email post or * associated template. Verifies the email editor store exists and compares * the current post ID and type against the email editor's configuration. * * @return {boolean} True if in the email editor context, false otherwise * * @example * ```js * const isEmailEditor = useIsEmailEditor(); * if (!isEmailEditor) { * return null; // Don't render in non-email contexts * } * ``` */ useIsEmailEditor, /** * Hook to generate preview data for email templates and recent posts. * * Processes email templates and patterns to create preview configurations * that combine template layouts with content. Merges template blocks with * pattern blocks by replacing core/post-content blocks with actual content. * Optionally includes recent email posts. * * @param {string} customEmailContent - Optional custom email content for previews. Pass 'swap' to exclude recent posts * @param {boolean} includeRecentPosts - Whether to include recent email posts (default: true). Recent posts are only included when this is true AND customEmailContent is not 'swap' * @return [TemplatePreview[], TemplatePreview[], boolean] Tuple of template previews, recent post previews, and whether recent posts exist * * @example * ```js * const [templates, recentPosts, hasRecentPosts] = usePreviewTemplates(); * templates.forEach(template => { * // Render template preview * }); * ``` */ usePreviewTemplates, /** * Hook to generate complete CSS styles for the email editor. * * Merges editor theme settings, user theme customizations, and layout * configurations to produce final CSS output. Handles responsive design * by applying device-specific styles and manages root container styles * including width, padding, and content sizing. * * @return [EmailBuiltStyles[]] Array of style objects with CSS rules for the email editor * * @example * ```js * const [styles] = useEmailCss(); * styles.forEach(style => { * // Apply style.css to the document * }); * ``` */ useEmailCss, } from './hooks'; /** * This method is used to initialize the email editor. * This method expects some data set on the global window object set on window.WooCommerceEmailEditor * * { * "current_post_type": "", // The post type of the current post. * "current_post_id": "", // The ID of the current post. * "current_wp_user_email": "", // The email of the current user. * "editor_settings": {}, // The block editor settings. * "editor_theme": {}, // The block editor theme. * "user_theme_post_id": "", // The ID of the user theme post. * "urls": { * "listings": "", // optional The URL for the listings page. * "send": "", // optional The URL for the send button. * "back": "" // optional The URL for the back button (top left corner). * } * } * * @param htmlId - The ID of the HTML element to initialize the editor in. */ export declare function initializeEditor(htmlId: string): void; /** * Experimental component meant as a replacement for initializeEditor. * Still working on the API, so it's not recommended to use it in production. * * @param postId - The ID of the post to edit. * @param postType - The type of the post to edit. * @param config - The configuration for the editor. * * @example * ```jsx * import { ExperimentalEmailEditor } from '@woocommerce/email-editor'; * * */ export { ExperimentalEmailEditor } from './editor'; export type { EmailEditorSettings, EmailTheme, EmailEditorUrls, PostWithPermissions, } from './store/types'; /** * The registerEntityAction and unregisterEntityAction are used to register and unregister entity actions. * These use Gutenberg's private APIs and are highly unstable. * DO NOT USE OUTSIDE WooCommerce. * * If necessary, import the unlock module and access the private APIs for your use case. */ export { registerEntityAction, unregisterEntityAction } from './private-apis'; /** * A modal component for sending test emails from the email editor. * * This component provides a user interface for sending preview emails to test * email templates before they are used in production. It includes email validation, * sending status feedback, error handling, and success confirmation. * * The component is typically used within the email editor's preview functionality * and integrates with the WordPress editor's preview system. * * @example * ```jsx * import { SendPreviewEmail } from '@woocommerce/email-editor'; * * // The component manages its own modal state through the email editor store * * ``` * * Features: * - Email address validation * - Real-time sending status updates * - Error message display with retry capability * - Success confirmation with visual feedback * - Keyboard accessibility (Enter to send) * - Event tracking for analytics * * @since 1.0.0 */ export { SendPreviewEmail } from './components/preview'; /** * A rich text input component with personalization tags support. * * This component provides a WordPress RichText editor enhanced with a button * that allows users to insert personalization tags (like customer name, order details, etc.) * into email content. The component handles tag insertion, validation, and proper * HTML comment formatting for personalization tags. * * @example * ```jsx * import { RichTextWithButton } from '@woocommerce/email-editor'; * * setEmailProperty(name, value)} * help="Use personalization tags to customize the subject for each customer" * /> * ``` * * @param props - Component properties * @param props.label - The label text displayed above the input field * @param props.labelSuffix - Optional additional content to display after the label * @param props.help - Optional help text displayed below the input field * @param props.placeholder - Placeholder text shown when the input is empty * @param props.attributeName - The name of the attribute being edited (used for tracking and updates) * @param props.attributeValue - The current value of the rich text content * @param props.updateProperty - Callback function to update the property value when content changes * * @since 1.0.0 */ export { RichTextWithButton } from './components/personalization-tags/rich-text-with-button'; /** * Event tracking utilities for the email editor. * * These functions provide analytics and usage tracking capabilities for the email editor. * All events are prefixed with 'email_editor_events_' and can be disabled via configuration. * * @see {@link https://github.com/woocommerce/woocommerce/blob/0bed6cbba7e599c6535b777f6dc1e0009b05cb08/packages/js/email-editor/src/telemetry-tracking.md} for more information on the event tracking system. * * @example * ```jsx * import { recordEvent, recordEventOnce, isEventTrackingEnabled } from '@woocommerce/email-editor'; * * // Record a user action * recordEvent('button_clicked', { buttonType: 'save', location: 'toolbar' }); * * // Record an event only once per session * recordEventOnce('editor_loaded', { postType: 'email' }); * * // Check if tracking is enabled before expensive operations * if (isEventTrackingEnabled()) { * // Perform tracking-related work * } * ``` * * @since 1.0.0 */ export { /** * Records an event with optional data for analytics tracking. * * Events are automatically prefixed with 'email_editor_events_' and dispatched * to the global event system. Only records events when tracking is enabled. * * @param name - The event name in snake_case format (e.g., 'button_clicked') * @param data - Optional event data as a JSON-serializable object * * @example * ```js * recordEvent('personalization_tag_inserted', { * tagType: 'customer_name', * location: 'subject_line' * }); * ``` */ recordEvent, /** * Records an event only once per session, preventing duplicate tracking. * * Useful for events that should only be tracked once, such as page loads, * feature discoveries, or one-time user actions. Uses a cache based on * event name and data to determine uniqueness. * * @param name - The event name in snake_case format * @param data - Optional event data as a JSON-serializable object * * @example * ```js * recordEventOnce('email_editor_first_load', { * userType: 'admin', * emailType: 'order_confirmation' * }); * ``` */ recordEventOnce, /** * A debounced version of recordEvent that waits 700ms before recording. * * Prevents excessive event recording for rapid user actions like typing, * scrolling, or mouse movements. The 700ms delay accounts for average * human reaction time plus additional buffer for user interactions. * * @param name - The event name in snake_case format * @param data - Optional event data as a JSON-serializable object * * @example * ```js * // This will only record once even if called multiple times rapidly * debouncedRecordEvent('content_typed', { * fieldName: 'email_body', * contentLength: content.length * }); * ``` */ debouncedRecordEvent, /** * Checks whether event tracking is currently enabled. * * Returns true if the global tracking configuration allows event recording. * Use this to conditionally perform expensive tracking-related operations * or to provide different user experiences based on tracking preferences. * * @return {boolean} True if event tracking is enabled, false otherwise * * @example * ```js * if (isEventTrackingEnabled()) { * // Perform analytics-related work * const userBehaviorData = collectDetailedMetrics(); * recordEvent('detailed_metrics_collected', userBehaviorData); * } * ``` */ isEventTrackingEnabled, } from './events'; /** * A Fill component for the email actions slot in the Settings panel. * * Use this Fill together with `registerPlugin` to render content in the * email actions slot inside the email editor's Settings panel. Both * EmailStatus and TemplateSelection are rendered through this slot by default. * Registrations can be removed with `unregisterPlugin` and replaced with * custom implementations. * * @example * ```jsx * import { EmailActionsFill, TemplateSelection } from '@woocommerce/email-editor'; * import { registerPlugin, unregisterPlugin } from '@wordpress/plugins'; * * // Remove the default TemplateSelection from the Settings panel * unregisterPlugin( 'woocommerce-email-editor-template-selection' ); * * // Render TemplateSelection in a custom location via registerPlugin * registerPlugin( 'my-custom-template-selection', { * scope: 'woocommerce-email-editor', * render: () => ( * * * * ), * } ); * ``` * * @since 1.0.0 */ export { EmailActionsFill } from './components/sidebar/settings-panel'; /** * A sidebar component for selecting and managing email templates. * * Displays the currently active template with options to edit or swap templates. * This component is rendered by default inside the Settings panel via a * `registerPlugin` registration using `EmailActionsFill`. Consumers can remove * it with `unregisterPlugin` and re-render it in a custom location. * * @example * ```jsx * import { EmailActionsFill, TemplateSelection } from '@woocommerce/email-editor'; * import { registerPlugin, unregisterPlugin } from '@wordpress/plugins'; * * // Remove the default TemplateSelection from the Settings panel * unregisterPlugin( 'woocommerce-email-editor-template-selection' ); * * // Render TemplateSelection in a custom location * registerPlugin( 'my-custom-template-selection', { * scope: 'woocommerce-email-editor', * render: () => ( * * * * ), * } ); * ``` * * @since 1.0.0 */ export { TemplateSelection } from './components/sidebar/template-selection'; /** * A confirmation modal shown before navigating to the template editor. * * Warns the user that editing a template affects all emails using it, * then navigates to the template editor on confirmation. Used internally * by `TemplateSelection` and exported for consumers building custom * template selection UIs. * * @param props - Component properties * @param props.close - Callback to close the modal without navigating * * @since 1.7.0 */ export { EditTemplateModal } from './components/sidebar/edit-template-modal'; /** * A full-screen modal for browsing and selecting email templates. * * Displays available templates in a categorized grid with previews. * Handles template selection by applying the chosen template to the * current post. Used internally by `TemplateSelection` and exported * for consumers building custom template selection UIs. * * @param props - Component properties * @param props.onSelectCallback - Called after a template is selected * @param props.closeCallback - Called when the modal is closed without selection * @param props.previewContent - Custom email content for template previews * @param props.postType - The post type of the current email * * @since 1.7.0 */ export { SelectTemplateModal } from './components/template-select';