Merge pull request #41 from artf/update

Migrate to TS, use SVG icons, drop the legacy plugin registration
GrapesJS · Sep 8, 2022 · f7c9869 · f7c9869
2 parents 92a4393 + 6bbe3ba
commit f7c9869
Show file tree

Hide file tree

Showing 11 changed files with 4,089 additions and 5,241 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,6 +7,7 @@
 npm-debug.log
 _index.html
 
+dist/
 img/
 images/
 private/

diff --git a/README.md b/README.md
@@ -28,19 +28,22 @@ This plugin contains some basic blocks for the GrapesJS editor
 | `labelImage`    | Image label                      | `Image`                                                                                         |
 | `labelVideo`    | Video label                      | `Video`                                                                                         |
 | `labelMap`      | Map label                        | `Map`                                                                                           |
-| `rowHeight`     | Initial height                   | `75px`                                                                                          |
+| `rowHeight`     | Initial height                   | `75`                                                                                          |
 
 ## Download
 
-- `npm i grapesjs-blocks-basic`
+* CDN
+  * `https://unpkg.com/grapesjs-blocks-basic`
+* NPM
+  * `npm i grapesjs-blocks-basic`
+* GIT
+  * `git clone https://github.com/artf/grapesjs-blocks-basic.git`
 
 ## Usage
 
+Directly in the browser
 ```html
-<link
-  href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
-  rel="stylesheet"
-/>
+<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-blocks-basic.min.js"></script>
 
@@ -60,6 +63,25 @@ This plugin contains some basic blocks for the GrapesJS editor
 </script>
 ```
 
+Modern javascript
+```js
+import grapesjs from 'grapesjs';
+import plugin from 'grapesjs-blocks-basic';
+
+const editor = grapesjs.init({
+  container : '#gjs',
+  // ...
+  plugins: [plugin],
+  pluginsOpts: {
+    [plugin]: { /* options */ }
+  }
+  // or
+  plugins: [
+    editor => plugin(editor, { /* options */ }),
+  ],
+});
+```
+
 ## Development
 
 Clone the repository
@@ -75,18 +97,19 @@ Install it
 $ npm i
 ```
 
-The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)
+Start the dev server
 
 ```sh
-$ npm i grapesjs --no-save
+$ npm start
 ```
 
-Start the dev server
+Build before the commit. This will also increase the patch level version of the package
 
 ```sh
-$ npm start
+$ npm run build
 ```
 
+
 ## License
 
 BSD 3-Clause
diff --git a/dist/grapesjs-blocks-basic.min.js b/dist/grapesjs-blocks-basic.min.js
diff --git a/index.html b/index.html
@@ -3,45 +3,32 @@
   <head>
     <meta charset="utf-8" />
     <title>GrapesJS Plugin</title>
-    <link
-      href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
-      rel="stylesheet"
-    />
+    <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
     <script src="https://unpkg.com/grapesjs"></script>
-    <script src="dist/grapesjs-blocks-basic.min.js"></script>
     <style>
-      body,
-      html {
+      body, html {
         height: 100%;
         margin: 0;
       }
-
-      .gjs-block-svg {
-        width: 61%;
-      }
-
-      .gjs-block-svg-path {
-        fill: white;
-      }
     </style>
   </head>
   <body>
     <div id="gjs" style="height:0px; overflow:hidden"></div>
 
     <script type="text/javascript">
-      var editor = grapesjs.init({
-        height: '100%',
-        noticeOnUnload: 0,
-        storageManager: { autoload: 0 },
-        container: '#gjs',
-        fromElement: true,
-        plugins: ['gjs-blocks-basic'],
-        pluginsOpts: {
-          'gjs-blocks-basic': {}
-        }
+      setTimeout(() => {
+        window.editor = grapesjs.init({
+          height: '100%',
+          noticeOnUnload: false,
+          storageManager: false,
+          container : '#gjs',
+          fromElement: true,
+          plugins: ['gjs-blocks-basic'],
+          pluginsOpts: {
+            'gjs-blocks-basic': {}
+          }
+        });
       });
-
-      window.editor = editor;
     </script>
   </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,7 @@ @@
     npm-debug.log
     _index.html
+    dist/
     img/
     images/
     private/
@@ Expand Down @@