Swap out placeholder values onRender of component without altering component

[Aelrath]

Hello

I hope you can help me with this issue I've been trying to solve. We are currently using the grapesjs editor with the mjml plugin.
We pull in an email template written in mjml and can then edit it.

But within the template we have placeholders for text e.g.
<mj-text>Hi {{ recipient_firstname }},</mj-text>

but also for styling colors e.g.
<mj-divider border-width="1px" border-color="{{ color_primary }}" padding-top="0px" padding-bottom="0px"/>

Now the text placeholders isn't a problem as we will do something similar as suggested in #481 but we do need somehow to render the colors that represent e.g. {{ color_primary }} when shown on the editor canvas without actually replacing the placeholder with the value.

[iralsob]

Hi,

I saw your message regarding the issue you were facing with rendering colors in the GrapesJS editor canvas without replacing the placeholders with the actual values. I'm curious, were you able to find a solution to this problem?

If you were successful, could you please share how you accomplished it? It could be really helpful for others facing similar challenges.

I am currently working on utilizing the GrapesJS editor for creating email templates, and I've encountered a specific challenge that I could use some assistance with.

My situation involves certain constraints regarding how templates should be passed to the server. Specifically, I plan to utilize placeholders actively within the editor, such as @firstname, to personalize the email content.

Additionally, I've implemented a custom media library that allows for adding images to the template with a placeholder attribute in the src field, following this format: @media-item-url(${itemID}).

My goal is to have the actual image displayed on the canvas while still using the placeholder within the src attribute. Essentially, I aim to modify only the representation of the component without altering its underlying model.

Below, I've attached some code snippets for reference.

I would greatly appreciate any insights or guidance on how to achieve this functionality within the GrapesJS editor. Thank you in advance for your time and assistance.

import { useEffect, useRef, useState } from "react";
import { useParams } from "react-router-dom";
import grapesjs, { Editor } from "grapesjs";
import grapesjsMJML from "grapesjs-mjml";
import "grapesjs/dist/css/grapes.min.css";
import "../../css/grapesJsEditor.css";
import MediaLibraryExperimental from "../Template/MediaLibrary/MediaLibraryExperimental";

// Ensure that the id doesn't start with a number, as it's not valid HTML format. 
// If it does, prepend "editor-" to it; otherwise, keep it as is.
const getId = (id: string) => {
  return /^[0-9]/.test(id) ? `editor-${id}` : `${id}`;
};

interface Props {
  currentContent: string;
  onContentChange: (field: string, value: string | number) => void;
}

const GrapesJSEditor = ({ currentContent, onContentChange }: Props) => {
  const { id } = useParams();
  const [showMediaLibrary, setShowMediaLibrary] = useState(false);
  const [mediaLibrary, setMediaLibrary] = useState<any[]>([]);
  const assetManager = useRef<any>(null);

  const initializeEditor = () => {
    if (!id) return;
    const selector = `#${getId(id)}`;
    const editor = grapesjs.init({
      container: selector,
      storageManager: false,
      assetManager: {
        assets: [...mediaLibrary],
        custom: {
          open(props) {
            setShowMediaLibrary(true);
            // `props` are the same used in `asset:custom` event
            // Init and open your external Asset Manager
            assetManager.current = props;
          },
          close(props) {
            setShowMediaLibrary(false);
          },
        },
      },
      fromElement: true,
      avoidInlineStyle: false,
      plugins: [grapesjsMJML],
      pluginsOpts: {
        // @ts-ignore
        [grapesjsMJML]: {
          blocks: [
            "mj-1-column",
            "mj-2-columns",
            "mj-3-columns",
            "mj-text",
            "mj-button",
            "mj-divider",
            "mj-spacer",
            "mj-navbar",
            "mj-navbar-link",
          ],
        },
      },
      height: "70vh",
    });

    editor.setComponents(currentContent);
    assetsHandler(editor);
    componentUpdateHandler(editor);
    addBlocks(editor);
    closeDefaultCategories(editor);
    return () => editor.destroy();
  };

  const addBlocks = (editor: any) => {
    editor.Blocks.add("add-media-item", {
      label: "Media Item",
      content: `<mj-image src="#"/>`,
      attributes: { class: "fa fa-file-image-o", src: "#" },
      category: "Media Library",
      activate: true,
    });

    const placeholders = [
      {
        name: "salutation",
        icon: "fa-venus-mars",
        content: "salutation(Sehr geehrte Frau;Sehr geehrter Herr)",
      },
      { name: "first name", icon: "fa-user-o" },
      { name: "last name", icon: "fa-user-o" },
      { name: "company", icon: "fa-building-o" },
      { name: "email", icon: "fa-envelope-o" },
      { name: "phone", icon: "fa-phone" },
    ];

    placeholders.forEach((placeholder) => {
      editor.Blocks.add(`${placeholder.name}-button`, {
        // first name -> First name
        label:
          placeholder.name.charAt(0).toUpperCase() + placeholder.name.slice(1),
        content: `<mj-text>@${
          placeholder.name === "salutation"
            ? placeholder.content
            : placeholder.name
        }</mj-text>`,
        attributes: { class: `fa ${placeholder.icon}` },
        category: "Placeholders",
        activate: false,
      });
    });
  };


  // Define the action when the custom button is clicked
  const assetsHandler = (editor: Editor) => {
    editor.on("asset:custom", (props) => {
      // Define the select function for the asset manager
      props.select = (asset: string, isSelected: boolean) => {
        // Check if the asset is selected
        if (asset) {
          // If selected, set the URL of the image component to the provided imgUrl
          const imgComponent = editor.getSelected();
          const srcPlaceHolder = asset;
          if (imgComponent) {
            imgComponent.setAttributes({
              src: srcPlaceHolder,
              alt: asset,
            });
          }
        } else {
          console.log("Asset deselected");
        }
      };
      componentsRenderHandler(editor);
    });
  };

  const componentUpdateHandler = (editor: any) => {
    editor.on("update", () => {
      const mjmlContent = editor.getHtml();
      onContentChange("email_content", mjmlContent);
    });
  };

  editor.DomComponents.addType("add-media-item", {
      view: {
        init() {
          console.log("Local hook: view.init");
        },
        onRender({ el }: { el: any }) {
          console.log("render in view");
          const src = el.getAttribute("src");
          const id = src.match(/@media-item-url\(([^)]+)\)/); // between @media-item-url()
          const newSrc = `images/${id}.jpg`;
          el.setAttribute("src", newSrc);
        },
      },
    });
  };

  useEffect(initializeEditor, []);

  // Handle the selection of an item from the media library
  const handleItemSelect = (itemID: any) => {
    assetManager.current.select(`@media-item-url(${itemID})`, true);
    assetManager.current.close();
  };

  return (
    <div>
      {id ? <div id={getId(id)} /> : null}

      <MediaLibraryExperimental
        onItemSelectHandler={handleItemSelect}
        isVisible={showMediaLibrary}
        setIsVisible={setShowMediaLibrary}
        setMediaLibrary={setMediaLibrary}
      ></MediaLibraryExperimental>
    </div>
  );
};
export default GrapesJSEditor;