Saving generated thumbnail fail

[Domingo Alvarez Duarte]

Playing with this project I noticed that after taking a screenshot/thumbnail of a project an trying to save it was not working due to an error in the event handler where this is undefined, with the changes shown bellow it's working for me now:

    class SettingsApp extends UI {
...
        handleThumbnail(e) {
            const { editor, $el, opts } = this; //<<< here I added opts
            editor.runCommand('take-screenshot', {
                clb(dataUrl) {
                    $el?.find('img').attr('src', dataUrl);
                    opts.onThumbnail(dataUrl, $el?.find('input.thumbnail')); //<<<< here i replaced removed 'this'
                }
            })
        }
...

[Domingo Alvarez Duarte]

Would be nice if we could also mark some parts of a page as common inside a project (maybe adding an attribute project-wide=1 to allow split/spread changes) because normally on a multi page project several parts normally remain equal (header/footer).

Also an option to duplicate a page would be nice.

[Brendon Ngirazi]

Ahh good catch, do you mind opening a pull request with your changes? As for the second issue you could look into the symbols API.

[Brendon Ngirazi]

For symbols, I think this discussion is a good start GrapesJS/grapesjs#4317. As for page duplication you can try something like this

        const sel = editor.Pages.getSelected();
        editor.Pages.add({
            name: (sel.get('name') || sel.id) + '-copy',
            component: sel.getMainComponent().clone()
        }, { select: true });