@docen/extensions 0.1.3 → 0.2.1

package/dist/index.d.mts

@@ -23,23 +23,6 @@ import { AnyExtension } from "@tiptap/core";
 declare const Heading: _$_tiptap_core0.Node<_$_tiptap_extension_heading0.HeadingOptions, any>;
 //#endregion
 //#region src/extends/image.d.ts
-/**
- * Custom Image extension based on @tiptap/extension-image
- *
- * 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)
- * - outline: Image border/outline options (stored as data-outline attribute)
- *
- * HTML serialization strategy:
- * - rotation: Mapped to CSS transform: rotate()
- * - floating: Preserved as data-floating JSON attribute (no CSS equivalent)
- * - outline: Preserved as data-outline JSON attribute (no CSS equivalent)
- *
- * Note: floating and outline are DOCX-specific features without direct CSS
- * equivalents. They're preserved in HTML for round-trip conversion but only
- * affect DOCX export/import.
- */
 declare const Image: _$_tiptap_core0.Node<_$_tiptap_extension_image0.ImageOptions, any>;
 //#endregion
 //#region src/extends/paragraph.d.ts

package/dist/index.mjs

@@ -75,16 +75,30 @@ const Heading = Heading$1.extend({ addAttributes() {
 * - rotation: Image rotation in degrees (rendered as CSS transform)
 * - floating: Image positioning options (stored as data-floating attribute)
 * - 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)
 * - outline: Preserved as data-outline JSON attribute (no CSS equivalent)
-*
-* Note: floating and outline are DOCX-specific features without direct CSS
-* equivalents. They're preserved in HTML for round-trip conversion but only
-* affect DOCX export/import.
+* - crop: object-fit: cover + object-position (element size already reflects crop)
+*/
+/**
+* Generate crop rendering attributes.
+* Uses object-fit/position to show the correct portion within the element's
+* existing dimensions (which already reflect the cropped bounding box from wp:extent).
 */
+function renderCropAttrs(crop) {
+	const leftPct = (crop.left || 0) / 1e5;
+	const topPct = (crop.top || 0) / 1e5;
+	const rightPct = (crop.right || 0) / 1e5;
+	const bottomPct = (crop.bottom || 0) / 1e5;
+	const visibleWidthPct = 1 - leftPct - rightPct;
+	const visibleHeightPct = 1 - topPct - bottomPct;
+	const posX = visibleWidthPct > 0 ? leftPct / visibleWidthPct * 100 : 0;
+	const posY = visibleHeightPct > 0 ? topPct / visibleHeightPct * 100 : 0;
+	return { style: `object-fit:cover;object-position:${posX.toFixed(2)}% ${posY.toFixed(2)}%` };
+}
 const Image = Image$1.extend({ addAttributes() {
 	return {
 		...this.parent?.(),
@@ -135,6 +149,25 @@ const Image = Image$1.extend({ addAttributes() {
 				if (!attributes.outline) return {};
 				return { "data-outline": JSON.stringify(attributes.outline) };
 			}
+		},
+		crop: {
+			default: null,
+			parseHTML: (element) => {
+				const dataCrop = element.getAttribute("data-crop");
+				if (!dataCrop) return null;
+				try {
+					return JSON.parse(dataCrop);
+				} catch {
+					return null;
+				}
+			},
+			renderHTML: (attributes) => {
+				if (!attributes.crop) return {};
+				return {
+					...renderCropAttrs(attributes.crop),
+					"data-crop": JSON.stringify(attributes.crop)
+				};
+			}
 		}
 	};
 } });