@trafica/editor 1.0.58 → 1.0.60

package/dist/index.js

@@ -1724,21 +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 alignVal = (_n = node.attrs) == null ? void 0 : _n.align;
-      const alignAttr = alignVal ? ` data-align="${alignVal}"` : "";
+      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 isDraggable = x !== void 0;
-      const effectiveAlign = alignVal != null ? alignVal : isDraggable ? "left" : void 0;
-      const alignStyle = effectiveAlign === "center" ? "display:block;margin-left:auto;margin-right:auto;text-align:center;" : effectiveAlign === "right" ? "display:block;margin-left:auto;text-align:right;" : effectiveAlign === "left" ? "display:block;margin-right:auto;text-align:left;" : "";
-      const posAttrs = isDraggable ? ` data-x="${Math.round(x)}" data-y="${Math.round(y != null ? y : 0)}"` : "";
-      const figStyle = alignStyle ? ` style="${alignStyle}"` : "";
-      if (caption) {
-        return `<figure${alignAttr}${posAttrs}${figStyle}><img src="${src}" alt="${alt}"${width} style="max-width:100%;height:auto;" /><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${alignAttr}${posAttrs}${figStyle}><img src="${src}" alt="${alt}"${width} style="max-width:100%;height:auto;" /></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 />";