Border color parser does not work correctly in some cases

[illia-stv]

📝 Provide detailed reproduction steps (if any)

1. Go to https://ckeditor.com/docs/ckeditor5/latest/features/tables/tables.html
2. Choose any cell in table
3. Go to cell properties
4. Choose style of border and define width e.g. "5px"
5. Paste this "hsl( 0, 100%, 50% )" into color input for borders

✔️ Expected result

❌ Actual result

---

Look, if we remove spaces in color format like this "hsl(0, 100%, 50%)" instead "hsl( 0, 100%, 50% )" it works well.

screen-capture.2.webm

Problem is actually in this part of code.

ckeditor5/packages/ckeditor5-engine/src/view/styles/utils.ts

Lines 251 to 256 in 8ac3b11

	export function getShorthandValues( string: string ): Array<string> {
	return string
	.replace( /, /g, ',' ) // Exclude comma from spaces evaluation as values are separated by spaces.
	.split( ' ' )
	.map( string => string.replace( /,/g, ', ' ) ); // Restore original notation.
	}

So for 'hsl( 0, 100%, 50% )' it returns array [ 'hsl(' , ',0, 100%, 50%', ')' ]

It suppose to parse few colors for border (top, bottom, left and right) like:
getShorthandValues( 'red blue RGB(0, 0, 0)'); -> [ 'red', 'blue', 'RGB(0, 0, 0)' ]

❓ Possible solution

return Array.from( string.matchAll( /rgb\([^\)]+\)|hsl(a)?\([^\)]+\)|(#)?\w+/gi ) ).map( i => i[ 0 ] );

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: …
• OS: …
• First affected CKEditor version: …
• Installed CKEditor plugins: …

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[oleq]

The more general regex from the refinement call \w+\([^)]+\)|(#)?\w+. Should work with colors and with stuff like

calc(10vh - 50px) min(30vh, 100px)

(margins, paddings).

[oleq]

Tools to the rescue https://www.regexpal.com/, https://akatquas.github.io/regexper-ng/.