[Discuss] When to use EuiCodeBlock, EuiCodeEditor and CodeEditor (from react_utils, Monaco)

[timroes]

I am opening this issue in the Kibana repository (not EUI), since it also contains one component that lives (currently) purely in the Kibana repository. I have the feeling we currently don't have a good guideline when to use EuiCodeBlock, EuiCodeEditor (under the hood ACE) and CodeEditor (from the react_utils plugin, under the hood Monaco).

We've been using EuiCodeBlock very often when purely showing some Code (e.g. JSON from requests/responses). We've seen significant performance issues with this component, that it freezes the browser completely when trying to render some larger JSON (see also elastic/eui#1208). We ran into the same issue in the currently WIP Vega inspector when trying to render the Vega spec. Despite performance (which can be addressed), the EuiCodeBlock also is very static and offers not much features, e.g. no collapsing of JSON (#59949) or no line numbers (#69614), which are missed by users.

EuiCodeEditor is using ACE under the hood, and I think we might be a bit better of nowadays with Monaco (given the larger community with VSCode around it, and thus hopefully better accessibility and extensibility in the long run).

We now switched the Vega inspector to use CodeEditor, but I still think it would be beneficial if we could setup some general guidelines around the usage of those 3 components.

I would suggest the following and would be interested for feedback (especially from the design team):

• If you just want to represent a more or less static code snippet (max length around 15 lines) use EuiCodeBlock.
• If you need capabilities to edit, or want to print longer code (or potentially don't know how long, because you're printing JSON from APIs), use CodeEditor.
• Don't use EuiCodeEditor for new places more, and instead favor CodeEditor.

cc @alexwizp @elastic/kibana-design @kertal

[kertal]

Will have a look at the CodeEditor for Discover Doc View

[ryankeairns]

Posting for cross-reference to EUI: elastic/eui#499 (comment)

[chandlerprall]

Design agrees with your bulleted statements, and we've been actively promoting use of Monaco over EuiCodeEditor.

As a note, EuiCodeBlock's performance issues is almost entirely caused by the injected DOM nodes used for highlighting causing large scale page reflows.

[timroes]

If we can have this as an agreement, @chandlerprall do you think it's worth having those "usage hints" maybe in the EUI documentation on the respective components?

[chandlerprall]

@timroes I've created an EUI issue to add this guidance