code editor closed when clicked another content/element

[thenotoriousgustav]

"use client";

import React, { useState } from "react";

import grapesjs, { Editor } from "grapesjs"; import GjsEditor from "@grapesjs/react"; import pluginTailwind from "grapesjs-tailwind"; import pluginWebpage from "grapesjs-preset-webpage"; import pluginExport from "grapesjs-plugin-export"; import pluginCodeEditor from "grapesjs-component-code-editor";

import "grapesjs/dist/css/grapes.min.css"; import "grapesjs-component-code-editor/dist/grapesjs-component-code-editor.min.css";

import FormPublish from "./_components/form-publish"; import { componentsPlugin } from "@/components/grapesjs/plugins/components/modal";

export default function EditorPage() { const [editor, setEditor] = useState();

function onEditor(newEditor: Editor) { console.log("Editor loaded", { newEditor }); setEditor(newEditor);

const pn = newEditor.Panels;
const panelViews = pn.addPanel({
  id: "views",
});
panelViews.get("buttons")?.add([
  {
    attributes: {
      title: "Open Code",
    },
    className: "fa fa-file-code-o",
    command: "open-code",
    togglable: false, //do not close when button is clicked again
    id: "open-code",
  },
]);

componentsPlugin(newEditor);

}

return ( <> <GjsEditor grapesjs={grapesjs} options={{ plugins: [ pluginWebpage, pluginExport, componentsPlugin, pluginCodeEditor, pluginTailwind, ], pluginsOpts: {

          // Ensure the correct reference here
          modalImportTitle: "Import Template",
          modalImportLabel:
            '<div style="margin-bottom: 10px; font-size: 13px;">Paste here your HTML/CSS and click Import</div>',
          modalImportContent: function (editor: Editor) {
            return (
              editor.getHtml() + "<style>" + editor.getCss() + "</style>"
            );
          },
        },
      },
      height: "100vh",
      fromElement: true,
      showOffsets: true,
      storageManager: {
        type: "local",
        autosave: true,
        autoload: true,
        stepsBeforeSave: 1,
      },
      selectorManager: {
        componentFirst: true,
      },
    }}
    onEditor={onEditor}
  />

</>

); }