Easy Email Pro Editor

The easy-email-pro-editor package provides the core editor components and hooks for building email template editors. This package handles the editor state management and provides React hooks for accessing editor functionality.

Installation

pnpm install easy-email-pro-editor

Components

EmailEditorProvider

The main provider component that wraps your editor and manages editor state.

import { EmailEditorProvider, EmailTemplate } from "easy-email-pro-editor";

<EmailEditorProvider {...config}>
  {/* Your editor UI components */}
</EmailEditorProvider>

EmailEditor

The base editor component (typically used through theme layouts like Retro.Layout).

Hooks

useEditorProps

Gets the editor configuration props that were passed to EmailEditorProvider.

import { useEditorProps } from "easy-email-pro-editor";

function MyComponent() {
  const props = useEditorProps();
  // Access: props.onUpload, props.onSubmit, props.initialValues, etc.
}

Returns: EmailEditorProps - The editor configuration object

useSelectedNode

Gets the currently selected node and provides methods to change selection.

import { useSelectedNode } from "easy-email-pro-editor";

function MyComponent() {
  const { selectedNode, selectedNodePath, setSelectedNodePath } = useSelectedNode<ImageElement>();

  if (selectedNode) {
    console.log("Selected:", selectedNode.type);
    console.log("Path:", selectedNodePath);
  }

  // Change selection programmatically
  const handleSelect = (path: Path) => {
    setSelectedNodePath(path);
  };
}

Returns:

• selectedNode: T | undefined - The currently selected element
• selectedNodePath: Path | null - The Slate path to the selected node
• setSelectedNodePath: (path?: Path | null) => void - Function to change selection

Example Usage:

import { useSelectedNode } from "easy-email-pro-editor";
import { NodeUtils } from "easy-email-pro-core";

function AttributePanel() {
  const { selectedNode } = useSelectedNode();

  if (!selectedNode) {
    return <div>No element selected</div>;
  }

  if (NodeUtils.isTextElement(selectedNode)) {
    return <TextAttributePanel />;
  }

  if (NodeUtils.isImageElement(selectedNode)) {
    return <ImageAttributePanel />;
  }

  return <DefaultAttributePanel />;
}

useEditorState

Gets the editor's internal state including selection, history, and other editor-specific data. This hook returns the editor state store.

import { useEditorState } from "easy-email-pro-editor";

function MyComponent() {
  const editorState = useEditorState();
  // Access: selectedNodePath, hoverNodePath, dragNodePath, etc.
}

Returns: The editor state store containing:

• selectedNodePath: Current selected node path
• hoverNodePath: Currently hovered node path
• dragNodePath: Currently dragged node path
• activeTab: Active tab (desktop/mobile)
• And other interactive state properties

useSelectedNodePath

Get the currently selected node path. This is a simpler way to access just the selected path.

import { useSelectedNodePath } from "easy-email-pro-editor";

function MyComponent() {
  const selectedPath = useSelectedNodePath();
  // Returns Path | null
}

Note: This hook is exported from the editor store (@easy-email-pro-editor/store) and provides a simpler way to access the selected node path without using the full useEditorState hook. It's also re-exported from the main easy-email-pro-editor package for convenience.

useEditorActions

Provides actions for manipulating the editor, such as setting selection.

import { useEditorActions } from "easy-email-pro-editor";

function MyComponent() {
  const { setSelectedNodePath } = useEditorActions();
  // Use setSelectedNodePath to change selection
}

Type Definitions

EmailTemplate

interface EmailTemplate {
  subject: string;
  content: PageElement;
}

EmailEditorProps

See the Configuration Guide for a complete list of configuration options.

Usage Examples

Accessing Editor State

import { useSelectedNode, useEditorProps } from "easy-email-pro-editor";

function CustomPanel() {
  const { selectedNode } = useSelectedNode();
  const props = useEditorProps();

  const handleSave = () => {
    // Access editor methods through props
    props.onSubmit?.(template);
  };

  return (
    <div>
      {selectedNode && (
        <div>Editing: {selectedNode.type}</div>
      )}
    </div>
  );
}

Programmatic Selection

import { useSelectedNode, useEditorActions } from "easy-email-pro-editor";
import { Path } from "slate";

function BlockList() {
  const { selectedNodePath } = useSelectedNode();
  const { setSelectedNodePath } = useEditorActions();

  const handleBlockClick = (path: Path) => {
    setSelectedNodePath(path);
  };

  return (
    <div>
      {blocks.map((block, index) => (
        <div
          key={index}
          onClick={() => handleBlockClick([0, index])}
          className={selectedNodePath?.equals([0, index]) ? "selected" : ""}
        >
          Block {index}
        </div>
      ))}
    </div>
  );
}