[RFC] Monaco Code Editor provider registration

[paulstn]

Is your feature request related to a problem? Please describe.

When the code editor from OSD Monaco is in use, there can be a suggestionProvider, signatureProvider, hoverProvider, and/or languageConfiguration passed in. When done so, in the editorWillMount function, all of these providers will be registered. However, if the language within the props changes, these providers cannot be used for the new language.

OpenSearch-Dashboards/src/plugins/opensearch_dashboards_react/public/code_editor/code_editor.tsx

Lines 130 to 155 in d7004dc

	monaco.languages.onLanguage(this.props.languageId, () => {
	if (this.props.suggestionProvider) {
	monaco.languages.registerCompletionItemProvider(
	this.props.languageId,
	this.props.suggestionProvider
	);
	}
	if (this.props.signatureProvider) {
	monaco.languages.registerSignatureHelpProvider(
	this.props.languageId,
	this.props.signatureProvider
	);
	}
	if (this.props.hoverProvider) {
	monaco.languages.registerHoverProvider(this.props.languageId, this.props.hoverProvider);
	}
	if (this.props.languageConfiguration) {
	monaco.languages.setLanguageConfiguration(
	this.props.languageId,
	this.props.languageConfiguration
	);
	}
	});

Describe the solution you'd like

Move this registration section within the render() function, like so:

OpenSearch-Dashboards/src/plugins/opensearch_dashboards_react/public/code_editor/code_editor.tsx

Lines 154 to 184 in 2b1d01f

	render() {
	const { languageId, value, onChange, width, height, options } = this.props;
	monaco.languages.onLanguage(languageId, () => {
	if (this.props.suggestionProvider) {
	monaco.languages.registerCompletionItemProvider(languageId, this.props.suggestionProvider);
	}
	if (this.props.signatureProvider) {
	monaco.languages.registerSignatureHelpProvider(languageId, this.props.signatureProvider);
	}
	if (this.props.hoverProvider) {
	monaco.languages.registerHoverProvider(languageId, this.props.hoverProvider);
	}
	if (this.props.languageConfiguration) {
	// if the language isn't specified or the language configuration specified language
	// matches, use the configuration
	if (
	!this.props.languageConfiguration.language ||
	this.props.languageConfiguration.language === languageId
	) {
	monaco.languages.setLanguageConfiguration(
	this.props.languageId,
	this.props.languageConfiguration
	);
	}
	}
	});

The Monaco Language onLanguage function (documentation here: https://microsoft.github.io/monaco-editor/typedoc/functions/languages.onLanguage.html) will make sure that these registrations will only trigger when a new language is encountered, which will come in through the props. <- This has also been tested and verified to only trigger in these circumstances.

Functionally, if the monaco editor was being used somewhere where one of these providers was registered with a language, it would stay exactly the same with this change. This only adds extra functionality so that the providers can be used with this editor for any additional languages, if they change in the props.

Describe alternatives you've considered

Unmounting the CodeEditor, then remounting a new CodeEditor with a new language and its providers.
This solution seems to require extra computation every single time the language would need to change, which could add up since changing language isn't something that a user would expect eating up a lot of time. Additionally, it seems like the current way its implemented, the Monaco Language onLanguage function is redundant here, since only a single event would be emitted, as the editorWillMount function would only be triggered once.