ju99ernaut / grapesjs-template-manager Goto Github PK

Hi, I need to display the currently open page name somewhere to be visible without having to open the modal. Can it be achieved in some way? Thanks.
Also it would be very helpful to have a confirmation dialog when deleting a page.

Hi, I'm using this plugin for a small project I make and I find it just the thing I need. Could it be appended to a div, like the styleManager for example? I need to display it not as a dialog, but as a panel. Thank's

Hi
How can I view the demo ? Link is not workin

The index page of a project doesnt have any functionality within the page list. For example: If you navigate away from index in the page list you cant navigate back to the index page in the page list, further, you are unable to rename or delete index at any point.

Is this another case of 'this guy is a moron'? or is this a legit bug?

Im not getting any console errors and my back end appears to be functioning correctly as far as I can tell.
Im still troubleshooting this issue but it appears that something isnt reading or setting the index ID. Index Page ID isnt being set on new project creation and causes the builder to not be able to interact with index.

Hi,
I'm using the template manager with firestore. But when I add some background to a page and open another project and come back again the id gets "-2" at the ends. Each time it gets a new "-2".

Is there any solution?

Thanks.

Hello, first of all I love this project I would like to congratulate the team for bringing this plugin to Grapes.

What I would like to ask is, if it is possible to create default pages so that the user cannot delete them.

Let me explain, I have an ecommerce site and I have 4 default pages, Home, Cart, Product Page and Tracking, I don't want the user to delete those 4, but if I want him to be able to create more pages, is it possible?

Hello,
I just installed the plugin and perform the exact steps in the docs and the open project button is failing with the below error

TypeError: t.loadAll is not a function. (In 't.loadAll((function(t){e({sites:t,loading:!1})}),(function(e){return console.log("Error",e)}))', 't.loadAll' is undefined)

my configuration

`var editor = grapesjs.init({
height: '100%',
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: '#gjs',
fromElement: true,
pageManager: true,

    plugins: ['gjs-preset-webpage','grapesjs-project-manager','gjs-aviary'],
    pluginsOpts: {
      'gjs-preset-webpage': {},
      'gjs-aviary': {/* ...options */}
    }
  });

  // Running commands from panels
  const pn = editor.Panels;
  pn.addButton('options', {
      id: 'open-templates',
      className: 'fa fa-folder-o',
      attributes: {
          title: 'Open projects and templates'
      },
      command: 'open-templates', //Open modal 
  });
  pn.addButton('views', {
      id: 'open-pages',
      className: 'fa fa-file-o',
      attributes: {
          title: 'Take Screenshot'
      },
      command: 'open-pages',
      togglable: false
  });`

screenshots of the error are attached

It seems that the data stored at the indexdb is only for the grapesjs to shows the pages. So is there a method to transfer the data into a html file?

Have an option to display "open-pages" into your own div container instead of the default GrapeJS panel.

My brother wanted to bother you again, and I have a question.

Is it possible to disable certain blocks when I select a page?

Suppose I want to disable certain blocks when the user selects the checkout page, because there are blocks that cannot be used unless they are on a specific page.

I was thinking of running a command where I get the BlockManager but I haven't found any functionality within the API that allows me to disable the blocks

Fetching and updating regular documents works just fine, but when updating a page/template in the template manager modal, it adds an extra slash in the URL, resulting in a 404 on my back-end.

Clear UndoManager on page change or switch UndoManager per page

Reproduce

1. Create a new project and name it 'test1'
2. put content on the editor
3. rename the open project to 'test2'. It appears to be renamed in the list of templates in the Templates app
4. put more content on the editor
   in the template list in the Templates app shows the name has gone back to 'test1'.

I am using this code-
head>


<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-template-manager"></script>

    // Running commands from panels
    const pn = editor.Panels;
    const panelOpts = pn.addPanel({
        id: 'options'
    });
    panelOpts.get('buttons').add([{
        attributes: {
            title: 'Open Templates'
        },
        className: 'fa fa-file-o',
        command: 'open-templates',//Open modal 
        id: 'open-templates'
    }, {
        attributes: {
            title: 'Save As Template'
        },
        className: 'fa fa-archive',
        command: 'save-as-template',//Save page as template
        id: 'save-as-template'
    }, {
        attributes: {
            title: 'Delete Template'
        },
        className: 'fa fa-trash-o',
        command: 'delete-template',//Delete open page or template
        id: 'delete-templates'
    }, {
        attributes: {
            title: 'Take Screenshot'
        },
        className: 'fa fa-camera',
        command: 'take-screenshot',//Take an image of the canvas
        id: 'take-screenshot'
    }]);
</script> @Ju99ernaut @tboulogne @walking-dev 

Hello,
I configured the backup on: "rest-api". I added the requested urls. ( urlStore and urlLoad ).

My problem is that the request is not made on the correct routes. GrapeJs adds /uuidv4 each time.
(Example : http://127.0.0.1:8000/grapejs/load/uuidv4) <- Why add uuid for load all ?

Do you have any idea where the problem could come from?

I attach the code.

< GrapesjsReact

            id="grapesjs-react"

            pageManager={true}

            storageManager={{

                type: 'rest-api',

                options: {

                    remote :{

                        urlStore: 'http://127.0.0.1:8000/grapejs/save',

                        urlLoad: 'http://127.0.0.1:8000/grapejs/load',

                    }  

                },

                autosave: true,

                autoload: true,

                stepsBeforeSave: 1,

            }}

            plugins={[projectManager, webpage, basicBlock]}

/>

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.

Hi I have a problem with after the get {id} request I have this data that I return

contentPage[0] {
  id: '4d6f445d-91a3-46fb-b2f2-ac3dffb2bec9',
  name: 'Default-4d6f445',
  template: false,
  thumbnail: '',
  description: 'No description',
  updated_at: 1657007673270,
  styles: [],
  pages: [ { frames: [Array], type: 'main', id: 'GzoJdYqIWmsEB007' } ],
  assets: [
    'http://localhost:3000/uploaded/2d1e4ac0-71f7-434c-87ac-4ffd3569693b.webp',
    'http://localhost:3000/uploaded/63559c56-0fc5-4bbf-90cc-e7770007ebdd.webp'
  ]
}

but after the return I have this error

[Error: ENOENT: no such file or directory, unlink 'E:\my-boilerplate\public\uploaded\[object Object]'] {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'unlink',
  path: 'E:\\my-boilerplate\\public\\uploaded\\[object Object]'
}

and I don't know why

the project is made with next.js and Tailwind and that error breaks Tailwind in Grapes

I am having problems saving the changes made within sites.
Within the site everything works well.
Here I can add new pages as well as change the names of pages.
However if I go back to the Project Manager and later open this site, then the changes have been lost.

Hey! Can you giv me a hand?
The 'plugin not found' message is appearing in my browser
it correctly loads the js and css files from unpkg but the editor cant find the plugin
Do you have any idea of what could be happening?

This is my editor:
var editor = grapesjs.init({
height: '100%',
//Store manager for templates
storageManager: {
//autoload: 0,
type: 'rest-api',
// the URIs below can be the same depending on your API design
urlStore: ${server}/Comunication/EmailContent/SaveTemplate,// POST
//urlLoad: 'https://endpoint/load/',// GET
//urlDelete: 'https://endpoint/delete/',// DELETE
params: { _some_token: '...' },
headers: { Authorization: 'Basic ...' }
},
//Plugin and other configs
container: '#gjs',
fromElement: true,
plugins: ['gjs-preset-newsletter', 'grapesjs-template-manager'],
pluginsOpts: {
'gjs-preset-newsletter': {
codeViewerTheme: 'material',
cellStyle: {
'font-size': '12px',
'font-weight': 300,
'vertical-align': 'top',
color: 'rgb(111, 119, 125)',
margin: 0,
padding: 0,
}
},
}
});

Hi, can you please give me an exemple to load multiple pages from api-rest storage and the structure of the data received from the api . On my console the pages array exists but on the editor and command show-pages i have nothing.
Tank you :)

Would you have any interest in adding a full site export feature to this?
The grapes export zip plugin doesnt appear to support page manager and only exports the currently selected page.
Thank you for this amazing project/template manager it has made my life an absolute dream.

Ability to edit text in the Project Manager. Such as change Site Info to something else. *

*Issue created from conversation with Ju99ernaut in the GrapesJS discord.

Is there anyway to implement page navigation within the preview ? Any help would be appreciated

What would be the best way to achieve showing templates in a panel view instead of modal ?

