fix: the not hex color doesn't change in toolbar

packages/quill/src/formats/background.ts

@@ -1,10 +1,9 @@
-import { ClassAttributor, Scope } from 'parchment';
-import { ColorAttributor } from './color.js';
+import { ClassAttributor, Scope, StyleAttributor } from 'parchment';
 
 const BackgroundClass = new ClassAttributor('background', 'ql-bg', {
   scope: Scope.INLINE,
 });
-const BackgroundStyle = new ColorAttributor('background', 'background-color', {
+const BackgroundStyle = new StyleAttributor('background', 'background-color', {
   scope: Scope.INLINE,
 });
 

packages/quill/src/formats/color.ts

@@ -1,23 +1,10 @@
 import { ClassAttributor, Scope, StyleAttributor } from 'parchment';
 
-class ColorAttributor extends StyleAttributor {
-  value(domNode: HTMLElement) {
-    let value = super.value(domNode) as string;
-    if (!value.startsWith('rgb(')) return value;
-    value = value.replace(/^[^\d]+/, '').replace(/[^\d]+$/, '');
-    const hex = value
-      .split(',')
-      .map((component) => `00${parseInt(component, 10).toString(16)}`.slice(-2))
-      .join('');
-    return `#${hex}`;
-  }
-}
-
 const ColorClass = new ClassAttributor('color', 'ql-color', {
   scope: Scope.INLINE,
 });
-const ColorStyle = new ColorAttributor('color', 'color', {
+const ColorStyle = new StyleAttributor('color', 'color', {
   scope: Scope.INLINE,
 });
 
-export { ColorAttributor, ColorClass, ColorStyle };
+export { ColorClass, ColorStyle };

packages/quill/src/modules/toolbar.ts

@@ -233,12 +233,18 @@ function addSelect(
   format: string,
   values: Array<string | boolean>,
 ) {
+  const colorGetter = document.createElement('span') as any;
   const input = document.createElement('select');
   input.classList.add(`ql-${format}`);
   values.forEach((value) => {
     const option = document.createElement('option');
     if (value !== false) {
-      option.setAttribute('value', String(value));
+      let colorValue = String(value);
+      if (format === 'color' || format === 'background') {
+        colorGetter.style[format] = String(value);
+        colorValue = colorGetter.style[format];
+      }
+      option.setAttribute('value', colorValue);
     } else {
       option.setAttribute('selected', 'selected');
     }

packages/quill/src/themes/base.ts

@@ -158,9 +158,10 @@ class BaseTheme extends Theme {
           ? 'background'
           : 'color';
         if (select.querySelector('option') == null) {
-          fillSelect(
+          fillColorSelect(
             select,
             COLORS,
+            format,
             format === 'background' ? '#ffffff' : '#000000',
           );
         }
@@ -359,5 +360,23 @@ function fillSelect(
     select.appendChild(option);
   });
 }
+function fillColorSelect(
+  select: HTMLSelectElement,
+  values: Array<string | boolean>,
+  format: string,
+  defaultValue: unknown = false,
+) {
+  const colorGetter = document.createElement('span') as any;
+  values.forEach((value) => {
+    const option = document.createElement('option');
+    if (value === defaultValue) {
+      option.setAttribute('selected', 'selected');
+    } else {
+      colorGetter.style[format] = String(value);
+      option.setAttribute('value', colorGetter.style[format]);
+    }
+    select.appendChild(option);
+  });
+}
 
 export { BaseTooltip, BaseTheme as default };

packages/quill/test/fuzz/editor.spec.ts

@@ -18,7 +18,15 @@ const attributeDefs: {
   blockEmbed: AttributeDef[];
 } = {
   text: [
-    { name: 'color', values: ['#ffffff', '#000000', '#ff0000', '#ffff00'] },
+    {
+      name: 'color',
+      values: [
+        'rgb(255, 255, 255)',
+        'rgb(0, 0, 0)',
+        'rgb(255, 0, 0)',
+        'rgb(255, 255, 0)',
+      ],
+    },
     { name: 'bold', values: [true] },
     { name: 'code', values: [true] },
     // @ts-expect-error