From 1be5a81078a9eaa52766d84e0a33742569fabf99 Mon Sep 17 00:00:00 2001
From: Alessandro Afloarei <alessandro.afloarei@aflsolutions.it>
Date: Fri, 13 Jun 2025 15:23:09 +0200
Subject: [PATCH 1/2] Add support for editorjs list 2.0

---
 .build/edjsHTML.browser.js |  2 +-
 .build/edjsHTML.js         |  2 +-
 .build/edjsHTML.node.js    |  2 +-
 src/parsers/list.ts        | 61 ++++++++++++++++++++++++++++++++++----
 tsconfig.json              |  2 +-
 5 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/.build/edjsHTML.browser.js b/.build/edjsHTML.browser.js
index 2bc7132..ab6ec46 100644
--- a/.build/edjsHTML.browser.js
+++ b/.build/edjsHTML.browser.js
@@ -1 +1 @@
-var edjsHTML=function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{const t="unordered"===e.style?"ul":"ol",r=(e,t)=>{const o=e.map((e=>{if(!e.content&&!e.items)return`<li>${e}</li>`;let o="";return e.items?.length&&(o=r(e.items,t)),e.content?`<li>${e.content}${o}</li>`:void 0}));return`<${t}>${o.join("")}</${t}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const o={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,o)=>{if(o.type in t)return e+t[o.type](o);const i=`[editorjs-html]: Parser function for ${o.type} does not exist`;if(r.strict)throw new Error(i);return console.error(i),e}),""))(e,o,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const o=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(o);console.error(o)})(e,o,r)}}}();
+var edjsHTML=function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,a)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,a)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${i}</li>`}return`<li>${o}${i}</li>`}));let i="";return"ol"===a&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${a}${i}>${o.join("")}</${a}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const a={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,a)=>{if(a.type in t)return e+t[a.type](a);const o=`[editorjs-html]: Parser function for ${a.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,a,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const a=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(a);console.error(a)})(e,a,r)}}}();
diff --git a/.build/edjsHTML.js b/.build/edjsHTML.js
index e9f5668..01b111f 100644
--- a/.build/edjsHTML.js
+++ b/.build/edjsHTML.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).edjsHTML=t()}(this,(function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{const t="unordered"===e.style?"ul":"ol",r=(e,t)=>{const o=e.map((e=>{if(!e.content&&!e.items)return`<li>${e}</li>`;let o="";return e.items?.length&&(o=r(e.items,t)),e.content?`<li>${e.content}${o}</li>`:void 0}));return`<${t}>${o.join("")}</${t}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const o={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,o)=>{if(o.type in t)return e+t[o.type](o);const i=`[editorjs-html]: Parser function for ${o.type} does not exist`;if(r.strict)throw new Error(i);return console.error(i),e}),""))(e,o,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const o=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(o);console.error(o)})(e,o,r)}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).edjsHTML=t()}(this,(function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,o)=>{if(!t||!t.length)return"";const a=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let a=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,o)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${a}</label>${i}</li>`}return`<li>${a}${i}</li>`}));let i="";return"ol"===o&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${o}${i}>${a.join("")}</${o}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const o={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,o)=>{if(o.type in t)return e+t[o.type](o);const a=`[editorjs-html]: Parser function for ${o.type} does not exist`;if(r.strict)throw new Error(a);return console.error(a),e}),""))(e,o,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const o=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(o);console.error(o)})(e,o,r)}}}));
diff --git a/.build/edjsHTML.node.js b/.build/edjsHTML.node.js
index 3e211f0..55cf130 100644
--- a/.build/edjsHTML.node.js
+++ b/.build/edjsHTML.node.js
@@ -1 +1 @@
-"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{const t="unordered"===e.style?"ul":"ol",r=(e,t)=>{const o=e.map((e=>{if(!e.content&&!e.items)return`<li>${e}</li>`;let o="";return e.items?.length&&(o=r(e.items,t)),e.content?`<li>${e.content}${o}</li>`:void 0}));return`<${t}>${o.join("")}</${t}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};module.exports=(t={},r={strict:!1})=>{const o={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,o)=>{if(o.type in t)return e+t[o.type](o);const i=`[editorjs-html]: Parser function for ${o.type} does not exist`;if(r.strict)throw new Error(i);return console.error(i),e}),""))(e,o,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const o=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(o);console.error(o)})(e,o,r)}};
+"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,a)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,a)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${i}</li>`}return`<li>${o}${i}</li>`}));let i="";return"ol"===a&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${a}${i}>${o.join("")}</${a}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};module.exports=(t={},r={strict:!1})=>{const a={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,a)=>{if(a.type in t)return e+t[a.type](a);const o=`[editorjs-html]: Parser function for ${a.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,a,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const a=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(a);console.error(a)})(e,a,r)}};
diff --git a/src/parsers/list.ts b/src/parsers/list.ts
index 98d1c8c..a445db4 100644
--- a/src/parsers/list.ts
+++ b/src/parsers/list.ts
@@ -1,19 +1,70 @@
 import { OutputBlockData } from "@editorjs/editorjs";
 
 export const list = ({ data }: OutputBlockData) => {
-  const listStyle = data.style === "unordered" ? "ul" : "ol";
+  let listStyle = "ul";
+  if (data.style === "ordered") {
+    listStyle = "ol";
+  }
 
   const recursor = (items: any, listStyle: string) => {
+    if (!items || !items.length) {
+      return "";
+    }
+
     const list = items.map((item: any) => {
-      if (!item.content && !item.items) return `<li>${item}</li>`;
+      // If it's legacy format (just strings)
+      if (typeof item === "string") {
+        return `<li>${item}</li>`;
+      }
 
+      // For v2.0 format with content property
+      let content = item.content || "";
       let nestedList = "";
-      if (item.items?.length) nestedList = recursor(item.items, listStyle);
-      if (item.content) return `<li>${item.content}${nestedList}</li>`;
+
+      if (item.items && item.items.length) {
+        nestedList = recursor(item.items, listStyle);
+      }
+
+      if (
+        data.style === "checklist" &&
+        item.meta &&
+        item.meta.hasOwnProperty("checked")
+      ) {
+        const checked = item.meta.checked ? " checked" : "";
+        return `<li><label><input type="checkbox"${checked} disabled> ${content}</label>${nestedList}</li>`;
+      }
+
+      return `<li>${content}${nestedList}</li>`;
     });
 
-    return `<${listStyle}>${list.join("")}</${listStyle}>`;
+    let attributes = "";
+
+    if (listStyle === "ol" && data.meta) {
+      if (data.meta.start && data.meta.start !== 1) {
+        attributes += ` start="${data.meta.start}"`;
+      }
+      if (data.meta.counterType && data.meta.counterType !== "numeric") {
+        attributes += ` type="${getCounterTypeAttribute(data.meta.counterType)}"`;
+      }
+    }
+
+    return `<${listStyle}${attributes}>${list.join("")}</${listStyle}>`;
   };
 
   return recursor(data.items, listStyle);
 };
