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

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.

@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:

![1444126130](https://user-images.githubusercontent.com/23135336/112428513-3b91cb80-8d76-11eb-91de-ce51a8500203.jpg)

These code are all compressed. I want an uncompressed code like this in [https://github.com/Ju99ernaut/grapesjs-script-editor](url)
![1811563111](https://user-images.githubusercontent.com/23135336/112428360-008f9800-8d76-11eb-9abb-b8451649b390.jpg)

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?

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

Thanks for reporting this, @xinnai.

Great question about How can I get Uncompressed JS code for me to edit?. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!