kibana/packages/shared-ux/code_editor/impl
Anton Dosov 4f3bc35472
[CodeEditor] Explicitly call the latest props.onChange (#176296)
## Summary

fix https://github.com/elastic/kibana/issues/175684

Refer to the issue https://github.com/elastic/kibana/issues/175684 for
the problem and reproduction


I tested that this fixes the issue using the story from the reproduction
https://github.com/elastic/kibana/pull/175670 and the URL drilldown's
placeholder issue explained in
https://github.com/elastic/kibana/issues/175684
2024-02-07 12:45:19 +01:00
..
__snapshots__ Update Kibana code editor dependencies (#171720) 2024-01-25 10:30:02 +01:00
languages Add ResizeObserver polyfill globally in Jest tests (#173772) 2024-01-26 08:58:04 -07:00
mocks Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
BUILD.bazel [CodeEditor/UrlDrilldown] Add fitToContent support, autoresize the url template editor (#175561) 2024-02-06 15:38:50 +01:00
code_editor.stories.tsx [CodeEditor/UrlDrilldown] Add fitToContent support, autoresize the url template editor (#175561) 2024-02-06 15:38:50 +01:00
code_editor.test.tsx Add ResizeObserver polyfill globally in Jest tests (#173772) 2024-01-26 08:58:04 -07:00
code_editor.tsx [CodeEditor] Explicitly call the latest props.onChange (#176296) 2024-02-07 12:45:19 +01:00
editor.styles.ts Update Kibana code editor dependencies (#171720) 2024-01-25 10:30:02 +01:00
index.tsx Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
jest.config.js Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
kibana.jsonc Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
package.json Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
placeholder_widget.ts Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
README.mdx Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
register_languages.ts Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
remeasure_fonts.ts Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00
tsconfig.json Remove legacy kibana react code editor (#171047) 2024-01-05 14:35:09 +01:00

---
id: sharedUX/Components/CodeEditor
slug: /shared-ux/components/code-editor
title: Code Editor
description: A code editor to display code and edit code in Kibana.
tags: ['shared-ux', 'component']
date: 2022-12-05
---

## Description

This component is an abstraction of the [Monaco Code Editor](https://microsoft.github.io/monaco-editor/) (and the [React Monaco Editor component](https://github.com/react-monaco-editor/react-monaco-editor)). This component still allows access to the other Monaco features.

## Usage

This editor component allows easy access to:
* [Syntax highlighting (including custom language highlighting)](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages)
* [Suggestion/autocompletion widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-completion-provider-example)
* Function signature widget 
* [Hover widget](https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-hover-provider-example)

The Monaco editor doesn't automatically resize the editor area on window or container resize so this component includes a [resize detector](https://github.com/maslianok/react-resize-detector) to cause the Monaco editor to re-layout and adjust its size when the window or container size changes

## API