[Bug] getCldOgImageUrl - Multiple commas in overlay text do not encode correctly, causing link to fail.

[longda]

Bug Report

Describe the bug

Using the social media card sample here: https://next.cloudinary.dev/templates/social-media-cards#one-third

Change the sample body text from this: const body = 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!';

to this (add two or more commas after get): const body = 'Get,, the power of Cloudinary in a Next.js project with Next Cloudinary!';

The link produced will not display and return a 400 error.

Is this a regression?

Don't know. Just started using this today.

Steps To Reproduce the error

1. Set the text property of an overlay to any string with two or more commas (one works fine).
2. See above example using the social card templates from the documentation

Expected behaviour

Image url should work, return a 200 okay status code, and display two or more commas correctly in the overlay.

CodeSandbox or Live Example of Bug

Screenshot or Video Recording

Your environment

• OS:
• Node version:
• Npm version:
• Browser name and version:

Additional context

[eportis-cloudinary]

We may inherit this problem from upstream, at least from https://github.com/cloudinary-community/cloudinary-util/tree/main/packages/url-loader and maybe from https://github.com/cloudinary/js-url-gen.

import { constructCloudinaryUrl } from '@cloudinary-util/url-loader';

const url = constructCloudinaryUrl({
  options: {
    src: 'sample',
    overlays: [{
        text: "hello,,"
    }]
  },
  config: {
    cloud: {
      cloudName: 'eric-cloudinary'
    }
  }
});

returns

https://res.cloudinary.com/eric-cloudinary/image/upload/l_text:Arial_200_bold:hello%252C,,co_black/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/sample?_a=BATAXdRj0

(only first comma is escaped) when it should return

https://res.cloudinary.com/eric-cloudinary/image/upload/l_text:Arial_200_bold:hello%252C%252C,co_black/fl_layer_apply,fl_no_overflow/f_auto/q_auto/v1/sample

Note that the first URL doesn't return a 400 from Cloudinary though... more investigation needed.

[eportis-cloudinary]

Ah, URLs don't 400 if the two commas are at the end of the text because it only results in an empty transformation component. If the two commas are in the middle, we get a 400.

When I do exactly what you said this gets put in the og:image

https://res.cloudinary.com/eric-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/e_colorize:100,co_white/l_images:mountain,c_fill,g_auto,w_0.33,h_1.0,fl_relative/fl_layer_apply,fl_no_overflow,g_north_east/l_text:Source%20Sans%20Pro_80_bold:Next%20Cloudinary,w_625,c_fit,co_black/fl_layer_apply,fl_no_overflow,x_125,y_-50,g_west/l_text:Source%20Sans%20Pro_37:Get%252C,%20the%20power%20of%20Cloudinary%20in%20a%20Next%252Ejs%20project%20with%20Next%20Cloudinary!,w_625,c_fit,co_black/fl_layer_apply,fl_no_overflow,x_125,y_50,g_west/c_limit,w_1200/f_jpg/q_auto/v1/images/mountain?_a=BAVAZGE7

And it 400s, with x-cld-error

Invalid transformation component -  the power of Cloudinary in a Next%2Ejs project with Next Cloudinary!

which makes sense. Now to see if this is a problem with cloudinary-util/url-loader or cloudinary/js-url-gen...

[eportis-cloudinary]

js-url-gen encodes the two commas correctly

import {Cloudinary} from '@cloudinary/url-gen';

const cld = new Cloudinary({
  cloud: {
    cloudName: 'eric-cloudinary'
  }
});

const myImage = cld.image('sample');

import {source} from "@cloudinary/url-gen/actions/overlay";
import {text} from "@cloudinary/url-gen/qualifiers/source";
import {TextStyle} from "@cloudinary/url-gen/qualifiers/textStyle";

// transform
myImage
  .overlay(   
    source(
      text('Test,,ing', new TextStyle('arial',18))
      .textColor('white')      
    )
  )

const myURL = myImage.toURL();

console.log(myURL);

outputs

https://res.cloudinary.com/eric-cloudinary/image/upload/co_white,l_text:arial_18:Test%252C%252Cing/fl_layer_apply/sample?_a=DATAg1RjZAA0

which returns an image with a text overlay with two commas. So the problem is in cloudinary-util/url-loader. Filed https://github.com/cloudinary-community/cloudinary-util/issues/233

[sccalabr]

Can I work on this for hacktober