Custom Property Editor (coming soon)

1. Introduction

Custom Property Editor allows you to create custom editing fields for elements in YayMail. This guide will help you understand how to implement and use custom property editors effectively.

1. Enqueue Scripts

function admin_enqueue_scripts( $hook_suffix ) {
    if ( in_array( $hook_suffix, [ 'yaycommerce_page_yaymail-settings' ], true ) && class_exists( 'WC_Emails' ) ) {
            \YayMail\Utils\YayMailViteApp::get_instance()->enqueue_entry( 'yaymail-addon.tsx', [ 'react', 'react-dom' ] );
    }
}

add_action( 'admin_enqueue_scripts',  'admin_enqueue_scripts' );

1. Register Custom Editor

// yaymail-addon.tsx
import YourCustomEditor from './elements/YourCustomEditor';

document.addEventListener('yaymail-loaded', (event) => {
  window.yaymailData.shared?.stores?.useAddonStore
    ?.getState()
    .registerAddonCustomPropertyEditor({
      name: 'addon_your_custom_editor', // Must start with 'addon_'
      component: YourCustomEditor
    });
});

1. Create Custom Editor Component

// elements/YourCustomEditor.tsx
import { PropertyBuilderComponentType } from '@src/features/email-customizer/components/sidebar/element-editor/types';

interface YourCustomEditorProps {
  data: {
    value_path?: string;
    title?: string;
    default_value?: any;
    extras_data?: any;
  };
}

const YourCustomEditor: PropertyBuilderComponentType<YourCustomEditorProps> = ({ data }) => {
  const { title, default_value, extras_data } = data;
  const updateChosenElementData = useTemplateContentStore(
    (state) => state.updateChosenElementData
  );

  const handleChange = (value: any) => {
    updateChosenElementData(
      (draftData: any) => {
        draftData[data.value_path] = value;
      },
      { attribute: data.title }
    );
  };

  return (
    <div className="yaymail-editor-property">
      <div className="yaymail-title">{title}</div>
      {/* Your custom editor UI */}
      <input 
        type="text"
        value={default_value}
        onChange={(e) => handleChange(e.target.value)}
      />
    </div>
  );
};

export default YourCustomEditor;