I am developing a tool to help clients auto generate a large document. Each component asks for an input that then gets used to render a bit of text in a number of text components that are in my "Preview" pane.
What I would like to do is use the tag to highlight the portion of the text that is being affected when a component is in focus.
The only way I can figure how to do this is to create a variable (e.g., varComponentInFocus) and then create two event handlers (on Focus, set varComponentInFocus to {{self.id}} and on Blur, reset the variable). Then in my text element, I wrap the tag in a conditional statement.
It works, but I have over 100 fields. Is there any more efficient way to do this?
Here's an example of what I'm trying to accomplish (Project Information is a container holding a form and Section Preview is a container with multiple text display components):