Hello,
We need to store template/ page in grapejs remote storage. load function work well but store function not work and we create db.json file to store data. please tell us what we done wrong in this following code.
const projectEndpoint = your_url/db.json;
const editor = grapesjs.init({
height: "100%",
container: "#editor",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
pageManager: true, // This should be set to true
type: 'remote',
autosave: true,
autoload: true,
stepsBeforeSave: 1,
contentTypeJson: true,
urlStore: projectEndpoint,
urlLoad: projectEndpoint,
params: {},

selectorManager: {
componentFirst: true
},
plugins: ["grapesjs-component-code-editor", "grapesjs-parser-postcss","gjs-preset-webpage","grapesjs-project-manager"],
pluginsOpts: {
"grapesjs-component-code-editor": {
/* Test here your options */
},
"grapesjs-project-manager": {
loadFirst: true,
},
}
});

const pn = editor.Panels;
const panelViews = pn.addPanel({
id: "views"
});
panelViews.get("buttons").add([
{
attributes: {
title: "Open Code"
},
className: "fa fa-file-code-o",
command: "open-code",
togglable: false, //do not close when button is clicked again
id: "open-code"
}
]);

const tp = editor.Panels;
const panelOpts = tp.addPanel({
id: 'options'
});
tp.addButton('views', {
id: 'open-pages',
className: 'fa fa-file-o',
attributes: {
title: 'Take Screenshot'
},
command: 'open-pages',
togglable: false
});
panelOpts.get('buttons').add([{
attributes: {
title: 'Open projects and templates'
},
className: 'fa fa-folder-o',
command: 'open-templates',//Open modal
id: 'open-templates'
}, {
attributes: {
title: 'Save As Template'
},
className: 'fa fa-save white-color',
command: 'save-as-template',//Save page as template
togglable: false,
id: 'save-as-template'
}]);

editor.on('storage:load', function(e) {
console.log('Loaded ', e);
editor.render();
//autorender: 0;
});
editor.on('storage:store', function(e) {
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
console.log(htmldata);
console.log(cssdata);
console.log('store', e);
});
Thank you...

Hi bro, it's me again.

I wanted to ask you if it is possible that in the editing part of the page you can add something like the title and description of the page?

is that I want to do something like this, to add SEO on the pages

I know that grapes stores the structure of the pages in the gjs-pages property, so how do we embed new properties within the selected page?

Hi!
I want to add a save button in my top panels, it should just update the project data, so i don't depend only on stepsBeforeSave for updating that data. There is any command or proper way to do this?

uuidInPath option should be applied to load and delete too, unless there is something im missing?

--EDIT--
Another instance of my own stupidity, sorry to bother you.

I get this error when I installed this plugin, I am using reactjs

Got this when want to Create a template

storageManager: {
    type: 'indexeddb',
},

I've built Template manager from source so I can specify where the break is happening

Reproduce

1. Set editor.storageManager.autosave: true
2. Create a new layout
3. Add a basic text element with padding
4. autosave should trigger
5. refresh and open the layout you just created
6. the padding is gone, because the element's ID has changed from id123 to id123-2 so the CSS selector #id123 doesn't select any more

The storage:store and storage:load events are also fired like 10 times. Why is it built like that?

Thanks for this great plugin
I want to save template pages at the end as a single project (multi-page website)
Can you tell me how to do that?

I wanted to get rid of the gjs--prefix in the payloads, so I set up my storage manager like this:

{
        storageManager: {
            id: '',
            type: 'rest-api',
            stepsBeforeSave: 3,
            urlStore: 'api/grapesjs',
            urlLoad: 'api/grapesjs',
            urlDelete: 'api/grapesjs',
        },
}

If I save a document like this and then open the template manager modal, I see the following error:

Error SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at grapesjs-project-manager.min.js:2
    at Array.map (<anonymous>)
    at n.value (grapesjs-project-manager.min.js:2)
    at n.value (grapesjs-project-manager.min.js:2)
    at n.value (grapesjs-project-manager.min.js:2)
    at grapesjs-project-manager.min.js:2
    at r.onResponse (grapes.min.js:2)
    at grapes.min.js:2

That's because it is still trying to access the "pages" property using the "gjs-" prefix:

I would expect this to respect the prefix I configured in the storeManager. Did I miss something here?

