[Monaco] Add JSON syntax support to the Monaco editor

[dokmic]

Summary

Resolves #107733 and #138599.

The PR adds JSON syntax support to the monaco editor.
A custom schema can be defined per editor instance using the editorDidMount life-cycle hook in the CodeEditor component.

<CodeEditor
  languageId="json"
  editorDidMount={(editor: monaco.editor.IStandaloneCodeEditor) => {
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [
        {
          uri: editor.getModel()?.uri.toString() ?? '',
          fileMatch: ['*'],
          schema: {
            type: 'object',
            properties: {
              version: {
                enum: ['v1', 'v2'],
              },
            },
          },
        },
      ],
    });
  }}
/>

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

[jloleysens]

This is awesome! I'm approving, but it would be nice to test this out somewhere. Perhaps as a separate issue we can create a storybook of the monaco editor with our different languages.

[dokmic]

Bumped the monaco-editor package to 0.24.0 to resolve microsoft/monaco-editor#2460.

[rshen91]

These changes LGTM - can you add a story example for the kibana_react storybook? I'm thinking something like

add(
    'json support',
    () => (
      <div>
      <CodeEditor
        languageId="json"
        editorDidMount={(editor: monaco.editor.IStandaloneCodeEditor) => {
          monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
            validate: true,
            schemas: [
              {
                uri: editor.getModel()?.uri.toString() ?? '',
                fileMatch: ['*'],
                schema: {
                  type: 'object',
                  properties: {
                    version: {
                      enum: ['v1', 'v2'],
                    },
                  },
                },
              },
            ],
          });
        }}
        height={250}
        value="{}"
        onChange={action('onChange')}
      />
    </div>
  ),
  {
    info: {
      text: 'JSON language support',
    },
  })

?
Thanks

[dej611]

@elastic/kibana-vis-editors checked Lens formula and works fine 👍

[ThomThomson]

code editor changes LGTM! Code only review

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 631d82f
• Storybooks Preview

Failed CI Steps

• FTR Configs #12

Test Failures

• [job] [logs] FTR Configs #12 / Actions and Triggers app create alert "after each" hook for "should create an alert"
• [job] [logs] FTR Configs #12 / Actions and Triggers app create alert should create an alert

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
kibanaReact	208.1KB	208.1KB	+23.0B
lens	1.3MB	1.3MB	+61.0B
presentationUtil	130.5KB	130.6KB	+86.0B
total			+170.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
kbnUiSharedDeps-css	437.3KB	438.5KB	+1.1KB
kbnUiSharedDeps-fonts	61.3KB	69.3KB	+8.0KB
kbnUiSharedDeps-srcJs	3.8MB	4.1MB	⚠️ +299.2KB
total			+308.3KB

Unknown metric groups

ESLint disabled in files

id	before	after	diff
osquery	1	2	+1

ESLint disabled line counts

id	before	after	diff
@kbn/monaco	2	3	+1
enterpriseSearch	19	21	+2
fleet	57	63	+6
osquery	103	108	+5
securitySolution	439	443	+4
total			+18

Total ESLint disabled count

id	before	after	diff
@kbn/monaco	6	7	+1
enterpriseSearch	20	22	+2
fleet	65	71	+6
osquery	104	110	+6
securitySolution	516	520	+4
total			+19

History

• 💚 Build #83958 succeeded e25b19700fc3d795a67eea45ca11a428a2e9b1d5
• 💚 Build #83570 succeeded 03c8754dcf15d682ba3c0a8bb15fc8148973fc06
• 💔 Build #83464 failed ee6e54d4e6c1491a5afca5dec9557a6247bd6574
• 💚 Build #83078 succeeded 7643c5abe6a043e9ddd82e07269386fbef773324
• 💔 Build #82805 failed 8679976705e3b86a2526dd5be0d42e6723c91be3
• 💔 Build #82624 failed 589734f5e7ee878f291c92f532387fe16d94eaca

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream