[Vega] Replace EUICodeEditor with Monaco (elastic#116041)

Closes: elastic#106967

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/kibana_react/public/code_editor/languages/constants.ts

@@ -10,3 +10,4 @@ export { LANG as CssLang } from './css/constants';
 export { LANG as MarkdownLang } from './markdown/constants';
 export { LANG as YamlLang } from './yaml/constants';
 export { LANG as HandlebarsLang } from './handlebars/constants';
+export { LANG as HJsonLang } from './hjson/constants';

src/plugins/kibana_react/public/code_editor/languages/hjson/constants.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const LANG = 'hjson';

src/plugins/kibana_react/public/code_editor/languages/hjson/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { LangModuleType } from '@kbn/monaco';
+import { languageConfiguration, lexerRules } from './language';
+import { LANG } from './constants';
+
+export const Lang: LangModuleType = { ID: LANG, languageConfiguration, lexerRules };

src/plugins/kibana_react/public/code_editor/languages/hjson/language.ts

@@ -0,0 +1,90 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { monaco } from '@kbn/monaco';
+
+export const languageConfiguration: monaco.languages.LanguageConfiguration = {
+ brackets: [
+ ['{', '}'],
+ ['[', ']'],
+ ],
+ autoClosingPairs: [
+ { open: '{', close: '}' },
+ { open: '[', close: ']' },
+ { open: '"', close: '"', notIn: ['string'] },
+ ],
+ comments: {
+ lineComment: '//',
+ blockComment: ['/*', '*/'],
+ },
+};
+
+export const lexerRules: monaco.languages.IMonarchLanguage = {
+ defaultToken: '',
+ tokenPostfix: '',
+ escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+ digits: /-?(?:0|[1-9]\d*)(?:(?:\.\d+)?(?:[eE][+-]?\d+)?)?/,
+ symbols: /[,:]+/,
+ tokenizer: {
+ root: [
+ [/(@digits)n?/, 'number'],
+ [/(@symbols)n?/, 'delimiter'],
+
+ { include: '@keyword' },
+ { include: '@url' },
+ { include: '@whitespace' },
+ { include: '@brackets' },
+ { include: '@keyName' },
+ { include: '@string' },
+ ],
+
+ keyword: [[/(?:true|false|null)\b/, 'keyword']],
+
+ url: [
+ [
+ /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/,
+ 'string',
+ ],
+ ],
+
+ keyName: [[/(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*(?=:)/, 'variable']],
+
+ brackets: [[/{/, '@push'], [/}/, '@pop'], [/[[(]/], [/[\])]/]],
+
+ whitespace: [
+ [/[ \t\r\n]+/, ''],
+ [/\/\*/, 'comment', '@comment'],
+ [/\/\/.*$/, 'comment'],
+ ],
+
+ comment: [
+ [/[^\/*]+/, 'comment'],
+ [/\*\//, 'comment', '@pop'],
+ [/[\/*]/, 'comment'],
+ ],
+
+ string: [
+ [/(?:[^,\{\[\}\]\s]+|"(?:[^"\\]|\\.)*")\s*/, 'string'],
+ [/"""/, 'string', '@stringLiteral'],
+ [/"/, 'string', '@stringDouble'],
+ ],
+
+ stringDouble: [
+ [/[^\\"]+/, 'string'],
+ [/@escapes/, 'string.escape'],
+ [/\\./, 'string.escape.invalid'],
+ [/"/, 'string', '@pop'],
+ ],
+
+ stringLiteral: [
+ [/"""/, 'string', '@pop'],
+ [/\\""""/, 'string', '@pop'],
+ [/./, 'string'],
+ ],
+ },
+} as monaco.languages.IMonarchLanguage;

src/plugins/kibana_react/public/code_editor/languages/index.ts

@@ -10,5 +10,6 @@ import { Lang as CssLang } from './css';
 import { Lang as HandlebarsLang } from './handlebars';
 import { Lang as MarkdownLang } from './markdown';
 import { Lang as YamlLang } from './yaml';
+import { Lang as HJson } from './hjson';
 
-export { CssLang, HandlebarsLang, MarkdownLang, YamlLang };
+export { CssLang, HandlebarsLang, MarkdownLang, YamlLang, HJson };

src/plugins/kibana_react/public/code_editor/register_languages.ts

@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 import { registerLanguage } from '@kbn/monaco';
-import { CssLang, HandlebarsLang, MarkdownLang, YamlLang } from './languages';
+import { CssLang, HandlebarsLang, MarkdownLang, YamlLang, HJson } from './languages';
 
 registerLanguage(CssLang);
 registerLanguage(HandlebarsLang);
 registerLanguage(MarkdownLang);
 registerLanguage(YamlLang);
+registerLanguage(HJson);

src/plugins/vis_types/vega/kibana.json

@@ -5,7 +5,7 @@
  "ui": true,
  "requiredPlugins": ["data", "visualizations", "mapsEms", "expressions", "inspector"],
  "optionalPlugins": ["home","usageCollection"],
- "requiredBundles": ["kibanaUtils", "kibanaReact", "visDefaultEditor", "esUiShared"],
+ "requiredBundles": ["kibanaUtils", "kibanaReact", "visDefaultEditor"],
  "owner": {
  "name": "Vis Editors",
  "githubTeam": "kibana-vis-editors"

src/plugins/vis_types/vega/public/components/vega_editor.scss

@@ -1,18 +1,28 @@
 .visEditor--vega {
  .visEditorSidebar__config {
  padding: 0;
+ display: flex;
+ flex-direction: row;
+ overflow: hidden;
+
+ min-height: $euiSize * 15;
+
+ @include euiBreakpoint('xs', 's', 'm') {
+ max-height: $euiSize * 15;
+ }
  }
 }
 
 .vgaEditor {
- @include euiBreakpoint('xs', 's', 'm') {
- @include euiScrollBar;
- max-height: $euiSize * 15;
- overflow-y: auto;
+ width: 100%;
+ flex-grow: 1;
+
+ .kibanaCodeEditor {
+ width: 100%;
  }
 }
 
-.vgaEditor__aceEditorActions {
+.vgaEditor__editorActions {
  position: absolute;
  z-index: $euiZLevel1;
  top: $euiSizeS;

src/plugins/vis_types/vega/public/components/vega_vis_editor.tsx

@@ -6,43 +6,35 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback } from 'react';
-import compactStringify from 'json-stringify-pretty-compact';
+import { XJsonLang } from '@kbn/monaco';
+import useMount from 'react-use/lib/useMount';
 import hjson from 'hjson';
-import 'brace/mode/hjson';
+
+import React, { useCallback, useState } from 'react';
+import compactStringify from 'json-stringify-pretty-compact';
 import { i18n } from '@kbn/i18n';
 
 import { VisEditorOptionsProps } from 'src/plugins/visualizations/public';
-import { EuiCodeEditor } from '../../../../es_ui_shared/public';
+import { CodeEditor, HJsonLang } from '../../../../kibana_react/public';
 import { getNotifications } from '../services';
 import { VisParams } from '../vega_fn';
 import { VegaHelpMenu } from './vega_help_menu';
 import { VegaActionsMenu } from './vega_actions_menu';
 
 import './vega_editor.scss';
 
-const aceOptions = {
- maxLines: Infinity,
- highlightActiveLine: false,
- showPrintMargin: false,
- tabSize: 2,
- useSoftTabs: true,
- wrap: true,
-};
-
-const hjsonStringifyOptions = {
- bracesSameLine: true,
- keepWsc: true,
-};
-
 function format(
  value: string,
  stringify: typeof hjson.stringify | typeof compactStringify,
  options?: any
 ) {
  try {
  const spec = hjson.parse(value, { legacyRoot: false, keepWsc: true });
- return stringify(spec, options);
+
+ return {
+ value: stringify(spec, options),
+ isValid: true,
+ };
  } catch (err) {
  // This is a common case - user tries to format an invalid HJSON text
  getNotifications().toasts.addError(err, {
@@ -51,44 +43,82 @@ function format(
  }),
  });
 
- return value;
+ return { value, isValid: false };
  }
 }
 
 function VegaVisEditor({ stateParams, setValue }: VisEditorOptionsProps<VisParams>) {
- const onChange = useCallback(
- (value: string) => {
+ const [languageId, setLanguageId] = useState<string>();
+
+ useMount(() => {
+ let specLang = XJsonLang.ID;
+ try {
+ JSON.parse(stateParams.spec);
+ } catch {
+ specLang = HJsonLang;
+ }
+ setLanguageId(specLang);
+ });
+
+ const setSpec = useCallback(
+ (value: string, specLang?: string) => {
  setValue('spec', value);
+ if (specLang) {
+ setLanguageId(specLang);
+ }
  },
  [setValue]
  );
 
- const formatJson = useCallback(
- () => setValue('spec', format(stateParams.spec, compactStringify)),
- [setValue, stateParams.spec]
- );
+ const onChange = useCallback((value: string) => setSpec(value), [setSpec]);
 
- const formatHJson = useCallback(
- () => setValue('spec', format(stateParams.spec, hjson.stringify, hjsonStringifyOptions)),
- [setValue, stateParams.spec]
- );
+ const formatJson = useCallback(() => {
+ const { value, isValid } = format(stateParams.spec, compactStringify);
+
+ if (isValid) {
+ setSpec(value, XJsonLang.ID);
+ }
+ }, [setSpec, stateParams.spec]);
+
+ const formatHJson = useCallback(() => {
+ const { value, isValid } = format(stateParams.spec, hjson.stringify, {
+ bracesSameLine: true,
+ keepWsc: true,
+ });
+
+ if (isValid) {
+ setSpec(value, HJsonLang);
+ }
+ }, [setSpec, stateParams.spec]);
+
+ if (!languageId) {
+ return null;
+ }
 
  return (
- <div className="vgaEditor">
- <EuiCodeEditor
- data-test-subj="vega-editor"
- mode="hjson"
- theme="textmate"
- width="100%"
- height="auto"
- onChange={onChange}
- value={stateParams.spec}
- setOptions={aceOptions}
- />
- <div className="vgaEditor__aceEditorActions">
+ <div className="vgaEditor" data-test-subj="vega-editor">
+ <div className="vgaEditor__editorActions">
  <VegaHelpMenu />
  <VegaActionsMenu formatHJson={formatHJson} formatJson={formatJson} />
  </div>
+ <CodeEditor
+ width="100%"
+ height="100%"
+ languageId={languageId}
+ value={stateParams.spec}
+ onChange={onChange}
+ options={{
+ lineNumbers: 'on',
+ fontSize: 12,
+ minimap: {
+ enabled: false,
+ },
+ folding: true,
+ wordWrap: 'on',
+ wrappingIndent: 'indent',
+ automaticLayout: true,
+ }}
+ />
  </div>
  );
 }