+
+function getCounterTypeAttribute(counterType: string): string {
+  switch (counterType) {
+    case "lower-alpha":
+      return "a";
+    case "upper-alpha":
+      return "A";
+    case "lower-roman":
+      return "i";
+    case "upper-roman":
+      return "I";
+    default:
+      return "1";
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 50c68b3..4c36765 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "declaration": true,
     "outDir": "./.build",
     "paths": {
-      "tslib": [ "./node_modules/tslib/tslib.d.ts" ]
+      "tslib": ["./node_modules/tslib/tslib.d.ts"]
     }
   },
   "include": ["src"]

From 14fba3236c664aa84524b15a2543d169f1a343d0 Mon Sep 17 00:00:00 2001
From: Alessandro Afloarei <alessandro.afloarei@aflsolutions.it>
Date: Sun, 15 Jun 2025 07:12:14 +0200
Subject: [PATCH 2/2] Improve image display

---
 .build/edjsHTML.browser.js |  2 +-
 .build/edjsHTML.js         |  2 +-
 .build/edjsHTML.node.js    |  2 +-
 src/parsers/image.ts       | 28 +++++++++++++++++++++++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/.build/edjsHTML.browser.js b/.build/edjsHTML.browser.js
index ab6ec46..a86237f 100644
--- a/.build/edjsHTML.browser.js
+++ b/.build/edjsHTML.browser.js
@@ -1 +1 @@
-var edjsHTML=function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,a)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,a)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${i}</li>`}return`<li>${o}${i}</li>`}));let i="";return"ol"===a&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${a}${i}>${o.join("")}</${a}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const a={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,a)=>{if(a.type in t)return e+t[a.type](a);const o=`[editorjs-html]: Parser function for ${a.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,a,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const a=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(a);console.error(a)})(e,a,r)}}}();
+var edjsHTML=function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.file?.url||e.url||"",r=e.caption||"",n=!r||""===r.trim();return`<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">\n      <tr>\n        <td align="center" style="padding-top:20px;${n?"padding-bottom:20px;":"padding-bottom:5px;"}">\n          <img \n            src="${t}" \n            alt="${r}" \n            width="500" \n            height="auto" \n            style="display:block; max-width:500px; width:100%; height:auto; border:0; outline:none; text-decoration:none;" \n          />\n        </td>\n      </tr>\n      ${n?"":`<tr>\n          <td align="center" style="padding-bottom:20px;">\n            <p style="margin:0; font-size:14px; line-height:1; color:#999999; text-align:center;">${r}</p>\n          </td>\n        </tr>`}\n    </table>`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,n)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",a="";if(t.items&&t.items.length&&(a=r(t.items,n)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${a}</li>`}return`<li>${o}${a}</li>`}));let a="";return"ol"===n&&e.meta&&(e.meta.start&&1!==e.meta.start&&(a+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(a+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${n}${a}>${o.join("")}</${n}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const n={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,n)=>{if(n.type in t)return e+t[n.type](n);const o=`[editorjs-html]: Parser function for ${n.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,n,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const n=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(n);console.error(n)})(e,n,r)}}}();
diff --git a/.build/edjsHTML.js b/.build/edjsHTML.js
index 01b111f..4d59a66 100644
--- a/.build/edjsHTML.js
+++ b/.build/edjsHTML.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).edjsHTML=t()}(this,(function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,o)=>{if(!t||!t.length)return"";const a=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let a=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,o)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${a}</label>${i}</li>`}return`<li>${a}${i}</li>`}));let i="";return"ol"===o&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${o}${i}>${a.join("")}</${o}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const o={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,o)=>{if(o.type in t)return e+t[o.type](o);const a=`[editorjs-html]: Parser function for ${o.type} does not exist`;if(r.strict)throw new Error(a);return console.error(a),e}),""))(e,o,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const o=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(o);console.error(o)})(e,o,r)}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).edjsHTML=t()}(this,(function(){"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.file?.url||e.url||"",r=e.caption||"",n=!r||""===r.trim();return`<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">\n      <tr>\n        <td align="center" style="padding-top:20px;${n?"padding-bottom:20px;":"padding-bottom:5px;"}">\n          <img \n            src="${t}" \n            alt="${r}" \n            width="500" \n            height="auto" \n            style="display:block; max-width:500px; width:100%; height:auto; border:0; outline:none; text-decoration:none;" \n          />\n        </td>\n      </tr>\n      ${n?"":`<tr>\n          <td align="center" style="padding-bottom:20px;">\n            <p style="margin:0; font-size:14px; line-height:1; color:#999999; text-align:center;">${r}</p>\n          </td>\n        </tr>`}\n    </table>`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,n)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,n)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${i}</li>`}return`<li>${o}${i}</li>`}));let i="";return"ol"===n&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${n}${i}>${o.join("")}</${n}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};return(t={},r={strict:!1})=>{const n={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,n)=>{if(n.type in t)return e+t[n.type](n);const o=`[editorjs-html]: Parser function for ${n.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,n,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const n=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(n);console.error(n)})(e,n,r)}}}));
diff --git a/.build/edjsHTML.node.js b/.build/edjsHTML.node.js
index 55cf130..7de3ff7 100644
--- a/.build/edjsHTML.node.js
+++ b/.build/edjsHTML.node.js
@@ -1 +1 @@
-"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.caption?e.caption:"Image";return`<img src="${e?.file?.url||e?.url}" alt="${t}" />`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,a)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",i="";if(t.items&&t.items.length&&(i=r(t.items,a)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${i}</li>`}return`<li>${o}${i}</li>`}));let i="";return"ol"===a&&e.meta&&(e.meta.start&&1!==e.meta.start&&(i+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(i+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${a}${i}>${o.join("")}</${a}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};module.exports=(t={},r={strict:!1})=>{const a={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,a)=>{if(a.type in t)return e+t[a.type](a);const o=`[editorjs-html]: Parser function for ${a.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,a,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const a=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(a);console.error(a)})(e,a,r)}};
+"use strict";var e={code:({data:e})=>`<pre><code>${e.code}</code></pre>`,embed:({data:e})=>{const t=e.service;return"vimeo"===t?`<iframe src="${e.embed}" height="${e.height}" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`:"youtube"===t?`<iframe width="${e.width}" height="${e.height}" src="${e.embed}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`:(console.error("[editorjs-html]: Only Youtube & Vimeo embeds are available by default. Write your own embed parser for other options."),"")},header:({data:e})=>`<h${e.level}>${e.text}</h${e.level}>`,image:({data:e})=>{const t=e.file?.url||e.url||"",r=e.caption||"",n=!r||""===r.trim();return`<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">\n      <tr>\n        <td align="center" style="padding-top:20px;${n?"padding-bottom:20px;":"padding-bottom:5px;"}">\n          <img \n            src="${t}" \n            alt="${r}" \n            width="500" \n            height="auto" \n            style="display:block; max-width:500px; width:100%; height:auto; border:0; outline:none; text-decoration:none;" \n          />\n        </td>\n      </tr>\n      ${n?"":`<tr>\n          <td align="center" style="padding-bottom:20px;">\n            <p style="margin:0; font-size:14px; line-height:1; color:#999999; text-align:center;">${r}</p>\n          </td>\n        </tr>`}\n    </table>`},list:({data:e})=>{let t="ul";"ordered"===e.style&&(t="ol");const r=(t,n)=>{if(!t||!t.length)return"";const o=t.map((t=>{if("string"==typeof t)return`<li>${t}</li>`;let o=t.content||"",a="";if(t.items&&t.items.length&&(a=r(t.items,n)),"checklist"===e.style&&t.meta&&t.meta.hasOwnProperty("checked")){return`<li><label><input type="checkbox"${t.meta.checked?" checked":""} disabled> ${o}</label>${a}</li>`}return`<li>${o}${a}</li>`}));let a="";return"ol"===n&&e.meta&&(e.meta.start&&1!==e.meta.start&&(a+=` start="${e.meta.start}"`),e.meta.counterType&&"numeric"!==e.meta.counterType&&(a+=` type="${function(e){switch(e){case"lower-alpha":return"a";case"upper-alpha":return"A";case"lower-roman":return"i";case"upper-roman":return"I";default:return"1"}}(e.meta.counterType)}"`)),`<${n}${a}>${o.join("")}</${n}>`};return r(e.items,t)},paragraph:({data:e})=>{const t=e.alignment||e.align;return t?`<p style="text-align:${t}"> ${e.text} </p>`:`<p>${e.text}</p>`},quote:({data:e})=>`<blockquote>${e.text}</blockquote> - ${e.caption}`,delimiter:({data:e})=>"<br/>"};module.exports=(t={},r={strict:!1})=>{const n={...e,...t};return{parse:e=>(({blocks:e},t,r)=>e.reduce(((e,n)=>{if(n.type in t)return e+t[n.type](n);const o=`[editorjs-html]: Parser function for ${n.type} does not exist`;if(r.strict)throw new Error(o);return console.error(o),e}),""))(e,n,r),parseBlock:e=>((e,t,r)=>{if(e.type in t)return t[e.type](e);const n=`[editorjs-html]: Parser function for ${e.type} does not exist`;if(r.strict)throw new Error(n);console.error(n)})(e,n,r)}};
diff --git a/src/parsers/image.ts b/src/parsers/image.ts
index 43ddf33..1eb3cb4 100644
--- a/src/parsers/image.ts
+++ b/src/parsers/image.ts
@@ -1,8 +1,30 @@
 import { OutputBlockData } from "@editorjs/editorjs";
 
 export const image = ({ data }: OutputBlockData): string => {
-  const caption = data.caption ? data.caption : "Image";
-  const url = data?.file?.url || data?.url;
+  const url = data.file?.url || data.url || "";
+  const caption = data.caption || "";
+  const isCaptionBlank = !caption || caption.trim() === "";
 
-  return `<img src="${url}" alt="${caption}" />`;
+  return `<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
+      <tr>
+        <td align="center" style="padding-top:20px;${isCaptionBlank ? "padding-bottom:20px;" : "padding-bottom:5px;"}">
+          <img 
+            src="${url}" 
+            alt="${caption}" 
+            width="500" 
+            height="auto" 
+            style="display:block; max-width:500px; width:100%; height:auto; border:0; outline:none; text-decoration:none;" 
+          />
+        </td>
+      </tr>
+      ${
+        !isCaptionBlank
+          ? `<tr>
+          <td align="center" style="padding-bottom:20px;">
+            <p style="margin:0; font-size:14px; line-height:1; color:#999999; text-align:center;">${caption}</p>
+          </td>
+        </tr>`
+          : ""
+      }
+    </table>`;
 };