Grapesjs Project Manager

Requires GrapesJS v0.19.4 or higher.

Project, template and page manager for grapesjs. This version makes use of the PageManager and has different plugin and package name, the previous version which doesn't make use of the PageManager can be found here.

| Project | Project settings | |---------|------------------| | | |

| Pages | Page settings | |-------|---------------| | | |

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/grapesjs-project-manager"></script>

<div id="gjs"></div>

JS

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  pageManager: true, // This should be set to true
  storageManager:  {
    type: 'indexeddb',
    // ...
  },
  plugins: ['grapesjs-project-manager'],
});

// 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
});

CSS

body, html {
  margin: 0;
  height: 100%;
}

Summary

• Plugin name: grapesjs-project-manager
• Commands
  • open-templates
  • open-pages
  • open-settings
  • get-uuidv4
  • take-screenshot
  • save-as-template
  • delete-template
• Storages
  • indexeddb
  • firestore
  • rest-api

Options

| Option | Description | Default | |-|-|- | dbName | Database name | gjs | | objectStoreName | Collection name | templates | | loadFirst | Load first template in storage | true | | customLoad | Use custom onload function(skips default onload steps), (ed, cs) => ... | false | | components | Default components since fromElement is not supported | undefined | | style | Default style since fromElement is not supported | undefined | | indexeddbVersion | IndexedDB schema version | 5 | | onDelete | On successful template deletion | Function(Check source) | | onDeleteAsync | Handle promise from storage delete | Function(Check source) | | onUpdateAsync | Handle promise from storage update | Function(Check source) | | onScreenshotAsync | Handle promise from screenshot | Function(Check source) | | onScreenShotError | On error capturing screenshot | Function(Check source) | | onThumbnail | Handle thumbnail data | Function(Check source) | | quality | Generated screenshot quality | .01 | | mdlTitle | Modal title | Project Manager | | apiKey | Firebase API key | | | authDomain | Firebase Auth domain | | | projectId | Cloud Firestore project ID | | | firebaseConfig | Extra firebase app credentials | {} | | enableOffline | Enable Firestore support for offline data persistence | true | | settings | Firestore database settings | { timestampsInSnapshots: true } | | uuidInPath | Add uuid as path parameter on store for rest-api(useful for validation) | true | | size | Display estimated project sizes | true | | currentPageOpen | Send feedback when open is clicked on current page | check source | | ì18n | I18n object containing language more info | {} |

• Setting loadFirst to false prevents overwritting the contents of the editor with the contents of the first template in storage.
• Only use options for Firebase when using Cloud Firestore storage.
• dbName and indexeddbVersion only apply to indexddb storage.
• objectStoreName acts as collection name for both firestore and indexeddb.
• When uuidInPath is set to false the store request will be http://endpoint/store/ instead of http://endpoint/store/{uuid}

Local/IndexedDB

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'indexeddb'
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { /* Options */ }
  }
});

Firestore

Tested on firebase v8+. Firebase v9+ not yet supported.

Configure firestore access rules for your app. Add libraries to head of document:

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js"></script>

Add credentials:

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'firestore'
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { 
      // Firebase API key
      apiKey: 'FIREBASE_API_KEY',
      // Firebase Auth domain
      authDomain: 'app-id-00a00.firebaseapp.com',
      // Cloud Firestore project ID
      projectId: 'app-id-00a00',
    }
  }
});

Remote/REST-API

Example backend https://github.com/Ju99ernaut/gjs-api

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'rest-api',
    // the URIs below can be the same depending on your API design 
    options: {
      remote: {
        urlStore: 'https://endpoint/store/',// POST
        urlLoad: 'https://endpoint/load/',// GET
        urlDelete: 'https://endpoint/delete/',// DELETE
        // ...
      }
    }
  },
  plugins: ['grapesjs-project-manager'],
  pluginsOpts: {
    'grapesjs-project-manager': { /* options */ }
  }
});

The backend schema can be something like:

GET https://api/templates/ load all templates

Returns

[
    {
      "id": "UUIDv4",
      "name": "Page name",
      "template": false,
      "thumbnail": "",
      "description": "No description",
      "assets": "[]",
      "pages": "[]",
      "styles": "[]",
      "updated_at": ""
    }
]

POST https://api/templates/{idx: UUIDv4} store or update template

Expects

{
  "id": "UUIDv4",
  "name": "Page name",
  "template": false,
  "thumbnail": "",
  "description": "No description",
  "assets": "[]",
  "pages": "[]",
  "styles": "[]",
  "updated_at": ""
}

GET https://api/templates/{idx: UUIDv4} load template

Returns

{
  "id": "UUIDv4",
  "name": "Page name",
  "template": false,
  "thumbnail": "",
  "description": "No description",
  "assets": "[]",
  "pages": "[]",
  "styles": "[]",
  "updated_at": ""
}

DELETE https://api/templates/{idx: UUIDv4} delete template

Which would have the following setup:

window.editor = grapesjs.init({
  container: '#gjs',
  // ...
  storageManager:  {
    type: 'rest-api',
    // the URIs below can be the same depending on your API design 
    options:{
      remote:{
        urlStore: 'https://api/templates/',// POST
        urlLoad: 'https://api/templates/',// GET
        urlDelete: 'https://api/templates/',// DELETE
      }
    }
  },
  plugins: ['grapesjs-template-manager'],
  pluginsOpts: {
    'grapesjs-template-manager': { /* options */ }
  }
});

All the fields are generated from the editor so you just need to setup your API to receive and return data in that format. I'd recommend you check the network tab so you get a more accurate format for the payloads.

Download

• CDN
  • https://unpkg.com/grapesjs-project-manager
• NPM
  • npm i grapesjs-project-manager
• GIT
  • git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git

Usage

Directly in the browser

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/grapesjs-project-manager/dist/grapesjs-project-manager.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-project-manager.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container: '#gjs',
      // ...
      pageManager: true,
      storageManager:  {
        type: 'indexeddb',
        // ...
      },
      plugins: ['grapesjs-project-manager'],
      pluginsOpts: {
        'grapesjs-project-manager': { /* options */ }
      }
  });
</script>

Modern javascript

import grapesjs from 'grapesjs';
import plugin from 'grapesjs-project-manager';
import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-project-manager/dist/grapesjs-project-manager.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  pageManager: true,
  storageManager:  {
    type: 'indexeddb',
    // ...
  },
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git
$ cd grapesjs-template-manager

Install dependencies

$ npm i

Build css or watch scss

$ npm run build:css

OR

$ npm run watch:scss

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT