CodeEditor: Ensure suggestions only apply to the instance of the edit…

…or 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> (cherry picked from commit 61dbad6) # Conflicts: # packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
grafana · Jun 14, 2023 · 95842f0 · 95842f0
1 parent 9c8d884
commit 95842f0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx
@@ -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,21 +86,23 @@ 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);
+    }
     editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, this.onSave);
+
     const languagePromise = this.loadCustomLanguage();
 
     if (onEditorDidMount) {

diff --git a/packages/grafana-ui/src/components/Monaco/suggestions.ts b/packages/grafana-ui/src/components/Monaco/suggestions.ts
@@ -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,