From 8160aea5bde246a8ebc5a5553a240ae522479e1c Mon Sep 17 00:00:00 2001
From: Thomas Clavier <tom@tcweb.org>
Date: Fri, 21 Oct 2022 19:12:09 +0200
Subject: [PATCH 1/3] improve attributes management and preview

Parse and manage 3 attributes : src, alt and title
Use image widget to build img src for preview
---
 src/figure.js | 55 +++++++++++++++++++++++++++++++--------------------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/figure.js b/src/figure.js
index 204559b..ea178c2 100644
--- a/src/figure.js
+++ b/src/figure.js
@@ -1,28 +1,41 @@
 CMS.registerEditorComponent({
     id: "figure",
-    label: "Figure",
+    label: "Illustration",
     fields: [{
-            name: "title",
-            label: "Figure Title",
-            widget: "string"
-        },
-        {
-            name: "src",
-            label: "Figure SRC",
-            widget: "string"
-        },
-    ],
-    pattern: /{{< figure src="([a-zA-Z0-9-_ ]+)" title="([a-zA-Z0-9-_ ]+)" >}}/,
-    fromBlock: function(match) {
-        return {
-            title: match[1],
-            src: match[2],
-        };
+        name: "title",
+        label: "Titre",
+        widget: "string",
+    }, {
+        name: "alt",
+        label: "Description",
+        widget: "string"
+    }, {
+        name: "src",
+        label: "Image",
+        widget: "image"
+    }],
+    pattern: /{{<\s*figure(.*)>}}/,
+    fromBlock: function (input) {
+        let output = {alt: "", src: "", title: ""}
+        let options = input[1].match(/\w+\s*=\s*"[^"]*"/g);
+        if (options) {
+            options.forEach((i) => {
+                const keyValue = i.split("=");
+                output = {...output, [keyValue[0]]: keyValue[1].replace(/"/g, '')}
+            });
+        }
+        return output;
     },
-    toBlock: function(obj) {
-        return `{{< figure src="${obj.src}" title="${obj.title}" >}}`;
+    toBlock: function (obj) {
+        let options = "";
+        options += obj.src ? ` src="${obj.src}"` : '';
+        options += obj.alt ? ` alt="${obj.alt}"` : '';
+        options += obj.title ? ` title="${obj.title}"` : '';
+        return `{{< figure ${options}>}}`;
     },
-    toPreview: function(obj) {
-        return `<figure><img src=${obj.src} alt=${obj.title}><figcaption>${obj.title}</figcaption></figure>`;
+    toPreview: ({title, alt, src}, getAsset, fields) => {
+        const imageField = fields?.find(f => f.get('widget') === 'image');
+        const imgSrc = getAsset(src, imageField);
+        return `<figure><img src="${imgSrc}" alt="${alt}"><figcaption><h4>${title}</h4></figcaption></figure>`;
     },
 });

From 9fcfeba88ec325278e89b881964a1f8e97a6a6dd Mon Sep 17 00:00:00 2001
From: Thomas Clavier <tom@tcweb.org>
Date: Fri, 21 Oct 2022 19:13:50 +0200
Subject: [PATCH 2/3] use Figure as label

---
 src/figure.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/figure.js b/src/figure.js
index ea178c2..3bbe4c7 100644
--- a/src/figure.js
+++ b/src/figure.js
@@ -1,6 +1,6 @@
 CMS.registerEditorComponent({
     id: "figure",
-    label: "Illustration",
+    label: "Figure",
     fields: [{
         name: "title",
         label: "Titre",

From 14240c099a774a2b6b7f9fcad3ef9c3f1b466802 Mon Sep 17 00:00:00 2001
From: Sharad Raj <dev_sharad@outlook.com>
Date: Sat, 22 Oct 2022 06:44:13 +0530
Subject: [PATCH 3/3] Fix typo

---
 src/figure.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/figure.js b/src/figure.js
index 3bbe4c7..5e303f1 100644
--- a/src/figure.js
+++ b/src/figure.js
@@ -3,7 +3,7 @@ CMS.registerEditorComponent({
     label: "Figure",
     fields: [{
         name: "title",
-        label: "Titre",
+        label: "Title",
         widget: "string",
     }, {
         name: "alt",