Variable Background Colors

[jolanglinais]

Is your feature request related to a problem? Please describe.
Variables should have customizable background colors, as well as only having colors in lockText mode.

Describe the solution you'd like
Allow for props to dictate the color of the variables, and only display this when lockText is true.

Describe alternatives you've considered
Open to input.

Additional context
Referenced in accordproject/markdown-editor#124

[gsilvamartin]

Please assign this to me.

[jolanglinais]

Opening this back up after 6 days stale. @gsilvamartin let me know if you're still working on it and I'll reassign.

[mbtamuli]

@gsilvamartin are you still working on this?

@irmerk Can I take a shot at this?

[mbtamuli]

@irmerk I am a little confused by this issue.

Variables should have customizable background colors, as well as only having colors in lockText mode.

1. So here, does Variables mean the variables in the template as described here https://docs.accordproject.org/docs/spec-template.html#grammar?

2. I can see example of variable usage here - https://studio.accordproject.org/. How can I run this locally?

[jolanglinais]

The yellow highlighted portions in cicero-ui locally here:

These are generated from the markdown-transform, some parts to refer to:

• slateToCiceroMarkDom
• ToSlateVisitor
• FromCiceroVisitor

Though that could potentially be overkill because I believe Slate is the one adding the yellow highlighting annotation, which will be in this repo. @dselman any thoughts?

You'll want to run this locally with cicero-ui linked through npm link

[jolanglinais]

@mbtamuli any progress on this?

[mbtamuli]

I wasn't able to work on this. You can unassign me for now.

[elit-altum]

Can I take a shot with this ?

[jolanglinais]

@elit-altum Yes but I believe this may need to be moved to cicero-ui, which is where variables are defined and used. I'll transfer it there and assign you.

[elit-altum]

@irmerk Could you tell me if there is any prop which can be accessed by the .variable class to indicate if the lockText is true or false ?

[jolanglinais]

Not sure I understand the question completely, but you could find lockText in this function, probably off the editor.

[elit-altum]

@irmerk I have made the backgroundColor property responsive to editor.props.lockText. It looks something like this :

Contrast of yellow : blue is 9.55

Should I proceed to make a PR?

[jolanglinais]

Yes that works, we can provide more feedback then!

[elit-altum]

Yes that works, we can provide more feedback then!

@irmerk Please review!
#316

[a4aditya]

This Issue should be Closed 👍

[jolanglinais]

Once #316 is merged this will be closed.