├── .gitignore
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── src
    └── index.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | private/
3 | node_modules/
4 | .eslintrc
5 | .npmrc
6 | *.log
7 | _index.html
8 | dist/
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2018-current, Artur Arseniev
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without modification,
 5 | are permitted provided that the following conditions are met:
 6 | 
 7 | - Redistributions of source code must retain the above copyright notice, this
 8 |   list of conditions and the following disclaimer.
 9 | - Redistributions in binary form must reproduce the above copyright notice, this
10 |   list of conditions and the following disclaimer in the documentation and/or
11 |   other materials provided with the distribution.
12 | - Neither the name "GrapesJS" nor the names of its contributors may be
13 |   used to endorse or promote products derived from this software without
14 |   specific prior written permission.
15 | 
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
17 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
18 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
20 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
21 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
22 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
23 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
24 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
25 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # GrapesJS Style Filter
  2 | 
  3 | This plugins adds a new `filter` [built-in style property](https://grapesjs.com/docs/modules/Style-manager.html#built-in-properties) which can be used for CSS properties like `filter` and `backdrop-filter`.
  4 | 
  5 | [Demo](https://jsfiddle.net/xg23astu)
  6 | 
  7 | <p align="center"><img src="https://user-images.githubusercontent.com/11614725/47965316-c0fd6f80-e045-11e8-8ce6-8b0251bf36a4.png" alt="GrapesJS" align="center"/></p>
  8 | 
  9 | 
 10 | > Requires GrapesJS v0.18.3 or higher
 11 | 
 12 | 
 13 | 
 14 | 
 15 | 
 16 | ## Summary
 17 | 
 18 | * Plugin name: `grapesjs-style-filter`
 19 | * New Style Manager built-in property
 20 |   * `filter`
 21 | 
 22 | 
 23 | 
 24 | 
 25 | ## Download
 26 | 
 27 | * CDN
 28 |   * `https://unpkg.com/grapesjs-style-filter`
 29 | * NPM
 30 |   * `npm i grapesjs-style-filter`
 31 | * GIT
 32 |   * `git clone https://github.com/GrapesJS/style-filter.git`
 33 | 
 34 | 
 35 | 
 36 | 
 37 | 
 38 | ## Usage
 39 | 
 40 | Directly in the browser
 41 | ```html
 42 | <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
 43 | <script src="https://unpkg.com/grapesjs"></script>
 44 | <script src="path/to/grapesjs-style-filter.min.js"></script>
 45 | 
 46 | <div id="gjs"></div>
 47 | 
 48 | <script type="text/javascript">
 49 |   const editor = grapesjs.init({
 50 |       container : '#gjs',
 51 |       // ...
 52 |       plugins: ['grapesjs-style-filter'],
 53 | 
 54 |       // Use the property on init
 55 |       styleManager: {
 56 |         sectors: [
 57 |           // ...
 58 |           {
 59 |             id: 'extra',
 60 |             name: 'Extra',
 61 |             properties: [
 62 |               { extend: 'filter' },
 63 |               { extend: 'filter', property: 'backdrop-filter' },
 64 |             ],
 65 |           }
 66 |         ]
 67 |       },
 68 |   });
 69 | 
 70 |   // or add it to the StyleManager via API
 71 |   editor.StyleManager.addProperty('extra', { extend: 'filter' });
 72 |   editor.StyleManager.addProperty('extra', { extend: 'filter', property: 'backdrop-filter' });
 73 | </script>
 74 | ```
 75 | 
 76 | Modern javascript
 77 | ```js
 78 | import grapesjs from 'grapesjs';
 79 | import styleFilter from 'grapesjs-style-filter';
 80 | 
 81 | const editor = grapesjs.init({
 82 |   container : '#gjs',
 83 |   plugins: [styleFilter, /*...*/],
 84 |   // Same StyleManager configuration
 85 | });
 86 | // Same StyleManager API usage
 87 | ```
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | ## Development
 94 | 
 95 | Clone the repository
 96 | 
 97 | ```sh
 98 | $ git clone https://github.com/GrapesJS/style-filter.git
 99 | $ cd grapesjs-style-filter
100 | ```
101 | 
102 | Install dependencies
103 | 
104 | ```sh
105 | $ npm i
106 | ```
107 | 
108 | Start the dev server
109 | 
110 | ```sh
111 | $ npm start
112 | ```
113 | 
114 | 
115 | 
116 | 
117 | 
118 | ## License
119 | 
120 | BSD 3-Clause
121 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>GrapesJS Style Filter</title>
 6 |     <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
 7 |     <script src="https://unpkg.com/grapesjs"></script>
 8 |     <style>
 9 |       body,
10 |       html {
11 |         height: 100%;
12 |         margin: 0;
13 |       }
14 |     </style>
15 |   </head>
16 |   <body>
17 | 
18 |     <div id="gjs" style="height:0px; overflow:hidden">
19 |       <div style="margin:100px 100px 25px; padding:25px; font:caption">
20 |         This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
21 |         copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
22 |       </div>
23 |     </div>
24 | 
25 | 
26 |     <script type="text/javascript">
27 |       window.onload = () => {
28 |         var editor = grapesjs.init({
29 |           height: '100%',
30 |           showOffsets: true,
31 |           noticeOnUnload: false,
32 |           storageManager: false,
33 |           container: '#gjs',
34 |           fromElement: true,
35 | 
36 |           plugins: ['grapesjs-style-filter'],
37 |         });
38 | 
39 |         editor.StyleManager.addProperty('extra', 'filter');
40 |         editor.StyleManager.addProperty('extra', { extend: 'filter', property: 'backdrop-filter' });
41 |         window.editor = editor;
42 |       };
43 |     </script>
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grapesjs-style-filter",
 3 |   "version": "1.0.2",
 4 |   "description": "GrapesJS Style Filter",
 5 |   "main": "dist/index.js",
 6 |   "files": [
 7 |     "dist/"
 8 |   ],
 9 |   "scripts": {
10 |     "patch": "npm version patch -m 'Bump v%s'",
11 |     "start": "grapesjs-cli serve",
12 |     "build": "grapesjs-cli build"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/GrapesJS/style-filter.git"
17 |   },
18 |   "keywords": [
19 |     "grapesjs",
20 |     "plugin",
21 |     "style",
22 |     "filter",
23 |     "wysiwyg"
24 |   ],
25 |   "author": "Artur Arseniev",
26 |   "license": "BSD-3-Clause",
27 |   "devDependencies": {
28 |     "grapesjs": "^0.21.2",
29 |     "grapesjs-cli": "^4.1.1"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import type { Plugin } from 'grapesjs';
 2 | 
 3 | export interface PluginOptions {};
 4 | 
 5 | const plugin: Plugin<PluginOptions> = (editor) => {
 6 | 
 7 |   editor.Styles.addBuiltIn('filter', {
 8 |     type: 'stack',
 9 |     // @ts-ignore
10 |     layerSeparator: ' ',
11 |     fromStyle(style: any, { property, name }: any) {
12 |       const filter = style[name] || '';
13 |       const sep = property.getLayerSeparator();
14 |       return filter ? filter.split(sep).map((input: string) => {
15 |         const { name, value } = property.__parseFn(input);
16 |         return { name, value };
17 |       }) : [];
18 |     },
19 |     toStyle(values: any, { name }: any) {
20 |       return { [name]: `${values.name}(${values.value})` };
21 |     },
22 |     properties: [
23 |       {
24 |         property: 'name',
25 |         name: 'Type',
26 |         type: 'select',
27 |         default: 'sepia',
28 |         full: true,
29 |         options: [
30 |           { id: 'blur', propValue: { min: 0, units: ['px', 'em', 'rem', 'vw', 'vh'] } },
31 |           { id: 'brightness', propValue: { min: 0, units: ['%'] } },
32 |           { id: 'contrast', propValue: { min: 0, units: ['%'] } },
33 |           { id: 'grayscale', propValue: { min: 0, max: 100, units: ['%'] } },
34 |           { id: 'hue-rotate', propValue: { min: 0, max: 360, units: ['deg', 'rad', 'grad'] } },
35 |           { id: 'invert', propValue: { min: 0, max: 100, units: ['%'] } },
36 |           { id: 'saturate', propValue: { min: 0, units: ['%'] } },
37 |           { id: 'sepia', propValue: { min: 0, max: 100, units: ['%'] } },
38 |         ],
39 |         onChange({ property, to }: any) {
40 |           if (to.value) {
41 |             const option = property.getOption();
42 |             const props = { ...(option.propValue || {}) };
43 |             const propToUp = property.getParent().getProperty('value');
44 |             const unit = propToUp.getUnit();
45 |             if (!unit || props?.units.indexOf(unit) < 0) {
46 |               props.unit = props?.units[0] || '';
47 |             }
48 |             propToUp.up(props);
49 |           }
50 |         }
51 |       }, {
52 |         property: 'value',
53 |         type: 'slider',
54 |         default: '0',
55 |         full: true,
56 |       },
57 |     ]
58 |   });
59 | 
60 | };
61 | 
62 | export default plugin;


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "./node_modules/grapesjs-cli/dist/template/tsconfig.json",
3 |     "include": ["src"]
4 | }


--------------------------------------------------------------------------------