Untitled

import React, { useState, useEffect } from "react";
import grapesjs from "grapesjs";
import gjsPresetNewsletter from "grapesjs-preset-newsletter";
import "./styles.css"; // Import your CSS file here

function App() {
  const [editor, setEditor] = useState(null);

  useEffect(() => {
    const editor = grapesjs.init({
      container: "#editor",
      plugins: [gjsPresetNewsletter],
      pluginsOpts: {
        gjsPresetNewsletter: {},
      }
    });

    // Add custom RTE placeholder button
    editor.RichTextEditor.add('placeholder', {
      name: 'Placeholder',
      icon: `
        <select class="custom-placeholder-select">
          <option selected="true" disabled="disabled" id="defaultPlaceholder">Placeholder</option>
          <option value="[[salutation]]">Salutation</option>
          <option value="[[firstname]]">Firstname</option>
          <option value="[[lastname]]">Lastname</option>
        </select>
      `,
      event: 'change',
      result: (rte, action) => {
        rte.insertHTML(action.btn.children[0].selectedOptions[0].value);
        document.getElementById('defaultPlaceholder').selected = true;
      },
    });

    setEditor(editor);
  }, []);

  return (
    <div className="App">
      <div id="editor"></div>
    </div>
  );
}

export default App;