Use colour-picker macro in Tag Manager

[Leilei332]

See #8603 .

This require #8605 to display properly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Confirmed: Leilei332 has already signed the Contributor License Agreement (see contributing.md)

[Jermolene]

Great thanks @Leilei332

[kookma]

@Leilei332
I have tested the new color picker, and it seems there are some issues

1. move mouse on left side of color chooser what is that clickable square?

2. Clicking in the input box of color chooser or the button itself closes the drop down

[kookma]

Another issue:
If you set the color of a tag through TagManager using new color macro, it will not correctly be displayed on the tag tiddler.
For example change the color of About tiddler

1. select a color for About
   

2. See the color by editing About tiddler
   

[Leilei332]

1. move mouse on left side of color chooser what is that clickable square?

This square does have function. After you select a color with the native color or input a valid color in the input field on the left, the square shows the color and you can click it to pick the color. IMO we should update the macro to hide it when the input field is empty.

2. Clicking in the input box of color chooser or the button itself closes the drop down

This problem does related to the implementation of the drop down, tc-popup-keep should have been added to the class attribute.

Another issue:
If you set the color of a tag through TagManager using new color macro, it will not correctly be displayed on the tag tiddler.
For example change the color of About tiddler

This is because the native HTML color picker does not support CSS color keywords , so we had better create a Field Editor Cascade to input text with a colour-picker macro dropdown.

[kookma]

This square does have function. After you select a color with the native color or input a valid color in the input field on the left, the square shows the color and you can click it to pick the color. IMO we should update the macro to hide it when the input field is empty.

This does not work on Edge or Chrome. Only works on Firefox. I expect to have the dropdown open to see what user has selected.

[Leilei332]

This square does have function. After you select a color with the native color or input a valid color in the input field on the left, the square shows the color and you can click it to pick the color. IMO we should update the macro to hide it when the input field is empty.

This does not work on Edge or Chrome. Only works on Firefox. I expect to have the dropdown open to see what user has selected.

Actually it does work on Chrome 128 (After I added tc-popup-keep to the class attribute reveal widget). I think this problem is related to the second one:

I expect to have the dropdown open to see what user has selected.

Colour-picker macro does not support displaying selected color, but the input field below displays color in $:/config/ColourPicker/New. IMO we can create an action for the button to set the content of this tiddler to the colour of the tag.

[pmario]

@kookma -- you should create a new issue, that links to this one. Merged PRs are listed as "closed". So creating a new issue is the way to go.