From 5c8bc84660a6f7b698ff1bd53b718f0fdc6b4830 Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Thu, 25 Apr 2024 11:47:04 +0800
Subject: [PATCH 1/2] fix: the not hex color doesn't change in toolbar

---
 packages/quill/src/formats/background.ts |  5 ++---
 packages/quill/src/formats/color.ts      | 17 ++---------------
 packages/quill/src/modules/toolbar.ts    |  8 +++++++-
 packages/quill/src/themes/base.ts        | 21 ++++++++++++++++++++-
 4 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/quill/src/formats/background.ts b/packages/quill/src/formats/background.ts
index b305d0e919..0e429a9730 100644
--- a/packages/quill/src/formats/background.ts
+++ b/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,
 });
 
diff --git a/packages/quill/src/formats/color.ts b/packages/quill/src/formats/color.ts
index e4891c69b0..cff9d3c75c 100644
--- a/packages/quill/src/formats/color.ts
+++ b/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 };
diff --git a/packages/quill/src/modules/toolbar.ts b/packages/quill/src/modules/toolbar.ts
index 411438e7c7..d7878aa49a 100644
--- a/packages/quill/src/modules/toolbar.ts
+++ b/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');
     }
diff --git a/packages/quill/src/themes/base.ts b/packages/quill/src/themes/base.ts
index 3caf771ad1..4fa98a1ecd 100644
--- a/packages/quill/src/themes/base.ts
+++ b/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 };

From 09d000552181c5516b939a89ae0bb021b9b2752a Mon Sep 17 00:00:00 2001
From: zzxming <zzxming77@163.com>
Date: Tue, 30 Apr 2024 09:36:50 +0800
Subject: [PATCH 2/2] test: change attribute

---
 packages/quill/test/fuzz/editor.spec.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/quill/test/fuzz/editor.spec.ts b/packages/quill/test/fuzz/editor.spec.ts
index 78f7751dd7..cf9b4db5d8 100644
--- a/packages/quill/test/fuzz/editor.spec.ts
+++ b/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