Form Components

Easy Email Pro provides a comprehensive set of form components for email template editing. These components are designed to be easily customizable and don't require additional form libraries.

Built-in Form Components

export const AttributeField = {
  // Basic Form Fields
  WatchField: WatchField,
  SyncChildrenField: SyncChildrenField,
  TextField: TextField,
  NumberField: NumberField,
  PixelField: PixelField,
  SelectField: SelectField,
  ColorPickerField: ColorPickerField,
  SliderField: SliderField,
  SwitchField: SwitchField,
  ButtonGroupField: ButtonGroupField,
  ImageUploaderField: ImageUploaderField,
  EditPanelListField: EditPanelListField,
  EditPanelTabsField: EditPanelTabsField,
  PixelAndPercentField: PixelAndPercentField,

  // Attribute Fields
  Heading: Heading,
  Direction: Direction,
  Preheader: Preheader,
  Height: Height,
  Width: Width,
  TextAreaField: TextAreaField,
  Link: Link,
  BackgroundImage: BackgroundImage,
  DisplayOptions: DisplayOptions,
  Columns: Columns,
  BackgroundColor: BackgroundColor,
  DividerLine: DividerLine,
  BackgroundPosition: BackgroundPosition,
  StackOnMobile: StackOnMobile,
  ImageUrl: ImageUrl,
  Border: Border,
  ImageWidth: ImageWidth,
  BorderRadius: BorderRadius,
  FontFamily: FontFamily,
  FontSize: FontSize,
  LetterSpacing: LetterSpacing,
  LineHeight: LineHeight,
  TextAlign: TextAlign,
  VerticalAlign: VerticalAlign,
  Padding: Padding,
  TextAndHeadingStyle: TextAndHeadingStyle,
  FontWeight: FontWeight,
  GlobalLink: GlobalLink,
  Typography: Typography,
  TextAndHeadingList: TextAndHeadingList,
  Buttons: Buttons,
  ButtonContent: ButtonContent,
  ButtonCategory: ButtonCategory,
  WebFonts: WebFonts,
  RichTextField,
  FieldItem: FieldItem,
};

Basic Usage

Using Form Components

// For block elements (with nodePath)
<AttributeField.TextField
  label={t("Text")}
  path={nodePath}
  name={"data.content"}
/>

// For non-block elements (without nodePath)
<AttributeField.TextField
  label={t("Subject")}
  path={null}
  name={"subject"}
/>

Manual Form Value Management

Besides automatic form handling, you can manually manage form values using the editor context:

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

function MyComponent() {
  const { setFieldValue, getFieldValue } = useEditorContext();

  // For block elements
  const handleBlockUpdate = () => {
    setFieldValue(nodePath, "attributes.src", "https://example.com/image.jpg");
    const value = getFieldValue(nodePath, "attributes.src");
  };

  // For non-block elements
  const handleSubjectUpdate = () => {
    setFieldValue(null, "subject", "New Email Subject");
    const subject = getFieldValue(null, "subject");
  };
}

Custom Form Components

You can create custom form components when the default ones don't meet your needs:

import { enhancer } from "easy-email-pro-theme";
import {
  Select as ArcoSelect,
  SelectProps as ArcoSelectProps,
} from "@arco-design/web-react";

interface SelectProps extends ArcoSelectProps {
  options: Array<{ value: any; label: React.ReactNode }>;
  onChange?: (val: string) => void;
  value: string;
}

const Select = (props: SelectProps) => {
  const options = useMemo(() => props.options || [], [props.options]);
  return (
    <ArcoSelect {...props} value={props.value} onChange={props.onChange}>
      {options.map((item, index) => (
        <ArcoSelect.Option key={index} value={item.value}>
          {item.label}
        </ArcoSelect.Option>
      ))}
    </ArcoSelect>
  );
};

const SelectField = enhancer(Select);

Important Notes

1. Easy Email Pro has its own form management system
2. Avoid using third-party form libraries (e.g., react-hook-form) as they may conflict
3. Use path={null} for non-block elements (e.g., subject, global settings)
4. Use path={nodePath} for block elements to ensure proper updates

For a detailed custom Panel example, check this implementation.