Issues with color picker

[jmrapin81]

Describe the bug
using Snappy Mail with Nextcloud, I cannot change the font color or the background color. I cannot work out this feature. I am surprised I am the first one to report this as it has been an issue for me for a while.

To Reproduce
Steps to reproduce the behaviour:

1. Write a new email. Type some text.
2. Highlight some text to change its colour.
3. Click on the colour picker (font colour or backgroud colour same problem) . Choose a colour
4. Colour not applied to text.

Errors

1. When the colour picker is open the text selection is gone. Therefore cannot change colour. This is very annoying as I usually format the text once I am done with the content. Al;so this means you cannot change the colour once the text is typed. That's not usable IMO
2. When colour is chosen, how to validate the colour? There is no OK button, apply etc. to close the colour picker.
3. Even if no text is selected choosing a colour is not applied to the location the cursor is.

How to reproduce bug 3)

1. open a new mail
2. insert a few blank lines at the top.
3. put the cursor on line 2
4. open the colour picker (again background or font colour doesn't matter)
5. pick a colour. notice how the colour picker is still open
6. Click somewhere else in the email body to close the colour picker.
7. Notice how no background colour is applied? Sometimes also the colour is applied to the location of the click in step 6 rather than the location in step 2.

Expected behavior
Well a normal editor colour picker behaviour is expected. When text is selected selecting the colour picker does not remove selection and colour is applied. Colour picker should have a list of usual colours to pick from without having use the wheel.
For an example of behaviour see Summer Note for instance. https://summernote.org/

Screenshots
If applicable, add screenshots to help explain your problem.

Please complete the following information:

• Browser: windows 11 google chrome Version 114.0.5735.135 (Official Build) (64-bit)
• IMAP daemon: [e.g. courier, dovecot] not relevant
• PHP version: PHP 8.1
• SnappyMail Version: Latest as of when this is reported on nextcloud.
• Mode: Nextcloud

Debug/logging information
Place them here (few lines) or as attachments (many lines)

Additional context
Add any other context about the problem here.

[the-djmaze]

Go to https://snappymail.eu/demo/
When it works, then the problem is Nextcloud itself.
When it does not work, we need more people with windows 11 google chrome Version 114.0.5735.135 (Official Build) (64-bit) to confirm the problem is there

[jmrapin81]

See a video of the issue using your demo.

2023-07-04_19-44-55.-.jeanmichel.mp4

[the-djmaze]

I can't reproduce your problem with 109.0.5414.119 (openSUSE Build) stable (64-bits)

When I tested with 114.0.5735.198 (openSUSE Build, ungoogled-chromium) stable (64-bits) the problem is there.
However, when you hit the Enter key on your keyboard, the color is set.
This indicates the problem is the browser internal color picker and we can't fix that.

[SergeyMosin]

This issue can be reproduced in Signature editor (but not in the message composer) on the demo server and also applies to "Font Selector" and "Font Size Selector"

1. Go to Identity settings
2. Switch the editor into HTML mode
3. Enter some text
4. Highlight/select a portion of the text
5. Click on either "Font Selector", "Font Size Selector" or one of the color pickers
6. 💥 the selection is lost and the changes will not apply
7. To repeat: go back and EDIT the text and then proceed to Step 4

My best guess, this is happening because of the way new Editor() is constructed.

The "Message Composer" editor is constructed here:

snappymail/dev/View/Popup/Compose.js

Lines 688 to 693 in 99d68bc

	this.oEditor = new HtmlEditor(
	this.editorArea(),
	null,
	() => fOnInit(this.oEditor),
	bHtml => this.isHtml(!!bHtml)
	);

and has null passed as the second parameter(onBlur)

The signature editor is constructed here:

snappymail/dev/External/User/ko.js

Line 92 in 99d68bc

editor = new HtmlEditor(element, fUpdateKoValue, fOnReady, fUpdateKoValue);

and has a function passed as the onBlur param. The function resolves to here:

snappymail/dev/Common/Html.js

Lines 842 to 844 in 99d68bc

	getDataWithHtmlMark() {
	return (this.isHtml() ? ':HTML:' : '') + this.getData();
	}

I am not entirely sure why but it looks like the this.getData() call somehow cause the selection loss.

In any case if the second param is set to null everything works as expected:

	editor = new HtmlEditor(element, null, fOnReady, fUpdateKoValue);

[tregmos]

I got the same issue on standalone (non-nextcloud) version of snappymail. Both with Opera and Edge Browser on Windows 11. I also tried rainloop. There coloring text or the backgroud of text afterwards works fine. Maybe the developer can copy this function from there.

[the-djmaze]

https://support.telosalliance.com/article/h4kvjxxery-getting-your-old-color-picker-back-in-google-chrome

[tregmos]

I got the latest Chrome and Opera browser on Windows, but it doesn´t work.
The point "Web Platform Controls updated UI" doesn´t exist.
There´s "Experimental Web platform features" instead, but making changes here doesn´t change anything in regard to this issue.
I also got the latest version of firefox. With firefox the surface is different. It´s like in rainloop and works fine.
So you´re right that the problem depends on the internet browser.

[jmrapin81]

I got tired of fighting this issue but this is not going away for me.
I appreciate it does not happen in every browsers but it is happening in Chrome and it’s not some obscure browser no one uses.
In my first post, I pointed out there are software out there that manage to have a perfectly good working color picker that works cross browser.
Why not here ?

Firefox version on windows 11 current:

On your demo :
So when I use Firefox, with the colour picker and I change the background colour, the whole line. (GREEN)

Then I type some more and select a section of that line and choose blue background - this finally works as expected.

Then whatever I do (even if i select the white background) I can never get rid of the green background.

From my point of view, this basic feature is unusable, regardless of browser.

BTW as you can see on my screenshot there is also a scrollbar on the toolbar. Not a functional issue but still unsightly. If the toolbar is too large for the window, perhaps the toolbar should be split?

Again, please the plugin Summernote at https://summernote.org/, the colour picker works on every browsers, so it's possible?

[the-djmaze]

I've changed the color picker to use default options.
This is a workaround for the broken Chrome color picker UI.

The colors are from color blind palette "Tableau 10", developed by Maureen Stone.
Info: https://www.tableau.com/en-gb/blog/examining-data-viz-rules-dont-use-red-green-together

Firefox will show it like this: