Can this be offered as a theme component? This would allow customers on managed instances to install it. I also feel like there should be a more intuitive way of selecting color for a text, such as a color picker.
You only need to add the CSS, the behaviour above is native.
The result appears to be a little less flexible and bulletproof than BBCode, but it’s quite useable for many use cases. (in order to have multiple different colours in the same line, the first character must not be coloured I believe?).
That’s cool, thanks for pointing it out. The only thing I see problemtic with this is that it is very limiting for the end-user and also for the team who want to use this functionality.
A better and more flexible implementation would be if it was done via CSS variables where the generated code would be looking like this:
[wrap=colorme color=blue]Hi there![/wrap]
<div class="d-wrap" data-wrap="colorme" data-color="blue" style="--custom-colorme: blue">
Then the underlying CSS could look like this with one statement and leave the color freedom to the enduser instead of delcaring every possible color in the CSS. He could use all kinds of color formats e.g. hsl, rgba etc.
It will accept any valid CSS color (color name, hex, RGB, HSL). It won’t accept RGBA or HSLA colors if they set an alpha value.
In the composer, you add this
[wrap=color color=yellow]Hi there![/wrap] Welcome!
[wrap=color bgcolor=red]Hi there![/wrap] Welcome!
color and background
[wrap=color color=#ff0000 bgcolor=white]Hi there![/wrap] Welcome!
and change the color to whatever you want.
Note that if you want to use HSL or RGB, you have to wrap them in quotes like so
This is safe with regard to user input and XSS since Discourse already escapes [wrap] tags, plus there’s also CSP. However…