Support the use of raw CSS for the color_map_raw (tinymce#9788)

If both the `color_map` and `color_map_raw` are specified, the raw
variant takes precedent.

.changes/unreleased/tinymce-GH-9599-2024-07-25.yaml

@@ -1,6 +1,6 @@
 project: tinymce
 kind: Added
-body: Added support for CSS Variables in the `color_map`
+body: Added support for using raw CSS in the list of possible colours, using the `color_map_raw` property.
 time: 2024-07-25T10:42:28.314139+08:00
 custom:
   Issue: GH-9788

modules/tinymce/src/themes/silver/main/ts/ui/core/color/Options.ts

@@ -10,25 +10,23 @@ const backgroundId = 'hilitecolor';
 
 const fallbackCols = 5;
 
-const mapColors = (colorMap: string[]): Menu.ChoiceMenuItemSpec[] => {
+const mapColors = (colorMap: string[]): Menu.ChoiceMenuItemSpec[] => mapColorsRaw(colorMap.map((color, index) => {
+  if (index % 2 === 0) {
+    return '#' + Transformations.anyToHex(color).value;
+  }
+  return color;
+}));
+
+const mapColorsRaw = (colorMap: string[]): Menu.ChoiceMenuItemSpec[] => {
   const colors: Menu.ChoiceMenuItemSpec[] = [];
 
   for (let i = 0; i < colorMap.length; i += 2) {
-    if (colorMap[i].match(/^var\(--.*\)/)) {
-      colors.push({
-        text: colorMap[i + 1],
-        value: colorMap[i],
-        icon: 'checkmark',
-        type: 'choiceitem'
-      });
-    } else {
-      colors.push({
-        text: colorMap[i + 1],
-        value: '#' + Transformations.anyToHex(colorMap[i]).value,
-        icon: 'checkmark',
-        type: 'choiceitem'
-      });
-    }
+    colors.push({
+      text: colorMap[i + 1],
+      value: colorMap[i],
+      icon: 'checkmark',
+      type: 'choiceitem'
+    });
   }
 
   return colors;
@@ -53,6 +51,14 @@ const register = (editor: Editor): void => {
     }
   };
 
+  const colorProcessorRaw = (value: unknown): any => {
+    if (Type.isArrayOf(value, Type.isString)) {
+      return { value: mapColorsRaw(value), valid: true };
+    } else {
+      return { valid: false, message: 'Must be an array of strings.' };
+    }
+  };
+
   const colorColsProcessor = (value: unknown): any => {
     if (Type.isNumber(value) && value > 0) {
       return { value, valid: true };
@@ -93,6 +99,10 @@ const register = (editor: Editor): void => {
     ]
   });
 
+  registerOption('color_map_raw', {
+    processor: colorProcessorRaw,
+  });
+
   registerOption('color_map_background', {
     processor: colorProcessor
   });
@@ -137,6 +147,8 @@ const getColors = (editor: Editor, id: string): Menu.ChoiceMenuItemSpec[] => {
     return option<Menu.ChoiceMenuItemSpec[]>('color_map_foreground')(editor);
   } else if (id === backgroundId && editor.options.isSet('color_map_background')) {
     return option<Menu.ChoiceMenuItemSpec[]>('color_map_background')(editor);
+  } else if (editor.options.isSet('color_map_raw')) {
+    return option<Menu.ChoiceMenuItemSpec[]>('color_map_raw')(editor);
   } else {
     return option<Menu.ChoiceMenuItemSpec[]>('color_map')(editor);
   }
@@ -175,6 +187,7 @@ const getDefaultBackgroundColor = option<string>('color_default_background');
 export {
   register,
   mapColors,
+  mapColorsRaw,
   getColorCols,
   hasCustomColors,
   getColors,

modules/tinymce/src/themes/silver/test/ts/browser/editor/color/ColorSettingsTest.ts

@@ -21,8 +21,7 @@ describe('browser.tinymce.themes.silver.editor.color.ColorSettingsTest', () => {
     '#3498db', 'Black',
     'rgb(155, 89, 182)', 'Black',
     'PeachPuff', 'Some horrible pink/orange color',
-    'rgba(255, 99, 71, 0.5)', 'Pale tomato',
-    'var(--color-black)', 'Black',
+    'rgba(255, 99, 71, 0.5)', 'Pale tomato'
   ];
   const hook = TinyHooks.bddSetupLight<Editor>({
     toolbar: 'forecolor backcolor',
@@ -95,11 +94,6 @@ describe('browser.tinymce.themes.silver.editor.color.ColorSettingsTest', () => {
       value: '#FF6347',
       type: 'choiceitem',
       delta: 1
-    },
-    {
-      text: 'Black',
-      value: 'var(--black)',
-      type: 'choiceitem'
     }
   ];
 
@@ -119,3 +113,36 @@ describe('browser.tinymce.themes.silver.editor.color.ColorSettingsTest', () => {
     assertCols(editor, 'hilitecolor', 5);
   });
 });
+it('TBA: getCurrentColor should use raw color styles', () => {
+  const colorSettings = [
+    '#1abc9c', 'Black',
+    'hsl(145, 63.2%, 49.0%)', 'Black',
+    'var(--red)', 'Red',
+  ];
+
+  const mappedColors: ExpectedColor[] = [
+    {
+      text: 'Black',
+      value: '#1abc9c',
+      type: 'choiceitem'
+    },
+    {
+      text: 'Black',
+      value: 'hsl(145, 63.2%, 49.0%)',
+      type: 'choiceitem'
+    },
+    {
+      text: 'Red',
+      value: 'var(--red)',
+      type: 'choiceitem'
+    },
+  ];
+
+  const calculatedColors = Options.mapColorsRaw(colorSettings);
+
+  Arr.each(mappedColors, (item, i) => {
+    assert.equal(calculatedColors[i].text, item.text, 'Color text should match');
+    assert.equal(calculatedColors[i].value, item.value, 'Color value should match');
+    assert.equal(calculatedColors[i].type, item.type, 'Color type should match');
+  });
+});