github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -04:00
Code Issues Projects Releases Packages Wiki Activity
kibana/packages/shared-ux/code_editor/impl
History
Exact
Clint Andrew Hall 477505a2dd
[context] Unify Contexts, deprecate others (#161914) 
> Pre-req for https://github.com/elastic/kibana/issues/56406

## Summary

We've had a long-standing problem in Kibana around our use of React
context, particularly with EUI and i18n. There hasn't existed an
idempotent context structure, and that has lead to a lot of unexpected
results, (e.g. missing translations, inconsistent dark mode, excess
context providers, etc).

The biggest change coming from this PR is knowing exactly which provider
to use in a particular use case. This means, for example,
`ReactDOM.render` calls won't be missing `i18n` or `theme` due to a
missing context. It also allows consumers to use `darkMode` without
having to read the `uiSetting` themselves, instead allowing the context
to do it for them.

We also haven't been honoring the intended [`EuiProvider`
API](https://eui.elastic.co/#/utilities/provider#theming-and-global-styles)...
in some cases we've been creating and re-creating the Emotion caches,
often by copy/paste of the cache code. We've also been nesting
`EuiThemeProvider` contexts unnecessarily-- thinking we need to render a
theme provider in an isolated component-- which renders an additional
`span` element into the DOM.

This PR attempts to address this inconsistency by creating a set of
context providers divided by use case:


![diagram](e01c6296-1b7a-4639-ae96-946866950efe)

### `KibanaRootContextProvider`
A root context provider for Kibana. This is the top level context
provider that wraps the entire application. It is responsible for
initializing all of the other contexts and providing them to the
application. It's provided as a package for specific use cases, (e.g.
the `RenderingService`, cases where we replace the entire page content,
Storybook, testing, etc), but not intended for plugins.

### `KibanaRenderContextProvider`
A render context provider for Kibana. This context is designed to be
used with ad-hoc renders of React components, (usually with
`ReactDOM.render`).

### `KibanaThemeContextProvider`
A theme context provider for Kibana. A corollary to EUI's
`EuiThemeProvider`, it uses Kibana services to ensure the EUI Theme is
customized correctly.

### (deprecated) `KibanaStyledComponentsThemeProvider`
A styled components theme provider for Kibana. This package is supplied
for compatibility with legacy code, but should not be used in new code.

## Deprecation strategy
This PR does *not* change any use of context by consumers. It maps the
existing contexts in `kibanaReact` to the new contexts, (along with the
loose API). This means that we won't have completely fixed all of our
dark mode issues yet. But this is necessary to keep this PR focused on
the change, rather than drawing in a lot of teams to review individual
uses.

We should, however, see an immediate performance improvement in the UI
from the reduction in `EuiProvider` calls.

## Open questions
- [ ] Does it make sense to expose a `useTheme` hook from
`@kbn/react-kibana-context-theme` to replace `useEuiTheme`?

## Next steps
- [ ] Update deprecated uses to new contexts.
- [ ] Audit and update calls to `ReactDOM.render`.
- [ ] Add ESLint rule to warn for use of EUI contexts.
- [ ] Delete code from `kibanaReact`.
2023-07-28 09:30:08 -07:00
..
__snapshots__ [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
languages [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.stories.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.test.helpers.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.test.tsx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
code_editor.tsx [context] Unify Contexts, deprecate others (#161914) 2023-07-28 09:30:08 -07:00
editor.styles.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
index.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
jest.config.js [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
kibana.jsonc fix codeowners 2023-02-01 17:55:44 -06:00
package.json [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
placeholder_widget.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
README.mdx [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
register_languages.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
remeasure_fonts.ts [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00
tsconfig.json [Shared UX] Migrate code editor from kibana_react plugin to shared_ux package (#148550) 2023-01-30 15:13:38 -07:00

README.mdx 

---
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