Grapesjs Directus Storage

Directus as a backend for GrapesJS

/!\ This code uses an outdated SDK from directus project

This code is part of a bigger project: about Silex v3

Links

• DEMO on Codepen
• Npm package

The plugin currently has these features

• Authentication commands using Directus API to login/logout the user
• Custom StorageManager to store the website data in a Directus collection
• Custom AssetManager which integrates with Directus assets
• This plugin provides easy versioning of the website data and assets
• The JSON data of the website and the assets are readable and editable in Directus
• Directus provides no-code flow automations

Here is grapesjs data in directus

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/@silexlabs/grapesjs-directus-storage"></script>

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

JS

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: {
    type: 'directus',
    autoload: false,
  },
  plugins: ['@silexlabs/grapesjs-directus-storage'],
  pluginsOpts: {
    '@silexlabs/grapesjs-directus-storage': {
      directusUrl: prompt('You need a Directus server to test this plugin. Directus server URL', 'http://localhost:8055')
    }
  }
});

CSS

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

Directus settings

On the Directus side, you need

1. A collection to store your website data (has to be a list, singleton not yet supported)
2. A user with access right to the collection and to the collection directus_files

The collection to store your data needs to have these fields

• pages
• styles
• fonts (optional, for use with @silexlabs/grapesjs-fonts)
• symbols (optional, for use with @silexlabs/grapesjs-symbols)

These fields can be code fields of type JSON so that the UI is adequat, or they can be simple text fields

As the plugin needs to connect to your Directus server, you need to handle CORS on the server, read Directus docs on CORS

Options

| Option | Description | Default | |-|-|-| | directusUrl | Directus URL | Required | | collection | Name of the directus collection to hold silex website data | silex | | assets | Path to directus assets folder, relative to the server root | /assets | | formClassName | CSS classes to add to the login form | directus__login | | styles | CSS Styles to apply to the login form | See source code | | userCreated | Wether to update the user_created field | true | | userUpdated | Wether to update the user_updated field | true |

Actions

| Action | Description | |-|-| | login | Show the login form and login | | logout | Log out the user | | relogin | Log out and login immediately again |

Event

| Event | Description | Params | |-|-|-| | login:start | Show login form to start loging in | - | | login:success | The user is logged in | An object with 2 methods: getUser() and getToken() | | login:error | An error occured while login, e.g. wrong password | The error object, with a message field | | logout:success | The user is logged out | - |

Download

• CDN
  • https://unpkg.com/@silexlabs/grapesjs-directus-storage
• NPM
  • npm i @silexlabs/grapesjs-directus-storage
• GIT
  • git clone https://github.com/silexlabs/grapesjs-directus-storage.git

Usage

Directly in the browser

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

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

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from '@silexlabs/grapesjs-directus-storage';
import 'grapesjs/dist/css/grapes.min.css';

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

Development

Clone the repository

$ git clone https://github.com/silexlabs/grapesjs-directus-storage.git
$ cd grapesjs-directus-storage

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build

License

MIT