Skip to main content

Overwrite component

To facilitate users in customizing their components and functionalities to meet different client business requirements, we have exported a significant number of components, mainly divided into three major blocks:

  • SharedComponents mainly consists of some common blocks and components.

    const SharedComponents = {
      PreviewEmailDrawer: PreviewEmailDrawer,
      PreviewEmail: PreviewEmail,
      BlockSideBar: BlockSideBar,
      ConfigurationSideBar: ConfigurationSideBar,
      AttributePanel: AttributePanel,
      ColumnLayout: ColumnLayout,
      ConfigurationDrawer: ConfigurationDrawer,
      ConfigurationPanel: ConfigurationPanel,
      EditorTabs: EditorTabs,
      UniversalElementEditorDrawer: UniversalElementEditorDrawer,
      RichTextBar: RichTextBar,
      HoveringToolbar: HoveringToolbar,
      Hotkeys: Hotkeys,
      Controller: Controller,
      UnsplashImages: UnsplashImages,
      WidgetConfigPanel: WidgetConfigPanel,
      FullHeightOverlayScrollbars: FullHeightOverlayScrollbars,
      ...
    };

  • AttributePanel primarily comprises form components. For example, if you want to change the font size field from an input to a slider, you can achieve this by overriding AttributePanel.FontSize.

    const AttributeField = {
        WatchField: WatchField,
        SyncChildrenField: SyncChildrenField,
        TextField: TextField,
        NumberField: NumberField,
        PixelField: PixelField,
        SelectField: SelectField,
        ColorPickerField: ColorPickerField,
        SliderField: SliderField,
        SwitchField: SwitchField,
        ...
    }

  • ConfigPanelsMap is responsible for rendering the panels of all block Elements.

const ConfigPanelsMap: Record<string, React.FC<{ nodePath: Path }>> = {
  [ElementType.PAGE]: Page,
  [ElementType.STANDARD_NAVBAR]: Navbar,
  [ElementType.STANDARD_BUTTON]: Button,
  [ElementType.STANDARD_IMAGE]: Image,
  [ElementType.STANDARD_SOCIAL]: Social,
  [ElementType.STANDARD_DIVIDER]: Divider,
  [ElementType.STANDARD_SPACER]: Spacer,
  [ElementType.STANDARD_WRAPPER]: Wrapper,
  [ElementType.STANDARD_SECTION]: Section,
  [ElementType.STANDARD_COLUMN]: Column,
  [ElementType.STANDARD_HERO]: Hero,
  [ElementType.CONTENT_WIDGET]: Widget,
  [ElementType.SECTION_WIDGET]: Widget,
  [ElementType.WRAPPER_WIDGET]: Widget,

  //text
  [ElementType.STANDARD_TEXT]: Text,
  [ElementType.STANDARD_PARAGRAPH]: Text,
  [ElementType.STANDARD_H1]: Text,
  [ElementType.STANDARD_H2]: Text,
  [ElementType.STANDARD_H3]: Text,
  [ElementType.STANDARD_H4]: Text,
};

How to Overwrite Components​

When you want to override a component, you just need to do the following:

SharedComponents.xxx = xxx;
// For example:
SharedComponents.BlockSideBar = () => {
  return <>111</>;
};

AttributeField.xxx = xxx;
// For example:
AttributeField.TextField = () => {
  return <>111</>;
};

ConfigPanelsMap.xxx = xxx;
// For example:
ConfigPanelsMap[ElementType.PAGE] = () => {
  return <>111</>;
};

Common Customization Scenarios​

Here are some common scenarios where you might want to overwrite components:

  1. Branding customization: Change the appearance of components to match your client's brand guidelines
  2. Feature enhancement: Add additional functionality to existing components
  3. UI simplification: Remove or simplify features for specific client needs
  4. Integration with external systems: Modify components to work with client-specific APIs or data sources
  5. Custom validation: Add specialized validation rules for certain fields

By overwriting components, you can tailor the email editor experience to perfectly match your clients' business requirements while maintaining the core functionality of Easy Email Pro.