CodeEditor: Ensure suggestions only apply to the instance of the editor that registered them (#69995)

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/suggestions.ts

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/CodeEditor.internal.story.tsx

* user essentials mob! 🔱

lastFile:packages/grafana-ui/src/components/Monaco/suggestions.ts

* remove duplicate editor from story

* remove suggestions from story

---------

Co-authored-by: Laura Benz <laura.benz@grafana.com>
Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
This commit is contained in:
Ashley Harrison
2023-06-14 13:51:03 +01:00
committed by GitHub
co-authored by Laura Benz Tobias Skarhed
parent db75f20e53
commit 61dbad6905
2 changed files with 16 additions and 8 deletions
@@ -17,6 +17,7 @@ type Props = CodeEditorProps & Themeable2;
class UnthemedCodeEditor extends PureComponent<Props> {
completionCancel?: monacoType.IDisposable;
monaco?: Monaco;
modelId?: string;
constructor(props: Props) {
super(props);
@@ -44,8 +45,8 @@ class UnthemedCodeEditor extends PureComponent<Props> {
return;
}
if (getSuggestions) {
this.completionCancel = registerSuggestions(this.monaco, language, getSuggestions);
if (getSuggestions && this.modelId) {
this.completionCancel = registerSuggestions(this.monaco, language, getSuggestions, this.modelId);
}
}
@@ -85,20 +86,21 @@ class UnthemedCodeEditor extends PureComponent<Props> {
handleBeforeMount = (monaco: Monaco) => {
this.monaco = monaco;
const { language, getSuggestions, onBeforeEditorMount } = this.props;
if (getSuggestions) {
this.completionCancel = registerSuggestions(monaco, language, getSuggestions);
}
const { onBeforeEditorMount } = this.props;
onBeforeEditorMount?.(monaco);
};
handleOnMount = (editor: MonacoEditorType, monaco: Monaco) => {
const { onChange, onEditorDidMount } = this.props;
const { getSuggestions, language, onChange, onEditorDidMount } = this.props;
this.modelId = editor.getModel()?.id;
this.getEditorValue = () => editor.getValue();
if (getSuggestions && this.modelId) {
this.completionCancel = registerSuggestions(monaco, language, getSuggestions, this.modelId);
}
// Save when pressing Ctrl+S or Cmd+S
editor.onKeyDown((e: monacoType.IKeyboardEvent) => {
if (e.keyCode === monaco.KeyCode.KeyS && (e.ctrlKey || e.metaKey)) {
@@ -73,7 +73,8 @@ function mapKinds(monaco: Monaco, sug?: CodeEditorSuggestionItemKind): monacoTyp
export function registerSuggestions(
monaco: Monaco,
language: string,
getSuggestions: CodeEditorSuggestionProvider
getSuggestions: CodeEditorSuggestionProvider,
modelId: string
): monacoType.IDisposable | undefined {
if (!language || !getSuggestions) {
return undefined;
@@ -82,6 +83,11 @@ export function registerSuggestions(
triggerCharacters: ['$'],
provideCompletionItems: (model, position, context) => {
// only return these suggestions for the specified modelId
// prevents duplicate suggestions when multiple editors are open
if (model.id !== modelId) {
return undefined;
}
const range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,