mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
9aad9b7ed6
# Backport This will backport the following commits from `main` to `8.16`: - [[Vega] Fix highlight for HJSON (#208858)](https://github.com/elastic/kibana/pull/208858) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Marco Vettorello","email":"marco.vettorello@elastic.co"},"sourceCommit":{"committedDate":"2025-02-03T13:18:35Z","message":"[Vega] Fix highlight for HJSON (#208858)\n\n## Summary\r\n\r\nThis PR fixes the missing highlight theme for HJSON specs in Vega.\r\nThe issue https://github.com/elastic/kibana/issues/205711 was caused by\r\nhttps://github.com/elastic/kibana/pull/182348 that inadvertently\r\nspecified the code-editor package as sideEffect free. This cause the\r\ncompiler to exclude every import without exported and used methods.\r\nThis was the case for the code-editor that registered some language\r\nhighlighters in that way.\r\n\r\nThe solution adopted here is to mark the register_language.ts file as a\r\nfile with side effects, the alternative solution can be to register\r\nthese directly from within the code_editor component.\r\nA third option is to move these registration within the monaco package\r\nwhere other languages are also registered.\r\nI'd like to leave to @elastic/appex-sharedux the preference to followup\r\nwith a better fix for the future.\r\n\r\nI'd also like to have the opinion from @elastic/kibana-operations\r\nbecause the misconfigured package issue can be seen only in production\r\nand not in development mode. Is it possible that webpack doesn't apply\r\ntreeshaking when in development mode?\r\n\r\nfix https://github.com/elastic/kibana/issues/205711\r\nShould also fix the same issue but for TSVB Markdown\r\n\r\nThe fix was tested on CI by running at first only the CI FT with the\r\n`sideEffects:false` to verify the failure (see\r\n[build](https://buildkite.com/elastic/kibana-pull-request/builds/272375))\r\nand then with the fix specifying the actual file that contains side\r\neffects.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"7260564f6a9cd7da71a80e9bd57d836a0bea57c4","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:TSVB","release_note:fix","Feature:Vega","Team:Visualizations","backport:prev-major","v9.1.0"],"title":"[Vega] Fix highlight for HJSON","number":208858,"url":"https://github.com/elastic/kibana/pull/208858","mergeCommit":{"message":"[Vega] Fix highlight for HJSON (#208858)\n\n## Summary\r\n\r\nThis PR fixes the missing highlight theme for HJSON specs in Vega.\r\nThe issue https://github.com/elastic/kibana/issues/205711 was caused by\r\nhttps://github.com/elastic/kibana/pull/182348 that inadvertently\r\nspecified the code-editor package as sideEffect free. This cause the\r\ncompiler to exclude every import without exported and used methods.\r\nThis was the case for the code-editor that registered some language\r\nhighlighters in that way.\r\n\r\nThe solution adopted here is to mark the register_language.ts file as a\r\nfile with side effects, the alternative solution can be to register\r\nthese directly from within the code_editor component.\r\nA third option is to move these registration within the monaco package\r\nwhere other languages are also registered.\r\nI'd like to leave to @elastic/appex-sharedux the preference to followup\r\nwith a better fix for the future.\r\n\r\nI'd also like to have the opinion from @elastic/kibana-operations\r\nbecause the misconfigured package issue can be seen only in production\r\nand not in development mode. Is it possible that webpack doesn't apply\r\ntreeshaking when in development mode?\r\n\r\nfix https://github.com/elastic/kibana/issues/205711\r\nShould also fix the same issue but for TSVB Markdown\r\n\r\nThe fix was tested on CI by running at first only the CI FT with the\r\n`sideEffects:false` to verify the failure (see\r\n[build](https://buildkite.com/elastic/kibana-pull-request/builds/272375))\r\nand then with the fix specifying the actual file that contains side\r\neffects.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"7260564f6a9cd7da71a80e9bd57d836a0bea57c4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208858","number":208858,"mergeCommit":{"message":"[Vega] Fix highlight for HJSON (#208858)\n\n## Summary\r\n\r\nThis PR fixes the missing highlight theme for HJSON specs in Vega.\r\nThe issue https://github.com/elastic/kibana/issues/205711 was caused by\r\nhttps://github.com/elastic/kibana/pull/182348 that inadvertently\r\nspecified the code-editor package as sideEffect free. This cause the\r\ncompiler to exclude every import without exported and used methods.\r\nThis was the case for the code-editor that registered some language\r\nhighlighters in that way.\r\n\r\nThe solution adopted here is to mark the register_language.ts file as a\r\nfile with side effects, the alternative solution can be to register\r\nthese directly from within the code_editor component.\r\nA third option is to move these registration within the monaco package\r\nwhere other languages are also registered.\r\nI'd like to leave to @elastic/appex-sharedux the preference to followup\r\nwith a better fix for the future.\r\n\r\nI'd also like to have the opinion from @elastic/kibana-operations\r\nbecause the misconfigured package issue can be seen only in production\r\nand not in development mode. Is it possible that webpack doesn't apply\r\ntreeshaking when in development mode?\r\n\r\nfix https://github.com/elastic/kibana/issues/205711\r\nShould also fix the same issue but for TSVB Markdown\r\n\r\nThe fix was tested on CI by running at first only the CI FT with the\r\n`sideEffects:false` to verify the failure (see\r\n[build](https://buildkite.com/elastic/kibana-pull-request/builds/272375))\r\nand then with the fix specifying the actual file that contains side\r\neffects.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"7260564f6a9cd7da71a80e9bd57d836a0bea57c4"}}]}] BACKPORT--> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> |
||
|---|---|---|
| .. | ||
| __snapshots__ | ||
| languages | ||
| mocks | ||
| BUILD.bazel | ||
| code_editor.stories.tsx | ||
| code_editor.test.tsx | ||
| code_editor.tsx | ||
| editor.styles.ts | ||
| index.tsx | ||
| jest.config.js | ||
| kibana.jsonc | ||
| package.json | ||
| placeholder_widget.ts | ||
| README.mdx | ||
| register_languages.ts | ||
| remeasure_fonts.ts | ||
| tsconfig.json | ||
--- 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