Skip to content

Commit f7c9869

Browse files
artfartf
authored
Merge pull request #41 from artf/update
Migrate to TS, use SVG icons, drop the legacy plugin registration
2 parents 92a4393 + 6bbe3ba commit f7c9869

11 files changed

Lines changed: 4089 additions & 5241 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
npm-debug.log
88
_index.html
99

10+
dist/
1011
img/
1112
images/
1213
private/

‎README.md‎

Lines changed: 33 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,22 @@ This plugin contains some basic blocks for the GrapesJS editor
2828
| `labelImage` | Image label | `Image` |
2929
| `labelVideo` | Video label | `Video` |
3030
| `labelMap` | Map label | `Map` |
31-
| `rowHeight` | Initial height | `75px` |
31+
| `rowHeight` | Initial height | `75` |
3232

3333
## Download
3434

35-
- `npm i grapesjs-blocks-basic`
35+
* CDN
36+
* `https://unpkg.com/grapesjs-blocks-basic`
37+
* NPM
38+
* `npm i grapesjs-blocks-basic`
39+
* GIT
40+
* `git clone https://github.com/artf/grapesjs-blocks-basic.git`
3641

3742
## Usage
3843

44+
Directly in the browser
3945
```html
40-
<link
41-
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
42-
rel="stylesheet"
43-
/>
46+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
4447
<script src="https://unpkg.com/grapesjs"></script>
4548
<script src="path/to/grapesjs-blocks-basic.min.js"></script>
4649

@@ -60,6 +63,25 @@ This plugin contains some basic blocks for the GrapesJS editor
6063
</script>
6164
```
6265

66+
Modern javascript
67+
```js
68+
import grapesjs from 'grapesjs';
69+
import plugin from 'grapesjs-blocks-basic';
70+
71+
const editor = grapesjs.init({
72+
container : '#gjs',
73+
// ...
74+
plugins: [plugin],
75+
pluginsOpts: {
76+
[plugin]: { /* options */ }
77+
}
78+
// or
79+
plugins: [
80+
editor => plugin(editor, { /* options */ }),
81+
],
82+
});
83+
```
84+
6385
## Development
6486

6587
Clone the repository
@@ -75,18 +97,19 @@ Install it
7597
$ npm i
7698
```
7799

78-
The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)
100+
Start the dev server
79101

80102
```sh
81-
$ npm i grapesjs --no-save
103+
$ npm start
82104
```
83105

84-
Start the dev server
106+
Build before the commit. This will also increase the patch level version of the package
85107

86108
```sh
87-
$ npm start
109+
$ npm run build
88110
```
89111

112+
90113
## License
91114

92115
BSD 3-Clause

‎dist/grapesjs-blocks-basic.min.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎index.html‎

Lines changed: 14 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,32 @@
33
<head>
44
<meta charset="utf-8" />
55
<title>GrapesJS Plugin</title>
6-
<link
7-
href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
8-
rel="stylesheet"
9-
/>
6+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
107
<script src="https://unpkg.com/grapesjs"></script>
11-
<script src="dist/grapesjs-blocks-basic.min.js"></script>
128
<style>
13-
body,
14-
html {
9+
body, html {
1510
height: 100%;
1611
margin: 0;
1712
}
18-
19-
.gjs-block-svg {
20-
width: 61%;
21-
}
22-
23-
.gjs-block-svg-path {
24-
fill: white;
25-
}
2613
</style>
2714
</head>
2815
<body>
2916
<div id="gjs" style="height:0px; overflow:hidden"></div>
3017

3118
<script type="text/javascript">
32-
var editor = grapesjs.init({
33-
height: '100%',
34-
noticeOnUnload: 0,
35-
storageManager: { autoload: 0 },
36-
container: '#gjs',
37-
fromElement: true,
38-
plugins: ['gjs-blocks-basic'],
39-
pluginsOpts: {
40-
'gjs-blocks-basic': {}
41-
}
19+
setTimeout(() => {
20+
window.editor = grapesjs.init({
21+
height: '100%',
22+
noticeOnUnload: false,
23+
storageManager: false,
24+
container : '#gjs',
25+
fromElement: true,
26+
plugins: ['gjs-blocks-basic'],
27+
pluginsOpts: {
28+
'gjs-blocks-basic': {}
29+
}
30+
});
4231
});
43-
44-
window.editor = editor;
4532
</script>
4633
</body>
4734
</html>

0 commit comments

Comments
 (0)