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: {
[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() + "<style>" + editor.getCss() + "</style>"
);
},
},
},
height: "100vh",
fromElement: true,
showOffsets: true,
storageManager: {
type: "local",
autosave: true,
autoload: true,
stepsBeforeSave: 1,
},
selectorManager: {
componentFirst: true,
},
}}
onEditor={onEditor}
/>

</>

);
}