Don't highlight matching parentheses when focus is not on editor

[nchammas]

This is a minor UX suggestion, but it's bugging me enough that I felt compelled to write this up. 😄

When the focus is not on the editor, the editor still highlights matching parentheses if the cursor happens to have been placed on the closing parenthesis before the focus was moved out of the editor.

This can be distracting because the highlight is in bright red. It draws the eye even though the user's focus is no longer on the editor. The color and brightness almost suggest there is some kind of problem that needs attention.

You can see this in play on the docs for this component:

Even though your cursor is not in either editor, both editors are really trying to draw your attention to the matching parentheses.

I think this behavior should only be active when the focus is on/within a given editor.

[bouzidanas]

This is a good suggestion!

[bouzidanas]

Since this is going to require adding a new feature and configuration option, it will take some time before it will be made available to everyone.

In the meanwhile, as a temporary solution, you can add the following css to each code editor:

.streamlit_code-editor .ace_focus .ace_marker-layer .ace_bracket {
     opacity: 1;
} 
.streamlit_code-editor .ace_marker-layer .ace_bracket {
  opacity: 0; 
}

See Advanced customization > Style and CSS in the docs for details on how to add custom css to the code editor

[nchammas]

Thank you for the workaround. I had to tweak it slightly to get it to work (which I figured out from the docs):

code_editor(
    ...
    component_props={
        "css": (
            """
            &.streamlit_code-editor .ace_focus .ace_marker-layer .ace_bracket {
                opacity: 1;
            }
            &.streamlit_code-editor .ace_marker-layer .ace_bracket {
                opacity: 0;
            }
            """
        ),
    }
)

this is going to require adding a new feature and configuration option

I am biased, of course, but I think it's reasonable to make this style tweak the default and not add any new features or configs.

Because the styling is user-modifiable via component_props, people can adjust it if they want. And if it seems like users are often needing to dive into the details of component_props, only then would I consider simplifying their lives with a new option.

[bouzidanas]

You are the only one to have requested this so I don't know if I will make it default. It has the function of letting people know where and what they were last editing. Other indicators like cursor are dimmed. That might be what I end up doing as default - dim the squares around the brackets.