How can I change the available colors for the rich text editor?

Visual Editor Help
,
1

Hello,

What are you trying to accomplish
I have registered design tokens for colors. These colors show up when editing through the in-line text editor or when editor color styles, but they do not show up when editing with the side panel rich text editor.
I know at first I had found out how to edit the available swatches but I can’t seem to find where. I honestly just want them to be the same as my color design tokens… it makes no sense to have separate colors just for this.

Screenshots or video link
This is the side panel rich text editor, where I believe I remember having manually set the swatches to the same values as my design tokens (which is far from ideal).
Screenshot 2024-09-20 at 12.44.21
This is color select in the side panel, which shows my design tokens (has the new one “Highlight” which is missing from the other screenshot)
Screenshot 2024-09-20 at 12.48.22

Thanks

2

Hello @wareep,

If the side panel rich text editor isn’t automatically picking up the design tokens, ensure that the registration covers all parts of the editor’s configuration. This involves setting styleStrictMode to true which ensures only these tokens are used across all editing modes.

Builder.register("editor.settings", {
  designTokens: {
    colors: [
      { name: "Brand Red", value: "var(--red, #ff0000)" },
      { name: "Brand Blue", value: "rgba(93, 150, 255, 1)" },
      { name: "Highlight", value: "var(--highlight, #ffff00)" },
    ],
  },
  // Enable strict mode to enforce these tokens
  styleStrictMode: true,
});

You might also want to refer to the documentation on Customizing Builder and the specific Component API Reference to ensure the settings propagate correctly in all use cases.

Thanks,

3

Hey @manish-sharma, thanks for the reply.

I do register my tokens correctly like so:

Builder.register("editor.settings", {
      styleStrictMode: true,
      designTokens: {
        colors: [
          { name: "Text Primary", value: "var(--color-text-primary, #E9EbF8)" },
          { name: "Text Secondary", value: "var(--color-text-secondary, #ADACB8)" },
          { name: "Text Tertiary", value: "var(--color-text-tertiary, #73738C)" },
          { name: "Link", value: "var(--color-link, #8489FF)" },
          { name: "Highlight", value: "var(--color-highlight, #DFFFC6)" },
        ],
        ...

The design tokens are picked up everywhere else, except there. It was always the case, but I remember at some point I had the ability to manually update the color swatches in this specific editor (which is better than nothing). I can no longer find this setting.

4

Hello @wareep,

I see that the design tokens are not applied to the color swatch in the rich text editor. Does editing the swatch work?

Screenshot 2024-09-20 at 7.33.50 PM
Screenshot 2024-09-20 at 7.33.50 PM2880×1418 218 KB

5

Hello @wareep,

We have not heard back from you. If you need any further assistance, please don’t hesitate to let us know—we’re always here to help!

Thanks,

6

Apologies, I got busy with other things.
But this is the option I can’t find… how do I edit the swatches?

7

Hello @wareep,

You can reference the following guide for step-by-step instructions on editing the default colors of the color swatches.

8

Hello @manish-sharma, thank you but I believe when I first edited the swatches I toggled the option “Restrict color picker to only these options” as I do not want our content editors to use custom values.
Therefore I do not have the “Custom color” option anymore which seems to be what you are using to access the swatch editor…

9

Hi @wareep,

I understand the issue you’re facing. I found a solution for editing the color swatches when the “Restrict color picker to only these options” setting is enabled. Please take a moment to review the Loom video below:

If this doesn’t resolve the problem, please let us know, and we’ll be happy to assist you further.

Best regards,

10

Hmm, I see. The issue is since (I believe) I have set strict mode to true for my design tokens, I don’t have the option in any color picker in the style tab to add custom colors.

I can probably workaround this by temporarily removing the strict mode, but it’s not very convenient…
Is there a feature request to sync the color swatches with the design tokens I could make perhaps?

11

Hello @wareep,

We are constantly working on improving design token features, and it would be great if you could submit a feature request at Builder.io Ideas.

Thanks,