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<Editor>();

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: { [pluginWebpage]: { // Ensure the correct reference here modalImportTitle: "Import Template", modalImportLabel: '

Paste here your HTML/CSS and click Import

', modalImportContent: function (editor: Editor) { return ( editor.getHtml() + "" ); }, }, }, height: "100vh", fromElement: true, showOffsets: true, storageManager: { type: "local", autosave: true, autoload: true, stepsBeforeSave: 1, }, selectorManager: { componentFirst: true, }, }} onEditor={onEditor} />

</>

); }