feat: add asset metadata on select

[luqven]

Description

• Move stringifyJSONFields to a helper directory for re-use
• Adds width & height metadata to images on select.

Before

Some images did not have width and height information available once selected.

After

All images, after selection, will include metadata. Specifically, width and height information.

Steps to test

1. Select an image using the staging deployment of the plugin
2. Make a request for a the Contentful Entry ID of the entry you just edited
3. You should see this is the Contentful API response for the image

"attributes": { 
  // … 👇attributes from the `fm=json`request included in the asset.attributes
  "media_width": 5773,
  "media_height": 8660,
}

Checklist

• Read the contributing guidelines.
• Each commit follows the Conventional Commit spec format.
• Update the readme (if applicable).
• Update or add any necessary API documentation (if applicable)
• All existing unit tests are still passing (if applicable).

• Add some steps so we can test your bug fix or feature (if applicable).
• Add new passing unit tests to cover the code introduced by your PR (if applicable).
• Any breaking changes are specified on the commit on which they are introduced with BREAKING CHANGE in the body of the commit.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
contentful	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2024 0:08am
contentful-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2024 0:08am

[marco-salcedo]

suggestion (non-blocking): since modifiedObject is being used as an accumulator, we could simplify this with a reduce:

Suggested change

	export const stringifyJsonFields = (
	object: Record<string, any>,
	fields: string[] = [],
	): Record<string, any> => {
	const modifiedObject = { ...object };
	for (const field of fields) {
	const value = _.get(object, field);
	const newValue = JSON.stringify(value, replaceNullWithEmptyString);
	_.set(modifiedObject, field, newValue);
	}
	return modifiedObject;
	};
	export const stringifyJsonFields = (
	object: Record<string, any>,
	fields: string[] = []
	): Record<string, any> => {
	return fields.reduce((acc, field) => {
	const value = _.get(object, field);
	const newValue = JSON.stringify(value, replaceNullWithEmptyString);
	return _.set({ ...acc }, field, newValue);
	}, object);
	};

[luqven]

question:

Wouldn't that modify my input object? I'm being careful to note mutate the original object with this function.

[marco-salcedo]

hmmm yeah since it's a reference, you might be messing with the OG, good point

[marco-salcedo]

question (blocking): I don't think this function needs two arguments, look like only value is being used.

Suggested change

	export const replaceNullWithEmptyString = (_: any, value: any) =>
	value === null ? '' : value;
	suggestion (blocking): export const replaceNullWithEmptyString = (value: any) =>
	value === null ? '' : value;

[luqven]

comment:

The JSON.stringify() function accepts a replacer array or function.

JSON.stringify(value, replacer)

The function has two arguments, key and value. We pass replaceNullWithEmptyString as the replacer function to JSON.stringify.

We only need value, so we use _ to signify we don't intend to need or use the first argument, key.

This is really just to keep stringifyJsonFields readable, but it can come in handy wherever else you use JSON.stringify.

[marco-salcedo]

TIL thanks

[marco-salcedo]

LGTM 🚀

[longevitytina]

Tested locally, was able to retrieve properties ⭐