🐛 Support CSS custom properties in createCursor

[bornajazvo]

Currently there is an issue when passing a CSS custom property to the createCursor method:

While the flag and the caret colour are set correctly, modifying the alpha value for the selection block fails. This results in rgb(0, 0, 0) as a CSS variable is not a valid input for tinycolor.

quill-cursors/src/quill-cursors/cursor.ts

Line 174 in 5524fbb

element.style.backgroundColor = tinycolor(this.color).setAlpha(0.3).toString();

This change addresses the issue by applying the fade effect via the opacity property instead of manipulating the alpha channel.

Note

This will slightly change functionality, as before the existing opacity would be overwritten (for example, passing rgba(0, 0, 0, 0.5) would result in the selection block being rgba(0, 0, 0, 0.3)). Now the fade will apply to the existing colour (so the previous example will result in rgba(0, 0, 0, 0.15) instead).

This behaviour is more intuitive, especially when working with colours that have alpha values less than 0.3. Previously, these would result in the fade making the colour stronger instead of lighter.