I am using the latest releases of everything:

    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.4",
        "grapesjs": "^0.17.25",
        "grapesjs-preset-webpage": "^0.1.11",
        "grapesjs-project-manager": "^1.0.9"
    },

Do you have documentation or examples of remote requests/responses?

Hi, new install with this error:
I see in console a TypeError from file src/index.js, here: const res = await cs.loadAll();

M. Firefox browser:
Uncaught (in promise) TypeError: r is null
t index.js:124
l runtime.js:63
_invoke runtime.js:293
P runtime.js:118
Babel 4
Backbone 4
P EditorView.ts:19
setTimeout handlere/P< EditorView.ts:18
2316/i</v/t[e]< Backbone
Le Underscore
Backbone 5
_checkReady Editor.ts:154
Backbone 5
a Editor.ts:196
loadOnStart Editor.ts:214
s grapes.min.js:2
s grapes.min.js:2
v grapes.min.js:2
v grapes.min.js:2
loadOnStart Editor.ts:204
setTimeout handlern.prototype.loadOnStart Editor.ts:204
init index.js:84
index.html:110

G. Chrome browser:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'loadAll')
at index.js:124:34
at l (runtime.js:63:40)
at Generator._invoke (runtime.js:293:22)
at Generator.next (runtime.js:118:21)
at n (index.js:3:20)
at s (index.js:25:9)
at index.js:32:7
at new Promise ()
at n. (index.js:21:12)
at y (backbone.js:369:57)

Everything working ok without the grapesjs-project-manager plugin.
It is a fresh install of GrapesJs with these plugins:

    <title>GrapesJS</title>
    <link rel="stylesheet" href="dist/css/grapes.min.css">
    <link rel="stylesheet" href="plugins/templates-manager/dist/css/grapesjs-project-manager.min.css">
    <script src="dist/grapes.min.js" type="text/javascript"></script>
    <script src="plugins/basics/dist/grapesjs-blocks-basic.min.js" type="text/javascript"></script>
    <script src="plugins/templates-manager/dist/js/grapesjs-project-manager.min.js" type="text/javascript"></script>
    <script src="plugins/exports/dist/grapesjs-plugin-export.min.js" type="text/javascript"></script>
    <script src="plugins/navbar/dist/grapesjs-navbar.min.js" type="text/javascript"></script>
    <style>

        fromElement: true,
        pageManager: true, // This should be set to true
        storageManager: {
          id: 'gjs-',             // Prefix identifier that will be used inside storing and loading
          type: 'indexdb',          // Type of the storage
          autosave: true,         // Store data automatically
          autoload: true,         // Autoload stored data on init
          stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
          storeComponents: true,  // Enable/Disable storing of components in JSON format
          storeStyles: true,      // Enable/Disable storing of rules in JSON format
          storeHtml: true,        // Enable/Disable storing of components as HTML string
          storeCss: true,         // Enable/Disable storing of rules as CSS string
        },

Pls, help!

Hello,
We need to store template/ page in grapejs remote storage. load function work well but store function not work and we create db.json file to store data. please tell us what we done wrong in this following code.//const projectID = 1;
const projectEndpoint = url../my-server/db.json;
const editor = grapesjs.init({
height: "100%",
container: "#editor",
showOffsets: true,
fromElement: true,
noticeOnUnload: false,
pageManager: true, // This should be set to true
storageManager: {
type: 'remote',
autosave: true,
autoload: true,
stepsBeforeSave: 1,
contentTypeJson: true,
urlStore: projectEndpoint,
urlLoad: projectEndpoint,
params: {},
},
selectorManager: {
componentFirst: true
},
plugins: ["grapesjs-component-code-editor", "grapesjs-parser-postcss","gjs-preset-webpage","grapesjs-project-manager"],
pluginsOpts: {
"grapesjs-component-code-editor": {
/* Test here your options */
},
"grapesjs-project-manager": {
loadFirst: true,
},
}
});

const pn = editor.Panels;
const panelViews = pn.addPanel({
id: "views"
});
panelViews.get("buttons").add([
{
attributes: {
title: "Open Code"
},
className: "fa fa-file-code-o",
command: "open-code",
togglable: false, //do not close when button is clicked again
id: "open-code"
}
]);

