jsanz
October 24, 2023, 4:42pm
2
Hi, I'm pretty sure what you've noticed is the migration from the old editor based in Ace to the new one based in Monaco .
elastic:main ← sabarasaba:logstash-migrate_code_editor_to_monaco
opened 09:29AM - 28 Jul 23 UTC
Fixes https://github.com/elastic/kibana/issues/155842
## Summary
This PR r… emoves the dependency it has on ace editor in favour of Monaco. Note that `CodeEditor` is a kibana wide abstraction built on top of Monaco and located at `@kbn/kibana-react-plugin/public`.
**How to test**
1. Start elasticsearch with `yarn es snapshot --license=trial -E path.repo=/tmp/es-backups` and kibana with `yarn start`
2. Navigate to `Stack Management` -> `Logstash` -> `Create Pipeline`
3. Verify that the editor is Monaco
<details>
<summary>Screenshots</summary>
// Before
// After
</details>
More context about this long process of migrating from one to the other here
opened 11:30AM - 13 Jul 20 UTC
closed 07:10PM - 27 Jul 20 UTC
discuss
Team:Platform-Design
I am opening this issue in the Kibana repository (not EUI), since it also contai… ns 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 https://github.com/elastic/eui/issues/1208). We ran into the same issue in the currently WIP [Vega inspector](https://github.com/elastic/kibana/pull/70941) 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 (https://github.com/elastic/kibana/issues/59949) or no line numbers (https://github.com/elastic/kibana/issues/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