Frozen Block

Sometimes, we need to fix elements at the head and bottom of the template and not allow users to modify or delete them. For example, if the user has not paid, the brand's logo will be displayed at the bottom.

import { Element } from "easy-email-pro-core";
import { useCompactMode } from "@/hooks/useCompactMode";

const headerElement: Element = {
  type: "standard-section",
  data: {},
  attributes: {
    "background-repeat": "no-repeat",
    "background-color": "#4a90e2",
  },
  children: [
    {
      type: "standard-column",
      attributes: {
        width: "100%",
      },
      data: {},
      children: [
        {
          name: "Text",
          type: "standard-paragraph",
          data: {},
          attributes: {},
          children: [
            {
              text: "FROZEN HEADER",
            },
          ],
        },
      ],
    },
  ],
};

const footerElement: Element = {
  type: "standard-section",
  data: {},
  attributes: {
    "background-repeat": "no-repeat",
    "background-color": "#4a90e2",
  },
  children: [
    {
      type: "standard-column",
      attributes: {
        width: "100%",
      },
      data: {},
      children: [
        {
          name: "Text",
          type: "standard-paragraph",
          data: {},
          attributes: {},
          children: [
            {
              text: "FROZEN FOOTER",
            },
          ],
        },
      ],
    },
  ],
};

export default function MyEditor() {


  const compact = useCompactMode();
  const config = Retro.useCreateConfig({
  ...
    headerElement: headerElement,
    footerElement: footerElement,
  });

  return (
    <EmailEditorProvider {...config}>
      <EditorHeader />

      <Layout.Content>
        <Retro.Layout></Retro.Layout>
      </Layout.Content>
    </EmailEditorProvider>
  );
}

Used on the server side

EditorCore.toMJML({
  element: pageElement as PageElement,
  mode: "production",
  mergetagsData: {},
  headerElement: headerElement,
  footerElement: footerElement,
});