improve attributes management and preview

src/figure.js

@@ -2,27 +2,40 @@ CMS.registerEditorComponent({
     id: "figure",
     label: "Figure",
     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: "Title",
+        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>`;
     },
 });