feat: support extended media API response (#326)

Co-authored-by: lihbr <lihbr@users.noreply.github.com> Co-authored-by: Angelo Ashmore <angeloashmore@users.noreply.github.com>
prismicio · Oct 6, 2023 · 5e5d057 · 5e5d057
1 parent 26d5b0f
commit 5e5d057
Show file tree

Hide file tree

Showing 19 changed files with 262 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -112,4 +112,4 @@
 	"publishConfig": {
 		"access": "public"
 	}
-}
+}
diff --git a/src/helpers/asImageWidthSrcSet.ts b/src/helpers/asImageWidthSrcSet.ts
@@ -94,8 +94,10 @@ export const asImageWidthSrcSet = <
 		const {
 			url,
 			dimensions,
+			id: _id,
 			alt: _alt,
 			copyright: _copyright,
+			edit: _edit,
 			...responsiveViews
 		} = field;
 

diff --git a/src/types/value/image.ts b/src/types/value/image.ts
@@ -12,18 +12,27 @@ export type ImageFieldImage<State extends FieldState = FieldState> =
 	State extends "empty" ? EmptyImageFieldImage : FilledImageFieldImage;
 
 export interface FilledImageFieldImage {
+	id: string;
 	url: string;
 	dimensions: {
 		width: number;
 		height: number;
 	};
+	edit: {
+		x: number;
+		y: number;
+		zoom: number;
+		background: string;
+	};
 	alt: string | null;
 	copyright: string | null;
 }
 
 export interface EmptyImageFieldImage {
+	id?: null;
 	url?: null;
 	dimensions?: null;
+	edit?: null;
 	alt?: null;
 	copyright?: null;
 }

