EuiCodeEditor XML parse errors

[asteriscos]

Introduction

Elastic UI Code editor renders XML parsing errors:

• when a user escapes < characters
• The error line number is wrong

Investigation

After debugging the EuiCodeEditor Wazuh implementation, we realized this error is produced regardless of how the component is implemented. EuiCodeEditor wraps a react Ace editor:
https://github.com/elastic/eui/blob/v29.3.2/src/components/code_editor/code_editor.tsx#L22

We checked if we could replicate the issue in their code editor online demo. We could replicate both the XML escaped < character error and the issue indicating a wrong error line number.

Additional information

Elastic UI component library has already deprecated the EuiCodeEditor component in version 41.0.0. Not only is no longer supported, but also since Kibana 8.1.0 uses "@elastic/eui": "46.1.1" and we cannot be compatible as long as we use EuiCodeEditor.

Since the component is deprecated, Elastic UI uses Microsoft Monaco code editor and recommends using their implementation @kbn/monaco.
elastic/eui#4683

On the other hand, Opensearch Dashboard 2.3 uses their fork of the Elastic UI repository V34.0.0 which still has EuiCodeEditor.
https://github.com/opensearch-project/OpenSearch-Dashboards/blob/2.3.0/package.json#L111

Strategy

In order to be compatible with both platforms, it seems our own implementation of a code editor is the most logical path. Also, Elastic UI has already researched how to solve its code editor issues and made the choice to replace it with Microsoft Monaco editor. This makes Microsoft Monaco editor a good candidate to make our own implementations.

Pros: Compatible with all platforms regardless of the UI repository and version.
Cons: Possible new bugs and code to maintain.

Related issues:

• Element parse error on file 0295-sonicwall_decoders.xml #3659
• Error when trying to add a new decoder with an escaped < character #3504
• Enable tag completion for Ruleset #4285

[Desvelao]

The code editor is using the highlighting for xml syntax. The current definition of rules or decoders is using an xml-based language. This causes escaping < character to display an error. This error is managed internally by the code editor related to the selected language xml.

@yenienserrano figured out OpenSearch has a customized editor based in Monaco #5039 (comment). He saw the customized editor only has a subset of languages. Moreover, we can add the language modifying the customized package (it would be possible in Wazuh dashboard). Another approach commented on by @yenienserrano would be adding our own Monaco editor, but he commented on he had some problems when using due to the imports conflicting with the customized by OpenSearch Dashboards.

[gdiazlo]

We will revisit this in the future as OpenSearch is changing the editor, and we're changing the syntax of the decoders and rules.