From 7be000f2f7ce0a229353060fb5a764927f927171 Mon Sep 17 00:00:00 2001
From: bornajazvo <41785864+bornajazvo@users.noreply.github.com>
Date: Tue, 7 Jan 2025 11:38:44 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Support=20CSS=20custom=20propert?=
 =?UTF-8?q?ies=20in=20`createCursor`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                     | 3 +++
 package.json                     | 4 +---
 src/quill-cursors/cursor.spec.ts | 6 ++++--
 src/quill-cursors/cursor.ts      | 4 ++--
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9332dd0..92b5a1c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+# 4.0.4
+- Support CSS custom properties as input for the `createCursor` method by applying fade via `opacity` instead of modifying the alpha channel.
+
 # 4.0.3
 - Make event listeners passive
 
diff --git a/package.json b/package.json
index f31630f..9ce5a39 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quill-cursors",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "A multi cursor module for Quill.",
   "keywords": [
     "quill",
@@ -30,7 +30,6 @@
     "@reedsy/eslint-plugin": "^0.14.2",
     "@testing-library/jest-dom": "^5.16.1",
     "@types/jest": "^27.4.0",
-    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -44,7 +43,6 @@
     "sass": "^1.49.7",
     "sass-loader": "^12.4.0",
     "style-loader": "^3.3.1",
-    "tinycolor2": "^1.4.2",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5",
diff --git a/src/quill-cursors/cursor.spec.ts b/src/quill-cursors/cursor.spec.ts
index 46ba008..8a42908 100644
--- a/src/quill-cursors/cursor.spec.ts
+++ b/src/quill-cursors/cursor.spec.ts
@@ -234,13 +234,15 @@ describe('Cursor', () => {
       expect(selections.children[0]).toHaveStyle('left: 50px');
       expect(selections.children[0]).toHaveStyle('width: 100px');
       expect(selections.children[0]).toHaveStyle('height: 200px');
-      expect(selections.children[0]).toHaveStyle('background-color: rgba(255, 0, 0, 0.3)');
+      expect(selections.children[0]).toHaveStyle('background-color: red');
+      expect(selections.children[0]).toHaveStyle('opacity: 0.3');
 
       expect(selections.children[1]).toHaveStyle('top: 1000px');
       expect(selections.children[1]).toHaveStyle('left: 1050px');
       expect(selections.children[1]).toHaveStyle('width: 200px');
       expect(selections.children[1]).toHaveStyle('height: 300px');
-      expect(selections.children[1]).toHaveStyle('background-color: rgba(255, 0, 0, 0.3)');
+      expect(selections.children[1]).toHaveStyle('background-color: red');
+      expect(selections.children[1]).toHaveStyle('opacity: 0.3');
     });
 
     it('clears the selection if nothing is passed in', () => {
diff --git a/src/quill-cursors/cursor.ts b/src/quill-cursors/cursor.ts
index 82cccc9..2ab7f9b 100644
--- a/src/quill-cursors/cursor.ts
+++ b/src/quill-cursors/cursor.ts
@@ -1,6 +1,5 @@
 import IQuillCursorsOptions from './i-quill-cursors-options';
 import IQuillRange from './i-range';
-import tinycolor = require('tinycolor2');
 import {ICoordinates} from './i-coordinates';
 
 export default class Cursor {
@@ -171,7 +170,8 @@ export default class Cursor {
     element.style.left = `${selection.left - container.left}px`;
     element.style.width = `${selection.width}px`;
     element.style.height = `${selection.height}px`;
-    element.style.backgroundColor = tinycolor(this.color).setAlpha(0.3).toString();
+    element.style.backgroundColor = this.color;
+    element.style.opacity = '0.3';
 
     return element;
   }