chore: commit save point

README.md

@@ -4,15 +4,18 @@
 
 Project, template and page manager for grapesjs. This version makes use of the [`PageManager`](https://github.com/artf/grapesjs/pull/3411) and has different plugin and package name, the previous version which doesn't make use of the `PageManager` can be found [here](https://github.com/Ju99ernaut/grapesjs-template-manager/tree/template-manager).
 
+
 | Project                                                                                                                    | Project settings                                                                                                           |
-|---------|------------------|
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | ![Screenshot (224)](https://user-images.githubusercontent.com/48953676/130074718-0e50d99a-d004-41e0-890c-66f05175e45c.png) | ![Screenshot (226)](https://user-images.githubusercontent.com/48953676/130074800-075eab50-3059-493d-afa7-0b9f8af9fdf6.png) |
 
+
 | Pages                                                                                                                      | Page settings                                                                                                              |
-|-------|---------------|
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
 | ![Screenshot (225)](https://user-images.githubusercontent.com/48953676/130074843-81c120f9-37a0-4ee1-b8d4-019a16de6a46.png) | ![Screenshot (227)](https://user-images.githubusercontent.com/48953676/130074992-12a1774a-0a85-4e4f-8a14-1c95e0a7a7b6.png) |
 
 ### HTML
+
 ```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">
@@ -23,6 +26,7 @@ Project, template and page manager for grapesjs. This version makes use of the [
 ```
 
 ### JS
+
 ```js
 const editor = grapesjs.init({
   container: '#gjs',
@@ -58,6 +62,7 @@ pn.addButton('views', {
 ```
 
 ### CSS
+
 ```css
 body, html {
   margin: 0;
@@ -65,7 +70,6 @@ body, html {
 }
 ```
 
-
 ## Summary
 
 * Plugin name: `grapesjs-project-manager`
@@ -85,7 +89,7 @@ body, html {
 ## Options
 
 | Option              | Description                                                                                           | Default                           |
-|-|-|-
+| --------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------- |
 | `dbName`            | Database name                                                                                         | `gjs`                             |
 | `objectStoreName`   | Collection name                                                                                       | `templates`                       |
 | `loadFirst`         | Load first template in storage                                                                        | `true`                            |
@@ -201,6 +205,7 @@ The backend schema can be something like:
 `GET` `https://api/templates/` load all templates
 
 Returns
+
 ```json
 [
     {
@@ -220,6 +225,7 @@ Returns
 `POST` `https://api/templates/{idx: UUIDv4}` store template
 
 Expects
+
 ```json
 {
   "id": "UUIDv4",
@@ -237,6 +243,7 @@ Expects
 `GET` `https://api/templates/{idx: UUIDv4}` load template
 
 Returns
+
 ```json
 {
   "id": "UUIDv4",
@@ -254,6 +261,7 @@ Returns
 `DELETE` `https://api/templates/{idx: UUIDv4}` delete template
 
 Which would have the following setup:
+
 ```js
 window.editor = grapesjs.init({
   container: '#gjs',
@@ -283,11 +291,10 @@ All the fields are generated from the editor so you just need to setup your API
 * GIT
   * `git clone https://github.com/Ju99ernaut/grapesjs-template-manager.git`
 
-
-
 ## Usage
 
 Directly in the browser
+
 ```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">
@@ -314,6 +321,7 @@ Directly in the browser
 ```
 
 Modern javascript
+
 ```js
 import grapesjs from 'grapesjs';
 import plugin from 'grapesjs-project-manager';
@@ -378,7 +386,6 @@ Build the source
 $ npm run build
 ```
 
-
 ## License
 
 [AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.de.html)

index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="utf-8">
-    <title>GrapesJS Bootstrap v5 Blocks Plugin</title>
+    <title>GrapesJS Project Manager</title>
     <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
     <script src="https://unpkg.com/grapesjs"></script>
     <script src="@schukai/grapesjs-project-manager.min.js"></script>
@@ -17,47 +17,61 @@
 <body>
 <div id="gjs" style="height:0px; overflow:hidden">
     <div style="margin:100px 100px 25px; padding:25px; font:caption">
-            This is a demo content from _index.html. You can use this template file for
-            development purpose. It won't be stored in your git repository
+        This is a demo content from index.html. You can use this template file for
+        development purpose.
     </div>
 </div>
 
-
 <script type="text/javascript">
-        window.editor = grapesjs.init({
+    var editor = grapesjs.init({
         height: '100%',
-            container: '#gjs',
-            showOffsets: true,
-            fromElement: true,
-            noticeOnUnload: false,
-            pageManager: true,
+        pageManager: {},
         storageManager: {
             type: 'indexeddb'
         },
-            plugins: ['grapesjs-project-manager'],
+        showOffsets: 1,
+        noticeOnUnload: 0,
+        container: '#gjs',
+        fromElement: true,
+        showDevices: false,
+        plugins: ['@schukai/grapesjs-project-manager'],
         pluginsOpts: {
-                'grapesjs-project-manager': { /* Test here your options  */ }
-            }
+            '@schukai/grapesjs-project-manager': {}
+        },
+
     });
-        const pn = editor.Panels;
-        pn.addButton('options', {
+
+    editor.Panels.addButton('options', {
         id: 'open-templates',
         className: 'fa fa-folder-o',
         attributes: {
-                title: 'Open Templates'
+            title: 'Open projects and templates'
         },
         command: 'open-templates', //Open modal 
     });
-        pn.addButton('views', {
+
+    editor.Panels.addButton('views', {
         id: 'open-pages',
         className: 'fa fa-file-o',
         attributes: {
-                title: 'Take Screenshot'
+            title: 'Open Pages'
         },
         command: 'open-pages',
         togglable: false
     });
+
+    editor.BlockManager.add('demo', {
+        label: '<h1>Headline</h1><p>Lorem Ipsum</p>',
+        content: `
+            <h1>Headline</h1><p>Lorem Ipsum</p>
+            `,
+        category: 'demo',
+        attributes: {
+            title: 'Insert h1 block'
+        }
+    });
+
+    window.editor = editor;
 </script>
 </body>
-
 </html>
\ No newline at end of file

package.json

@@ -8,11 +8,11 @@
         "url": "https://gitlab.schukai.com/oss/minerva/grapesjs-project-manager.git"
     },
     "scripts": {
-        "start": "grapesjs-cli serve --entry=source/index.js",
-        "build": "grapesjs-cli build",
-        "build:css": "sass source/styles.scss dist/grapesjs-project-manager.min.css --style compressed",
-        "watch:scss": "sass --watch source/styles.scss dist/grapesjs-project-manager.min.css --style compressed",
-        "bump": "npm version patch -m 'Bump v%s'"
+        "lint": "eslint source",
+        "build": "webpack --env production",
+        "build-dev": "npm run && webpack --env production",
+        "start": "webpack-cli serve --mode development --progress",
+        "postinstall": "npm-install-peers"
     },
     "keywords": [
         "grapesjs",
@@ -20,11 +20,28 @@
     ],
     "devDependencies": {
         "grapesjs-cli": "^1.0.14",
-        "sass": "^1.32.8"
+        "sass": "^1.32.8",
+        "@babel/core": "^7.18.2",
+        "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+        "@babel/preset-env": "^7.18.2",
+        "@webpack-cli/init": "^1.1.3",
+        "babel-loader": "^8.2.5",
+        "eslint": "^8.16.0",
+        "html-webpack-plugin": "^5.5.0",
+        "raw-loader": "^4.0.2",
+        "terser-webpack-plugin": "^5.3.1",
+        "webpack": "^5.72.1",
+        "webpack-cli": "^4.9.2",
+        "webpack-dev-server": "^4.9.0",
+        "npm": "^8.11.0",
+        "npm-install-peers": "^1.2.2"        
     },
     "author": "schukai GmbH, Brendon Ngirazi",
     "license": "AGPL 3.0",
     "dependencies": {
         "dom-to-image": "^2.6.0"
+    },
+    "peerDependencies": {
+        "grapesjs": "0.x"
     }
 }

source/index.js

@@ -99,6 +99,12 @@ export default (editor, opts = {}) => {
     // Load page with index zero
     editor.on('load', () => {
         const cs = editor.Storage.getCurrentStorage();
+        
+        if (!cs?.loadAll?.call ){
+            console.error('Storage does not have loadAll method');
+            return
+        }
+        
         const { customLoad } = options;
         customLoad && typeof customLoad === 'function' && customLoad(editor, cs);
         !customLoad && cs.loadAll(res => {