How can I get Uncompressed JS code for me to edit?

[xinnai]

Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to display the code in my JSEditor. And I found that the JS code is compressed. How can I get an Uncompressed code? I use editor.CodeManager.getCode(model, 'js') and it's also a compressed one. I read the source code and alse don't understand why CodeManager can display a Uncompressed code.

2、Other thing is : when I set JS code for example document.getElementById("wrapper").style.background = "red", and do the following: `const htmlValue = this.htmlEditor.getValue(); const cssValue = this.cssEditor.getValue(); const jsValue = this.jsEditor.getValue();

  let newHtml = htmlValue + "<script>" + jsValue + "<" + "/script>";

  this.editor.setComponents(newHtml);
  this.editor.setStyle(cssValue);`

The html and css code works fine but the js code don't work... Can you help?

[artf]

The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separate js files for your script components and tell the bundler to ignore those files.

[xinnai]

@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html:

These code are all compressed. I want an uncompressed code like this in https://github.com/Ju99ernaut/grapesjs-script-editor

For this purpose I read the source code in grapesjs-script-editor to learn how to get uncompressed js code. But I only found this code bellow: ` getCodeViewer() { const { editor } = this;

        if (!this.codeViewer) {
            this.codeViewer = editor.CodeManager.createViewer({
                codeName: 'javascript',
                theme: 'hopscotch',
                readOnly: 0,
                autoBeautify: 1,
                ...codeViewOptions,
            });
        }

        return this.codeViewer;
    },

`

I notice that maybe autoBeautify make this work but I can't find this property in the source code in grapesjs. So I am confused how CodeManager get the uncompressed js code?

[artf]

autoBeautify is an option passed to CodeMirror but in any case, it might beautify the code but it won't uncompress it as the code itself is stored like that in the component