Add support for editorjs list 2.0 and improve image translation

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>`;
 };

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";
+  }
+}

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"]