Move color validation to a separate utility

Extract color validation from the color chip
extension into a separate utility

app/assets/javascripts/content_editor/extensions/color_chip.js

 import { Node } from '@tiptap/core';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
+import { isValidColorExpression } from '~/lib/utils/color_utils';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
-const colorValidatorEl = document.createElement('div');
 const colorExpressionTypes = ['#', 'hsl', 'rgb'];
 
 const isValidColor = (color) => {
@@ -11,10 +11,7 @@ const isValidColor = (color) => {
     return false;
   }
 
-  colorValidatorEl.style.color = '';
-  colorValidatorEl.style.color = color;
-
-  return colorValidatorEl.style.color.length > 0;
+  return isValidColorExpression(color);
 };
 
 const highlightColors = (doc) => {

app/assets/javascripts/lib/utils/color_utils.js

+const colorValidatorEl = document.createElement('div');
+
+/**
+ * Validates whether the specified color expression
+ * is supported by the browser’s DOM API and has a valid form.
+ *
+ * This utility assigns the color expression to a detached DOM
+ * element’s color property. If the color expression is valid,
+ * the DOM API will accept the value.
+ *
+ * @param {String} color color expression rgba, hex, hsla, etc.
+ */
+export const isValidColorExpression = (colorExpression) => {
+  colorValidatorEl.style.color = '';
+  colorValidatorEl.style.color = colorExpression;
+
+  return colorValidatorEl.style.color.length > 0;
+};
+
 /**
  * Convert hex color to rgb array
  *

spec/frontend/content_editor/extensions/color_chip_spec.js

@@ -18,6 +18,7 @@ describe('content_editor/extensions/color_chip', () => {
     ${'F00'}              | ${false}
     ${'gba(0,0,0,0)'}     | ${false}
     ${'hls(540,70%,50%)'} | ${false}
+    ${'red'}              | ${false}
   `(
     'when a code span with $colorExpression color expression is found',
     ({ colorExpression, decorated }) => {

spec/frontend/lib/utils/color_utils_spec.js

 import {
+  isValidColorExpression,
   textColorForBackground,
   hexToRgb,
   validateHexColor,
@@ -72,4 +73,21 @@ describe('Color utils', () => {
       },
     );
   });
+
+  describe('isValidColorExpression', () => {
+    it.each`
+      colorExpression       | valid    | desc
+      ${'#F00'}             | ${true}  | ${'valid'}
+      ${'rgba(0,0,0,0)'}    | ${true}  | ${'valid'}
+      ${'hsl(540,70%,50%)'} | ${true}  | ${'valid'}
+      ${'red'}              | ${true}  | ${'valid'}
+      ${'F00'}              | ${false} | ${'invalid'}
+      ${'F00'}              | ${false} | ${'invalid'}
+      ${'gba(0,0,0,0)'}     | ${false} | ${'invalid'}
+      ${'hls(540,70%,50%)'} | ${false} | ${'invalid'}
+      ${'hello'}            | ${false} | ${'invalid'}
+    `('color expression $colorExpression is $desc', ({ colorExpression, valid }) => {
+      expect(isValidColorExpression(colorExpression)).toBe(valid);
+    });
+  });
 });