Highlighter Composer Button

theme-component
1
:information_source: Summary A Text Highlighter Button for the Discourse Composer Toolbar
:eyeglasses: Preview Video Demo
:hammer_and_wrench: Repository GitHub - denvergeeks/discourse-highlight-wrap-theme-component: A Text Highlighter Button for the Discourse Composer Toolbar
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

The button looks like a highlighter pen… discourse-highlighter-button It is for the very specific and limited purpose of clicking a button in the composer toolbar to insert <mark>this</mark>.

:information_source: Ctrl-H is the keyboard shortcut you can use in lieu of clicking the button.

In the settings you can override both the Highlighter (background) color an the color of the text in the highlighted portions.

discourse-highlighter-tc-settings
discourse-highlighter-tc-settings1542×872 53.2 KB

Many thanks to @pfaffman and @merefield and @Lilly and @JammyDodger and @Canapin for helping out with this!

12 Likes
2

That’s amazing. Well done :clap:t2: :star_struck:

2 Likes
3

this is very nice one.

where is the .d-wrap defined ?
it shows as this color on mine with the default theme… like to have it the highlighter color as in your video, thanks

image

4

Looks like it is the --highlight-medium color variable setting in the palette you are using for that theme

Here is what one of my pallets looks like:

color_palette
color_palette893×721 89.7 KB

This component is using the medium shade of the highlight color. You can see the exact one in your style guide if you have it enabled in admin-settings-(styleguide enabled or styleguide admin only) the style guide for the theme’s colors is at /styleguide/atoms/colors

1 Like
5

Actually might be worth putting a PR or suggestion for a highlighter color override. :slight_smile:

2 Likes
6

yes, was thinking, better to have a setting for it

2 Likes
7

Adding a setting now… brb

1 Like
8

Would using mark be more expected? I think that uses the ‘highlight’ colour in the colour palette.

<mark>mark</mark>

3 Likes
9

OK I put a setting in there to default to #ff8.

1 Like
10

Hah I was about to submit a pr to you :slight_smile:

11

Happy Super Hero Girls GIF by DC

12

nice, just pulled, it works great ! :grinning:

2 Likes
13

Hi @denvergeeks :slight_smile:

Here’s how your style differs (with default settings) from <mark> (which uses a Discourse’s colors variable, making it readable whatever color scheme you chose):

image

On a dark theme:

image

3 Likes
14

Perfect @Canapin, I’ll roll that in!

Or, if anyone wants to QPR that, let me know as I may not get to it today.

15

OK this now uses @Canapin’s suggestion to use the built-in <mark> and corresponding CSS defaults.

Also it now provides settings to override both the Highlighter (background) color and the color of the text in the highlighted portions. Thanks to @Lilly for that conditional CSS.

1 Like
16

I’m trying to build a json color picker but it’s not working. I just get a blank pop up with a save button. :woman_facepalming:t2:
Maybe I’ll see if a javascript one is possible somehow. The color palette and badge interface have color-picker js functions, but maybe would only work with a plugin.

1 Like
17

For me those settings aren’t overrides. Those must be filled, otherwise it doesn’t do anything.

And… I`m on default theme and because of lack of morning coffee I’m in slow mode — I didn’t check if that comes from theme itself.

Edit: nope, theme or color scheme doesn’t play any roll. So, will it follow color scheme and be an override, or is it a mandatory setting?

18

Try updating the component and refresh the page. I can’t reproduce the error.

Is it inserting the <mark></mark> tag?

19

I updated it first before trying. And no, it uses wrap. So I’m a bit behind?

20

The color picker JSON setting (in a theme/component) is not working on Discourse, indeed.
I think good practice would be to use Discourse colors variables in general instead of picking arbitrary colors in a theme or component that won’t blend nicely depending on what other themes and colors users chose.

A user made a color picker for the composer some time ago, but I’m not sure the code was released:

2 Likes