Applying color to parts of a text only works once before you have to reopen the font color popup

[mixrigster]

Preflight Checklist

• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Describe the bug
If you want to color part of a text (instead of the entire text) it only works the first time you do it in the "Font Color" popup. To change it again you need to close and reopen it first. This is obviously very annoying when you want to try out different colors.

To Reproduce
Steps to reproduce the behavior:

1. Create a diagram node (or just a simple text object) and write some text in it.
2. Select parts of the text (like a single word for example)
3. In the properties, click on the font color selector and choose a color. It applies the color correctly.
4. Reselect the text and click on another color. This time it doesn't change.
5. Close the font color window and reopen it. Now it works again.

Expected behavior
It should change the color every time.

draw.io version (In the Help->About menu of the draw.io editor):

• draw.io version v31.4.2

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Firefox
• Browser Version 156.0.1

I tested the problem in incognito/private mode with all browser extensions switched off, write "yes" below:

• yes

[draw-io-triage-bot]

This is a bug in the colour window, not in Firefox. It happens in Chrome as well, and it is still there in the current 31.5.2 build.

When the colour window opens, it remembers the text you had selected at that moment. Every colour you click after that goes to the remembered text, not to anything you select later. The first colour change rewrites the markup around that text, which leaves the remembered selection empty. After that, clicking a colour does nothing, or sometimes recolours the text you coloured before. Clicking Font Color stores whatever is selected now, and that's why reopening helps.

You don't need to close the window each time. Clicking Font Color again is enough:

1. Drag the colour window by its title bar so it no longer covers the Format panel and the Font Color button is visible. draw.io remembers where you put it.
2. Select the next piece of text.
3. Click the Font Color button, then click the colour.

The same applies to Background Color while you are editing text.

Notes for maintainers

Cause: EditorUi.pickColor saves the cell editor selection once per call, and wrappedApply restores that same saved Range on every apply (EditorUi.js#L6800-L6847). Since 29.7.9 ("Convert color picker from modal dialog to non-modal tool window") the window stays open, so the second and later picks restore that saved Range after the DOM has changed:

• The first Graph.setTextColor execCommand usually collapses it. restoreSelection then gives a collapsed caret, and setTextColor goes into its collapsed branch, which only sets the typing style, so nothing visible changes (Graph.js#L2208-L2262).
• If the Range survives, the previous run gets recoloured instead.

The user's new selection can't be used as it is: ColorWindow.update calls colorDialog.init(), which focuses the hex input (Dialogs.js#L1980-L1995), and at restore time window.getSelection() was empty.

Reproduced: 31.5.2 app.min.js in headless Chromium, so this is not specific to Firefox. Steps: double-click a word, click Font Color, click a swatch (works). Double-click another word, click a swatch: no change, and the Range passed to restoreSelection is collapsed. Close the window and click Font Color again: works once, then fails again. Clicking Font Color with the window left open but moved off the format panel also re-captures the selection every time, which is the workaround in the reply. By default the window sits over the format panel (x = body width - 280), and that's why users close it.

Affected callers: every content-editing path through pickColor: font colour and background colour in Format.js#L4293-L4370, and Menus.pickColor forecolor/backcolor (Menus.js#L1437-L1463).

Possible fix (checked by monkeypatching in the page): on a capture-phase mousedown on colorWindow.window.div, if the document selection is inside cellEditor.textarea, store cloned ranges on the ColorWindow. Restore those instead of the pickColor-time selState when they are set. The first pick after opening still needs the pickColor-time state, because init() has already moved focus to the hex input. With this change, the second and third picks applied to the newly selected words.

_{Automated first response by the draw.io triage bot.}