Ju99ernaut/grapesjs-template-manager

Uncaught TypeError:

Closed this issue · 3 comments

FranklinsHand commented

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/grapesjs@0.17.2-rc.1/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/grapesjs@0.17.2-rc.1/dist/grapes.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue@2'></script>
<script src='https://unpkg.com/grapesjs-blocks-basic@0.1.8/dist/grapesjs-blocks-basic.min.js'></script>
<script src='https://unpkg.com/grapesjs-indexeddb@0.1.1/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.

Ju99ernaut commented

Grapesjs' built in storages don't work with this plugin, here's the list of supported storage types and how to setup https://github.com/Ju99ernaut/grapesjs-template-manager#localindexeddb

In your case just change type: 'local' to type: 'indexeddb'

FranklinsHand commented 
  container: '#gjs',
  height: '100%',
  storageManager: {
    id: 'gjs-',             // Prefix identifier that will be used on parameters
    type: 'indexeddb',          // Type of the storage
    fromElement: true,   //used for tempalate manager
    autosave: 0,         // 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
  },

I switched to indexeddb and made sure indexeddb is working. I am still getting the same errors.

Ju99ernaut commented

I'm not sure what's wrong on your end, your configuration works fine on my end, anyways the errors you're getting indicate that whichever storage you're using doesn't have the loadAll method, which is available in the indexeddb version that comes built in https://github.com/Ju99ernaut/grapesjs-template-manager/blob/master/src/storage/indexeddb.js