Allowing user to add a global stylesheet to canvas dynamically

Hi @anushabivera if you want to load the stylesheets on init (local and with cdn) you can simply add the css/js links to the canvas property on editor init function, like this:

const editor = grapesjs.init({
    ...
    canvas: {
        styles: [
            'example-of-css-file.css',
            'another-css-goes-here'
        ],
        scripts: [
            'example-of-js-file.js',
            'another-js-goes-here'
        ]
    }
});

If you want to add them dynamically you can try this (example with materialize):

const head = editor.Canvas.getDocument().head;
head.insertAdjacentHTML('beforeend', `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`);
head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">`);
head.insertAdjacentHTML('beforeend', `<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>`);

BTW: This question has already been asked, any doubts you can get more info below (mostly 66 and 1739): #66 #195 #444 #473 #966 #1739

I got it! I removed it by using an id on the link tag.

Thank you @RJCAM . My plan is to provide the functionality as an attribute of the canvas and the user can enter the url of the custom stylesheet as value of the attribute