@trafica/editor 1.0.59 → 1.0.60

package/dist/index.js

@@ -1724,16 +1724,34 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
     case "image": {
       const src = escapeAttr((_j = (_i = node.attrs) == null ? void 0 : _i.src) != null ? _j : "");
       const alt = escapeAttr((_l = (_k = node.attrs) == null ? void 0 : _k.alt) != null ? _l : "");
-      const width = ((_m = node.attrs) == null ? void 0 : _m.width) ? ` width="${node.attrs.width}"` : "";
-      const align = ((_n = node.attrs) == null ? void 0 : _n.align) ? ` data-align="${node.attrs.align}"` : "";
+      const widthPx = (_m = node.attrs) == null ? void 0 : _m.width;
+      const widthAttr = widthPx ? ` width="${widthPx}"` : "";
+      const align = (_n = node.attrs) == null ? void 0 : _n.align;
       const caption = ((_o = node.attrs) == null ? void 0 : _o.caption) ? escapeHTML(node.attrs.caption) : "";
       const x = (_p = node.attrs) == null ? void 0 : _p.x;
       const y = (_q = node.attrs) == null ? void 0 : _q.y;
-      const posAttrs = x !== void 0 ? ` data-x="${Math.round(x)}" data-y="${Math.round(y != null ? y : 0)}" style="position:absolute;left:${Math.round(x)}px;top:${Math.round(y != null ? y : 0)}px;"` : "";
-      if (caption) {
-        return `<figure${align}${posAttrs}><img src="${src}" alt="${alt}"${width} /><figcaption>${caption}</figcaption></figure>`;
+      const figStyles = ["display:block", "max-width:100%", "width:fit-content", "margin:1em 0"];
+      const dataAttrs = [];
+      if (x !== void 0) {
+        const ix = Math.round(x);
+        const iy = Math.round(y != null ? y : 0);
+        dataAttrs.push(`data-x="${ix}"`, `data-y="${iy}"`);
+        figStyles.push("position:absolute", `left:${ix}px`, `top:${iy}px`, "margin:0", "z-index:10");
+      } else if (align === "center") {
+        dataAttrs.push('data-align="center"');
+        figStyles.push("margin-left:auto", "margin-right:auto");
+      } else if (align === "right") {
+        dataAttrs.push('data-align="right"');
+        figStyles.push("margin-left:auto", "margin-right:0");
+      } else if (align === "left") {
+        dataAttrs.push('data-align="left"');
+        figStyles.push("margin-left:0", "margin-right:auto");
       }
-      return `<figure${align}${posAttrs}><img src="${src}" alt="${alt}"${width} /></figure>`;
+      const figAttrStr = dataAttrs.length ? " " + dataAttrs.join(" ") : "";
+      const figStyleStr = ` style="${figStyles.join(";")};"`;
+      const imgStyle = ` style="display:block;max-width:100%;height:auto${widthPx ? `;width:${widthPx}px` : ""};"`;
+      const captionHTML = caption ? `<figcaption style="display:block;text-align:center;font-size:0.8em;color:#6b7280;margin-top:0.4em;font-style:italic;">${caption}</figcaption>` : "";
+      return `<figure${figAttrStr}${figStyleStr}><img src="${src}" alt="${alt}"${widthAttr}${imgStyle} />${captionHTML}</figure>`;
     }
     case "horizontal_rule":
       return "<hr />";