Clean up and update node & packages

[gabrielcld2]

Approach

• Remove unnecessary packages from the project
• Split packages between dev and prod dependencies
• Upgrade node to version 22 (latest LTS)
• Upgrade all packages to their latest, with some exceptions (see below)
• Manually apply changes to webpack config due to webpack major version upgrade
• Manually apply code changes due to specific package changes (see below)

Package upgrades exceptions

Some packages couldn't be upgraded to the latest due to specific dependencies:

1. eslint cannot upgrade to version 9 yet due to @wordpress/eslint-plugin not being compatible with that version. See here

2. react cannot be upgraded to version 19 at the moment as the wordpress packages don't support it:

npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @wordpress/[email protected]
npm error node_modules/@wordpress/blocks
npm error   dev @wordpress/blocks@"^15.7.0" from the root project

3. It's possible that other packages received new updates between the time I opened this PR and it gets reviewed. If these are minor we could apply them.

Manual code changes

1. React Tippy integration

Problem: we use tippy.js for any on hover tips displayed. This works fine as a standalone. However, we also used a a react wrapper for that library in situations we needed it in React (only one case actually). That wrapper isn't maintained anymore, and doesn't support React 18.

The easiest approach I found was to write a new custom hook so that we can keep using the tippy library, but we can remove the react wrapper library for it.

2. CodeMirror upgrade

CodeMirror is used to display JSON content in an editor view. CodeMirror version 6 is vastly different than previous version: the library is split into several separate packages and works in a different way.
I've managed to make it work with a small caveat:
The theme is slightly different. The previous one (material dark) isn't available in CodeMirror 6. There is an unofficial package for it, but the output still looks different (different font sizes and weight), so I think it's better to stick to an official package which is also a dark theme.

It now looks like this:

QA notes

• Run nvm use to use node v22 (you might need to install it if you don't have it already on your machine)
• Run npm install to install the dependencies
• Run npm outdated to check all packages are up-to-date (minus the exceptions mentioned previously)
• Run npm run build to build the assets
• Check the functionalities thoroughly
• Also check specifically the manually refactored code:

1. React Tippy:

• Go to Cloudinary -> gallery settings
• Open Main Viewer Parameters
• Check the Resize/Crop Mode hover tip displays as expected

2. Codemirror:

• Go to Cloudinary -> Need help?
• Go to System Report
• Check Enable Report and save the changes
• Edit any image in the media library
• Scroll down and make sure the Cloudinary Metadata viewer displays the JSON content as expected