Ju99ernaut / grapesjs-template-manager

Template and page manager for grapesjs
MIT License
79 stars 35 forks source link

`crypto.randomUUID()` fallback #24

Closed serfermorhc closed 2 years ago

serfermorhc commented 2 years ago

Hello, when i try to put it to work always receive this error;

commands.js:78 Uncaught TypeError: Cannot read properties of null (reading 'setIsTemplate') at Z.r.run (commands.js:78:16) at Z.r.callRun (grapesjs:2:353065) at Object.runCommand (grapesjs:2:350160) at Z.r.updateActive (grapesjs:2:603862) at y (grapesjs:2:10154) at m (grapesjs:2:9828) at f (grapesjs:2:7781) at Z.r.u.trigger (grapesjs:2:9721) at Z.r.set (grapesjs:2:11585) at Z.r.toggleActive (grapesjs:2:604452)

My JS;

var editor = grapesjs.init({ height: '100%', showOffsets: 1, noticeOnUnload: 0, storageManager: { type: 'indexeddb', }, container: '#gjs', fromElement: true, plugins: ['grapesjs-project-manager','gjs-preset-webpage','grapesjs-indexeddb'], pluginsOpts: { 'gjs-preset-webpage': {} } });

Thanks.

Ju99ernaut commented 2 years ago

Remove grapesjs-indexeddb plugin.

serfermorhc commented 2 years ago

If i do that i get this other error;

Uncaught TypeError: crypto.randomUUID is not a function at Z.r.run (commands.js:63:12) at Z.r.callRun (grapesjs:2:353065) at Object.runCommand (grapesjs:2:350160) at Object.run (grapesjs:2:349664) at Object.runCommand (grapesjs:2:883147) at index.js:114:17 at IDBRequest.r.onsuccess (indexeddb.js:45:25)

The line on commands.js;

cm.add('get-uuidv4', () => crypto.randomUUID() || uuidv4());

cm.add('take-screenshot', (editor, s, options = { clb(d) { return d } }) => {
    const el = editor.getWrapper().getEl();
    getJpeg(el, {
        quality: opts.quality,
        height: 1000,
        'cacheBust': true,
        style: {
            'background-color': 'white',
            ...editor.getWrapper().getStyle()
        },
    }, options.clb, opts.onScreenshotError);
});

Thank you for your help!

Ju99ernaut commented 2 years ago

Looks like your browser doesn't support the crypto.randomUUID function, there's a fallback but it doesn't seem to be handled properly so I'll look into fixing that. Which browser are you using?

serfermorhc commented 2 years ago

Same error on Chrome and Firefox

Firefox; image

Chrome; image

serfermorhc commented 2 years ago

Okay, i think i found my mistake, it was with the import of grapesjs file.

Now i have another error, when i import your plugin on top of HTML file, it loads and i get this error;

image

I think its because editor its not created yet, but if i load your plugin on the bottom of html, grapesjs gives the error of plugin not found, because your plugin its not loaded yet.

Am i doing something wrong? Thank you.

Ju99ernaut commented 2 years ago

You'll need to load the editor and all plugins before initialization. One way of doing this is loading them in the head of your document.