Inject dynamic data

There are two important props:

1. mergetags, representing the variables users can choose. Each child node has a type and will be automatically filtered in different scenarios. For example, in the Image component, only options with type "image" will appear.

const mergetags: Array<MergetagItem> = [
  {
    label: "Order",
    value: "",
    children: [
      {
        label: "Order number",
        value: "order.number",
        type: "text",
      },
      {
        label: "Order total",
        value: "order.total",
        type: "text",
      },
    ],
  },
  {
    label: "Common",
    value: "",
    children: [
      {
        label: "Unsubscribe link",
        value: "common.unsubscribe",
        type: "link",
      },
      {
        label: "Company logo",
        value: "common.logo",
        type: "image",
      },
      {
        label: "Website",
        value: "common.website",
        type: "image",
      },
    ],
  },
];

2. Passing dynamic data mergetagsData. When users preview, the variables used in the template will automatically combine with mergetagsData to generate dynamic data.

const mergetagsData = {
  order: {
    number: "Shopify#1001",
    total: "$100.00",
  },
  customer: {
    name: "Ryan",
    email: "easy-email-pro@example.com",
  },
  products: [
    {
      title: "#product 1",
      image:
        "https://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815715/nqqreectuzi3lxv7dxsp.png",
    },
    {
      title: "#product 2",
      image:
        "https://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815875/mevpkdxft8z6cyjicnd6.png",
    },
  ],
  colors: {
    red: "#ff0000",
    yellow: "#ffff00",
    blue: "#0000ff",
  },
  common: {
    unsubscribe: "http://www.easyemail.pro",
    website: "http://www.easyemail.pro",
    logo: "http://res.cloudinary.com/djnkpbshx/image/upload/v1704018909/easy-email-pro-test/n3lcl4bo8lkezrtsgxz6.png?w=575",
  },
};