How to add CSS, HTML or JS with the Code Viewer

[uncldrw]

I'm trying to implement an export function where I open a modal with a Code Viewer containing the HTML and CSS bundled into one file. I was trying, with the use of ChatGPT and GitHub Copilot, to create a function that does that with the following result:

  panels.addButton("options", [
    {
      id: "custom-export",
      className: "fa fa-download",
      command: (editor, sender) => {
        sender && sender.set("active", 0);

        const css = editor.getCss();
        const html = editor.getHtml();

        const wrappedCss = `<style>${css}</style>`;
        const exportContent = `${wrappedCss}\n${html}`;

        const modalContent = editor.Modal.getContentEl();
        const codeViewer = editor.CodeManager.getViewer("CodeMirror").clone();
        codeViewer.set({
          codeName: "htmlmixed",
          theme: "hopscotch",
          readOnly: 0,
        });

        editor.Modal.setTitle("Exported code");
        editor.Modal.setContent("");
        editor.Modal.open();

        setTimeout(() => {
          codeViewer.init(modalContent);
          codeViewer.editor.setCode(exportContent);
        }, 0);
      },
      attributes: {
        title: "Custom Export",
      },
    },
  ]);

Opening a Modal wasn't the problem, but is it possible to use GrapeJS own Code Viewer (CodeMirror) to show custom outputs?

In Addition to that, the console logs the following error:

grapesjs.js?v=296211de:10956 Uncaught TypeError: Cannot set properties of undefined (setting 'modeOption')
    at new CodeMirror (grapesjs.js?v=296211de:10956:29)
    at CodeMirror (grapesjs.js?v=296211de:10948:20)
    at Function.fromTextArea (grapesjs.js?v=296211de:13028:20)
    at CodeMirrorEditor2.init (grapesjs.js?v=296211de:48813:34)
    at panelManager.js?t=1704373923181:66:22

[artf]

Here you can find a good example with a command that opens a modal with the built-in code viewer element