User should not be able to add or delete components

[Abhishek-Khanduri]

I am using GrapesJs as a template builder in my application. The workflow for creating a template in my application is as follows: the admin creates a template by structuring it, specifying where the title should be, where the image should go, and defining the styling of the template(basically the structure of the template). Afterward, the template is saved in the database. These templates created by the admin can then be used by privileged users to create campaigns.

I want that once the admin has created any template, and if any privileged users try to create a campaign using it, they should only be able to edit the placeholder or the contents of the components that the admin has created or change the styling of the component. The privileged user should not be able to add new components or delete any components set by the admin. How can I achieve this?

If this is my GrapesJs template builder component code:

import React, { useRef, useEffect, LegacyRef, useState } from "react";
import grapesjs from "grapesjs";
import "grapesjs/dist/css/grapes.min.css";
import webpagePlugin from "grapesjs-preset-webpage";
import blocksPlugin from "grapesjs-blocks-basic";
import gjsForms from "grapesjs-plugin-forms";

interface GrapeJsEditorProps {
  onSave: (string) => void;
  body?: {};
  preview?: boolean;
}

const GrapeJsEditor: React.FC<GrapeJsEditorProps> = ({
  onSave,
  body,
  preview,
}) => {
  const editorRef: LegacyRef<HTMLDivElement> | undefined = useRef();
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    if (!editor) {
      const editor = grapesjs.init({
        container: editorRef.current,
        height: "100%",
        width: "100%",
        storageManager: {
          type: "memory",
          stepsBeforeSave: 10,
        },
        showOffsets: true,
        noticeOnUnload: false,
        plugins: [webpagePlugin, gjsForms, blocksPlugin],
        pluginsOpts: {
          [gjsForms]: {
            /* options */
          },
          [webpagePlugin]: {
            /* options */
          },
          [blocksPlugin]: {
            /* options */
          },
        },
        canvas: {
          styles: [
            // Required styles for the editor to render correctly
            "https://fonts.googleapis.com/css?family=Open+Sans:Regular,Bold,Italic,Light,LightItalic",
            "https://fonts.googleapis.com/css?family=Roboto:Regular,Bold,Italic,Light,LightItalic",
          ],
        },
        panels: {
          defaults: [
            {
              id: "block",
              el: ".panel__blocks",
              opened: true,
            },
          ],
        },
      });

      const customStyles = `
        .gjs-one-bg {
          background-color: #fefcf6 !important;
        }
        .gjs-editor {
          min-height:100vh;
        }
        .gjs-pn-views-container {
          width: 20%;
        }
        .gjs-pn-views {
          width: 20%;
        }
      `;

      const styleTag = document.createElement("style");
      styleTag.innerHTML = customStyles;
      document.head.appendChild(styleTag);

      setEditor(editor);

      editor.Panels.addPanel({
        id: "panel-top",
        el: ".panel__top",
      });

      editor.Commands.add("update-html", () => {
        editor.setComponents(editor.getComponents());
      });

      editor.on("component:add component:update change", () => {
        const html = editor.getHtml();
        const css = editor.getCss();
        const htmlAndCss = `<style>${css}</style>${html}`;
        onSave(htmlAndCss);
      });
    }
  }, [onSave, editor]);

  useEffect(() => {
    if (editor && body) {
      editor.setComponents(body);
    }
  }, [editor, body]);

  useEffect(() => {
    if (!editor) {
      return;
    }
    if (!preview) {
      editor.stopCommand("preview");
      return;
    }
    editor.setDevice("Desktop");
    editor.runCommand("preview");
  }, [preview, editor]);

  return (
    <div className="grapesjs-container h-100pct w-100pct border-box border border-1 border-alto">
      <div ref={editorRef} />
    </div>
  );
};

export default GrapeJsEditor;