const tp = editor.Panels;
const panelOpts = tp.addPanel({
id: 'options'
});
tp.addButton('views', {
id: 'open-pages',
className: 'fa fa-file-o',
attributes: {
title: 'Take Screenshot'
},
command: 'open-pages',
togglable: false
});
panelOpts.get('buttons').add([{
attributes: {
title: 'Open projects and templates'
},
className: 'fa fa-folder-o',
command: 'open-templates',//Open modal
id: 'open-templates'
}, {
attributes: {
title: 'Save As Template'
},
className: 'fa fa-save white-color',
command: 'save-as-template',//Save page as template
togglable: false,
id: 'save-as-template'
}]);

editor.on('storage:load', function(e) {
console.log('Loaded ', e);
editor.render();
//autorender: 0;
});
editor.on('storage:store', function(e) {
var htmldata = editor.getHtml();
var cssdata = editor.getCss();
console.log(htmldata);
console.log(cssdata);
console.log('store', e);
});
Thank you...

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'
                }
            })
        }
...

I am working on getting the template manager set up (props btw, tool looks really cool), but I am running into a few issues.

I am on GrapesjsV.17.2, and running everything in the browser. Whenever I use any of the template manager panel buttons, I get the following errors corresponding to their respective button presses.

Uncaught TypeError: t.loadAll is not a function
Uncaught TypeError: e.Storage.getCurrentStorage(...).setIsTemplate is not a function
Uncaught TypeError: e.Storage.getCurrentStorage(...).delete is not a function

This is my code currently
index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Multi pages POC</title>
  <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/css/grapes.min.css'><link rel="stylesheet" href="./style.css">
  <link href="https://unpkg.com/grapesjs-template-manager/dist/grapesjs-template-manager.min.css" rel="stylesheet">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="app-wrap">
  <div class="editor-wrap">
     <div id="gjs"></div>
  </div>
</div>
<!-- partial -->
  <script src='https://unpkg.com/[email protected]/dist/grapes.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2'></script>
<script src='https://unpkg.com/[email protected]/dist/grapesjs-blocks-basic.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/grapesjs-indexeddb.min.js'></script>
<script src="https://unpkg.com/grapesjs-template-manager"></script>
<script  src="./script.js"></script>

</body>
</html>

script.js

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  storageManager: {
    id: 'gjs-',             // Prefix identifier that will be used on parameters
    type: 'local',          // Type of the storage
    fromElement: true,   //used for tempalate manager
    autosave: 1,         // Store data automatically
    autoload: 1,         // Autoload stored data on init
    stepsBeforeSave: 1,     // If autosave enabled, indicates how many changes are necessary before store method is triggered
    // ONLY FOR LOCAL STORAGE
    // If enabled, checks if browser supports Local Storage
    checkLocal: 1,

  },
  plugins: ['gjs-blocks-basic', 'grapesjs-template-manager'],
});


//https://github.com/Ju99ernaut/grapesjs-template-manager
const pn = editor.Panels;
const panelOpts = pn.addPanel({
  id: 'options'
});
panelOpts.get('buttons').add([{
  attributes: {
    title: 'Open Templates'
  },
  className: 'fa fa-file-o',
  command: 'open-templates',//Open modal
  id: 'open-templates'
}, {
  attributes: {
    title: 'Save As Template'
  },
  className: 'fa fa-archive',
  command: 'save-as-template',//Save page as template
  id: 'save-as-template'
}, {
  attributes: {
    title: 'Delete Template'
  },
  className: 'fa fa-trash-o',
  command: 'delete-template',//Delete open page or template
  id: 'delete-templates'
}, {
  attributes: {
    title: 'Take Screenshot'
  },
  className: 'fa fa-camera',
  command: 'take-screenshot',//Take an image of the canvas
  id: 'take-screenshot'
}]);

//https://github.com/artf/grapesjs/issues/122#issuecomment-313989326
//https://github.com/artf/grapesjs/issues/122#issuecomment-314737681
// add save button
pn.addButton('options', [{
  id: 'save-db',
  className: 'fa fa-floppy-o',
  command: 'save-db',
  attributes: {title: 'Save DB'}
}]);

// add save command
editor.Commands.add('save-db', {
    run: function(editor, sender) {
      //sender && sender.set('active', 0); // turn off the button
      editor.store();
    }
  });

It's probably something obvious, but if it's not I'll be more than happy to help troubleshoot.

Hello,

When i try to initialize the manager got :

My storage manager conf:

Any idea to solve this please ?

Thanks for help.

Regards