diff --git a/src/types/value/linkToMedia.ts b/src/types/value/linkToMedia.ts
@@ -16,6 +16,7 @@ export type LinkToMediaField<State extends FieldState = FieldState> =
  * A link that points to media.
  */
 export interface FilledLinkToMediaField {
+	id: string;
 	link_type: typeof LinkType.Media;
 	name: string;
 	kind: string;

diff --git a/src/types/value/richText.ts b/src/types/value/richText.ts
@@ -153,13 +153,20 @@ export interface RTLabelNode extends RTSpanNodeBase {
  */
 export type RTImageNode = {
 	type: typeof RichTextNodeType.image;
+	id: string;
 	url: string;
 	alt: string | null;
 	copyright: string | null;
 	dimensions: {
 		width: number;
 		height: number;
 	};
+	edit: {
+		x: number;
+		y: number;
+		zoom: number;
+		background: string;
+	};
 	linkTo?:
 		| FilledContentRelationshipField
 		| FilledLinkToWebField

diff --git a/src/types/value/sharedSlice.ts b/src/types/value/sharedSlice.ts
@@ -11,5 +11,5 @@ export type SharedSlice<
 > = {
 	slice_type: SliceType;
 	slice_label: null;
-	id?: string;
+	id: string;
 } & Variations;
diff --git a/src/types/value/slice.ts b/src/types/value/slice.ts
@@ -18,7 +18,7 @@ export interface Slice<
 > {
 	slice_type: SliceType;
 	slice_label: string | null;
-	id?: string;
+	id: string;
 	primary: PrimaryFields;
 	items: ItemsFields[];
 }
diff --git a/test/__testutils__/createRichTextFixtures.ts b/test/__testutils__/createRichTextFixtures.ts
@@ -1,12 +1,12 @@
-import type { RichTextField } from "@prismicio/client";
-
 import cnRichTextJSON from "../__fixtures__/cnRichText.json";
 import emojiRichTextJSON from "../__fixtures__/emojiRichText.json";
 import enRichTextJSON from "../__fixtures__/enRichText.json";
 import koRichTextJSON from "../__fixtures__/koRichText.json";
 import overlappedRichTextJSON from "../__fixtures__/overlappedRichText.json";
 import xssRichTextJSON from "../__fixtures__/xssRichText.json";
 
+import type { RichTextField } from "../../src";
+
 const deepCloneJSON = <T>(json: T): T => {
 	return JSON.parse(JSON.stringify(json));
 };

diff --git a/test/helpers-asImagePixelDensitySrcSet.test.ts b/test/helpers-asImagePixelDensitySrcSet.test.ts
@@ -9,6 +9,13 @@ it("returns null for nullish inputs", () => {
 
 it("returns an image field pixel-density-based srcset with [1, 2, 3] pxiel densities by default", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -26,6 +33,13 @@ it("returns an image field pixel-density-based srcset with [1, 2, 3] pxiel densi
 
 it("supports custom pixel densities", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -47,6 +61,13 @@ it("supports custom pixel densities", () => {
 
 it("applies given Imgix URL parameters", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,

diff --git a/test/helpers-asImageSrc.test.ts b/test/helpers-asImageSrc.test.ts
@@ -9,6 +9,13 @@ it("returns null for nullish inputs", () => {
 
 it("returns an image field URL", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -20,6 +27,13 @@ it("returns an image field URL", () => {
 
 it("applies given Imgix URL parameters", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,

diff --git a/test/helpers-asImageWidthSrcSet.test.ts b/test/helpers-asImageWidthSrcSet.test.ts
@@ -9,6 +9,13 @@ it("returns null for nullish inputs", () => {
 
 it("returns an image field src and width-based srcset with [640, 750, 828, 1080, 1200, 1920, 2048, 3840] widths by default", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -28,6 +35,13 @@ it("returns an image field src and width-based srcset with [640, 750, 828, 1080,
 
 it("supports custom widths", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -49,6 +63,13 @@ it("supports custom widths", () => {
 
 it("applies given Imgix URL parameters", () => {
 	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -70,19 +91,40 @@ it("applies given Imgix URL parameters", () => {
 	});
 });
 
-it('if widths is "auto", returns a srcset of responsive views if the field contains responsive views', () => {
-	const field = {
+it('if widths is "thumbnails", returns a srcset of responsive views if the field contains responsive views', () => {
+	const field: ImageField<"foo" | "bar"> = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
 		dimensions: { width: 1000, height: 800 },
 		foo: {
+			id: "id",
+			edit: {
+				x: 0,
+				y: 0,
+				zoom: 1,
+				background: "background",
+			},
 			url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 			alt: null,
 			copyright: null,
 			dimensions: { width: 500, height: 400 },
 		},
 		bar: {
+			id: "id",
+			edit: {
+				x: 0,
+				y: 0,
+				zoom: 1,
+				background: "background",
+			},
 			url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 			alt: null,
 			copyright: null,
@@ -99,8 +141,15 @@ it('if widths is "auto", returns a srcset of responsive views if the field conta
 	});
 });
 
-it('if widths is "auto", but the field does not contain responsive views, uses the default widths', () => {
-	const field = {
+it('if widths is "thumbnails", but the field does not contain responsive views, uses the default widths', () => {
+	const field: ImageField = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
@@ -118,19 +167,40 @@ it('if widths is "auto", but the field does not contain responsive views, uses t
 	});
 });
 
-it('if widths is not "auto", but the field contains responsive views, uses the default widths and ignores thumbnails', () => {
-	const field = {
+it('if widths is not "thumbnails", but the field contains responsive views, uses the default widths and ignores thumbnails', () => {
+	const field: ImageField<"foo" | "bar"> = {
+		id: "id",
+		edit: {
+			x: 0,
+			y: 0,
+			zoom: 1,
+			background: "background",
+		},
 		url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 		alt: null,
 		copyright: null,
 		dimensions: { width: 1000, height: 800 },
 		foo: {
+			id: "id",
+			edit: {
+				x: 0,
+				y: 0,
+				zoom: 1,
+				background: "background",
+			},
 			url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 			alt: null,
 			copyright: null,
 			dimensions: { width: 500, height: 400 },
 		},
 		bar: {
+			id: "id",
+			edit: {
+				x: 0,
+				y: 0,
+				zoom: 1,
+				background: "background",
+			},
 			url: "https://images.prismic.io/qwerty/image.png?auto=compress%2Cformat",
 			alt: null,
 			copyright: null,

diff --git a/test/helpers-isFilled.test.ts b/test/helpers-isFilled.test.ts
@@ -60,7 +60,12 @@ it("image", (ctx) => {
 	expect(isFilled.image(null)).toBe(false);
 	expect(isFilled.image(undefined)).toBe(false);
 	expect(isFilled.image({})).toBe(false);
-	expect(isFilled.image(ctx.mock.value.image())).toBe(true);
+	expect(
+		isFilled.image(
+			// @ts-expect-error Remove this comment after v7.3.0 is published.
+			ctx.mock.value.image(),
+		),
+	).toBe(true);
 });
 
 it("image thumbnail", () => {
@@ -69,6 +74,13 @@ it("image thumbnail", () => {
 	expect(isFilled.imageThumbnail({})).toBe(false);
 	expect(
 		isFilled.imageThumbnail({
+			id: "id",
+			edit: {
+				x: 0,
+				y: 0,
+				zoom: 1,
+				background: "background",
+			},
 			url: "url",
 			alt: null,
 			copyright: null,
@@ -124,7 +136,12 @@ it("rich text", (ctx) => {
 	expect(isFilled.richText([{ type: "paragraph", text: "", spans: [] }])).toBe(
 		false,
 	);
-	expect(isFilled.richText(ctx.mock.value.richText())).toBe(true);
+	expect(
+		isFilled.richText(
+			// @ts-expect-error Remove this comment after v7.3.0 is published.
+			ctx.mock.value.richText(),
+		),
+	).toBe(true);
 });
 
 it("select", (ctx) => {