diff --git a/packages/kbn-monaco/src/xjson/grammar.ts b/packages/kbn-monaco/src/xjson/grammar.ts index fbd7b3d319c1d..e6599837dbb2e 100644 --- a/packages/kbn-monaco/src/xjson/grammar.ts +++ b/packages/kbn-monaco/src/xjson/grammar.ts @@ -22,6 +22,19 @@ export enum AnnoTypes { warning = 'warning', } +export type Parser = ReturnType; + +export interface Annotation { + name?: string; + type: AnnoTypes; + text: string; + at: number; +} + +export interface ParseResult { + annotations: Annotation[]; +} + /* eslint-disable */ export const createParser = () => { diff --git a/packages/kbn-monaco/src/xjson/index.ts b/packages/kbn-monaco/src/xjson/index.ts index 35fd35887bc56..8a4644a3792d2 100644 --- a/packages/kbn-monaco/src/xjson/index.ts +++ b/packages/kbn-monaco/src/xjson/index.ts @@ -17,8 +17,10 @@ * under the License. */ -import { registerGrammarChecker } from './language'; - +/** + * This import registers the XJSON monaco language contribution + */ +import './language'; import { ID } from './constants'; -export const XJsonLang = { registerGrammarChecker, ID }; +export const XJsonLang = { ID }; diff --git a/packages/kbn-monaco/src/xjson/language.ts b/packages/kbn-monaco/src/xjson/language.ts index 54b7004fecd8e..4ae7f2402ed2f 100644 --- a/packages/kbn-monaco/src/xjson/language.ts +++ b/packages/kbn-monaco/src/xjson/language.ts @@ -32,13 +32,16 @@ const wps = new WorkerProxyService(); registerLexerRules(monaco); // In future we will need to make this map languages to workers using "id" and/or "label" values -// that get passed in. +// that get passed in. Also this should not live inside the "xjson" dir directly. We can update this +// once we have another worker. // @ts-ignore window.MonacoEnvironment = { - getWorker: (id: any, label: any) => { - // In kibana we will probably build this once and then load with raw-loader - const blob = new Blob([workerSrc], { type: 'application/javascript' }); - return new Worker(URL.createObjectURL(blob)); + getWorker: (module: string, languageId: string) => { + if (languageId === ID) { + // In kibana we will probably build this once and then load with raw-loader + const blob = new Blob([workerSrc], { type: 'application/javascript' }); + return new Worker(URL.createObjectURL(blob)); + } }, }; @@ -47,15 +50,19 @@ monaco.languages.onLanguage(ID, async () => { }); const OWNER = 'XJSON_GRAMMAR_CHECKER'; -export const registerGrammarChecker = (editor: monaco.editor.IEditor) => { + +export const registerGrammarChecker = () => { const allDisposables: monaco.IDisposable[] = []; - const updateAnnos = async () => { - const { annotations } = await wps.getAnnos(); - const model = editor.getModel() as monaco.editor.ITextModel | null; - if (!model) { + const updateAnnotations = async (model: monaco.editor.IModel): Promise => { + if (model.isDisposed()) { return; } + const parseResult = await wps.getAnnos(model.uri); + if (!parseResult) { + return; + } + const { annotations } = parseResult; monaco.editor.setModelMarkers( model, OWNER, @@ -74,19 +81,21 @@ export const registerGrammarChecker = (editor: monaco.editor.IEditor) => { }; const onModelAdd = (model: monaco.editor.IModel) => { - allDisposables.push( - model.onDidChangeContent(async () => { - updateAnnos(); - }) - ); + if (model.getModeId() === ID) { + allDisposables.push( + model.onDidChangeContent(async () => { + updateAnnotations(model); + }) + ); - updateAnnos(); + updateAnnotations(model); + } }; - allDisposables.push(monaco.editor.onDidCreateModel(onModelAdd)); - monaco.editor.getModels().forEach(onModelAdd); return () => { wps.stop(); allDisposables.forEach((d) => d.dispose()); }; }; + +registerGrammarChecker(); diff --git a/packages/kbn-monaco/src/xjson/worker/xjson_worker.ts b/packages/kbn-monaco/src/xjson/worker/xjson_worker.ts index 501adcacb6990..c99f033d793a8 100644 --- a/packages/kbn-monaco/src/xjson/worker/xjson_worker.ts +++ b/packages/kbn-monaco/src/xjson/worker/xjson_worker.ts @@ -19,17 +19,19 @@ /* eslint-disable-next-line @kbn/eslint/module_migration */ import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'; -import { createParser } from '../grammar'; +import { createParser, Parser, ParseResult } from '../grammar'; export class XJsonWorker { constructor(private ctx: monaco.worker.IWorkerContext) {} - private parser: any; + private parser: Parser | undefined; - async parse() { + async parse(modelUri: string): Promise { if (!this.parser) { this.parser = createParser(); } - const [model] = this.ctx.getMirrorModels(); - return this.parser(model.getValue()); + const model = this.ctx.getMirrorModels().find((m) => m.uri.toString() === modelUri); + if (model) { + return this.parser(model.getValue()); + } } } diff --git a/packages/kbn-monaco/src/xjson/worker_proxy_service.ts b/packages/kbn-monaco/src/xjson/worker_proxy_service.ts index 17d6d56e51e59..548a413a483d9 100644 --- a/packages/kbn-monaco/src/xjson/worker_proxy_service.ts +++ b/packages/kbn-monaco/src/xjson/worker_proxy_service.ts @@ -17,32 +17,21 @@ * under the License. */ -import { AnnoTypes } from './grammar'; +import { ParseResult } from './grammar'; import { monaco } from '../monaco'; import { XJsonWorker } from './worker'; import { ID } from './constants'; -export interface Annotation { - name?: string; - type: AnnoTypes; - text: string; - at: number; -} - -export interface AnnotationsResponse { - annotations: Annotation[]; -} - export class WorkerProxyService { private worker: monaco.editor.MonacoWebWorker | undefined; - public async getAnnos(): Promise { + public async getAnnos(modelUri: monaco.Uri): Promise { if (!this.worker) { throw new Error('Worker Proxy Service has not been setup!'); } - await this.worker.withSyncedResources(monaco.editor.getModels().map(({ uri }) => uri)); + await this.worker.withSyncedResources([modelUri]); const proxy = await this.worker.getProxy(); - return proxy.parse(); + return proxy.parse(modelUri.toString()); } public setup() { diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/xjson_editor.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/xjson_editor.tsx index 228094c0dfac5..7fb92e89c9f68 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/xjson_editor.tsx +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_processors_editor/components/manage_processor_form/field_components/xjson_editor.tsx @@ -3,7 +3,6 @@ * or more contributor license agreements. Licensed under the Elastic License; * you may not use this file except in compliance with the Elastic License. */ - import { XJsonLang } from '@kbn/monaco'; import React, { FunctionComponent, useCallback } from 'react'; import { FieldHook, Monaco } from '../../../../../../shared_imports'; @@ -33,9 +32,6 @@ export const XJsonEditor: FunctionComponent = ({ field, editorProps }) => value: xJson, languageId: XJsonLang.ID, options: { minimap: { enabled: false } }, - editorDidMount: (m: any) => { - XJsonLang.registerGrammarChecker(m); - }, onChange, ...editorProps, }}