@docen/extensions 0.2.5 → 0.2.6

package/dist/index.mjs

@@ -132,15 +132,15 @@ const Heading = Heading$1.extend({ addAttributes() {
 *
 * Adds DOCX-specific attributes for round-trip conversion:
 * - rotation: Image rotation in degrees (rendered as CSS transform)
-* - floating: Image positioning options (stored as data-floating attribute)
+* - floating: Image positioning and text wrapping (rendered as CSS float/position/z-index)
 * - outline: Image border/outline options (stored as data-outline attribute)
 * - crop: Image crop rectangle (resized element + object-fit/position)
 *
 * HTML serialization strategy:
-* - rotation: Mapped to CSS transform: rotate()
-* - floating: Preserved as data-floating JSON attribute (no CSS equivalent)
+* - rotation: CSS transform merged into floating/crop renderHTML output
+* - floating: CSS float/position/z-index/margin + preserved as data-floating JSON attribute
 * - outline: Preserved as data-outline JSON attribute (no CSS equivalent)
-* - crop: object-fit: cover + object-position (element size already reflects crop)
+* - crop: CSS object-fit/position (merged with floating style when both present)
 */
 /**
 * Generate crop rendering attributes.
@@ -164,7 +164,7 @@ const Image = Image$1.extend({ addAttributes() {
 		display: {
 			default: null,
 			parseHTML: () => this.options.inline ? "inline-block" : null,
-			renderHTML: () => this.options.inline ? { style: "display: inline-block" } : {}
+			renderHTML: () => ({})
 		},
 		rotation: {
 			default: null,
@@ -172,10 +172,7 @@ const Image = Image$1.extend({ addAttributes() {
 				const rotationMatch = (element.getAttribute("style") || "").match(/transform:\s*rotate\(([\d.]+)deg\)/);
 				return rotationMatch ? parseFloat(rotationMatch[1]) : null;
 			},
-			renderHTML: (attributes) => {
-				if (!attributes.rotation) return {};
-				return { style: `transform: rotate(${attributes.rotation}deg)` };
-			}
+			renderHTML: () => ({})
 		},
 		floating: {
 			default: null,
@@ -190,7 +187,35 @@ const Image = Image$1.extend({ addAttributes() {
 			},
 			renderHTML: (attributes) => {
 				if (!attributes.floating) return {};
-				return { "data-floating": JSON.stringify(attributes.floating) };
+				const f = attributes.floating;
+				const styles = [];
+				if (attributes.rotation) styles.push(`transform:rotate(${attributes.rotation}deg)`);
+				styles.push(f.behindDocument ? "z-index:-1" : "z-index:1");
+				const wrapType = f.wrap?.type ?? 0;
+				if (wrapType === 0) styles.push("position:absolute");
+				else if (wrapType === 1) {
+					const align = f.horizontalPosition?.align;
+					if (align === "left" || align === "inside") styles.push("float:left");
+					else if (align === "right" || align === "outside") styles.push("float:right");
+					else styles.push("float:left");
+				} else if (wrapType === 2) {
+					styles.push("float:left");
+					styles.push("shape-outside:margin-box");
+				} else if (wrapType === 3) {
+					styles.push("display:block");
+					styles.push("clear:both");
+				} else styles.push("display:inline-block");
+				const m = f.margins;
+				if (m) {
+					if (m.top) styles.push(`margin-top:${(m.top * 96 / 1440).toFixed(1)}pt`);
+					if (m.bottom) styles.push(`margin-bottom:${(m.bottom * 96 / 1440).toFixed(1)}pt`);
+					if (m.left) styles.push(`margin-left:${(m.left * 96 / 1440).toFixed(1)}pt`);
+					if (m.right) styles.push(`margin-right:${(m.right * 96 / 1440).toFixed(1)}pt`);
+				}
+				return {
+					style: styles.join(";"),
+					"data-floating": JSON.stringify(f)
+				};
 			}
 		},
 		outline: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docen/extensions",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Collection of TipTap extensions with TypeScript type definitions for Docen",
   "keywords": [
     "docen",