QueryEditors: Fixes flakey text edit mode toggle (#18335)

Closes #18037

public/app/features/dashboard/panel_editor/QueryEditorRow.tsx

@@ -83,7 +83,7 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     this.setState({
     this.setState({
       datasource,
       datasource,
       loadedDataSourceValue: this.props.dataSourceValue,
       loadedDataSourceValue: this.props.dataSourceValue,
-      hasTextEditMode: false,
+      hasTextEditMode: _.has(datasource, 'components.QueryCtrl.prototype.toggleEditorMode'),
     });
     });
   }
   }
 
 
@@ -122,14 +122,8 @@ export class QueryEditorRow extends PureComponent<Props, State> {
     const loader = getAngularLoader();
     const loader = getAngularLoader();
     const template = '<plugin-component type="query-ctrl" />';
     const template = '<plugin-component type="query-ctrl" />';
     const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
     const scopeProps = { ctrl: this.getAngularQueryComponentScope() };
-
     this.angularQueryEditor = loader.load(this.element, scopeProps, template);
     this.angularQueryEditor = loader.load(this.element, scopeProps, template);
     this.angularScope = scopeProps.ctrl;
     this.angularScope = scopeProps.ctrl;
-
-    // give angular time to compile
-    setTimeout(() => {
-      this.setState({ hasTextEditMode: !!this.angularScope.toggleEditorMode });
-    }, 100);
   }
   }
 
 
   onToggleCollapse = () => {
   onToggleCollapse = () => {