Chore: Update Slate to 0.47.8 (#19197)

* Chore: Update Slate to 0.47.8
Closes #17430

public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/KustoQueryField.tsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
-// @ts-ignore
 import Plain from 'slate-plain-serializer';
 
 import QueryField from './query_field';
 import debounce from 'lodash/debounce';
 import { DOMUtil } from '@grafana/ui';
+import { Editor as CoreEditor } from 'slate';
 
 import { KEYWORDS, functionTokens, operatorTokens, grafanaMacros } from './kusto/kusto';
 // import '../sass/editor.base.scss';
@@ -63,7 +63,7 @@ export default class KustoQueryField extends QueryField {
     this.fetchSchema();
   }
 
-  onTypeahead = (force?: boolean) => {
+  onTypeahead = (force = false) => {
     const selection = window.getSelection();
     if (selection.anchorNode) {
       const wrapperNode = selection.anchorNode.parentElement;
@@ -196,7 +196,7 @@ export default class KustoQueryField extends QueryField {
     }
   };
 
-  applyTypeahead(change: any, suggestion: { text: any; type: string; deleteBackwards: any }) {
+  applyTypeahead = (editor: CoreEditor, suggestion: { text: any; type: string; deleteBackwards: any }): CoreEditor => {
     const { typeaheadPrefix, typeaheadContext, typeaheadText } = this.state;
     let suggestionText = suggestion.text || suggestion;
     const move = 0;
@@ -218,8 +218,6 @@ export default class KustoQueryField extends QueryField {
       }
     }
 
-    this.resetTypeahead();
-
     // Remove the current, incomplete text and replace it with the selected suggestion
     const backward = suggestion.deleteBackwards || typeaheadPrefix.length;
     const text = cleanText(typeaheadText);
@@ -228,13 +226,17 @@ export default class KustoQueryField extends QueryField {
     const midWord = typeaheadPrefix && ((suffixLength > 0 && offset > -1) || suggestionText === typeaheadText);
     const forward = midWord ? suffixLength + offset : 0;
 
-    return change
-      .deleteBackward(backward)
-      .deleteForward(forward)
-      .insertText(suggestionText)
-      .move(move)
-      .focus();
-  }
+    this.resetTypeahead(() =>
+      editor
+        .deleteBackward(backward)
+        .deleteForward(forward)
+        .insertText(suggestionText)
+        .moveForward(move)
+        .focus()
+    );
+
+    return editor;
+  };
 
   // private _getFieldsSuggestions(): SuggestionGroup[] {
   //   return [

public/app/plugins/datasource/grafana-azure-monitor-datasource/editor/query_field.tsx

@@ -7,10 +7,8 @@ import RunnerPlugin from 'app/features/explore/slate-plugins/runner';
 import Typeahead from './typeahead';
 import { getKeybindingSrv, KeybindingSrv } from 'app/core/services/keybindingSrv';
 
-import { Block, Document, Text, Value } from 'slate';
-// @ts-ignore
-import { Editor } from 'slate-react';
-// @ts-ignore
+import { Block, Document, Text, Value, Editor as CoreEditor } from 'slate';
+import { Editor } from '@grafana/slate-react';
 import Plain from 'slate-plain-serializer';
 import ReactDOM from 'react-dom';
 import React from 'react';
@@ -98,7 +96,7 @@ class QueryField extends React.Component<any, any> {
     this.updateMenu();
   }
 
-  onChange = ({ value }: any) => {
+  onChange = ({ value }: { value: Value }) => {
     const changed = value.document !== this.state.value.document;
     this.setState({ value }, () => {
       if (changed) {
@@ -124,14 +122,15 @@ class QueryField extends React.Component<any, any> {
     }
   };
 
-  onKeyDown = (event: any, change: any) => {
+  onKeyDown = (event: Event, editor: CoreEditor, next: Function) => {
     const { typeaheadIndex, suggestions } = this.state;
+    const keyboardEvent = event as KeyboardEvent;
 
-    switch (event.key) {
+    switch (keyboardEvent.key) {
       case 'Escape': {
         if (this.menuEl) {
-          event.preventDefault();
-          event.stopPropagation();
+          keyboardEvent.preventDefault();
+          keyboardEvent.stopPropagation();
           this.resetTypeahead();
           return true;
         }
@@ -139,8 +138,8 @@ class QueryField extends React.Component<any, any> {
       }
 
       case ' ': {
-        if (event.ctrlKey) {
-          event.preventDefault();
+        if (keyboardEvent.ctrlKey) {
+          keyboardEvent.preventDefault();
           this.onTypeahead(true);
           return true;
         }
@@ -151,9 +150,9 @@ class QueryField extends React.Component<any, any> {
       case 'Enter': {
         if (this.menuEl) {
           // Dont blur input
-          event.preventDefault();
-          if (!suggestions || suggestions.length === 0) {
-            return undefined;
+          keyboardEvent.preventDefault();
+          if (!suggestions || !suggestions.length) {
+            return next();
           }
 
           // Get the currently selected suggestion
@@ -162,8 +161,7 @@ class QueryField extends React.Component<any, any> {
           const selectedIndex = selected % flattenedSuggestions.length || 0;
           const suggestion = flattenedSuggestions[selectedIndex];
 
-          this.applyTypeahead(change, suggestion);
-          return true;
+          return this.applyTypeahead(editor, suggestion);
         }
         break;
       }
@@ -171,7 +169,7 @@ class QueryField extends React.Component<any, any> {
       case 'ArrowDown': {
         if (this.menuEl) {
           // Select next suggestion
-          event.preventDefault();
+          keyboardEvent.preventDefault();
           this.setState({ typeaheadIndex: typeaheadIndex + 1 });
         }
         break;
@@ -180,7 +178,7 @@ class QueryField extends React.Component<any, any> {
       case 'ArrowUp': {
         if (this.menuEl) {
           // Select previous suggestion
-          event.preventDefault();
+          keyboardEvent.preventDefault();
           this.setState({ typeaheadIndex: Math.max(0, typeaheadIndex - 1) });
         }
         break;
@@ -191,24 +189,30 @@ class QueryField extends React.Component<any, any> {
         break;
       }
     }
-    return undefined;
+    return next();
   };
 
-  onTypeahead = (change?: boolean, item?: any) => {
-    return change || this.state.value.change();
+  onTypeahead = (change = false, item?: any): boolean | void => {
+    return change;
   };
 
-  applyTypeahead(change?: boolean, suggestion?: any): { value: object } {
-    return { value: {} };
-  }
+  applyTypeahead = (
+    editor?: CoreEditor,
+    suggestion?: { text: any; type: string; deleteBackwards: any }
+  ): { value: Value } => {
+    return { value: new Value() };
+  };
 
-  resetTypeahead = () => {
-    this.setState({
-      suggestions: [],
-      typeaheadIndex: 0,
-      typeaheadPrefix: '',
-      typeaheadContext: null,
-    });
+  resetTypeahead = (callback?: () => void) => {
+    this.setState(
+      {
+        suggestions: [],
+        typeaheadIndex: 0,
+        typeaheadPrefix: '',
+        typeaheadContext: null,
+      },
+      callback
+    );
   };
 
   handleBlur = () => {
@@ -245,15 +249,8 @@ class QueryField extends React.Component<any, any> {
       return;
     }
 
-    // Get the currently selected suggestion
-    const flattenedSuggestions = flattenSuggestions(suggestions);
-    const suggestion: any = _.find(
-      flattenedSuggestions,
-      suggestion => suggestion.display === item || suggestion.text === item
-    );
-
     // Manually triggering change
-    const change = this.applyTypeahead(this.state.value.change(), suggestion);
+    const change = this.applyTypeahead();
     this.onChange(change);
   };