# strapi-plugin-webpage-builder

> Add GrapesJS builder to your own strapi application.

Latest version **1.0.0-alpha.0.1** (published 2020-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install strapi-plugin-webpage-builder
pnpm add strapi-plugin-webpage-builder
yarn add strapi-plugin-webpage-builder
bun add strapi-plugin-webpage-builder
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.0.1 |
| Published | 2020-06-19 |
| First published | 2020-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 10 |
| Unpacked size | 483 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 64 |
| Author | Hugues BUREAU |
| Maintainers | 8byr0 |

## Links

- npm: https://www.npmjs.com/package/strapi-plugin-webpage-builder
- Repository: https://github.com/uwizy/strapi-plugin-webpage-builder
- Homepage: https://github.com/uwizy/strapi-plugin-webpage-builder#readme
- Issues: https://github.com/uwizy/strapi-plugin-webpage-builder/issues
- npm.io page: https://npm.io/package/strapi-plugin-webpage-builder

## Dependencies (10)

- [xregexp](https://npm.io/package/xregexp.md) ^4.2.4
- [grapesjs](https://npm.io/package/grapesjs.md) ^0.16.17
- [underscore](https://npm.io/package/underscore.md) ^1.9.1
- [react-style-tag](https://npm.io/package/react-style-tag.md) ^2.0.1
- [node-html-parser](https://npm.io/package/node-html-parser.md) ^1.1.16
- [react-jsx-parser](https://npm.io/package/react-jsx-parser.md) ^1.21.0
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.0
- [grapesjs-blocks-basic](https://npm.io/package/grapesjs-blocks-basic.md) ^0.1.8
- [grapesjs-preset-webpage](https://npm.io/package/grapesjs-preset-webpage.md) ^0.1.11
- [grapesjs-plugin-ckeditor](https://npm.io/package/grapesjs-plugin-ckeditor.md) 0.0.9

## Recent versions

- 1.0.0-alpha.0.1 (latest) — 2020-06-19

## README

# strapi-plugin-webpage-builder
Add GrapesJS builder to your own strapi application

![Webpage builder demo](/admin/src/components/GrapesEditor/assets/img/demo.png)

# Setup
Install package
```sh
npm i --save strapi-plugin-webpage-builder
# or
yarn add strapi-plugin-webpage-builder
```

Create or edit `your-project/admin/admin.config.js` and add sass loader (which is required by GrapesJS)
```javascript
module.exports = {
  webpack: (config, webpack) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config

    // Allow scss modules
    config.resolve = { ...config.resolve, extensions: [...config.resolve.extensions, '.scss'] };

    // Configure a SASS loader
    config.module.rules.push({
      test: /\.s[ac]ss$/i,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader',
        {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        },
      ],
    });

    return config;
  },
};
```

Edit your model(e.g. the model that'll handle web builder field) controllers (`your-project/api/your-model/controllers/your-model.js`).
> At the time of this release, strapi does not allow to add custom private fields to model so all the data required to init editor will be stored in your model. The following step prevent useless data to be returned on get requests:
```javascript
'use strict';
const { sanitizeEntity } = require('strapi-utils');

const cleanupEntity = (entity) => {
  const { content } = entity;

  return { ...entity, content: { html: content.html, css: content.css } };
};

module.exports = {
  async find(ctx) {
    let entities;
    if (ctx.query._q) {
      entities = await strapi.services.yourModel.search(ctx.query); /* eslint-disable-line no-undef */
    } else {
      entities = await strapi.services.yourModel.find(ctx.query); /* eslint-disable-line no-undef */
    }

    return entities.map((entity) => {
      return sanitizeEntity(cleanupEntity(entity), { model: strapi.models.yourModel } /* eslint-disable-line no-undef */);
    });
  },
  async findOne(ctx) {
    const { id } = ctx.params;

    const entity = await strapi.services.yourModel.findOne({ id }); /* eslint-disable-line no-undef */

    return sanitizeEntity(cleanupEntity(entity), { model: strapi.models.yourModel } /* eslint-disable-line no-undef */);
  },
};
```
> NB: this code assumes that you named a field `content` with type `json` in model `yourModel`

---
_Source: https://npm.io/package/strapi-plugin-webpage-builder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._