From 4e06c8d0a26d2b45c0c4805178f692cc1fa77867 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 24 Sep 2021 17:26:51 +0200
Subject: [PATCH] More Blocks HTML examples

---
 docs/modules/Blocks.md | 39 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/modules/Blocks.md b/docs/modules/Blocks.md
index 115006e70..97c1087d8 100644
--- a/docs/modules/Blocks.md
+++ b/docs/modules/Blocks.md
@@ -132,9 +132,10 @@ Using HTML strings as `content` is not wrong, in some cases you don't need the f
 ```
 In such a case, all rendered elements will be converted to the best suited default component (eg. `.el-Y` elements will be treated like `text` components). The user will be able to style and drag them with no particular restrictions.
 
-Thanks to Components' [isComponet](http://localhost:8081/docs/modules/Components.html#define-custom-component-type) feature (executed post parsing), you're still able to bind your rendered elements to components and enforce an extra logic. Here an example how you would enforce all `.el-Y` elements to be placed only inside `.el-X` one, without touching any part of the original HTML used in the `content`.
+Thanks to Components' [isComponet](http://localhost:8081/docs/modules/Components.html#iscomponent) feature (executed post parsing), you're still able to bind your rendered elements to components and enforce an extra logic. Here an example how you would enforce all `.el-Y` elements to be placed only inside `.el-X` one, without touching any part of the original HTML used in the `content`.
 
 ```js
+// Your component
 editor.Components.addType('cmp-Y', {
   // Detect '.el-Y' elements
   isComponent: el => el.classList?.contains('el-Y'),
@@ -146,6 +147,42 @@ editor.Components.addType('cmp-Y', {
   }
 });
 ```
+Another alternative is to leverage `data-gjs-*` attributes (used by GrapesJS parser) to attach properties to components.
+```js
+// -- [Option 1]: Declare type in HTML strings --
+{
+  // ...
+  content: `<div class="el-X">
+    <div data-gjs-type="cmp-Y" class="el-Y el-A">Element A</div>
+    <div data-gjs-type="cmp-Y" class="el-Y el-B">Element B</div>
+    <div data-gjs-type="cmp-Y" class="el-Y el-C">Element C</div>
+  </div>`
+}
+// Component
+editor.Components.addType('cmp-Y', {
+  // You don't need `isComponent` anymore as you declare types already on elements
+  model: {
+    defaults: {
+      name: 'Component Y', // Simple custom name
+      draggable: '.el-X', // Add `draggable` logic
+    }
+  }
+});
+
+// -- [Option 2]: Declare properties in HTML strings (less recommended) --
+{
+  // ...
+  content: `<div class="el-X">
+    <div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-A">Element A</div>
+    <div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-B">Element B</div>
+    <div data-gjs-name="Component Y" data-gjs-draggable=".el-X" class="el-Y el-C">Element C</div>
+  </div>`
+}
+// No need for a custom component.
+// You're already defining properties of each element.
+```
+
+
 
 ## Important caveats