Design Tags in Color Picker

[joejemmely]

I'm trying to use Design Tags to replace colors on button components already in place on a template. Since the property editor doesn't allow non-hex value, I tried replacing the color with a design tag directly in the JSON. However, design tags are not replaced by the value passed in the options.

[adeelraza]

@joejemmely can you show an example of how you tried to use the design tag for color picker?

[joejemmely]

@adeelraza here's my template:

{
  type: "button",
  values: {
    buttonColors: {
      color: "#FFF",
      backgroundColor: "[[{ primaryColor }]]",
      hoverColor: "#005c99"
    },
    …

I'm passing the designTags to the editor with the options prop like this:

<Editor
  ref={editor => (this.editor = editor)}
  options={{
    designTags: {
      primaryColor: "rgba(0,153,255,1)" //HEX value doesn't work either
    }
  }}
/>

[eduardoschneider]

I'm having the exactly same issue, is there any solution for this?

"backgroundColor": "[[color]]", doesnt work
"backgroundColor": "[[{color}]]", doesnt work

All the other replacements are ok.

[Arsenalist]

Is this possible or not? Doesn't look like it is as I'm having the same issue.

[Arsenalist]

The workaround I'm using is editing the editorContent directly when loading it. Since it's just a JSON object you can do:

const editorContent = JSON.parse(template.editorContent)
editorContent.body.values.backgroundColor = '#ff00ff'
editor.loadDesign(editorContent)