# GrapesJS Preset Webpage

# Summary

Plugin name: gjs-preset-webpage
Includes:
- grapesjs-blocks-basic Basic set of blocks
- grapesjs-navbar Simple navbar component
- grapesjs-component-countdown Simple countdown component
- grapesjs-plugin-forms Set of form components and blocks
- grapesjs-aviary Add the Aviary Image Editor
- grapesjs-plugin-filestack Add Filestack uploader in Asset Manager
- grapesjs-plugin-export Export GrapesJS templates in a zip archive
Commands:
- gjs-open-import-webpage Opens a modal for the import
- set-device-desktop Set desktop device
- set-device-tablet Setup tablet device
- set-device-mobile Setup mobile device
- canvas-clear Clear all components and styles inside canvas
Blocks:
- link-block
- quote
- text-basic

# Options

Option	Description	Default
`blocks`	Which blocks to add	`['link-block', 'quote', 'text-basic']`
`modalImportTitle`	Modal import title	`'Import'`
`modalImportButton`	Modal import button text	`'Import'`
`modalImportLabel`	Import description inside import modal	`''`
`modalImportContent`	Default content to setup on import model open. Could also be a function with a dynamic content return (must be a string) eg. `modalImportContent: editor => editor.getHtml()`	`''`
`importViewerOptions`	Code viewer (eg. CodeMirror) options	`{}`
`textCleanCanvas`	Confirm text before cleaning the canvas	`'Are you sure to clean the canvas?'`
`showStylesOnChange`	Show the Style Manager on component change	`true`
`textGeneral`	Text for General sector in Style Manager	`'General'`
`textLayout`	Text for Layout sector in Style Manager	`'Layout'`
`textTypography`	Text for Typography sector in Style Manager	`'Typography'`
`textDecorations`	Text for Decorations sector in Style Manager	`'Decorations'`
`textExtra`	Text for Extra sector in Style Manager	`'Extra'`
`customStyleManager`	Use custom set of sectors for the Style Manager	`[]`
`blocksBasicOpts`	`grapesjs-blocks-basic` plugin options. By setting this option to `false` will avoid loading the plugin	`{}`
`navbarOpts`	`grapesjs-navbar` plugin options. By setting this option to `false` will avoid loading the plugin	`{}`
`countdownOpts`	`grapesjs-component-countdown` plugin options. By setting this option to `false` will avoid loading the plugin	`{}`
`formsOpts`	`grapesjs-plugin-forms` plugin options. By setting this option to `false` will avoid loading the plugin	`{}`
`exportOpts`	`grapesjs-plugin-export` plugin options. By setting this option to `false` will avoid loading the plugin	`{}`
`aviaryOpts`	`grapesjs-aviary` plugin options. Aviary library should be included manually. By setting this option to `false` will avoid loading the plugin	`false`
`filestackOpts`	`grapesjs-plugin-filestack` plugin options. Filestack library should be included manually. By setting this option to `false` will avoid loading the plugin	`false`

# Download

$ npm i grapesjs-preset-webpage

# Usage

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<link href="path/to/grapesjs-preset-webpage.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-preset-webpage.min.js"></script>

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

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

# Development

Clone the repository

$ git clone git@github.com:artf/grapesjs-preset-webpage.git && cd grapesjs-preset-webpage

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies, so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

# License

BSD 3-Clause